Added vanilla JS component system

resources/assets/js/components/dropdown.js

@@ -0,0 +1,48 @@
+/**
+ * Dropdown
+ * Provides some simple logic to create simple dropdown menus.
+ */
+class DropDown {
+
+    constructor(elem) {
+        this.container = elem;
+        this.menu = elem.querySelector('ul');
+        this.toggle = elem.querySelector('[dropdown-toggle]');
+        this.setupListeners();
+    }
+
+    show() {
+        this.menu.style.display = 'block';
+        this.menu.classList.add('anim', 'menuIn');
+        this.container.addEventListener('mouseleave', this.hide.bind(this));
+
+        // Focus on first input if existing
+        let input = this.menu.querySelector('input');
+        if (input !== null) input.focus();
+    }
+
+    hide() {
+        this.menu.style.display = 'none';
+        this.menu.classList.remove('anim', 'menuIn');
+    }
+
+    setupListeners() {
+        // Hide menu on option click
+        this.container.addEventListener('click', event => {
+             let possibleChildren = Array.from(this.menu.querySelectorAll('a'));
+             if (possibleChildren.indexOf(event.target) !== -1) this.hide();
+        });
+        // Show dropdown on toggle click
+        this.toggle.addEventListener('click', this.show.bind(this));
+        // Hide menu on enter press
+        this.container.addEventListener('keypress', event => {
+                if (event.keyCode !== 13) return true;
+                event.preventDefault();
+                this.hide();
+                return false;
+        });
+    }
+
+}
+
+module.exports = DropDown;

resources/assets/js/components/index.js

@@ -0,0 +1,21 @@
+
+let componentMapping = {
+    'dropdown': require('./dropdown'),
+};
+
+window.components = {};
+
+let componentNames = Object.keys(componentMapping);
+
+for (let i = 0, len = componentNames.length; i < len; i++) {
+    let name = componentNames[i];
+    let elems = document.querySelectorAll(`[${name}]`);
+    if (elems.length === 0) continue;
+
+    let component = componentMapping[name];
+    if (typeof window.components[name] === "undefined") window.components[name] = [];
+    for (let j = 0, jLen = elems.length; j < jLen; j++) {
+         let instance = new component(elems[j]);
+         window.components[name].push(instance);
+    }
+}