Found the source of the issue, not sure how to fix

[bookstack] / resources / assets / js / directives.js

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index a5f45b5894e00a9454135ca961b5ba55054702df..60abde6e928be202ffd808f62d785b97e2cc4c88 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -1,25 +1,29 @@
+"use strict";
+var DropZone = require('dropzone');
 
 var toggleSwitchTemplate = require('./components/toggle-switch.html');
+var imagePickerTemplate = require('./components/image-picker.html');
+var dropZoneTemplate = require('./components/drop-zone.html');
 
-module.exports = function(ngApp) {
+module.exports = function (ngApp, events) {
 
     /**
      * Toggle Switches
-     * Have basic on/off functionality.
+     * Has basic on/off functionality.
      * Use string values of 'true' & 'false' to dictate the current state.
      */
-    ngApp.directive('toggleSwitch', function() {
+    ngApp.directive('toggleSwitch', function () {
         return {
             restrict: 'E',
             template: toggleSwitchTemplate,
             scope: true,
-            link: function(scope, element, attrs) {
+            link: function (scope, element, attrs) {
                 scope.name = attrs.name;
                 scope.value = attrs.value;
                 scope.isActive = scope.value == true && scope.value != 'false';
                 scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
 
-                scope.switch = function() {
+                scope.switch = function () {
                     scope.isActive = !scope.isActive;
                     scope.value = scope.isActive ? 'true' : 'false';
                 }
@@ -29,4 +33,134 @@ module.exports = function(ngApp) {
     });
 
 
+    /**
+     * Image Picker
+     * Is a simple front-end interface that connects to an ImageManager if present.
+     */
+    ngApp.directive('imagePicker', ['$http', 'imageManagerService', function ($http, imageManagerService) {
+        return {
+            restrict: 'E',
+            template: imagePickerTemplate,
+            scope: {
+                name: '@',
+                resizeHeight: '@',
+                resizeWidth: '@',
+                resizeCrop: '@',
+                showRemove: '=',
+                currentImage: '@',
+                currentId: '@',
+                defaultImage: '@',
+                imageClass: '@'
+            },
+            link: function (scope, element, attrs) {
+                var usingIds = typeof scope.currentId !== 'undefined' || scope.currentId === 'false';
+                scope.image = scope.currentImage;
+                scope.value = scope.currentImage || '';
+                if (usingIds) scope.value = scope.currentId;
+
+                function setImage(imageModel, imageUrl) {
+                    scope.image = imageUrl;
+                    scope.value = usingIds ? imageModel.id : imageUrl;
+                }
+
+                scope.reset = function () {
+                    setImage({id: 0}, scope.defaultImage);
+                };
+
+                scope.remove = function () {
+                    scope.image = 'none';
+                    scope.value = 'none';
+                };
+
+                scope.showImageManager = function () {
+                    imageManagerService.show((image) => {
+                        scope.updateImageFromModel(image);
+                    });
+                };
+
+                scope.updateImageFromModel = function (model) {
+                    var isResized = scope.resizeWidth && scope.resizeHeight;
+
+                    if (!isResized) {
+                        scope.$apply(() => {
+                            setImage(model, model.url);
+                        });
+                        return;
+                    }
+
+                    var cropped = scope.resizeCrop ? 'true' : 'false';
+                    var requestString = '/images/thumb/' + model.id + '/' + scope.resizeWidth + '/' + scope.resizeHeight + '/' + cropped;
+                    $http.get(requestString).then((response) => {
+                        setImage(model, response.data.url);
+                    });
+                };
+
+            }
+        };
+    }]);
+
+    /**
+     * DropZone
+     * Used for uploading images
+     */
+    ngApp.directive('dropZone', [function () {
+        return {
+            restrict: 'E',
+            template: dropZoneTemplate,
+            scope: {
+                uploadUrl: '@',
+                eventSuccess: '=',
+                eventError: '='
+            },
+            link: function (scope, element, attrs) {
+                var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
+                    url: scope.uploadUrl,
+                    init: function () {
+                        var dz = this;
+                        dz.on('sending', function (file, xhr, data) {
+                            var token = window.document.querySelector('meta[name=token]').getAttribute('content');
+                            data.append('_token', token);
+                        });
+                        if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
+                        dz.on('success', function (file, data) {
+                            $(file.previewElement).fadeOut(400, function () {
+                                dz.removeFile(file);
+                            });
+                        });
+                        if (typeof scope.eventError !== 'undefined') dz.on('error', scope.eventError);
+                        dz.on('error', function (file, errorMessage, xhr) {
+                            console.log(errorMessage);
+                            console.log(xhr);
+                            function setMessage(message) {
+                                $(file.previewElement).find('[data-dz-errormessage]').text(message);
+                            }
+
+                            if (xhr.status === 413) setMessage('The server does not allow uploads of this size. Please try a smaller file.');
+                            if (errorMessage.file) setMessage(errorMessage.file[0]);
+
+                        });
+                    }
+                });
+            }
+        };
+    }]);
+
+
+    ngApp.directive('dropdown', [function () {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs) {
+                var menu = element.find('ul');
+                element.find('[dropdown-toggle]').on('click', function () {
+                    menu.show().addClass('anim menuIn');
+                    element.mouseleave(function () {
+                        menu.hide();
+                        menu.removeClass('anim menuIn');
+                    });
+                });
+            }
+        };
+    }]);
+
+
 };
\ No newline at end of file