Standardised JS vars and imports/exports

diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index 1b5bef797f89ad934318d94e216658887179f808..3a465da97221710c312eb768452cb8ef36a39e7e 100644 (file)
--- a/resources/assets/js/controllers.js
+++ b/resources/assets/js/controllers.js
@@ -2,6 +2,8 @@
 
 import moment from 'moment';
 import 'moment/locale/en-gb';
 
 import moment from 'moment';
 import 'moment/locale/en-gb';

+import editorOptions from "./pages/page-form";
+

 moment.locale('en-gb');
 
 export default function (ngApp, events) {
 moment.locale('en-gb');
 
 export default function (ngApp, events) {


@@ -23,14 +25,14 @@ export default function (ngApp, events) {
             $scope.searching = false;
             $scope.searchTerm = '';
 
             $scope.searching = false;
             $scope.searchTerm = '';
 

-            var page = 0;
-            var previousClickTime = 0;
-            var previousClickImage = 0;
-            var dataLoaded = false;
-            var callback = false;
+            let page = 0;
+            let previousClickTime = 0;
+            let previousClickImage = 0;
+            let dataLoaded = false;
+            let callback = false;

 
 

-            var preSearchImages = [];
-            var preSearchHasMore = false;
+            let preSearchImages = [];
+            let preSearchHasMore = false;

 
             /**
              * Used by dropzone to get the endpoint to upload to.
 
             /**
              * 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) {
              * @param image
              */
             $scope.imageSelect = function (image) {

-                var dblClickTime = 300;
-                var currentTime = Date.now();
-                var timeDiff = currentTime - previousClickTime;
+                let dblClickTime = 300;
+                let currentTime = Date.now();
+                let timeDiff = currentTime - previousClickTime;

 
                 if (timeDiff < dblClickTime && image.id === previousClickImage) {
                     // If double click
 
                 if (timeDiff < dblClickTime && image.id === previousClickImage) {
                     // If double click


@@ -137,19 +139,19 @@ export default function (ngApp, events) {
                 $('#image-manager').find('.overlay').fadeOut(240);
             };
 
                 $('#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() {
 
             /**
              * Fetch the list image data from the server.
              */
             function fetchData() {

-                var url = baseUrl + page + '?';
-                var components = {};
+                let url = baseUrl + page + '?';
+                let components = {};

                 if ($scope.uploadedTo) components['page_id'] = $scope.uploadedTo;
                 if ($scope.searching) components['term'] = $scope.searchTerm;
 
 
                 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;
                     return key + '=' + encodeURIComponent(components[key]);
                 }).join('&');
                 url += urlQueryString;


@@ -205,13 +207,13 @@ export default function (ngApp, events) {
              */
             $scope.saveImageDetails = function (event) {
                 event.preventDefault();
              */
             $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) {
                 $http.put(url, this.selectedImage).then(response => {
                     events.emit('success', 'Image details updated');
                 }, (response) => {
                     if (response.status === 422) {

-                        var errors = response.data;
-                        var message = '';
+                        let errors = response.data;
+                        let message = '';

                         Object.keys(errors).forEach((key) => {
                             message += errors[key].join('\n');
                         });
                         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();
              */
             $scope.deleteImage = function (event) {
                 event.preventDefault();

-                var force = $scope.dependantPages !== false;
-                var url = window.baseUrl('/images/' + $scope.selectedImage.id);
+                let force = $scope.dependantPages !== false;
+                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);
                 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();
 
         $scope.searchBook = function (e) {
             e.preventDefault();

-            var term = $scope.searchTerm;
+            let term = $scope.searchTerm;

             if (term.length == 0) return;
             $scope.searching = true;
             $scope.searchResults = '';
             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);
             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) {
 
     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 = '';
         $scope.editContent = '';
         $scope.draftText = '';

-        var pageId = Number($attrs.pageId);
-        var isEdit = pageId !== 0;
-        var autosaveFrequency = 30; // AutoSave interval in seconds.
-        var isMarkdown = $attrs.editorType === 'markdown';
+        let pageId = Number($attrs.pageId);
+        let isEdit = pageId !== 0;
+        let autosaveFrequency = 30; // AutoSave interval in seconds.
+        let isMarkdown = $attrs.editorType === 'markdown';

         $scope.draftsEnabled = $attrs.draftsEnabled === 'true';
         $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
         $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
         $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'
         }
 
             $scope.draftText = 'Editing Page'
         }
 

-        var autoSave = false;
+        let autoSave = false;

 
 

-        var currentContent = {
+        let currentContent = {

             title: false,
             html: false
         };
             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;
             autoSave = $interval(() => {
                 // Return if manually saved recently to prevent bombarding the server
                 if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return;

-                var newTitle = $('#name').val();
-                var newHtml = $scope.editContent;
+                let newTitle = $('#name').val();
+                let newHtml = $scope.editContent;

 
                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
                     currentContent.html = newHtml;
 
                 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;
          */
         function saveDraft() {
             if (!$scope.draftsEnabled) return;

-            var data = {
+            let data = {

                 name: $('#name').val(),
                 html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent
             };
                 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;
             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();
                 $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
                 showDraftSaveNotification();

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 44d1a14e1a139a5bf794aef36a93062d8da9aa14..28c4f6e17ed702cd50c26850ecea277fab4a68da 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -1,8 +1,8 @@
 "use strict";
 "use strict";

-const DropZone = require('dropzone');
-const markdown = require('marked');
+import DropZone from "dropzone";
+import markdown from "marked";

 
 

-module.exports = function (ngApp, events) {
+export default function (ngApp, events) {

 
     /**
      * Toggle Switches
 
     /**
      * 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;
             },
             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 () {
                     url: scope.uploadUrl,
                     init: function () {

-                        var dz = this;
+                        let dz = this;

                         dz.on('sending', function (file, xhr, data) {
                         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);
                             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);
                             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) => {
 
                 function tinyMceSetup(editor) {
                     editor.on('ExecCommand change NodeChange ObjectResized', (e) => {

-                        var content = editor.getContent();
+                        let content = editor.getContent();

                         $timeout(() => {
                             scope.mceModel = content;
                         });
                         $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 () {
                 // Custom tinyMCE plugins
                 tinymce.PluginManager.add('customhr', function (editor) {
                     editor.addCommand('InsertHorizontalRule', function () {

-                        var hrElem = document.createElement('hr');
-                        var cNode = editor.selection.getNode();
-                        var parentNode = cNode.parentNode;
+                        let hrElem = document.createElement('hr');
+                        let cNode = editor.selection.getNode();
+                        let parentNode = cNode.parentNode;

                         parentNode.insertBefore(hrElem, cNode);
                     });
 
                         parentNode.insertBefore(hrElem, cNode);
                     });
 


@@ -474,9 +474,9 @@ module.exports = function (ngApp, events) {
                 function editorPaste(e) {
                     e = e.originalEvent;
                     if (!e.clipboardData) return
                 function editorPaste(e) {
                     e = e.originalEvent;
                     if (!e.clipboardData) return

-                    var items = e.clipboardData.items;
+                    let items = e.clipboardData.items;

                     if (!items) return;
                     if (!items) return;

-                    for (var i = 0; i < items.length; i++) {
+                    for (let i = 0; i < items.length; i++) {

                         uploadImage(items[i].getAsFile());
                     }
                 }
                         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;
                 // Handle image upload and add image into markdown content
                 function uploadImage(file) {
                     if (file.type.indexOf('image') !== 0) return;

-                    var formData = new FormData();
-                    var ext = 'png';
-                    var xhr = new XMLHttpRequest();
+                    let formData = new FormData();
+                    let ext = 'png';
+                    let xhr = new XMLHttpRequest();

 
                     if (file.name) {
 
                     if (file.name) {

-                        var fileNameMatches = file.name.match(/\.(.+)$/);
+                        let fileNameMatches = file.name.match(/\.(.+)$/);

                         if (fileNameMatches) {
                             ext = fileNameMatches[1];
                         }
                         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) {
                     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 {
                             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++) {
                     // 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.textContent = suggestions[i];
                         suggestion.onclick = suggestionClick;
                         if (i === 0) {

-                            suggestion.className = 'active'
+                            suggestion.className = 'active';

                             active = 0;
                         }
                             active = 0;
                         }

-                        ;

                         $suggestionBox[0].appendChild(suggestion);
                     }
 
                         $suggestionBox[0].appendChild(suggestion);
                     }
 


@@ -748,12 +747,11 @@ module.exports = function (ngApp, events) {
 
                 // Suggestion click event
                 function suggestionClick(event) {
 
                 // Suggestion click event
                 function suggestionClick(event) {

-                    let text = this.textContent;
-                    currentInput[0].value = text;
+                    currentInput[0].value = this.textContent;

                     currentInput.focus();
                     $suggestionBox.hide();
                     isShowing = false;
                     currentInput.focus();
                     $suggestionBox.hide();
                     isShowing = false;

-                };
+                }

 
                 // Get suggestions & cache
                 function getSuggestions(input, url) {
 
                 // 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
                 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;
                 function isDoubleClick() {
                     let now = Date.now();
                     let answer = now - lastClick < 300;

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 9aa5dff527adcf04298e80dc28003f004080448f..0f2bbbf205e913102f85d5c7ff00c34f7439700a 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -1,11 +1,11 @@
 "use strict";
 
 // AngularJS - Create application and load components
 "use strict";
 
 // AngularJS - Create application and load components

-var angular = require('angular');
-var ngResource = require('angular-resource');
-var ngAnimate = require('angular-animate');
-var ngSanitize = require('angular-sanitize');
-require('angular-ui-sortable');
+import angular from "angular";
+import "angular-resource";
+import "angular-animate";
+import "angular-sanitize";
+import "angular-ui-sortable";

 
 // Url retrieval function
 window.baseUrl = function(path) {
 
 // Url retrieval function
 window.baseUrl = function(path) {


@@ -15,7 +15,7 @@ window.baseUrl = function(path) {
     return basePath + '/' + 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 {
 
 // Global Event System
 class EventManager {


@@ -25,9 +25,9 @@ class EventManager {
 
     emit(eventName, eventData) {
         if (typeof this.listeners[eventName] === 'undefined') return this;
 
     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++) {
         for (let i = 0; i < eventsToStart.length; i++) {

-            var event = eventsToStart[i];
+            let event = eventsToStart[i];

             event(eventData);
         }
         return this;
             event(eventData);
         }
         return this;


@@ -72,10 +72,10 @@ jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
 // Global jQuery Elements
 $(function () {
 
 // Global jQuery Elements
 $(function () {
 

-    var notifications = $('.notification');
-    var successNotification = notifications.filter('.pos');
-    var errorNotification = notifications.filter('.neg');
-    var warningNotification = notifications.filter('.warning');
+    let notifications = $('.notification');
+    let successNotification = notifications.filter('.pos');
+    let errorNotification = notifications.filter('.neg');
+    let warningNotification = notifications.filter('.warning');

     // Notification Events
     window.Events.listen('success', function (text) {
         successNotification.hide();
     // Notification Events
     window.Events.listen('success', function (text) {
         successNotification.hide();


@@ -109,9 +109,9 @@ $(function () {
     $('#back-to-top').click(function() {
          $('#header').smoothScrollTo();
     });
     $('#back-to-top').click(function() {
          $('#header').smoothScrollTo();
     });

-    var scrollTopShowing = false;
-    var scrollTop = document.getElementById('back-to-top');
-    var scrollTopBreakpoint = 1200;
+    let scrollTopShowing = false;
+    let scrollTop = document.getElementById('back-to-top');
+    let scrollTopBreakpoint = 1200;

     window.addEventListener('scroll', function() {
         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
         if (!scrollTopShowing && scrollTopPos > scrollTopBreakpoint) {
     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
 });
 
 // Page specific items

-require('./pages/page-show');
+import "./pages/page-show";

diff --git a/resources/assets/js/pages/page-form.js b/resources/assets/js/pages/page-form.js
index 1fb8b915f91482941fd96d6ef48d234311be6ac2..e1c0cfe8f14c04345910be43c6aff3b13a732b9d 100644 (file)
--- a/resources/assets/js/pages/page-form.js
+++ b/resources/assets/js/pages/page-form.js
@@ -60,108 +60,108 @@ function registerEditorShortcuts(editor) {
     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
 }
 
     editor.addShortcut('meta+shift+E', '', ['FormatBlock', false, 'code']);
 }
 

-var mceOptions = module.exports = {
-    selector: '#html-editor',
-    content_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,
-    remove_script_host: false,
-    document_base_url: window.baseUrl('/'),
-    statusbar: false,
-    menubar: false,
-    paste_data_images: false,
-    extended_valid_elements: 'pre[*]',
-    automatic_uploads: false,
-    valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
-    plugins: "image table textcolor paste link fullscreen imagetools code customhr autosave lists",
-    imagetools_toolbar: 'imageoptions',
-    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",
-    content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
-    style_formats: [
-        {title: "Header Large", format: "h2"},
-        {title: "Header Medium", format: "h3"},
-        {title: "Header Small", format: "h4"},
-        {title: "Header Tiny", format: "h5"},
-        {title: "Paragraph", format: "p", exact: true, classes: ''},
-        {title: "Blockquote", format: "blockquote"},
-        {title: "Code Block", icon: "code", format: "pre"},
-        {title: "Inline Code", icon: "code", inline: "code"},
-        {title: "Callouts", items: [
-            {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
-            {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
-            {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: {
-        alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
-        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) {
-
-        if (type === 'file') {
-            window.showEntityLinkSelector(function(entity) {
-                let originalField = win.document.getElementById(field_name);
-                originalField.value = entity.link;
-                $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
-            });
-        }
+export default function() {
+    let settings = {
+        selector: '#html-editor',
+        content_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,
+        remove_script_host: false,
+        document_base_url: window.baseUrl('/'),
+        statusbar: false,
+        menubar: false,
+        paste_data_images: false,
+        extended_valid_elements: 'pre[*]',
+        automatic_uploads: false,
+        valid_children: "-div[p|pre|h1|h2|h3|h4|h5|h6|blockquote]",
+        plugins: "image table textcolor paste link fullscreen imagetools code customhr autosave lists",
+        imagetools_toolbar: 'imageoptions',
+        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",
+        content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
+        style_formats: [
+            {title: "Header Large", format: "h2"},
+            {title: "Header Medium", format: "h3"},
+            {title: "Header Small", format: "h4"},
+            {title: "Header Tiny", format: "h5"},
+            {title: "Paragraph", format: "p", exact: true, classes: ''},
+            {title: "Blockquote", format: "blockquote"},
+            {title: "Code Block", icon: "code", format: "pre"},
+            {title: "Inline Code", icon: "code", inline: "code"},
+            {title: "Callouts", items: [
+                {title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
+                {title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
+                {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: {
+            alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
+            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) {
+
+            if (type === 'file') {
+                window.showEntityLinkSelector(function(entity) {
+                    let originalField = win.document.getElementById(field_name);
+                    originalField.value = entity.link;
+                    $(originalField).closest('.mce-form').find('input').eq(2).val(entity.name);
+                });
+            }

 
 

-        if (type === 'image') {
-            // Show image manager
-            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");
-                }
+            if (type === 'image') {
+                // Show image manager
+                window.ImageManager.showExternal(function (image) {

 
 

-                // 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);
-            });
-        }
+                    // 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
+                    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) {
-        let content = args.content;
-        if (content.indexOf('<img src="file://') !== -1) {
-            args.content = '';
-        }
-    },
-    extraSetups: [],
-    setup: function (editor) {
-
-        // Run additional setup actions
-        // Used by the angular side of things
-        for (let i = 0; i < mceOptions.extraSetups.length; i++) {
-            mceOptions.extraSetups[i](editor);
-        }
+        },
+        paste_preprocess: function (plugin, args) {
+            let content = args.content;
+            if (content.indexOf('<img src="file://') !== -1) {
+                args.content = '';
+            }
+        },
+        extraSetups: [],
+        setup: function (editor) {
+
+            // Run additional setup actions
+            // Used by the angular side of things
+            for (let i = 0; i < settings.extraSetups.length; i++) {
+                settings.extraSetups[i](editor);
+            }

 
 

-        registerEditorShortcuts(editor);
+            registerEditorShortcuts(editor);

 
 

-        (function () {
-            var wrap;
+            let wrap;

 
             function hasTextContent(node) {
                 return node && !!( node.textContent || node.innerText );
             }
 
             editor.on('dragstart', function () {
 
             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');
 
                 if (node.nodeName !== 'IMG') return;
                 wrap = editor.dom.getParent(node, '.mceTemp');


@@ -172,7 +172,7 @@ var mceOptions = module.exports = {
             });
 
             editor.on('drop', function (event) {
             });
 
             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.
                     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;
             });
 
                 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

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index 41b92453f6cc785f1fb79c404b6c5eb071839fa7..0cdde790dcdbdad18b2fdea13c144202e8579717 100644 (file)
--- a/resources/assets/js/pages/page-show.js
+++ b/resources/assets/js/pages/page-show.js
@@ -1,16 +1,13 @@
 "use strict";
 // Configure ZeroClipboard
 "use strict";
 // Configure ZeroClipboard

-var zeroClipBoard = require('zeroclipboard');
-zeroClipBoard.config({
-    swfPath: window.baseUrl('/ZeroClipboard.swf')
-});
+import zeroClipBoard from "zeroclipboard";

 
 

-window.setupPageShow = module.exports = function (pageId) {
+export default window.setupPageShow = function (pageId) {

 
     // Set up pointer
 
     // Set up pointer

-    var $pointer = $('#pointer').detach();
-    var $pointerInner = $pointer.children('div.pointer').first();
-    var isSelection = false;
+    let $pointer = $('#pointer').detach();
+    let $pointerInner = $pointer.children('div.pointer').first();
+    let isSelection = false;

 
     // Select all contents on input click
     $pointer.on('click', 'input', function (e) {
 
     // 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
     });
 
     // Set up copy-to-clipboard

+    zeroClipBoard.config({
+        swfPath: window.baseUrl('/ZeroClipboard.swf')
+    });

     new zeroClipBoard($pointer.find('button').first()[0]);
 
     // Hide pointer when clicking away
     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();
     // 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
         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);
         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
         $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;
         if (pointerLeftOffset < 0) pointerLeftOffset = 0;

-        var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
+        let pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;

         $pointerInner.css('left', pointerLeftOffsetPercent + '%');
 
         isSelection = true;
         $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) {
 
     // 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)');
         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) {
 
     // 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
         goToText(text);
     }
 
     // Make the book-tree sidebar stick in view on scroll

-    var $window = $(window);
-    var $bookTree = $(".book-tree");
-    var $bookTreeParent = $bookTree.parent();
+    let $window = $(window);
+    let $bookTree = $(".book-tree");
+    let $bookTreeParent = $bookTree.parent();

     // Check the page is scrollable and the content is taller than the tree
     // 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
     // Get current tree's width and header height

-    var headerHeight = $("#header").height() + $(".toolbar").height();
-    var isFixed = $window.scrollTop() > headerHeight;
+    let headerHeight = $("#header").height() + $(".toolbar").height();
+    let isFixed = $window.scrollTop() > headerHeight;

     // Function to fix the tree as a sidebar
     function stickTree() {
         $bookTree.width($bookTreeParent.width() + 15);
     // 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) {
     }
     // 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)) {
         if (shouldBeFixed && (!isFixed || skipCheck)) {
             stickTree();
         } else if (!shouldBeFixed && (isFixed || skipCheck)) {