@finqu/cool 1.0.0

package/js/src/select.js

@@ -0,0 +1,832 @@
+import 'jquery';
+import PerfectScrollbar from './util/perfect-scrollbar';
+import { debounce, touchEvents } from './util/index';
+import AbstractUIComponent from './abstract-ui-component';
+
+const NAME = 'coolSelect';
+const DATA_KEY = 'plugin_coolSelect';
+
+class Select extends AbstractUIComponent {
+
+    constructor(el, opts) {
+
+        super();
+
+        this.opts = {};
+
+        if (window.Cool.settings.select) {
+
+            $.extend(true, this.opts, $.fn[NAME].defaults, window.Cool.settings.select, opts);
+
+        } else {
+
+            $.extend(true, this.opts, $.fn[NAME].defaults, opts);
+        }
+
+        this.el = el;
+        this.debug = this.opts.debug;
+        this.init();
+    }
+
+    // Init plugin
+    init() {
+
+        $.when(this.buildCache()).then(() => {
+
+            this.buildScroll();
+            this.bindEvents();
+
+            if (this.data[this.name].length > 0) {
+                this.setData();
+            }
+
+            this.onInit();
+        });
+    }
+
+    // Remove plugin instance completely
+    destroy() {
+
+        this.unbindEvents();
+        this.$el.removeData(DATA_KEY);
+        this.onDestroy();
+    }
+
+    // Update plugin data
+    update() {
+
+        this.buildCache();
+        this.bindEvents();
+        this.onUpdate();
+    }
+
+    // Cache DOM nodes for performance
+    buildCache() {
+
+        this.$el = $(this.el);
+        this.$selectHeader = this.$el.find('.select-header');
+        this.$selectIconContainer = this.$selectHeader.find('.select-icon');
+        this.name = this.$el.data('name') ? this.$el.data('name') : this.opts.name;
+        this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
+        this.items = this.$el.data('items') ? this.$el.data('items') : this.opts.items;
+        this.data = {}
+        this.data[this.name] = [];
+        this.searchData = [];
+        this.searchApi = this.$el.data('searchApi') ? this.$el.data('searchApi') : this.opts.searchApi;
+        this.type = this.$el.data('type') ? this.$el.data('type') : this.opts.type;
+        this.contentOpen = false;
+
+        if (this.$el.data('setData') && this.$el.data('setData') != '') {
+            this.data = this.$el.data('setData');
+        }
+
+        if (this.$el.find('.select-search')) {
+            this.showSearch = true;
+        } else {
+            this.showSearch = this.$el.data('showSearch') ? this.$el.data('showSearch') : this.opts.showSearch;
+        }
+
+        if (this.$el.find('.select-footer')) {
+            this.showFooter = true;
+        } else {
+            this.showFooter = this.$el.data('showFooter') ? this.$el.data('showFooter') : this.opts.showFooter;
+        }
+
+        if (this.items.length) {
+
+            let items = this._renderItemList(this.items);
+
+            this.$select = $(`
+                <div class="select-content">
+
+                    ${this._renderSearch()}
+
+                    <div class="select-scrollable-content">${items}</div>
+
+                    ${this._renderFooter()}
+
+                </div>
+            `);
+
+            this.$el.append(this.$select);
+
+            this.$scrollableContent = this.$select.find('.select-scrollable-content') ? this.$select.find('.select-scrollable-content') : false;
+            this.$selectItems = this.$select.find('.select-item');
+            this.$selectLabels = this.$select.find('[data-label]');
+
+            if (this.showSearch) {
+
+                this.$searchContainer = this.$select.find('.select-search');
+                this.$searchInput = this.$select.find('[name="select-search"]');
+                this.$searchIconContainer = this.$select.find('.select-search-icon');
+                this.$clearSearchButton = this.$select.find('[data-clear-search]');
+            }
+
+            if (this.showFooter) {
+
+                this.$footerContainer = this.$select.find('.select-footer');
+                this.$closeButton = this.$select.find('[data-select-close]');
+            }
+
+            $.each(this.$selectLabels, function(i, el) {
+
+               this.searchData.push({
+                    id: i,
+                    val: $(el).text().trim()
+               });
+            });
+
+            this.log(this.$el);
+            this.log(this.$select);
+            this.log(this.$scrollableContent);
+            this.log('Name: '+this.name);
+            this.log('Show search: '+this.showSearch);
+            this.log('Show footer: '+this.showFooter);
+            this.log('Scroll content height: '+this.scrollContentHeight+'px');
+            this.log(this.items);
+            this.log(this.searchData);
+
+        } else {
+
+            this.$select = this.$el.find('.select-content');
+            this.$scrollableContent = this.$select.find('.select-scrollable-content');
+            this.$selectItems = this.$select.find('.select-item');
+            this.$selectLabels = this.$select.find('[data-label]');
+
+            if (this.showSearch) {
+                this.$searchContainer = this.$select.find('.select-search');
+                this.$searchInput = this.$select.find('[name="select-search"]');
+                this.$searchIconContainer = this.$select.find('.select-search-icon');
+                this.$clearSearchButton = this.$select.find('[data-clear-search]');
+            }
+
+            if (this.showFooter) {
+                this.$footerContainer = this.$select.find('.select-footer');
+                this.$closeButton = this.$select.find('[data-select-close]');
+            }
+
+            $.each(this.$selectLabels, (i, el) => {
+
+               this.searchData.push({
+                    id: i,
+                    val: $(el).text().trim()
+               });
+            });
+
+            this.log(this.$el);
+            this.log(this.$select);
+            this.log(this.$scrollableContent);
+            this.log('Name: '+this.name);
+            this.log('Show search: '+this.showSearch);
+            this.log('Show footer: '+this.showFooter);
+            this.log('Scroll content height: '+this.scrollContentHeight+'px');
+            this.log(this.items);
+            this.log(this.searchData);
+
+            return true;
+        }
+    }
+
+    // Build scroll
+    buildScroll() {
+
+        if (this.$scrollableContent.length > 0) {
+
+            let scrollContentHeight = this.scrollContentHeight;
+
+            if (this.showSearch) {
+                scrollContentHeight = scrollContentHeight - (this.$searchContainer.outerHeight(true) || 0);
+            }
+
+            if (this.showFooter) {
+                scrollContentHeight = scrollContentHeight - (this.$footerContainer.outerHeight(true) || 0);
+            }
+
+            this.$scrollableContent.css({
+                'max-height': (scrollContentHeight - parseInt(this.$scrollableContent.css('marginTop'), 10) - parseInt(this.$scrollableContent.css('marginBottom'), 10)) +'px'
+            });
+
+            if (touchEvents()) {
+
+                this.$scrollableContent.css({
+                    'overflow-y': 'auto'
+                });
+
+            } else {
+
+                this.$scrollableContent.addClass('ps-dark');
+                this.scroll = new PerfectScrollbar(this.$scrollableContent[0], {
+                    wheelSpeed: 1,
+                    wheelPropagation: false,
+                    minScrollbarLength: 20,
+                    scrollYMarginOffset : -1,
+                    suppressScrollY: true,
+                    suppressScrollX: true,
+                });
+
+                if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
+
+                    this.$scrollableContent.addClass('ps-show-rail-y');
+                    this.scroll.settings.suppressScrollY = false;
+                }
+            }
+        }
+    }
+
+    // Bind events that trigger methods
+    bindEvents() {
+
+        let self = this;
+
+        this.$selectHeader.on('click'+'.'+NAME, () => {
+
+            if (this.contentOpen) {
+                this.close();
+            } else {
+                this.show();
+            }
+        });
+
+        this.$el.on('change'+'.'+NAME, 'input[type="checkbox"]', function() {
+
+            let val = $(this).val();
+
+            if (this.checked) {
+                self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
+            } else {
+                self.data[self.name] = self.data[self.name].filter(n => n != val);
+            }
+
+            self.onSelect(this);
+        });
+
+        this.$el.on('change'+'.'+NAME, 'input[type="radio"]', function() {
+
+            let val = $(this).val();
+
+            if (this.checked) {
+
+                self.data[self.name] = val;
+                self.$select.find('input[type="radio"]').not($(this)).prop('checked', false);
+                self.$select.find('input[type="radio"]').not($(this)).removeClass('checked');
+
+            } else {
+
+                self.data[self.name] = [];
+            }
+        });
+
+        this.$el.on('click'+'.'+NAME, 'input[type="radio"]', function() {
+
+            if ($(this).hasClass('checked')) {
+
+                self.data[plugin.name] = [];
+                $(this).prop('checked', false);
+                $(this).removeClass('checked');
+
+            } else {
+
+                $(this).addClass('checked');
+            }
+
+            self.onSelect(this);
+        });
+
+        if (this.scroll) {
+
+            this.$scrollableContent.find('.ps__thumb-y').mousedown(function() {
+                self.$scrollableContent.addClass('ps-mousedown-scroll');
+            });
+
+            $(document).mouseup(function() {
+
+                if (self.$scrollableContent.hasClass('ps-mousedown-scroll')) {
+                    self.$scrollableContent.removeClass('ps-mousedown-scroll');
+                }
+            });
+        }
+
+        if (this.showSearch) {
+
+            this.$searchInput.on('keydown'+'.'+NAME, debounce(function () {
+
+                self.searchString = $(this).val().trim();
+                self.search.call(self);
+
+            }, 250));
+
+            this.$searchInput.on('focusin'+'.'+NAME, function () {
+
+                self.$searchContainer.addClass('focused');
+            });
+
+            this.$searchInput.on('focusout'+'.'+NAME, function () {
+
+                self.$searchContainer.removeClass('focused');
+            });
+
+            this.$clearSearchButton.on('click'+'.'+NAME, function() {
+
+                if (self.searchString.length) {
+
+                    self.$searchInput.val('');
+                    self.searchString = '';
+
+                    self.search.call(self);
+
+                } else {
+
+                    return;
+                }
+            });
+        }
+
+        if (this.showFooter) {
+
+            this.$closeButton.on('click'+'.'+NAME, () => {
+
+                this.close();
+            });
+        }
+
+        $(document).on('touchstart click', function(e) {
+
+            if (!self.$el.is(e.target) && self.$el.has(e.target).length === 0 && self.contentOpen) {
+
+                self.close.call(self);
+            }
+        });
+    }
+
+    // Unbind events that trigger methods
+    unbindEvents() {
+
+        this.$el.off('.'+NAME);
+    }
+
+    // Get data
+    getData(data) {
+
+        if (data) {
+            return this.data[data];
+        } else {
+            return this.data;
+        }
+    }
+
+    // Set data
+    setData() {
+
+        let self = this;
+        let type = null;
+        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+        this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+
+        if (this.searchApi.length) {
+
+            let searchUrl = this.searchApi;
+            let itemCount = this.data[this.name].length;
+            let currentCount = 0;
+
+            this.data[this.name].forEach(function(value) {
+
+                searchUrl += encodeURIComponent('#'+value);
+                currentCount++;
+
+                if (currentCount !== itemCount) {
+                    searchUrl += '+';
+                }
+            });
+
+            $.ajax({
+                method: 'GET',
+                url: searchUrl
+            }).done(function(data) {
+
+                let items = data.map(function (item) {
+
+                    if (item.name) {
+                        let label = item.name;
+                    } else if (item.label) {
+                        let label = item.label;
+                    } else if (item.value) {
+                        let label = item.value;
+                    }
+
+                    return {
+                        id: item.id.toString(),
+                        label: label
+                    }
+                });
+
+                items = items.filter(function(item) {
+                    return self.data[self.name].indexOf(item.id) > -1;
+                });
+
+                let result = $(self._renderItemList(items));
+
+                $.when(self.$scrollableContent.append(result)).then(function() {
+
+                    if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
+
+                        self.scroll.update();
+                        self.scroll.settings.suppressScrollY = false;
+                        self.$scrollableContent.addClass('ps-show-rail-y');
+
+                    } else {
+
+                        self.scroll.update();
+                        self.scroll.settings.suppressScrollY = true;
+                        self.$scrollableContent.removeClass('ps-show-rail-y');
+                    }
+
+                    if (self.$select.find(':input[type="checkbox"]').length) {
+                        type = 'checkbox';
+                    } else if (self.$select.find(':input[type="radio"]').length) {
+                        type = 'radio';
+                    }
+
+                    if (type == 'checkbox') {
+
+                        self.data[self.name].forEach(function(value) {
+
+                            let $input = self.$select.find(':input').filter(function() { return this.value == value });
+
+                            $input.prop('checked', true);
+
+                            self.onSelect($input[0]);
+                        });
+
+                    } else if (type == 'radio') {
+
+                        let $input = self.$select.find(':input').filter(function() { return this.value == self.data[self.name] });
+
+                        $input.prop('checked', true);
+                        $input.addClass('checked');
+
+                        self.onSelect($input[0]);
+                    }
+                });
+            });
+
+        } else {
+
+            if (this.$select.find(':input[type="checkbox"]').length) {
+                type = 'checkbox';
+            } else if (this.$select.find(':input[type="radio"]').length) {
+                type = 'radio';
+            }
+
+            if (type == 'checkbox') {
+
+                this.data[this.name].forEach(function(value) {
+
+                    let $input = self.$select.find(':input').filter(function() { return this.value == value });
+
+                    $input.prop('checked', true);
+
+                    self.onSelect($input[0]);
+                });
+
+            } else if (type == 'radio') {
+
+                let $input = this.$select.find(':input').filter(function() { return this.value == self.data[self.name] });
+
+                $input.prop('checked', true);
+                $input.addClass('checked');
+
+                this.onSelect($input[0]);
+            }
+        }
+    }
+
+    // Search
+    search() {
+
+        let self = this;
+        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+        if (this.searchString.length) {
+
+            if (this.searchApi.length) {
+
+                this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
+
+                $.ajax({
+                    method: 'GET',
+                    url: this.searchApi + this.searchString
+                }).done(function(data) {
+
+                    let items = data.map(function (item) {
+                        return {
+                            id: item.id.toString(),
+                            label: item.name || item.label || item.value || null
+                        }
+                    });
+
+                    items = items.filter(function(item) {
+                        return !(self.data[self.name].indexOf(item.id) > -1);
+                    });
+
+                    // Remove 0 id from results
+                    items = items.filter(function(item) {
+                        return [0].indexOf(item.id) > -1;
+                    });
+
+                    let result = $(self._renderItemList(items));
+
+                    $.when(self.$scrollableContent.append(result)).then(function() {
+
+                        let faNameSpace = self.opts.faPro ? 'fal' : 'fas';
+
+                        self.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
+                        self.$searchIconContainer.attr('data-clear-search', 'true');
+
+                        if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
+
+                            self.scroll.update();
+                            self.scroll.settings.suppressScrollY = false;
+                            self.$scrollableContent.addClass('ps-show-rail-y');
+
+                        } else {
+
+                            self.scroll.update();
+                            self.scroll.settings.suppressScrollY = true;
+                            self.$scrollableContent.removeClass('ps-show-rail-y');
+                        }
+                    });
+                });
+
+            } else {
+
+                let results = this.searchData.filter(function(item) {
+                    return item.val.toLocaleLowerCase().indexOf(self.searchString.toLocaleLowerCase()) > -1;
+                });
+
+                this.$selectItems.removeClass('d-none');
+                this.$selectItems.removeClass('visible');
+
+                results.forEach(function(item) {
+                    $(self.$selectItems[item.id]).addClass('visible');
+                });
+
+
+
+                this.$selectItems.not('.visible').addClass('d-none');
+                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-times icon"></i>`);
+                this.$searchIconContainer.attr('data-clear-search', 'true');
+            }
+
+        } else {
+
+            if (this.searchApi.length) {
+
+                this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
+                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
+                this.$searchIconContainer.attr('data-clear-search', '');
+
+            } else {
+
+                this.$selectItems.removeClass('d-none');
+                this.$selectItems.removeClass('visible');
+                this.$searchIconContainer.html(`<i class="${faNameSpace} fa-search icon"></i>`);
+                this.$searchIconContainer.attr('data-clear-search', '');
+            }
+        }
+
+        if (this.scroll) {
+            this.scroll.update();
+        }
+
+        this.onUpdate();
+    }
+
+    // Show
+    show() {
+
+        if (this.$el.hasClass('show')) {
+            return;
+        }
+
+        let $otherSelects = $('.select.show');
+        let zindex = 1;
+        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+        if ($otherSelects.length) {
+            zindex = parseInt($otherSelects.first().css('z-index'), 10) + 2;
+        }
+
+        this.$el.css({
+            'max-height': (this.scrollContentHeight + this.$selectHeader.outerHeight(true))+'px'
+        });
+
+        this.$el.addClass('show');
+
+        if (!$otherSelects.length) {
+            zindex =  parseInt(this.$el.css('z-index'), 10) + 1;
+        }
+
+        this.$el.css({
+            'z-index': zindex
+        });
+
+        if (this.scroll && this.$scrollableContent.length) {
+
+            if (this.$scrollableContent[0].offsetHeight < this.$scrollableContent[0].scrollHeight) {
+                this.$scrollableContent[0].scrollTop = 1;
+                this.$scrollableContent[0].scrollTop = 0;
+            }
+        }
+
+        this.$selectIconContainer.html(`<i class="${faNameSpace} fa-angle-up icon"></i>`);
+
+        this.contentOpen = true;
+        this.onShow();
+    }
+
+    // Close
+    close() {
+
+        let self = this;
+        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+        this.$el.css('max-height', '');
+        this.$el.removeClass('show');
+
+        setTimeout(() => {
+            self.$el.removeAttr('style');
+        }, 300);
+
+        if (this.data[this.name].length > 0) {
+            this.$selectIconContainer.html(`<i class="${faNameSpace} fa-check text-green icon"></i>`);
+        } else {
+            this.$selectIconContainer.html(`<i class="${faNameSpace} fa-angle-down icon"></i>`);
+        }
+
+        this.contentOpen = false;
+        this.onClose();
+    }
+
+    onSelect(el) {
+
+        let onSelect = this.opts.onSelect;
+
+        if (typeof onSelect === 'function') {
+
+            onSelect.call(el);
+        }
+    }
+
+    _renderItemList(items) {
+
+        let html = '';
+
+        for (let i = 0; i < items.length; ++i) {
+
+            html += `
+
+                <div class="select-item">
+
+                    <div class="select-item-${this.type}">
+
+                        <div class="styled-${this.type}">">
+
+                            <input type="${this.type}">" id="select-${this.name}-${items[i].id}" value="${items[i].id}">
+
+                            <label for="select-${this.name}-${items[i].id}">
+
+                                <span class="radio-inner">
+                                    <svg viewBox="0 0 18 18">
+                                        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
+                                    </svg>
+                                </span>
+
+                                <span class="${this.type}">-label" data-label>
+                                    ${items[i].label}
+                                </span>
+
+                            </label>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            `;
+        }
+    }
+
+    _renderSearch() {
+
+        if (!this.showSearch) {
+            return '';
+        }
+
+        let faNameSpace = this.opts.faPro ? 'fal' : 'fas';
+
+        return `
+
+            <div class="select-search">
+
+                <div class="select-search-input">
+
+                    <input type="text" name="select-search" value="" placeholder="${this.opts.searchPlaceholder}">
+
+                </div>
+
+                <div class="select-search-icon">
+
+                    <i class="${faNameSpace} fa-search icon"></i>
+
+                </div>
+
+            </div>
+
+        `;
+    }
+
+    _renderFooter() {
+
+        if (!this.showFooter) {
+            return '';
+        }
+
+        return `
+
+            <div class="select-footer">
+
+                <button class="btn btn-primary" type="button" data-select-close>
+                    ${this.opts.btnCloseText}
+                </button>
+
+            </div>
+
+        `;
+    }
+
+    static _jQueryInterface(config) {
+
+        return this.each(function() {
+
+            let data = $(this).data(DATA_KEY);
+            const _config = typeof config === 'object' && config;
+
+            if (!data) {
+                data = new Select(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] = Select._jQueryInterface;
+    $.fn[NAME].Constructor = Select;
+
+    $.fn[NAME].noConflict = () => {
+
+        $.fn[NAME] = JQUERY_NO_CONFLICT
+
+        return Select._jQueryInterface
+    }
+
+    $.fn[NAME].defaults = {
+        name: '',
+        type: 'checkbox',
+        scrollContentHeight: 100,
+        faPro: false,
+        items: [],
+        showSearch: false,
+        showFooter: false,
+        searchApi: false,
+        onInit: null,
+        onUpdate: null,
+        onDestroy: null,
+        onShow: null,
+        onClose: null,
+        onSearch: null,
+        onSelect: null,
+        buildScroll: null,
+        searchPlaceholder: null,
+        btnCloseText: null,
+        debug: false
+    }
+}
+
+export default Select;