Standardised JS vars and imports/exports

Dan Brown
Commit 08c4b9ac7c56ae34a350643da5d0fada2cbef2cc 08c4b9ac 1 parent 573357a0
Showing 5 changed files with 209 additions and 208 deletions
resources/assets/js/controllers.js
resources/assets/js/directives.js
resources/assets/js/global.js
resources/assets/js/pages/page-form.js
resources/assets/js/pages/page-show.js
--- a/resources/assets/js/controllers.js
View file @08c4b9a
+++ b/resources/assets/js/controllers.js
View file @08c4b9a
@@ -2,6 +2,8 @@
 import moment from 'moment';
 import 'moment/locale/en-gb';
+import editorOptions from "./pages/page-form";
+
 moment.locale('en-gb');
 export default function (ngApp, events) {
@@ -23,14 +25,14 @@ export default function (ngApp, events) {
             $scope.searching = false;
             $scope.searchTerm = '';
-            var page = 0;
+            let page = 0;
-            var previousClickTime = 0;
+            let previousClickTime = 0;
-            var previousClickImage = 0;
+            let previousClickImage = 0;
-            var dataLoaded = false;
+            let dataLoaded = false;
-            var callback = false;
+            let callback = false;
-            var preSearchImages = [];
+            let preSearchImages = [];
-            var preSearchHasMore = false;
+            let preSearchHasMore = false;
             /**
              * Used by dropzone to get the endpoint to upload to.
@@ -79,9 +81,9 @@ export default function (ngApp, events) {
              * @param image
              */
             $scope.imageSelect = function (image) {
-                var dblClickTime = 300;
+                let dblClickTime = 300;
-                var currentTime = Date.now();
+                let currentTime = Date.now();
-                var timeDiff = currentTime - previousClickTime;
+                let timeDiff = currentTime - previousClickTime;
                 if (timeDiff < dblClickTime && image.id === previousClickImage) {
                     // If double click
@@ -137,19 +139,19 @@ export default function (ngApp, events) {
                 $('#image-manager').find('.overlay').fadeOut(240);
             };
-            var baseUrl = window.baseUrl('/images/' + $scope.imageType + '/all/');
+            let baseUrl = window.baseUrl('/images/' + $scope.imageType + '/all/');
             /**
              * Fetch the list image data from the server.
              */
             function fetchData() {
-                var url = baseUrl + page + '?';
+                let url = baseUrl + page + '?';
-                var components = {};
+                let components = {};
                 if ($scope.uploadedTo) components['page_id'] = $scope.uploadedTo;
                 if ($scope.searching) components['term'] = $scope.searchTerm;
-                var urlQueryString = Object.keys(components).map((key) => {
+                let urlQueryString = Object.keys(components).map((key) => {
                     return key + '=' + encodeURIComponent(components[key]);
                 }).join('&');
                 url += urlQueryString;
@@ -205,13 +207,13 @@ export default function (ngApp, events) {
              */
             $scope.saveImageDetails = function (event) {
                 event.preventDefault();
-                var url = window.baseUrl('/images/update/' + $scope.selectedImage.id);
+                let url = window.baseUrl('/images/update/' + $scope.selectedImage.id);
                 $http.put(url, this.selectedImage).then(response => {
                     events.emit('success', 'Image details updated');
                 }, (response) => {
                     if (response.status === 422) {
-                        var errors = response.data;
+                        let errors = response.data;
-                        var message = '';
+                        let message = '';
                         Object.keys(errors).forEach((key) => {
                             message += errors[key].join('\n');
                         });
@@ -230,8 +232,8 @@ export default function (ngApp, events) {
              */
             $scope.deleteImage = function (event) {
                 event.preventDefault();
-                var force = $scope.dependantPages !== false;
+                let force = $scope.dependantPages !== false;
-                var url = window.baseUrl('/images/' + $scope.selectedImage.id);
+                let url = window.baseUrl('/images/' + $scope.selectedImage.id);
                 if (force) url += '?force=true';
                 $http.delete(url).then((response) => {
                     $scope.images.splice($scope.images.indexOf($scope.selectedImage), 1);
@@ -266,11 +268,11 @@ export default function (ngApp, events) {
         $scope.searchBook = function (e) {
             e.preventDefault();
-            var term = $scope.searchTerm;
+            let term = $scope.searchTerm;
             if (term.length == 0) return;
             $scope.searching = true;
             $scope.searchResults = '';
-            var searchUrl = window.baseUrl('/search/book/' + $attrs.bookId);
+            let searchUrl = window.baseUrl('/search/book/' + $attrs.bookId);
             searchUrl += '?term=' + encodeURIComponent(term);
             $http.get(searchUrl).then((response) => {
                 $scope.searchResults = $sce.trustAsHtml(response.data);
@@ -294,13 +296,13 @@ export default function (ngApp, events) {
     ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce',
         function ($scope, $http, $attrs, $interval, $timeout, $sce) {
-        $scope.editorOptions = require('./pages/page-form');
+        $scope.editorOptions = editorOptions();
         $scope.editContent = '';
         $scope.draftText = '';
-        var pageId = Number($attrs.pageId);
+        let pageId = Number($attrs.pageId);
-        var isEdit = pageId !== 0;
+        let isEdit = pageId !== 0;
-        var autosaveFrequency = 30; // AutoSave interval in seconds.
+        let autosaveFrequency = 30; // AutoSave interval in seconds.
-        var isMarkdown = $attrs.editorType === 'markdown';
+        let isMarkdown = $attrs.editorType === 'markdown';
         $scope.draftsEnabled = $attrs.draftsEnabled === 'true';
         $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
         $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
@@ -312,9 +314,9 @@ export default function (ngApp, events) {
             $scope.draftText = 'Editing Page'
         }
-        var autoSave = false;
+        let autoSave = false;
-        var currentContent = {
+        let currentContent = {
             title: false,
             html: false
         };
@@ -351,8 +353,8 @@ export default function (ngApp, events) {
             autoSave = $interval(() => {
                 // Return if manually saved recently to prevent bombarding the server
                 if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return;
-                var newTitle = $('#name').val();
+                let newTitle = $('#name').val();
-                var newHtml = $scope.editContent;
+                let newHtml = $scope.editContent;
                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
                     currentContent.html = newHtml;
@@ -369,7 +371,7 @@ export default function (ngApp, events) {
          */
         function saveDraft() {
             if (!$scope.draftsEnabled) return;
-            var data = {
+            let data = {
                 name: $('#name').val(),
                 html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent
             };
@@ -379,7 +381,7 @@ export default function (ngApp, events) {
             let url = window.baseUrl('/ajax/page/' + pageId + '/save-draft');
             $http.put(url, data).then(responseData => {
                 draftErroring = false;
-                var updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
+                let updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
                 $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
                 showDraftSaveNotification();
--- a/resources/assets/js/directives.js
View file @08c4b9a
+++ b/resources/assets/js/directives.js
View file @08c4b9a
 "use strict";
-const DropZone = require('dropzone');
+import DropZone from "dropzone";
-const markdown = require('marked');
+import markdown from "marked";
-module.exports = function (ngApp, events) {
+export default function (ngApp, events) {
     /**
      * Toggle Switches
@@ -190,14 +190,14 @@ module.exports = function (ngApp, events) {
             },
             link: function (scope, element, attrs) {
                 if (attrs.placeholder) element[0].querySelector('.dz-message').textContent = attrs.placeholder;
-                var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
+                let dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
                     url: scope.uploadUrl,
                     init: function () {
-                        var dz = this;
+                        let dz = this;
                         dz.on('sending', function (file, xhr, data) {
-                            var token = window.document.querySelector('meta[name=token]').getAttribute('content');
+                            let token = window.document.querySelector('meta[name=token]').getAttribute('content');
                             data.append('_token', token);
-                            var uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
+                            let uploadedTo = typeof scope.uploadedTo === 'undefined' ? 0 : scope.uploadedTo;
                             data.append('uploaded_to', uploadedTo);
                         });
                         if (typeof scope.eventSuccess !== 'undefined') dz.on('success', scope.eventSuccess);
@@ -273,7 +273,7 @@ module.exports = function (ngApp, events) {
                 function tinyMceSetup(editor) {
                     editor.on('ExecCommand change NodeChange ObjectResized', (e) => {
-                        var content = editor.getContent();
+                        let content = editor.getContent();
                         $timeout(() => {
                             scope.mceModel = content;
                         });
@@ -301,9 +301,9 @@ module.exports = function (ngApp, events) {
                 // Custom tinyMCE plugins
                 tinymce.PluginManager.add('customhr', function (editor) {
                     editor.addCommand('InsertHorizontalRule', function () {
-                        var hrElem = document.createElement('hr');
+                        let hrElem = document.createElement('hr');
-                        var cNode = editor.selection.getNode();
+                        let cNode = editor.selection.getNode();
-                        var parentNode = cNode.parentNode;
+                        let parentNode = cNode.parentNode;
                         parentNode.insertBefore(hrElem, cNode);
                     });
@@ -474,9 +474,9 @@ module.exports = function (ngApp, events) {
                 function editorPaste(e) {
                     e = e.originalEvent;
                     if (!e.clipboardData) return
-                    var items = e.clipboardData.items;
+                    let items = e.clipboardData.items;
                     if (!items) return;
-                    for (var i = 0; i < items.length; i++) {
+                    for (let i = 0; i < items.length; i++) {
                         uploadImage(items[i].getAsFile());
                     }
                 }
@@ -498,12 +498,12 @@ module.exports = function (ngApp, events) {
                 // Handle image upload and add image into markdown content
                 function uploadImage(file) {
                     if (file.type.indexOf('image') !== 0) return;
-                    var formData = new FormData();
+                    let formData = new FormData();
-                    var ext = 'png';
+                    let ext = 'png';
-                    var xhr = new XMLHttpRequest();
+                    let xhr = new XMLHttpRequest();
                     if (file.name) {
-                        var fileNameMatches = file.name.match(/\.(.+)$/);
+                        let fileNameMatches = file.name.match(/\.(.+)$/);
                         if (fileNameMatches) {
                             ext = fileNameMatches[1];
                         }
@@ -531,7 +531,7 @@ module.exports = function (ngApp, events) {
                     xhr.onload = function () {
                         let selectStart = input[0].selectionStart;
                         if (xhr.status === 200 || xhr.status === 201) {
-                            var result = JSON.parse(xhr.responseText);
+                            let result = JSON.parse(xhr.responseText);
                             input[0].value = input[0].value.replace(placeholderImage, result.thumbs.display);
                             input.change();
                         } else {
@@ -732,14 +732,13 @@ module.exports = function (ngApp, events) {
                     // Build suggestions
                     $suggestionBox[0].innerHTML = '';
                     for (let i = 0; i < suggestions.length; i++) {
-                        var suggestion = document.createElement('li');
+                        let suggestion = document.createElement('li');
                         suggestion.textContent = suggestions[i];
                         suggestion.onclick = suggestionClick;
                         if (i === 0) {
-                            suggestion.className = 'active'
+                            suggestion.className = 'active';
                             active = 0;
                         }
-                        ;
                         $suggestionBox[0].appendChild(suggestion);
                     }
@@ -748,12 +747,11 @@ module.exports = function (ngApp, events) {
                 // Suggestion click event
                 function suggestionClick(event) {
-                    let text = this.textContent;
+                    currentInput[0].value = this.textContent;
-                    currentInput[0].value = text;
                     currentInput.focus();
                     $suggestionBox.hide();
                     isShowing = false;
-                };
+                }
                 // Get suggestions & cache
                 function getSuggestions(input, url) {
@@ -843,7 +841,7 @@ module.exports = function (ngApp, events) {
                 const input = element.find('[entity-selector-input]').first();
                 // Detect double click events
-                var lastClick = 0;
+                let lastClick = 0;
                 function isDoubleClick() {
                     let now = Date.now();
                     let answer = now - lastClick < 300;
--- a/resources/assets/js/global.js
View file @08c4b9a
+++ b/resources/assets/js/global.js
View file @08c4b9a
 "use strict";
 // AngularJS - Create application and load components
-var angular = require('angular');
+import angular from "angular";
-var ngResource = require('angular-resource');
+import "angular-resource";
-var ngAnimate = require('angular-animate');
+import "angular-animate";
-var ngSanitize = require('angular-sanitize');
+import "angular-sanitize";
-require('angular-ui-sortable');
+import "angular-ui-sortable";
 // Url retrieval function
 window.baseUrl = function(path) {
@@ -15,7 +15,7 @@ window.baseUrl = function(path) {
     return basePath + '/' + path;
 };
-var ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
+let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
 // Global Event System
 class EventManager {
@@ -25,9 +25,9 @@ class EventManager {
     emit(eventName, eventData) {
         if (typeof this.listeners[eventName] === 'undefined') return this;
-        var eventsToStart = this.listeners[eventName];
+        let eventsToStart = this.listeners[eventName];
         for (let i = 0; i < eventsToStart.length; i++) {
-            var event = eventsToStart[i];
+            let event = eventsToStart[i];
             event(eventData);
         }
         return this;
@@ -72,10 +72,10 @@ jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
 // Global jQuery Elements
 $(function () {
-    var notifications = $('.notification');
+    let notifications = $('.notification');
-    var successNotification = notifications.filter('.pos');
+    let successNotification = notifications.filter('.pos');
-    var errorNotification = notifications.filter('.neg');
+    let errorNotification = notifications.filter('.neg');
-    var warningNotification = notifications.filter('.warning');
+    let warningNotification = notifications.filter('.warning');
     // Notification Events
     window.Events.listen('success', function (text) {
         successNotification.hide();
@@ -109,9 +109,9 @@ $(function () {
     $('#back-to-top').click(function() {
          $('#header').smoothScrollTo();
     });
-    var scrollTopShowing = false;
+    let scrollTopShowing = false;
-    var scrollTop = document.getElementById('back-to-top');
+    let scrollTop = document.getElementById('back-to-top');
-    var scrollTopBreakpoint = 1200;
+    let scrollTopBreakpoint = 1200;
     window.addEventListener('scroll', function() {
         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
         if (!scrollTopShowing && scrollTopPos > scrollTopBreakpoint) {
@@ -159,4 +159,4 @@ $(function () {
 });
 // Page specific items
-require('./pages/page-show');
+import "./pages/page-show";
--- a/resources/assets/js/pages/page-form.js
View file @08c4b9a
+++ b/resources/assets/js/pages/page-form.js
View file @08c4b9a
@@ -60,108 +60,108 @@ function registerEditorShortcuts(editor) {
     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
 }
-var mceOptions = module.exports = {
+export default function() {
-    selector: '#html-editor',
+    let settings = {
-    content_css: [
+        selector: '#html-editor',
-        window.baseUrl('/css/styles.css'),
+        content_css: [
-        window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css')
+            window.baseUrl('/css/styles.css'),
-    ],
+            window.baseUrl('/libs/material-design-iconic-font/css/material-design-iconic-font.min.css')
-    body_class: 'page-content',
+        ],
-    relative_urls: false,
+        body_class: 'page-content',
-    remove_script_host: false,
+        relative_urls: false,
-    document_base_url: window.baseUrl('/'),
+        remove_script_host: false,
-    statusbar: false,
+        document_base_url: window.baseUrl('/'),
-    menubar: false,
+        statusbar: false,
-    paste_data_images: false,
+        menubar: false,
-    extended_valid_elements: 'pre[*]',
+        paste_data_images: false,
-    automatic_uploads: false,
+        extended_valid_elements: 'pre[*]',
-    valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
+        automatic_uploads: false,
-    plugins: "image table textcolor paste link fullscreen imagetools code customhr autosave lists",
+        valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
-    imagetools_toolbar: 'imageoptions',
+        plugins: "image table textcolor paste link fullscreen imagetools code customhr autosave lists",
-    toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
+        imagetools_toolbar: 'imageoptions',
-    content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
+        toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr | removeformat code fullscreen",
-    style_formats: [
+        content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
-        {title: "Header Large", format: "h2"},
+        style_formats: [
-        {title: "Header Medium", format: "h3"},
+            {title: "Header Large", format: "h2"},
-        {title: "Header Small", format: "h4"},
+            {title: "Header Medium", format: "h3"},
-        {title: "Header Tiny", format: "h5"},
+            {title: "Header Small", format: "h4"},
-        {title: "Paragraph", format: "p", exact: true, classes: ''},
+            {title: "Header Tiny", format: "h5"},
-        {title: "Blockquote", format: "blockquote"},
+            {title: "Paragraph", format: "p", exact: true, classes: ''},
-        {title: "Code Block", icon: "code", format: "pre"},
+            {title: "Blockquote", format: "blockquote"},
-        {title: "Inline Code", icon: "code", inline: "code"},
+            {title: "Code Block", icon: "code", format: "pre"},
-        {title: "Callouts", items: [
+            {title: "Inline Code", icon: "code", inline: "code"},
-            {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
+            {title: "Callouts", items: [
-            {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
+                {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
-            {title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
+                {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
-            {title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
+                {title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
-        ]}
+                {title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
-    ],
+            ]}
-    style_formats_merge: false,
+        ],
-    formats: {
+        style_formats_merge: false,
-        alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
+        formats: {
-        aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
+            alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
-        alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
+            aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
-    },
+            alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
-    file_browser_callback: function (field_name, url, type, win) {
+        },
-
+        file_browser_callback: function (field_name, url, type, win) {
-        if (type === 'file') {
+
-            window.showEntityLinkSelector(function(entity) {
+            if (type === 'file') {
-                let originalField = win.document.getElementById(field_name);
+                window.showEntityLinkSelector(function(entity) {
-                originalField.value = entity.link;
+                    let originalField = win.document.getElementById(field_name);
-                $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
+                    originalField.value = entity.link;
-            });
+                    $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
-        }
+                });
+            }
-        if (type === 'image') {
+            if (type === 'image') {
-            // Show image manager
+                // Show image manager
-            window.ImageManager.showExternal(function (image) {
+                window.ImageManager.showExternal(function (image) {
-
-                // Set popover link input to image url then fire change event
-                // to ensure the new value sticks
-                win.document.getElementById(field_name).value = image.url;
-                if ("createEvent" in document) {
-                    let evt = document.createEvent("HTMLEvents");
-                    evt.initEvent("change", false, true);
-                    win.document.getElementById(field_name).dispatchEvent(evt);
-                } else {
-                    win.document.getElementById(field_name).fireEvent("onchange");
-                }
-                // Replace the actively selected content with the linked image
+                    // Set popover link input to image url then fire change event
-                let html = `<a href="${image.url}" target="_blank">`;
+                    // to ensure the new value sticks
-                html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+                    win.document.getElementById(field_name).value = image.url;
-                html += '</a>';
+                    if ("createEvent" in document) {
-                win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+                        let evt = document.createEvent("HTMLEvents");
-            });
+                        evt.initEvent("change", false, true);
-        }
+                        win.document.getElementById(field_name).dispatchEvent(evt);
+                    } else {
+                        win.document.getElementById(field_name).fireEvent("onchange");
+                    }
+
+                    // Replace the actively selected content with the linked image
+                    let html = `<a href="${image.url}" target="_blank">`;
+                    html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+                    html += '</a>';
+                    win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+                });
+            }
-    },
+        },
-    paste_preprocess: function (plugin, args) {
+        paste_preprocess: function (plugin, args) {
-        let content = args.content;
+            let content = args.content;
-        if (content.indexOf('<img src="file://') !== -1) {
+            if (content.indexOf('<img src="file://') !== -1) {
-            args.content = '';
+                args.content = '';
-        }
+            }
-    },
+        },
-    extraSetups: [],
+        extraSetups: [],
-    setup: function (editor) {
+        setup: function (editor) {
-
+
-        // Run additional setup actions
+            // Run additional setup actions
-        // Used by the angular side of things
+            // Used by the angular side of things
-        for (let i = 0; i < mceOptions.extraSetups.length; i++) {
+            for (let i = 0; i < settings.extraSetups.length; i++) {
-            mceOptions.extraSetups[i](editor);
+                settings.extraSetups[i](editor);
-        }
+            }
-        registerEditorShortcuts(editor);
+            registerEditorShortcuts(editor);
-        (function () {
+            let wrap;
-            var wrap;
             function hasTextContent(node) {
                 return node && !!( node.textContent || node.innerText );
             }
             editor.on('dragstart', function () {
-                var node = editor.selection.getNode();
+                let node = editor.selection.getNode();
                 if (node.nodeName !== 'IMG') return;
                 wrap = editor.dom.getParent(node, '.mceTemp');
@@ -172,7 +172,7 @@ var mceOptions = module.exports = {
             });
             editor.on('drop', function (event) {
-                var dom = editor.dom,
+                let dom = editor.dom,
                     rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint(event.clientX, event.clientY, editor.getDoc());
                 // Don't allow anything to be dropped in a captioned image.
@@ -190,26 +190,27 @@ var mceOptions = module.exports = {
                 wrap = null;
             });
-        })();
-
-        // Custom Image picker button
-        editor.addButton('image-insert', {
-            title: 'My title',
-            icon: 'image',
-            tooltip: 'Insert an image',
-            onclick: function () {
-                window.ImageManager.showExternal(function (image) {
-                    let html = `<a href="${image.url}" target="_blank">`;
-                    html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
-                    html += '</a>';
-                    editor.execCommand('mceInsertContent', false, html);
-                });
-            }
-        });
-        // Paste image-uploads
-        editor.on('paste', function(event) {
-            editorPaste(event, editor);
-        });
-    }
-};
\ No newline at end of file
+            // Custom Image picker button
+            editor.addButton('image-insert', {
+                title: 'My title',
+                icon: 'image',
+                tooltip: 'Insert an image',
+                onclick: function () {
+                    window.ImageManager.showExternal(function (image) {
+                        let html = `<a href="${image.url}" target="_blank">`;
+                        html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+                        html += '</a>';
+                        editor.execCommand('mceInsertContent', false, html);
+                    });
+                }
+            });
+
+            // Paste image-uploads
+            editor.on('paste', function(event) {
+                editorPaste(event, editor);
+            });
+        }
+    };
+    return settings;
+}
\ No newline at end of file
--- a/resources/assets/js/pages/page-show.js
View file @08c4b9a
+++ b/resources/assets/js/pages/page-show.js
View file @08c4b9a
 "use strict";
 // Configure ZeroClipboard
-var zeroClipBoard = require('zeroclipboard');
+import zeroClipBoard from "zeroclipboard";
-zeroClipBoard.config({
-    swfPath: window.baseUrl('/ZeroClipboard.swf')
-});
-window.setupPageShow = module.exports = function (pageId) {
+export default window.setupPageShow = function (pageId) {
     // Set up pointer
-    var $pointer = $('#pointer').detach();
+    let $pointer = $('#pointer').detach();
-    var $pointerInner = $pointer.children('div.pointer').first();
+    let $pointerInner = $pointer.children('div.pointer').first();
-    var isSelection = false;
+    let isSelection = false;
     // Select all contents on input click
     $pointer.on('click', 'input', function (e) {
@@ -19,6 +16,9 @@ window.setupPageShow = module.exports = function (pageId) {
     });
     // Set up copy-to-clipboard
+    zeroClipBoard.config({
+        swfPath: window.baseUrl('/ZeroClipboard.swf')
+    });
     new zeroClipBoard($pointer.find('button').first()[0]);
     // Hide pointer when clicking away
@@ -31,11 +31,11 @@ window.setupPageShow = module.exports = function (pageId) {
     // Show pointer when selecting a single block of tagged content
     $('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
         e.stopPropagation();
-        var selection = window.getSelection();
+        let selection = window.getSelection();
         if (selection.toString().length === 0) return;
         // Show pointer and set link
-        var $elem = $(this);
+        let $elem = $(this);
         let link = window.baseUrl('/link/' + pageId + '#' + $elem.attr('id'));
         if (link.indexOf('http') !== 0) link = window.location.protocol + "//" + window.location.host + link;
         $pointer.find('input').val(link);
@@ -44,9 +44,9 @@ window.setupPageShow = module.exports = function (pageId) {
         $pointer.show();
         // Set pointer to sit near mouse-up position
-        var pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
+        let pointerLeftOffset = (e.pageX - $elem.offset().left - ($pointerInner.width() / 2));
         if (pointerLeftOffset < 0) pointerLeftOffset = 0;
-        var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
+        let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
         $pointerInner.css('left', pointerLeftOffsetPercent + '%');
         isSelection = true;
@@ -57,7 +57,7 @@ window.setupPageShow = module.exports = function (pageId) {
     // Go to, and highlight if necessary, the specified text.
     function goToText(text) {
-        var idElem = $('.page-content #' + text).first();
+        let idElem = $('.page-content #' + text).first();
         if (idElem.length !== 0) {
             idElem.smoothScrollTo();
             idElem.css('background-color', 'rgba(244, 249, 54, 0.25)');
@@ -68,19 +68,19 @@ window.setupPageShow = module.exports = function (pageId) {
     // Check the hash on load
     if (window.location.hash) {
-        var text = window.location.hash.replace(/\%20/g, ' ').substr(1);
+        let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
         goToText(text);
     }
     // Make the book-tree sidebar stick in view on scroll
-    var $window = $(window);
+    let $window = $(window);
-    var $bookTree = $(".book-tree");
+    let $bookTree = $(".book-tree");
-    var $bookTreeParent = $bookTree.parent();
+    let $bookTreeParent = $bookTree.parent();
     // Check the page is scrollable and the content is taller than the tree
-    var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
+    let pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
     // Get current tree's width and header height
-    var headerHeight = $("#header").height() + $(".toolbar").height();
+    let headerHeight = $("#header").height() + $(".toolbar").height();
-    var isFixed = $window.scrollTop() > headerHeight;
+    let isFixed = $window.scrollTop() > headerHeight;
     // Function to fix the tree as a sidebar
     function stickTree() {
         $bookTree.width($bookTreeParent.width() + 15);
@@ -95,7 +95,7 @@ window.setupPageShow = module.exports = function (pageId) {
     }
     // Checks if the tree stickiness state should change
     function checkTreeStickiness(skipCheck) {
-        var shouldBeFixed = $window.scrollTop() > headerHeight;
+        let shouldBeFixed = $window.scrollTop() > headerHeight;
         if (shouldBeFixed && (!isFixed || skipCheck)) {
             stickTree();
         } else if (!shouldBeFixed && (isFixed || skipCheck)) {