Merge branch 'master' into bug/image-upload

resources/assets/js/components/index.js

@@ -16,12 +16,12 @@ let componentMapping = {
     'editor-toolbox': require('./editor-toolbox'),
     'image-picker': require('./image-picker'),
     'collapsible': require('./collapsible'),
+    'toggle-switch': require('./toggle-switch'),
 };
 
 window.components = {};
 
 let componentNames = Object.keys(componentMapping);
-initAll();
 
 /**
  * Initialize components of the given name within the given element.
@@ -53,4 +53,6 @@ function initAll(parentElement) {
     }
 }
 
-window.components.init = initAll;
+window.components.init = initAll;
+
+export default initAll;

resources/assets/js/components/markdown-editor.js

@@ -255,7 +255,9 @@ class MarkdownEditor {
             let placeholderImage = window.baseUrl(`/loading.gif#upload${id}`);
             let selectedText = cm.getSelection();
             let placeHolderText = `![${selectedText}](${placeholderImage})`;
+            let cursor = cm.getCursor();
             cm.replaceSelection(placeHolderText);
+            cm.setCursor({line: cursor.line, ch: cursor.ch + selectedText.length + 2});
 
             let remoteFilename = "image-" + Date.now() + "." + ext;
             let formData = new FormData();
@@ -264,7 +266,7 @@ class MarkdownEditor {
             window.$http.post('/images/gallery/upload', formData).then(resp => {
                 replaceContent(placeholderImage, resp.data.thumbs.display);
             }).catch(err => {
-                events.emit('error', trans('errors.image_upload_error'));
+                window.$events.emit('error', trans('errors.image_upload_error'));
                 replaceContent(placeHolderText, selectedText);
                 console.log(err);
             });

resources/assets/js/components/notification.js

@@ -18,7 +18,7 @@ class Notification {
     show(textToShow = '') {
         this.elem.removeEventListener('transitionend', this.hideCleanup);
         this.textElem.textContent = textToShow;
-        this.elem.style.display = 'block';
+        this.elem.style.display = 'grid';
         setTimeout(() => {
             this.elem.classList.add('showing');
         }, 1);

resources/assets/js/components/toggle-switch.js

@@ -0,0 +1,19 @@
+
+class ToggleSwitch {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.input = elem.querySelector('input');
+
+        this.elem.onclick = this.onClick.bind(this);
+    }
+
+    onClick(event) {
+        let checked = this.input.value !== 'true';
+        this.input.value = checked ? 'true' : 'false';
+        checked ? this.elem.classList.add('active') : this.elem.classList.remove('active');
+    }
+
+}
+
+module.exports = ToggleSwitch;

resources/assets/js/index.js

@@ -1,6 +1,16 @@
-"use strict";
-require("babel-polyfill");
-require('./dom-polyfills');
+import "babel-polyfill"
+import "./dom-polyfills"
+
+import jQuery from "jquery"
+window.jQuery = window.$ = jQuery;
+
+import "./pages/page-show"
+import Translations from "./translations"
+import vues from "./vues/vues"
+import components from "./components"
+
+import Vue from "vue"
+import axios from "axios"
 
 // Url retrieval function
 window.baseUrl = function(path) {
@@ -37,9 +47,6 @@ class EventManager {
 
 window.$events = new EventManager();
 
-const Vue = require("vue");
-const axios = require("axios");
-
 let axiosInstance = axios.create({
     headers: {
         'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
@@ -60,14 +67,13 @@ Vue.prototype.$events = window.$events;
 
 // Translation setup
 // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
-const Translations = require("./translations");
 let translator = new Translations(window.translations);
 window.trans = translator.get.bind(translator);
 window.trans_choice = translator.getPlural.bind(translator);
 
-
-require("./vues/vues");
-require("./components");
+// Load vues and components
+vues();
+components();
 
 
 //Global jQuery Config & Extensions
@@ -125,6 +131,3 @@ if(navigator.userAgent.indexOf('MSIE')!==-1
     || navigator.userAgent.indexOf('Safari') !== -1){
     document.body.classList.add('flexbox-support');
 }
-
-// Page specific items
-require("./pages/page-show");

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

@@ -350,7 +350,7 @@ if (document.querySelector('[drawio-enabled]').getAttribute('drawio-enabled') ==
 module.exports = {
     selector: '#html-editor',
     content_css: [
-        window.baseUrl('/css/styles.css'),
+        window.baseUrl('/dist/styles.css'),
     ],
     branding: false,
     body_class: 'page-content',

resources/assets/js/vues/vues.js

@@ -16,10 +16,17 @@ let vueMapping = {
 
 window.vues = {};
 
-let ids = Object.keys(vueMapping);
-for (let i = 0, len = ids.length; i < len; i++) {
-    if (!exists(ids[i])) continue;
-    let config = vueMapping[ids[i]];
-    config.el = '#' + ids[i];
-    window.vues[ids[i]] = new Vue(config);
-}
+function load() {
+    let ids = Object.keys(vueMapping);
+    for (let i = 0, len = ids.length; i < len; i++) {
+        if (!exists(ids[i])) continue;
+        let config = vueMapping[ids[i]];
+        config.el = '#' + ids[i];
+        window.vues[ids[i]] = new Vue(config);
+    }
+}
+
+export default load;
+
+
+