Standardised JS vars and imports/exports

resources/assets/js/controllers.js

@@ -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();

resources/assets/js/directives.js

@@ -1,8 +1,8 @@
 "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;

resources/assets/js/global.js

@@ -1,11 +1,11 @@
 "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";

resources/assets/js/pages/page-form.js

@@ -60,7 +60,8 @@ function registerEditorShortcuts(editor) {
     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
 }
 
-var mceOptions = module.exports = {
+export default function() {
+    let settings = {
         selector: '#html-editor',
         content_css: [
             window.baseUrl('/css/styles.css'),
@@ -147,21 +148,20 @@ var mceOptions = module.exports = {
 
             // Run additional setup actions
             // 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);
 
-        (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,7 +190,6 @@ var mceOptions = module.exports = {
 
                 wrap = null;
             });
-        })();
 
             // Custom Image picker button
             editor.addButton('image-insert', {
@@ -213,3 +212,5 @@ var mceOptions = module.exports = {
             });
         }
     };
+    return settings;
+}

resources/assets/js/pages/page-show.js

@@ -1,16 +1,13 @@
 "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)) {