Migrated editor toolbox, No more directives!

diff --git a/resources/assets/js/components/editor-toolbox.js b/resources/assets/js/components/editor-toolbox.js
new file mode 100644 (file)
index 0000000..bf6c4d8
--- /dev/null
+++ b/resources/assets/js/components/editor-toolbox.js
@@ -0,0 +1,47 @@
+class EditorToolbox {
+
+    constructor(elem) {
+        // Elements
+        this.elem = elem;
+        this.buttons = elem.querySelectorAll('[toolbox-tab-button]');
+        this.contentElements = elem.querySelectorAll('[toolbox-tab-content]');
+        this.toggleButton = elem.querySelector('[toolbox-toggle]');
+
+        // Toolbox toggle button click
+        this.toggleButton.addEventListener('click', this.toggle.bind(this));
+        // Tab button click
+        this.elem.addEventListener('click', event => {
+            let button = event.target.closest('[toolbox-tab-button]');
+            if (button === null) return;
+            let name = button.getAttribute('toolbox-tab-button');
+            this.setActiveTab(name, true);
+        });
+
+        // Set the first tab as active on load
+        this.setActiveTab(this.contentElements[0].getAttribute('toolbox-tab-content'));
+    }
+
+    toggle() {
+        this.elem.classList.toggle('open');
+    }
+
+    setActiveTab(tabName, openToolbox = false) {
+        // Set button visibility
+        for (let i = 0, len = this.buttons.length; i < len; i++) {
+            this.buttons[i].classList.remove('active');
+            let bName =  this.buttons[i].getAttribute('toolbox-tab-button');
+            if (bName === tabName) this.buttons[i].classList.add('active');
+        }
+        // Set content visibility
+        for (let i = 0, len = this.contentElements.length; i < len; i++) {
+            this.contentElements[i].style.display = 'none';
+            let cName = this.contentElements[i].getAttribute('toolbox-tab-content');
+            if (cName === tabName) this.contentElements[i].style.display = 'block';
+        }
+
+        if (openToolbox) this.elem.classList.add('open');
+    }
+
+}
+
+module.exports = EditorToolbox;
\ No newline at end of file

diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index 73b3f0afa75fe00638dc8abe54f97e3b1100516b..f37709101088b68ee1da5ee6c4f248e8c6a26fea 100644 (file)
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -13,6 +13,7 @@ let componentMapping = {
     'page-comments': require('./page-comments'),
     'wysiwyg-editor': require('./wysiwyg-editor'),
     'markdown-editor': require('./markdown-editor'),
     'page-comments': require('./page-comments'),
     'wysiwyg-editor': require('./wysiwyg-editor'),
     'markdown-editor': require('./markdown-editor'),

+    'editor-toolbox': require('./editor-toolbox'),

 };
 
 window.components = {};
 };
 
 window.components = {};

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
deleted file mode 100644 (file)
index c7a578c..0000000
--- a/resources/assets/js/directives.js
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-module.exports = function (ngApp, events) {
-
-
-    /**
-     * Page Editor Toolbox
-     * Controls all functionality for the sliding toolbox
-     * on the page edit view.
-     */
-    ngApp.directive('toolbox', [function () {
-        return {
-            restrict: 'A',
-            link: function (scope, elem, attrs) {
-
-                // Get common elements
-                const $buttons = elem.find('[toolbox-tab-button]');
-                const $content = elem.find('[toolbox-tab-content]');
-                const $toggle = elem.find('[toolbox-toggle]');
-
-                // Handle toolbox toggle click
-                $toggle.click((e) => {
-                    elem.toggleClass('open');
-                });
-
-                // Set an active tab/content by name
-                function setActive(tabName, openToolbox) {
-                    $buttons.removeClass('active');
-                    $content.hide();
-                    $buttons.filter(`[toolbox-tab-button="${tabName}"]`).addClass('active');
-                    $content.filter(`[toolbox-tab-content="${tabName}"]`).show();
-                    if (openToolbox) elem.addClass('open');
-                }
-
-                // Set the first tab content active on load
-                setActive($content.first().attr('toolbox-tab-content'), false);
-
-                // Handle tab button click
-                $buttons.click(function (e) {
-                    let name = $(this).attr('toolbox-tab-button');
-                    setActive(name, true);
-                });
-            }
-        }
-    }]);
-};

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 7126479c1f2b4fda807cbd80619283a1400be18e..faf5a499d34e906f71f3cedaaf0d9d2f4ed6f3f0 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -80,9 +80,7 @@ require("./vues/vues");
 require("./components");
 
 // Load in angular specific items
 require("./components");
 
 // Load in angular specific items

-const Directives = require('./directives');

 const Controllers = require('./controllers');
 const Controllers = require('./controllers');

-Directives(ngApp, window.$events);

 Controllers(ngApp, window.$events);
 
 //Global jQuery Config & Extensions
 Controllers(ngApp, window.$events);
 
 //Global jQuery Config & Extensions

diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php
index 929f7049c39ea465ff6747a73fc840b6e904df64..80d84d60bea450cc179554f9e0f2c53cdb59e737 100644 (file)
--- a/resources/views/pages/form-toolbox.blade.php
+++ b/resources/views/pages/form-toolbox.blade.php
@@ -1,5 +1,5 @@
 
 

-<div toolbox class="floating-toolbox">
+<div editor-toolbox class="floating-toolbox">

 
     <div class="tabs primary-background-light">
         <span toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>
 
     <div class="tabs primary-background-light">
         <span toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>