Migrated editor toolbox, No more directives!

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;

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'),
+    'editor-toolbox': require('./editor-toolbox'),
 };
 
 window.components = {};

resources/assets/js/directives.js

@@ -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);
-                });
-            }
-        }
-    }]);
-};

resources/assets/js/global.js

@@ -80,9 +80,7 @@ require("./vues/vues");
 require("./components");
 
 // Load in angular specific items
-const Directives = require('./directives');
 const Controllers = require('./controllers');
-Directives(ngApp, window.$events);
 Controllers(ngApp, window.$events);
 
 //Global jQuery Config & Extensions

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>