@finqu/cool 1.2.6 → 1.2.8

package/dist/js/cool.bundle.js

@@ -1,13 +1,13 @@
 /*!
-  * Cool UI v1.2.5 (https://finqu.fi)
-  * Copyright 2011-2019 Finqu Oy
+  * Cool UI v1.2.7 (https://finqu.fi)
+  * Copyright 2011-2020 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('jquery')) :
   typeof define === 'function' && define.amd ? define(['jquery'], factory) :
   (global = global || self, global.cool = factory());
-}(this, function () { 'use strict';
+}(this, (function () { 'use strict';
 
   /*!
    * perfect-scrollbar v1.4.0
@@ -1675,6 +1675,7 @@
     _proto.buildCache = function buildCache() {
       this.$el = $(this.el);
       this.$container = this.$el.data('container') ? $(this.$el.data('container')) : $(this.opts.container);
+      this.containerAutoDetect = this.$el.data('containerAutoDetect') ? this.$el.data('containerAutoDetect') : this.opts.containerAutoDetect;
       this.id = 'popover-' + this.generateUUID();
       this.animation = this.$el.data('animation') ? this.$el.data('animation') : this.opts.animation;
       this.animationIn = this.$el.data('animationIn') ? this.$el.data('animationIn') : this.opts.animationIn;
@@ -1685,6 +1686,10 @@
       this.placementChanged = false;
       this.title = this.$el.data('title') ? this.$el.data('title') : this.opts.title;
       this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
+
+      if (this.containerAutoDetect) {
+        this.$container = this.$el.offsetParent();
+      }
     } // Bind events that trigger methods
     ;
 
@@ -2109,6 +2114,7 @@
 
     $.fn[NAME].defaults = {
       container: '.content-inner',
+      containerAutoDetect: false,
       trigger: 'focus',
       placement: 'bottom',
       animation: true,
@@ -2233,6 +2239,7 @@
         _this3.data[_this3.name] = [];
         _this3.searchData = [];
         _this3.searchApi = _this3.$el.data('searchApi') ? _this3.$el.data('searchApi') : _this3.opts.searchApi;
+        _this3.searchRequest = null;
         _this3.type = _this3.$el.data('type') ? _this3.$el.data('type') : _this3.opts.type;
         _this3.contentOpen = false;
         _this3.searchPlaceholder = _this3.$el.data('search-placeholder') ? _this3.$el.data('search-placeholder') : _this3.opts.searchPlaceholder;
@@ -2262,13 +2269,13 @@
           _this3.data = _this3.$el.data('setData');
         }
 
-        if (typeof _this3.data[_this3.name].filter !== 'undefined' && self.itemsToExclude) {
+        if (_this3.data[_this3.name] !== 'undefined' && _this3.data[_this3.name].length > 0 && self.itemsToExclude) {
           _this3.data[_this3.name] = _this3.data[_this3.name].filter(function (item) {
             return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
           });
         }
 
-        if (typeof _this3.items.filter !== 'undefined' && self.itemsToExclude) {
+        if (_this3.items !== 'undefined' && _this3.items.lengths > 0 && self.itemsToExclude) {
           _this3.items = _this3.items.filter(function (item) {
             return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
           });
@@ -2291,10 +2298,12 @@
           if (!_this3.$select.length) {
             var items = _this3._renderItemList(_this3.items);
 
-            _this3.$select = $("\n                        <div class=\"select-content\">\n\n                            " + _this3._renderSearch() + "\n\n                            <div class=\"select-scrollable-content\">" + items + "</div>\n\n                            " + _this3._renderFooter() + "\n\n                        </div>\n                    ");
+            _this3.$select = $("\n                        <div class=\"select-content\">\n\n                            " + _this3._renderSearch() + "\n\n                            <div class=\"select-scrollable-content\"></div>\n\n                            " + _this3._renderFooter() + "\n\n                        </div>\n                    ");
 
             _this3.$el.append(_this3.$select);
 
+            _this3.$select.find('.select-scrollable-content').append(items);
+
             secondaryResolve();
           } else {
             secondaryResolve();
@@ -2607,11 +2616,27 @@
             item.id = item[self.primaryKeyword].toString();
             return item;
           });
+          var itemIds = items.map(function (item) {
+            return parseInt(item.id, 10);
+          }); // Remove value from data if it doesn't exist anymore
+
+          self.data[self.name] = self.data[self.name].filter(function (value) {
+            return itemIds.indexOf(parseInt(value, 10)) > -1;
+          });
+
+          if (self.data[self.name].length == 0) {
+            self.$selectIconContainer.html(self.selectIconDefault);
+          }
+
           items = items.filter(function (item) {
             return self.data[self.name].indexOf(item.id) > -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
           });
-          var result = $(self._renderItemList(items));
+
+          var result = self._renderItemList(items);
+
           $.when(self.$scrollableContent.append(result)).then(function () {
+            var $inputs = self.$scrollableContent.find(':input');
+
             if (self.$scrollableContent[0].offsetHeight < self.$scrollableContent[0].scrollHeight) {
               self.scroll.update();
               self.scroll.settings.suppressScrollY = false;
@@ -2622,22 +2647,22 @@
               self.$scrollableContent.removeClass('ps-show-rail-y');
             }
 
-            if (self.$select.find(':input[type="checkbox"]').length) {
+            if (self.$scrollableContent.find(':input[type="checkbox"]').length) {
               self.type = 'checkbox';
-            } else if (self.$select.find(':input[type="radio"]').length) {
+            } else if (self.$scrollableContent.find(':input[type="radio"]').length) {
               self.type = 'radio';
             }
 
             if (self.type == 'checkbox') {
               self.data[self.name].forEach(function (value) {
-                var $input = self.$select.find(':input').filter(function () {
+                var $input = $inputs.filter(function () {
                   return this.value == value;
                 });
                 $input.prop('checked', true);
                 self.onSelect($input[0]);
               });
             } else if (self.type == 'radio') {
-              var $input = self.$select.find(':input').filter(function () {
+              var $input = $inputs.filter(function () {
                 return this.value == self.data[self.name];
               });
               $input.prop('checked', true);
@@ -2652,22 +2677,35 @@
           });
         });
       } else {
-        if (this.$select.find(':input[type="checkbox"]').length) {
+        // Remove value from data if it doesn't exist anymore
+        var $inputs = this.$scrollableContent.find(':input');
+        var inputValues = $inputs.length > 0 ? $inputs.map(function () {
+          return parseInt(this.value, 10);
+        }).get() : [];
+        this.data[this.name] = this.data[this.name].filter(function (value) {
+          return inputValues.indexOf(parseInt(value, 10)) > -1;
+        });
+
+        if (this.data[this.name].length == 0) {
+          this.$selectIconContainer.html(this.selectIconDefault);
+        }
+
+        if (this.$scrollableContent.find(':input[type="checkbox"]').length) {
           this.type = 'checkbox';
-        } else if (this.$select.find(':input[type="radio"]').length) {
+        } else if (this.$scrollableContent.find(':input[type="radio"]').length) {
           this.type = 'radio';
         }
 
         if (this.type == 'checkbox') {
           this.data[this.name].forEach(function (value) {
-            var $input = self.$select.find(':input').filter(function () {
+            var $input = $inputs.filter(function () {
               return this.value == value;
             });
             $input.prop('checked', true);
             self.onSelect($input[0]);
           });
         } else if (this.type == 'radio') {
-          var $input = this.$select.find(':input').filter(function () {
+          var $input = $inputs.filter(function () {
             return this.value == self.data[self.name];
           });
           $input.prop('checked', true);
@@ -2690,10 +2728,16 @@
       if (this.searchString.length) {
         if (this.searchApi.length) {
           this.$scrollableContent.find('input:not(:checked)').parents('.select-item').not('.static-item').remove();
-          $.ajax({
+
+          if (this.searchRequest !== null) {
+            this.searchRequest.abort();
+          }
+
+          this.searchRequest = $.ajax({
             method: 'GET',
             url: this.searchApi + this.searchString
           }).done(function (data) {
+            self.searchRequest = null;
             var items = data.map(function (item) {
               item.id = item[self.primaryKeyword].toString();
               return item;
@@ -2701,7 +2745,9 @@
             items = items.filter(function (item) {
               return self.data[self.name].indexOf(item.id) === -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
             });
-            var result = $(self._renderItemList(items));
+
+            var result = self._renderItemList(items);
+
             $.when(self.$scrollableContent.append(result)).then(function () {
               var faNameSpace = self.opts.faPro ? 'fal' : 'fas';
               self.$searchIconContainer.html("<i class=\"" + faNameSpace + " fa-times icon\"></i>");
@@ -2823,10 +2869,21 @@
     ;
 
     _proto.onSelect = function onSelect(el) {
+      var self = this;
       var onSelect = this.opts.onSelect;
+      var data = $(el).parents('.select-item').data();
+
+      if (this.searchApi.length && !$.isEmptyObject(data)) {
+        if ($(el).length && el.checked) {
+          this.items.push(data);
+        } else {
+          this.items = $.grep(this.items, function (item) {
+            return item[self.primaryKeyword] != data.id;
+          });
+        }
+      }
 
       if (typeof onSelect === 'function') {
-        var data = this.getItem('id', el.value);
         onSelect.call(el, data, this);
       }
     } // Add more items after plugin is already initialized
@@ -3014,7 +3071,7 @@
     };
 
     _proto._renderItemList = function _renderItemList(items) {
-      var result = '';
+      var result = [];
 
       for (var i = 0; i < items.length; ++i) {
         var item = items[i];
@@ -3032,7 +3089,7 @@
           }
         }
 
-        result += "\n\n                <div class=\"select-item\">\n\n                    <div class=\"select-item-" + this.type + "\">\n\n                        <div class=\"styled-" + this.type + "\">\n\n                            <input type=\"" + this.type + "\" id=\"select-" + this.name + "-" + items[i].id + "\" value=\"" + items[i].id + "\" tabindex=\"-1\">\n\n                            <label for=\"select-" + this.name + "-" + items[i].id + "\">\n\n                                <span class=\"radio-inner\">\n                                    <svg viewBox=\"0 0 18 18\">\n                                        <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n                                    </svg>\n                                </span>\n\n                                <span class=\"" + this.type + "-label\"" + (typeof this.labelTemplate !== 'function' ? ' data-label' : '') + ">\n                                    " + label + "\n                                </span>\n\n                            </label>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n            ";
+        result.push($("\n\n                <div class=\"select-item\">\n\n                    <div class=\"select-item-" + this.type + "\">\n\n                        <div class=\"styled-" + this.type + "\">\n\n                            <input type=\"" + this.type + "\" id=\"select-" + this.name + "-" + items[i].id + "\" value=\"" + items[i].id + "\" tabindex=\"-1\">\n\n                            <label for=\"select-" + this.name + "-" + items[i].id + "\">\n\n                                <span class=\"radio-inner\">\n                                    <svg viewBox=\"0 0 18 18\">\n                                        <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n                                    </svg>\n                                </span>\n\n                                <span class=\"" + this.type + "-label\"" + (typeof this.labelTemplate !== 'function' ? ' data-label' : '') + ">\n                                    " + label + "\n                                </span>\n\n                            </label>\n\n                        </div>\n\n                    </div>\n\n                </div>\n\n            ").data(item));
       }
 
       return result;
@@ -5461,5 +5518,5 @@
 
   return index_umd;
 
-}));
+})));
 //# sourceMappingURL=cool.bundle.js.map