@lemonadejs/tabs 2.3.0 → 5.2.0

package/dist/index.d.ts

@@ -10,6 +10,8 @@ declare namespace Tabs {
     interface Item {
         // Reference to an external DOM
         el: HTMLElement,
+        /** Material icon keyword */
+        icon?: string;
         // Tab header
         title: string,
         // HTML template
@@ -22,13 +24,21 @@ declare namespace Tabs {
         /** Selected tab */
         selected?: number;
         /** Tabs position */
-        position?: 'center' | undefined;
+        position?: 'default' | 'center' | 'bottom' | undefined;
         /** Activate round borders */
         round?: boolean;
-        /** On open event */
-        onopen?: (instance: object, index: number) => void;
         /** Allow to create new tab button */
         allowCreate?: boolean;
+        /** Change tabs */
+        onchange?: (instance: object, value: number) => void;
+        /** On open event */
+        onopen?: (instance: object, index: number) => void;
+        /** Before create new tab */
+        onbeforecreate?: (instance: object, item: Item, position: number) => boolean | void;
+        /** On create new tab event */
+        oncreate?: (instance: object, item: Item, position: number) => void;
+        /** On change tab position event */
+        onchangeposition: (instance: object, fromIndex: number, toIndex: number) => void;
     }
 
     interface Instance {
@@ -42,8 +52,8 @@ declare namespace Tabs {
         position?: 'center' | undefined;
         /** Activate round borders */
         round?: boolean;
-        /** On open event */
-        onopen?: (instance: object, index: number) => void;
+        /** Allow to create new tab button */
+        allowCreate?: boolean;
     }
 }
 

package/dist/index.js

@@ -8,12 +8,33 @@ if (! lemonade && typeof (require) === 'function') {
     global.Tabs = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
     // Dispatcher
-    const Dispatch = function(type){
-        if (typeof this[type] === 'function') {
-            let args = Array.from(arguments);
-            args.shift();
-            this[type](...args)
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
         }
     }
 
@@ -37,22 +58,122 @@ if (! lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Tabs = function(children) {
+    const sorting = function(el, options) {
+        const obj = {};
+
+        let dragElement = null;
+
+        el.addEventListener('dragstart', function(e) {
+            let target = e.target;
+            if (target.nodeType === 3) {
+                if (target.parentNode.getAttribute('draggable') === 'true') {
+                    target = target.parentNode;
+                } else {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+            }
+
+            if (target.getAttribute('draggable') === 'true') {
+                let position = Array.prototype.indexOf.call(target.parentNode.children, target);
+                dragElement = {
+                    element: target,
+                    o: position,
+                    d: position
+                }
+                target.style.opacity = '0.25';
+                e.dataTransfer.setDragImage(target,0,0);
+            }
+        });
+
+        el.addEventListener('dragover', function(e) {
+            e.preventDefault();
+
+            if (dragElement && getElement(e.target) && e.target.getAttribute('draggable') == 'true' && dragElement.element != e.target) {
+                let element = e.target.clientWidth / 2 > e.offsetX ? e.target : e.target.nextSibling;
+                e.target.parentNode.insertBefore(dragElement.element, element);
+                dragElement.d = Array.prototype.indexOf.call(e.target.parentNode.children, dragElement.element);
+            }
+        });
+
+        el.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+        });
+
+        el.addEventListener('dragend', function(e) {
+            e.preventDefault();
+
+            if (dragElement) {
+                let element = dragElement.o < dragElement.d ? e.target.parentNode.children[dragElement.o] : e.target.parentNode.children[dragElement.o].nextSibling
+                e.target.parentNode.insertBefore(dragElement.element, element);
+                dragElement.element.style.opacity = '';
+                dragElement = null;
+            }
+        });
+
+        el.addEventListener('drop', function(e) {
+            e.preventDefault();
+
+            if (dragElement) {
+                if (dragElement.o !== dragElement.d) {
+                    if (typeof(options.ondrop) == 'function') {
+                        options.ondrop(el, dragElement.o, dragElement.d, dragElement.element, e.target, e);
+                    }
+                }
+
+                dragElement.element.style.opacity = '';
+                dragElement = null;
+            }
+        });
+
+        const getElement = function(element) {
+            var sorting = false;
+
+            function path (element) {
+                if (element === el) {
+                    sorting = true;
+                }
+
+                if (! sorting) {
+                    path(element.parentNode);
+                }
+            }
+
+            path(element);
+
+            return sorting;
+        }
+
+        for (let i = 0; i < el.children.length; i++) {
+            if (! el.children[i].hasAttribute('draggable')) {
+                el.children[i].setAttribute('draggable', 'true');
+            }
+        }
+
+        return el;
+    }
+
+    const Tabs = function(children, { onchange, onload }) {
         let self = this
 
+        // Event
+        let change = self.onchange;
+        self.onchange = null;
+
         // Add new tab
         let createButton;
 
         // Get the references from the root web component
         let root;
+        let template = '';
         if (this.tagName) {
             root = this;
         } else {
             // References from LemonadeJS
             if (typeof(children) === 'string') {
                 // Version 4
-                root = document.createElement('div');
-                root.innerHTML = children;
+                template = children;
             } else if (children && children.length) {
                 // Version 5
                 root = children;
@@ -66,14 +187,7 @@ if (! lemonade && typeof (require) === 'function') {
         // Process the data
         if (self.data) {
             for (let i = 0; i < self.data.length; i++) {
-                if (self.data[i].el) {
-                    if (! self.data[i].title) {
-                        self.data[i].title = self.data[i].el.getAttribute('title');
-                    }
-                    if (! self.data[i].selected) {
-                        self.data[i].selected = self.data[i].el.getAttribute('selected');
-                    }
-                } else {
+                if (! self.data[i].el) {
                     // Create element
                     self.data[i].el = document.createElement('div');
                     // Create from content
@@ -84,7 +198,9 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        const select = function (index) {
+        let props = ['title', 'selected', 'data-icon'];
+
+        const select = function(index) {
             // Make sure the index is a number
             index = parseInt(index);
             // Do not select tabs that does not exist
@@ -100,7 +216,20 @@ if (! lemonade && typeof (require) === 'function') {
 
         const init = function(selected) {
             let tabs = [];
+
             for (let i = 0; i < self.data.length; i++) {
+                // Extract meta information from the DOM
+                if (props) {
+                    props.forEach((prop) => {
+                        let short = prop.replace('data-', '');
+                        if (! self.data[i][short]) {
+                            let ret = self.data[i].el.getAttribute(prop);
+                            if (ret != null) {
+                                self.data[i][short] = ret;
+                            }
+                        }
+                    });
+                }
                 // Create tabs object
                 tabs[i] = {
                     title: self.data[i].title,
@@ -109,26 +238,68 @@ if (! lemonade && typeof (require) === 'function') {
                 if (self.data[i].selected) {
                     selected = i;
                 }
+                if (self.data[i].icon) {
+                    tabs[i].icon = self.data[i].icon;
+                }
 
-                self.root.appendChild(self.data[i].el)
+                self.root.appendChild(self.data[i].el);
             }
+
             // Create headers
             self.tabs = tabs;
+
             // Default selected
             if (typeof(selected) !== 'undefined') {
                 self.selected = selected;
             }
-            // Add create new tab button
-            if (createButton) {
-                self.headers.appendChild(createButton);
+
+            if (props) {
+                // Add create new tab button
+                if (createButton) {
+                    self.headers.appendChild(createButton);
+                }
+                // Add sorting
+                sorting(self.el.firstChild.firstChild, {
+                    ondrop: (el, fromIndex, toIndex) => {
+                        // Remove the item from its original position
+                        const [movedItem] = self.data.splice(fromIndex, 1);
+                        // Insert it into the new position
+                        self.data.splice(toIndex, 0, movedItem);
+                        // Make sure correct order
+                        for (let i = 0; i < self.data.length; i++) {
+                            self.root.appendChild(self.data[i].el);
+                        }
+                        // Select new position
+                        self.selected = toIndex;
+                        // Dispatch event
+                        Dispatch.call(self, self.onchangeposition, 'changeposition', {
+                            instance: self,
+                            fromIndex: fromIndex,
+                            toIndex: toIndex,
+                        });
+                    }
+                })
             }
+
+            props = null;
         }
 
-        self.onload = function () {
-            init(self.selected || 0);
+        const create = function() {
+            // Create a new item
+            self.create({ title: 'Untitled' }, null, true);
         }
 
-        self.keydown = function(e, s) {
+        const open = function(e) {
+            if (e.target.tagName === 'LI') {
+                // Avoid select something already selected
+                let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
+                if (index !== self.selected) {
+                    self.selected = index;
+                }
+            }
+        }
+
+        const keydown = function(e, s) {
             let index = null;
             if (e.key === 'Enter') {
                 self.click(e, s);
@@ -150,14 +321,32 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.open = function (e) {
-            if (e.target.tagName === 'LI') {
-                // Avoid select something already selected
-                let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
-                if (index !== self.selected) {
-                    self.selected = index;
-                }
+        onload(() => {
+            if (template) {
+                extract(self.root, self);
+            }
+
+            init(self.selected || 0);
+        })
+
+        onchange((property) => {
+            if (property === 'selected') {
+                select(self.selected);
+
+                Dispatch.call(self, self.onopen, 'open', {
+                    instance: self,
+                    selected: self.selected,
+                });
+
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: self.selected,
+                });
             }
+        })
+
+        self.open = function (index) {
+            self.selected = index;
         }
 
         self.create = function(item, position, select) {
@@ -165,6 +354,17 @@ if (! lemonade && typeof (require) === 'function') {
             if (typeof(item) !== 'object') {
                 console.error('Item must be an object');
             } else {
+
+                let ret = Dispatch.call(self, self.onbeforecreate, 'beforecreate', {
+                    instance: self,
+                    item: item,
+                    position: position,
+                });
+
+                if (ret === false) {
+                    return false;
+                }
+
                 // Create DOM
                 item.el = document.createElement('div');
                 // Create from content
@@ -188,30 +388,27 @@ if (! lemonade && typeof (require) === 'function') {
                 } else {
                     init(self.selected);
                 }
-            }
-        }
-
-        self.click = function() {
-            // Create a new item
-            self.create({ title: 'Untitled' }, null, true);
-        }
 
-        self.onchange = function (property) {
-            if (property === 'selected') {
-                select(self.selected);
+                self.tabs.forEach(item => {
+                    item.el.setAttribute('draggable', 'true');
+                })
 
-                Dispatch.call(self, 'onopen', self, self.selected);
+                Dispatch.call(self, self.oncreate, 'create', {
+                    instance: self,
+                    item: item,
+                    position: position,
+                });
             }
         }
 
         self.allowCreate = !! self.allowCreate;
 
-        return `<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
+        return render => render`<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
             <div role="tabs" class="lm-tabs-headers">
-                <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.open" onkeydown="self.keydown" onfocusin="self.open"><li class="lm-tab" tabindex="0" role="tab">{{self.title}}</li></ul>
-                <div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-tab material-icons" role="insert-tab" onclick="self.click">add</div>
+                <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="${open}" onkeydown="${keydown}" onfocusin="${open}"><li class="lm-tab" tabindex="0" role="tab" data-icon="{{self.icon}}">{{self.title}}</li></ul>
+                <div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-button" role="insert-tab" onclick="${create}">add</div>
             </div>
-            <div :ref="self.root" class="lm-tabs-content"></div>
+            <div :ref="self.root" class="lm-tabs-content">${template}</div>
         </div>`
     }
 

package/dist/style.css

@@ -1,78 +1,104 @@
+.lm-tabs[data-position="bottom"] {
+    display: flex;
+    justify-content: center;
+    flex-direction: column-reverse;
+}
+
 .lm-tabs .lm-tabs-content > div {
-  padding: 6px;
+    padding: 15px 5px;
 }
 
 .lm-tabs .lm-tabs-headers {
-  display: flex;
-  align-items: center;
-  width: 100%;
+    display: flex;
+    align-items: center;
+    width: 100%;
 }
 
 .lm-tabs[data-position="center"] .lm-tabs-headers {
-  margin: 0 auto;
-  justify-content: center;
+    margin: 0 auto;
+    justify-content: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul {
-  list-style-type: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  align-items: center;
+    list-style-type: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    align-items: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li {
-  cursor: pointer;
-  user-select: none;
-  padding: 4px 24px;
-  border: 1px solid #ccc;
-  background-position: center;
-  transition: background 0.8s;
+    cursor: pointer;
+    user-select: none;
+    padding: 4px 24px;
+    border: 1px solid #ccc;
+    background-position: center;
+    transition: background 0.8s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li.selected {
-  background-color: #eee;
-  color: #000;
+    background-color: #eee;
+    color: #000;
+}
+
+.lm-tabs .lm-tabs-headers > ul > li[data-icon]:before {
+    content: attr(data-icon);
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    color: var(--lm-icon-color, #777);
+    margin-bottom: 5px;
 }
 
 .lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:first-of-type {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:last-of-type {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:not(:first-child) {
-  border-left: 1px solid transparent;
+    border-left: 1px solid transparent;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:hover {
-  background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
+    background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:active {
-  background-color: #ddd;
-  background-size: 100%;
-  transition: background 0s;
+    background-color: #ddd;
+    background-size: 100%;
+    transition: background 0s;
 }
 
 .lm-tabs .lm-tabs-content > div {
-  display: none;
+    display: none;
 }
 
 .lm-tabs .lm-tabs-content > div.selected {
-  display: block;
+    display: block;
 }
 
-.lm-tabs-insert-tab {
-  margin-left: 5px;
-  color: #555;
-  cursor: pointer;
+.lm-tabs-insert-button {
+    margin-left: 5px;
+    color: #555;
+    cursor: pointer;
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
 }
 
-.lm-tabs div[data-visible='false'] {
-  display: none;
-}
+.lm-tabs div[data-visible="false"] {
+    display: none;
+}

package/package.json

@@ -13,8 +13,8 @@
         "tabs js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.3"
+        "lemonadejs": "^5.2.0"
     },
     "main": "dist/index.js",
-    "version": "2.3.0"
+    "version": "5.2.0"
 }