@finqu/cool 1.0.0

package/js/index.umd.js

@@ -0,0 +1,21 @@
+import Common from './src/common';
+import Popover from './src/popover.js';
+import Select from './src/select';
+import Dropdown from './src/dropdown';
+import Tooltip from './src/tooltip';
+import SectionTabs from './src/section-tabs';
+import Collapse from './src/collapse';
+import Toast from './src/toast';
+import Dialog from './src/dialog';
+
+export default {
+	Common,
+	Popover,
+	Select,
+	Dropdown,
+	Tooltip,
+	SectionTabs,
+	Collapse,
+	Toast,
+	Dialog
+}

package/js/src/abstract-ui-component.js

@@ -0,0 +1,70 @@
+export default class AbstractUIComponent {
+
+	// Init callback
+    onInit() {
+
+        let onInit = this.opts.onInit;
+
+        if (typeof onInit === 'function') {
+
+            onInit.call(this.el);
+        }
+    }
+
+    // Update callback
+    onUpdate() {
+
+        let onUpdate = this.opts.onUpdate;
+
+        if (typeof onUpdate === 'function') {
+
+            onUpdate.call(this.el);
+        }
+    }
+
+    // Destroy callback
+    onDestroy() {
+
+        let onDestroy = this.opts.onDestroy;
+
+        if (typeof onDestroy === 'function') {
+
+            onDestroy.call(this.el);
+        }
+    }
+
+    // Show callback
+    onShow() {
+
+        let onShow = this.opts.onShow;
+
+        if (typeof onShow === 'function') {
+
+            onShow.call(this.el);
+        }
+    }
+
+    // Close callback
+    onClose() {
+
+        let onClose = this.opts.onClose;
+
+        if (typeof onClose === 'function') {
+
+            onClose.call(this.el);
+        }
+    }
+
+    // Debug log
+    log(...args) {
+
+    	if (this.debug) {
+
+            if (typeof this.debug === 'function') {
+                this.debug(...args);
+            } else {
+    	    	console.log(...args);
+            }
+    	}
+    }
+}

package/js/src/collapse.js

