@finqu/cool 1.0.0

package/js/src/section-tabs.js

@@ -0,0 +1,204 @@
+import 'jquery';
+import { debounce } from './util/index';
+import AbstractUIComponent from './abstract-ui-component';
+
+const NAME = 'coolSectionTabs';
+const DATA_KEY = 'plugin_coolSectionTabs';
+
+class SectionTabs extends AbstractUIComponent {
+
+    constructor(el, opts) {
+
+        super();
+
+        this.opts = {};
+
+        if (window.Cool.settings.sectionTabs) {
+
+            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.sectionTabs, opts);
+
+        } else {
+
+            $.extend(true, this.opts, $.fn[NAME].defaults, opts);
+        }
+
+        this.el = el;
+        this.debug = this.opts.debug;
+        this.init();
+    }
+
+    // Init plugin
+    init() {
+
+        this.buildCache();
+        this.bindEvents();
+        this.checkForChanges();
+        this.onInit();
+    }
+
+    // Remove plugin instance completely
+    destroy() {
+
+        this.unbindEvents();
+        this.$el.removeData(DATA_KEY);
+        this.onDestroy();
+    }
+
+    // Update plugin data
+    update() {
+
+        this.buildCache();
+        this.onUpdate();
+    }
+
+    // Cache DOM nodes for performance
+    buildCache() {
+
+        this.$el = $(this.el);
+        this.$dropdownContainer = this.$el.find('.dropdown-container');
+        this.$dropdownList = this.$el.find('.dropdown-list');
+        this.tabsCount = this.$el.find('> .tab-item').length;
+        this.tabs = this.$el.find('> .tab-item:visible');
+
+        $.each(this.tabs, function(i, el) {
+            $(el).data('width', $(el).outerWidth(true));
+        });
+
+        this.log(this.$el);
+        this.log(this.$dropdownContainer);
+        this.log(this.$dropdownList);
+        this.log(this.tabsCount);
+    }
+
+    // Bind events that trigger methods
+    bindEvents() {
+
+        $(window).on('resize', debounce(() => {
+            this.checkForChanges();
+        }, 250));
+    }
+
+    // Unbind events that trigger methods
+    unbindEvents() {
+
+        this.$el.off('.'+this._name);
+    }
+
+    // Move to list
+    moveToList(el) {
+
+        $(el).insertBefore(this.$dropdownContainer);
+
+        this.checkForChanges();
+    }
+
+    // Move to dropdown
+    moveToDropdown(el) {
+
+        $(el).appendTo(this.$dropdownList);
+
+        this.checkForChanges();
+    }
+
+    // Overflow status
+    overflowStatus() {
+
+        if (this.$el[0].offsetWidth < this.$el[0].scrollWidth) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    // CheckForChanges
+    checkForChanges() {
+
+        let dropdownItems = this.$dropdownList.children();
+        let moveableTabs = this.$el.find('> .tab-item').not(this.$dropdownContainer);
+        let tabs = this.$el.find('> .tab-item:visible');
+        let usedSpace = 0;
+
+        $.each(tabs, function(i, el) {
+            usedSpace += $(el).outerWidth(true);
+        });
+
+        let freeSpace = this.$el[0].offsetWidth - usedSpace;
+
+        if (dropdownItems.length > 0) {
+
+            if (!this.$dropdownContainer.hasClass('visible')) {
+                this.$dropdownContainer.addClass('visible');
+            }
+
+        } else {
+
+            if (this.$dropdownContainer.hasClass('visible')) {
+                this.$dropdownContainer.removeClass('visible');
+            }
+        }
+
+        if (this.overflowStatus() == true) {
+
+            if (moveableTabs.length > 0) {
+                this.moveToDropdown(moveableTabs.last());
+            }
+
+        } else {
+
+            if (dropdownItems.length > 0) {
+
+                if (freeSpace > dropdownItems.last().data('width')) {
+                    this.moveToList(dropdownItems.last());
+                }
+            }
+        }
+    }
+
+    static _jQueryInterface(config) {
+
+        return this.each(function() {
+
+            let data = $(this).data(DATA_KEY);
+            const _config = typeof config === 'object' && config;
+
+            if (!data) {
+                data = new SectionTabs(this, _config);
+                $(this).data(DATA_KEY, data);
+            }
+
+            if (typeof config === 'string') {
+
+                if (typeof data[config] === 'undefined') {
+                    throw new TypeError(`No method named "${config}"`)
+                }
+
+                data[config]()
+            }
+        });
+    }
+}
+
+if (typeof $ !== 'undefined') {
+
+    // jQuery
+    const JQUERY_NO_CONFLICT = $.fn[NAME];
+
+    $.fn[NAME] = SectionTabs._jQueryInterface;
+    $.fn[NAME].Constructor = SectionTabs;
+
+    $.fn[NAME].noConflict = () => {
+
+        $.fn[NAME] = JQUERY_NO_CONFLICT
+
+        return SectionTabs._jQueryInterface
+    }
+
+    $.fn[NAME].defaults = {
+        onInit: null,
+        onUpdate: null,
+        onDestroy: null,
+        debug: false
+    }
+}
+
+export default SectionTabs;