@finqu/cool 1.2.5 → 1.2.7

package/dist/js/cool.js

@@ -1,6 +1,6 @@
 /*!
-  * Cool UI v1.2.4 (https://finqu.fi)
-  * Copyright 2011-2019 Finqu Oy
+  * Cool UI v1.2.6 (https://finqu.fi)
+  * Copyright 2011-2020 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */
 (function (global, factory) {
@@ -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,
@@ -2247,6 +2253,7 @@
         _this3.allowNoneOnRadioSelect = _this3.$el.data('allowNoneOnRadioSelect') ? _this3.$el.data('allowNoneOnRadioSelect') : _this3.opts.allowNoneOnRadioSelect;
         _this3.showValidStateIcon = _this3.$el.data('showValidStateIcon') ? _this3.$el.data('showValidStateIcon') : _this3.opts.showValidStateIcon;
         _this3.itemsToExclude = _this3.$el.data('itemsToExclude') ? _this3.$el.data('itemsToExclude').replace(/\s/g, '').split(',') : _this3.opts.itemsToExclude;
+        _this3.primaryKeyword = _this3.$el.data('primaryKeyword') ? _this3.$el.data('primaryKeyword') : _this3.opts.primaryKeyword;
         _this3.preventClose = false;
 
         if (_this3.itemsToExclude.length > 0) {
@@ -2261,13 +2268,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;
           });
@@ -2290,10 +2297,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();
@@ -2603,14 +2612,30 @@
           url: searchUrl
         }).done(function (data) {
           var items = data.map(function (item) {
-            item.id = item.id.toString();
+            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;
@@ -2621,22 +2646,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);
@@ -2651,22 +2676,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);
@@ -2694,13 +2732,15 @@
             url: this.searchApi + this.searchString
           }).done(function (data) {
             var items = data.map(function (item) {
-              item.id = item.id.toString();
+              item.id = item[self.primaryKeyword].toString();
               return item;
             });
             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>");
@@ -2822,10 +2862,22 @@
     ;
 
     _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') {
-        onSelect.call(el);
+        onSelect.call(el, data, this);
       }
     } // Add more items after plugin is already initialized
     ;
@@ -3012,7 +3064,7 @@
     };
 
     _proto._renderItemList = function _renderItemList(items) {
-      var result = '';
+      var result = [];
 
       for (var i = 0; i < items.length; ++i) {
         var item = items[i];
@@ -3030,7 +3082,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;
@@ -3119,7 +3171,8 @@
       allowNoneOnRadioSelect: true,
       preventUncheck: false,
       showValidStateIcon: true,
-      itemsToExclude: []
+      itemsToExclude: [],
+      primaryKeyword: 'id'
     };
   }
 
@@ -3404,13 +3457,20 @@
         // and let's assume that this containing parent fits and is inside
         // viewport
         var $containingParent = this.$container.parent();
+        var index = 0;
 
-        while ($containingParent.css('overflow-x') !== 'hidden' && $containingParent.css('overflow') !== 'hidden' && ($containingParent.prop('tagName') || '').toLowerCase() !== 'body') {
+        while ($containingParent.css('overflow-x') !== 'hidden' && $containingParent.css('overflow') !== 'hidden' && ($containingParent.prop('tagName') || '').toLowerCase() !== 'body' && index < 100) {
           $containingParent = $containingParent.parent();
 
-          if (!$containingParent) {
+          if (!$containingParent.get(0)) {
             return;
           }
+
+          ++index;
+        }
+
+        if (!$containingParent.get(0)) {
+          return;
         }
 
         var containingBoundingRect = $containingParent.get(0).getBoundingClientRect();