@@ -0,0 +1,258 @@
+import 'jquery';
+import { debounce } from './util/index';
+import AbstractUIComponent from './abstract-ui-component';
+
+const NAME = 'coolCollapse';
+const DATA_KEY = 'plugin_coolCollapse';
+
+class Collapse extends AbstractUIComponent {
+
+    constructor(el, opts) {
+
+        super();
+
+        this.opts = {};
+
+        if (window.Cool.settings.collapse) {
+
+            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.dialog, 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.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.$target = this.$el.data('target') ? $(document).find(this.$el.data('target')) : $(document).find(this.opts.target);
+        this.expanded = this.$el.attr('aria-expanded') == 'true' ? true : false;
+
+        if (this.$target.length) {
+
+            this.targetHeight = this.$target.height();
+            this.$container = this.$target.closest('.section-collapse');
+            this.$indicator = $(document).find('[data-collapse-indicator="' + this.$el.data('target') + '"]');
+
+        } else {
+
+            this.$target = $(this.$el).parent().find('.collapse');
+            this.targetHeight = this.$target.height();
+            this.$container = this.$target.closest('.section-collapse');
+            this.$indicator = $(this.$el).parent().find('[data-collapse-indicator]');
+        }
+
+        this.log(this.$el);
+        this.log(this.$target);
+        this.log(this.$container);
+        this.log(this.$indicator);
+        this.log('Expanded: '+this.expanded);
+        this.log('Target height: '+this.targetHeight+'px');
+    }
+
+    // Bind events that trigger methods
+    bindEvents() {
+
+        this.$el.on('click'+'.'+this.name, (e) => {
+
+            if (this.expanded) {
+                this.close();
+            } else {
+                this.show();
+            }
+        });
+
+        $(window).on('resize', debounce(() => {
+
+            if (this.$target.length) {
+
+                this.targetHeight = this.$target.height();
+                this.log('Target height: '+this.targetHeight+'px');
+            }
+        }, 250));
+    }
+
+    // Unbind events that trigger methods
+    unbindEvents() {
+
+        this.$el.off('.'+this.name);
+    }
+
+    // Which transition
+    whichTransitionEvent() {
+
+        let el = document.createElement('text-transition');
+        let transEndEventNames = {
+            'WebkitTransition': 'webkitTransitionEnd', // Saf 6, Android Browser
+            'MozTransition': 'transitionend', // only for FF < 15
+            'transition': 'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+
+        };
+
+        for (let t in transEndEventNames) {
+
+            if (el.style[t] !== undefined) {
+                return transEndEventNames[t];
+            }
+        }
+    }
+
+    // Show
+    show() {
+
+        this.$target.removeClass('collapse visible');
+        this.$target.addClass('collapsing');
+
+        if (this.$el.is('button')) {
+            this.$el.attr('disabled', true);
+        }
+
+        if (this.$container.length) {
+            this.$container.addClass('visible');
+        }
+
+        this.$target.css('height');
+        this.$target.css('height', this.targetHeight);
+
+        if (this.$indicator.length) {
+            this.$indicator.addClass('visible');
+        }
+
+        this.$target.one(this.whichTransitionEvent(), () => {
+
+            this.$target.removeClass('collapsing');
+
+            if (this.$el.is('button')) {
+                this.$el.attr('disabled', false);
+            }
+
+            this.$target.removeAttr('style');
+            this.$target.addClass('collapse visible');
+            this.$el.attr('aria-expanded', true);
+            this.$target.css('height', 'auto');
+            this.expanded = true;
+        });
+
+        this.onShow();
+    }
+
+    // Close
+    close() {
+
+        this.$target.removeClass('collapse visible');
+        this.$target.addClass('collapsing');
+
+        if (this.$el.is('button')) {
+            this.$el.attr('disabled', true);
+        }
+
+        if (this.$container.length) {
+            this.$container.removeClass('visible');
+        }
+
+        this.$target.css('height', this.$target.height());
+
+        setTimeout(() => {
+            this.$target.css('height', 0);
+        }, 10);
+
+        if (this.$indicator.length && this.$indicator.hasClass('visible')) {
+            this.$indicator.removeClass('visible');
+        }
+
+        this.$target.one(this.whichTransitionEvent(), () => {
+
+            this.$target.removeClass('collapsing');
+
+            if (this.$el.is('button')) {
+                this.$el.attr('disabled', false);
+            }
+
+            this.$target.removeAttr('style');
+            this.$target.addClass('collapse');
+            this.$el.attr('aria-expanded', false);
+            this.expanded = false;
+        });
+
+        this.onClose();
+    }
+
+    static _jQueryInterface(config) {
+
+        return this.each(function() {
+
+            let data = $(this).data(DATA_KEY);
+            const _config = typeof config === 'object' && config;
+
+            if (!data) {
+                data = new Collapse(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] = Collapse._jQueryInterface;
+    $.fn[NAME].Constructor = Collapse;
+
+    $.fn[NAME].noConflict = () => {
+
+      $.fn[NAME] = JQUERY_NO_CONFLICT
+
+      return Collapse._jQueryInterface
+    }
+
+    $.fn[NAME].defaults = {
+        target: null,
+        onInit: null,
+        onUpdate: null,
+        onDestroy: null,
+        onShow: null,
+        onClose: null,
+        debug: false
+    }
+}
+
+export default Collapse;

package/js/src/common.js

@@ -0,0 +1,280 @@
+import 'jquery';
+import PerfectScrollbar from './util/perfect-scrollbar';
+import './util/animate-css';
+
+window.Cool = window.Cool || {};
+window.Cool.settings = window.Cool.settings || {};
+
+class Common {
+
+	static initialize(opts) {
+
+        // There's an error if opts is not defined
+        opts = opts || {};
+
+        // Save settings for later use
+        window.Cool.settings = opts;
+
+        // Init plugins
+        $('[data-toggle="popover"]').coolPopover(opts.popover);
+        $('[data-toggle="select"]').coolSelect(opts.select);
+        $('[data-toggle="dropdown"]').coolDropdown(opts.dropdown);
+        $('[data-toggle="tooltip"]').coolTooltip(opts.tooltip);
+        $('[data-toggle="collapse"]').coolCollapse(opts.collapse);
+        $('[data-toggle="section-tabs"]').coolSectionTabs(opts.sectionTabs);
+        $('body').coolToast(opts.toast);
+        $('body').coolDialog(opts.dialog);
+
+        // Dom ready
+		$('html').addClass('dom-ready');
+
+        // Input group focus in
+		$(document).on('focus', '.form-control', function () {
+
+            if (!$(this).hasClass('disabled') && $(this).not(':disabled') && !$(this).attr('readonly')) {
+
+                let $inputGroup = $(this).closest('.input-group');
+
+                if (!$inputGroup.hasClass('input-group-focus')) {
+                    $inputGroup.addClass('input-group-focus');
+                }
+            }
+        });
+
+        // Input group focus out
+        $(document).on('blur', '.form-control', function () {
+
+            if (!$(this).hasClass('disabled') && $(this).not(':disabled') && !$(this).attr('readonly')) {
+
+                let $inputGroup = $(this).closest('.input-group');
+
+                if ($inputGroup.hasClass('input-group-focus')) {
+                    $inputGroup.removeClass('input-group-focus');
+                }
+            }
+        });
+
+        // Custom Form group
+        $('.form-label-group').each(function(i, formLabelGroup) {
+
+            let $formLabelGroup = $(formLabelGroup);
+
+            $formLabelGroup.find('input').on('blur input change', function () {
+
+                let val = $(this).val();
+
+                if (val) {
+                    $(formLabelGroup).addClass('label-on-top');
+                } else {
+                    $(formLabelGroup).removeClass('label-on-top');
+                }
+
+            }).trigger('change');
+        });
+
+        // Table actions
+        $.each($('.table'), function() {
+
+            if ($(this).find('[data-table-link], [data-table-btn]').length && !$(this).hasClass('table-hover')) {
+                $(this).addClass('table-hover');
+            }
+        });
+
+        $(document).on('click', '[data-table-link]', function(e) {
+
+            let $container = $(this).parents('table, .table');
+            let href = $(this).data('tableLink');
+            let target = $(e.target);
+            let exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
+            let linkDisabled = false;
+
+            $.each(exceptions, function(item) {
+
+                if (target.is(item) || (item == 'a' && target.parent().is(item))) {
+                    linkDisabled = true;
+                }
+            });
+
+            if ($container.hasClass('bulk-actions-active')) {
+                linkDisabled = true;
+            }
+
+            if (target.is('td, .td, img') && !linkDisabled) {
+
+                if (e.ctrlKey || e.metaKey) {
+
+                    window.open(href, '_blank');
+
+                } else {
+
+                    window.location.href = href;
+                }
+
+            } else {
+
+                return;
+            }
+        });
+
+        $(document).on('click', '[data-table-btn]', function(e) {
+
+            let $container = $(this).parents('table, .table');
+            let $self = $(this);
+            let btn = $(this).data('tableButton');
+            let target = $(e.target);
+            let exceptions = ['input', 'button', 'a', 'label', 'td.col-select'];
+            let btnDisabled = false;
+
+            if (!btn) {
+
+                btn = $self.find('button')[0];
+
+                if (!btn) {
+                    return;
+                }
+            }
+
+            $.each(exceptions, function(item) {
+
+                if (target.is(item) || (item == 'a' && target.parent().is(item))) {
+                    btnDisabled = true;
+                }
+            });
+
+            if ($container.hasClass('bulk-actions-active')) {
+                btnDisabled = true;
+            }
+
+            if (target.is('td, .td, img') && !btnDisabled) {
+
+                $(btn).click();
+
+            } else {
+
+                return;
+            }
+        });
+
+        // Force select element unfocus after change
+        $('select').on('change', function() {
+            $(this).blur();
+        });
+
+        // Tabs
+        $('.tab-toggler').on('click', function(e) {
+
+            e.stopPropagation();
+
+            $(this).parent().toggleClass('open');
+        });
+
+        $(document).on('click', function() {
+
+            $('.tabs-container').removeClass('open');
+        });
+
+        // Sidebar togglers
+        $('.sidebar-left-toggler').on('click', function(e) {
+
+            e.stopPropagation();
+
+            $(this).toggleClass('open');
+            $('body').toggleClass('sidebar-left-open');
+        });
+
+        $('.sidebar-right-toggler').on('click', function(e) {
+
+            e.stopPropagation();
+
+            $(this).toggleClass('open');
+            $('body').toggleClass('sidebar-right-open');
+        });
+
+        // Sidebar scroll
+        $('.sidebar-content .ps__thumb-y').mousedown(function() {
+            $(this).parent().parent().addClass('ps-mousedown-scroll');
+        });
+
+        $(document).mouseup(function() {
+
+            if ($('.sidebar-content').hasClass('ps-mousedown-scroll')) {
+                $('.sidebar-content').removeClass('ps-mousedown-scroll');
+            }
+        });
+
+        // Sidebar left scroll
+        let $sidebarLeft = $('.sidebar-left');
+        let $sidebarLeftContent = $sidebarLeft.find('.sidebar-content');
+
+        if ($sidebarLeftContent.length) {
+
+            let sidebarLeftScroll = new PerfectScrollbar($sidebarLeftContent[0], {
+                wheelSpeed: 2,
+                wheelPropagation: true,
+                minScrollbarLength: 20,
+                suppressScrollX: true
+            });
+        }
+
+        // Sidebar tabs
+        let $sidebarTabs = $(document).find('.sidebar-tab');
+
+        if ($sidebarTabs.length) {
+
+            $.each($sidebarTabs, function(i, el) {
+
+                let scrollContainer = $(el).find('.tab-content');
+
+                const sidebarTabsScroll = new PerfectScrollbar(scrollContainer[0], {
+                    wheelSpeed: 2,
+                    wheelPropagation: true,
+                    minScrollbarLength: 20,
+                    suppressScrollX: true
+                });
+            });
+
+            $('[name="sidebar-tab-select"]').on('click', function() {
+
+                let val = $(this).val();
+                let $tab = $('#sidebar-tab-'+val);
+
+                $sidebarTabs.not($tab).removeClass('active');
+                $tab.addClass('active');
+
+                $('[name="sidebar-tab-select"]').not($(this)).removeClass('active');
+                $(this).addClass('active');
+
+                if ($tab[0] == $sidebarTabs.first()[0]) {
+
+                    $sidebarTabs.not($tab).find('.tab-content').css({
+                        'transform': 'translate3d(100%, 0px, 0px)'
+                    });
+
+                } else if ($tab[0] == $sidebarTabs.last()[0]) {
+
+                    $sidebarTabs.not($tab).find('.tab-content').css({
+                        'transform': 'translate3d(-100%, 0px, 0px)'
+                    });
+
+                } else {
+
+                    $sidebarTabs.first().not($tab).find('.tab-content').css({
+                        'transform': 'translate3d(-100%, 0px, 0px)'
+                    });
+
+                    $sidebarTabs.last().not($tab).find('.tab-content').css({
+                        'transform': 'translate3d(100%, 0px, 0px)'
+                    });
+                }
+
+                $tab.find('.tab-content').css({
+                    'transform': 'none'
+                });
+            });
+        }
+	}
+}
+
+window.Cool.initialize = Common.initialize;
+
+export default Common;