BookStack Code Mirror - bookstack/blob - resources/assets/js/directives.js

   1 "use strict";
   2 var DropZone = require('dropzone');
   3
   4 var toggleSwitchTemplate = require('./components/toggle-switch.html');
   5 var imagePickerTemplate = require('./components/image-picker.html');
   6 var dropZoneTemplate = require('./components/drop-zone.html');
   7
   8 module.exports = function (ngApp, events) {
   9
  10     /**
  11      * Toggle Switches
  12      * Has basic on/off functionality.
  13      * Use string values of 'true' & 'false' to dictate the current state.
  14      */
  15     ngApp.directive('toggleSwitch', function () {
  16         return {
  17             restrict: 'E',
  18             template: toggleSwitchTemplate,
  19             scope: true,
  20             link: function (scope, element, attrs) {
  21                 scope.name = attrs.name;
  22                 scope.value = attrs.value;
  23                 scope.isActive = scope.value == true && scope.value != 'false';
  24                 scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
  25
  26                 scope.switch = function () {
  27                     scope.isActive = !scope.isActive;
  28                     scope.value = scope.isActive ? 'true' : 'false';
  29                 }
  30
  31             }
  32         };
  33     });
  34
  35
  36     /**
  37      * Image Picker
  38      * Is a simple front-end interface that connects to an ImageManager if present.
  39      */
  40     ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
  41         return {
  42             restrict: 'E',
  43             template: imagePickerTemplate,
  44             scope: {
  45                 name: '@',
  46                 resizeHeight: '@',
  47                 resizeWidth: '@',
  48                 resizeCrop: '@',
  49                 showRemove: '=',
  50                 currentImage: '@',
  51                 currentId: '@',
  52                 defaultImage: '@',
  53                 imageClass: '@'
  54             },
  55             link: function (scope, element, attrs) {
  56                 var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
  57                 scope.image = scope.currentImage;
  58                 scope.value = scope.currentImage || '';
  59                 if (usingIds) scope.value = scope.currentId;
  60
  61                 function setImage(imageModel, imageUrl) {
  62                     scope.image = imageUrl;
  63                     scope.value = usingIds ? imageModel.id : imageUrl;
  64                 }
  65
  66                 scope.reset = function () {
  67                     setImage({id: 0}, scope.defaultImage);
  68                 };
  69
  70                 scope.remove = function () {
  71                     scope.image = 'none';
  72                     scope.value = 'none';
  73                 };
  74
  75                 scope.showImageManager = function () {
  76                     imageManagerService.show((image) => {
  77                         scope.updateImageFromModel(image);
  78                     });
  79                 };
  80
  81                 scope.updateImageFromModel = function (model) {
  82                     var isResized = scope.resizeWidth && scope.resizeHeight;
  83
  84                     if (!isResized) {
  85                         scope.$apply(() => {
  86                             setImage(model, model.url);
  87                         });
  88                         return;
  89                     }
  90
  91                     var cropped = scope.resizeCrop ? 'true' : 'false';
  92                     var requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
  93                     $http.get(requestString).then((response) => {
  94                         setImage(model, response.data.url);
  95                     });
  96                 };
  97
  98             }
  99         };
 100     }]);
 101
 102     /**
 103      * DropZone
 104      * Used for uploading images
 105      */
 106     ngApp.directive('dropZone', [function () {
 107         return {
 108             restrict: 'E',
 109             template: dropZoneTemplate,
 110             scope: {
 111                 uploadUrl: '@',
 112                 eventSuccess: '=',
 113                 eventError: '=',
 114                 uploadedTo: '@'
 115             },
 116             link: function (scope, element, attrs) {
 117                 var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
 118                     url: scope.uploadUrl,
 119                     init: function () {
 120                         var dz = this;
 121                         dz.on('sending', function (file, xhr, data) {
 122                             var token = window.document.querySelector('meta[name=token]').getAttribute('content');
 123                             data.append('_token', token);
 124                             var uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
 125                             data.append('uploaded_to', uploadedTo);
 126                         });
 127                         if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
 128                         dz.on('success', function (file, data) {
 129                             $(file.previewElement).fadeOut(400, function () {
 130                                 dz.removeFile(file);
 131                             });
 132                         });
 133                         if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
 134                         dz.on('error', function (file, errorMessage, xhr) {
 135                             console.log(errorMessage);
 136                             console.log(xhr);
 137                             function setMessage(message) {
 138                                 $(file.previewElement).find('[data-dz-errormessage]').text(message);
 139                             }
 140
 141                             if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
 142                             if (errorMessage.file) setMessage(errorMessage.file[0]);
 143
 144                         });
 145                     }
 146                 });
 147             }
 148         };
 149     }]);
 150
 151
 152     ngApp.directive('dropdown', [function () {
 153         return {
 154             restrict: 'A',
 155             link: function (scope, element, attrs) {
 156                 var menu = element.find('ul');
 157                 element.find('[dropdown-toggle]').on('click', function () {
 158                     menu.show().addClass('anim menuIn');
 159                     element.mouseleave(function () {
 160                         menu.hide();
 161                         menu.removeClass('anim menuIn');
 162                     });
 163                 });
 164             }
 165         };
 166     }]);
 167
 168     ngApp.directive('tinymce', ['$timeout', function($timeout) {
 169         return {
 170             restrict: 'A',
 171             scope: {
 172                 tinymce: '=',
 173                 mceModel: '=',
 174                 mceChange: '='
 175             },
 176             link: function (scope, element, attrs) {
 177
 178                 function tinyMceSetup(editor) {
 179                     editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
 180                         var content = editor.getContent();
 181                         $timeout(() => {
 182                             scope.mceModel = content;
 183                         });
 184                         scope.mceChange(content);
 185                     });
 186
 187                     editor.on('init', (e) => {
 188                         scope.mceModel = editor.getContent();
 189                     });
 190
 191                     scope.$on('html-update', (event, value) => {
 192                         editor.setContent(value);
 193                         editor.selection.select(editor.getBody(), true);
 194                         editor.selection.collapse(false);
 195                         scope.mceModel = editor.getContent();
 196                     });
 197                 }
 198
 199                 scope.tinymce.extraSetups.push(tinyMceSetup);
 200                 tinymce.init(scope.tinymce);
 201             }
 202         }
 203     }])
 204
 205
 206 };