@finqu/cool 1.1.9 → 1.2.3

package/js/src/dropdown.js

@@ -68,6 +68,7 @@ class Dropdown extends AbstractUIComponent {
         this.minWidth = this.$el.data('minWidth') ? this.$el.data('minWidth') : this.opts.minWidth;
         this.scroll = this.$el.data('scroll') ? this.$el.data('scroll') : this.opts.scroll;
         this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
+        this.positionObserver = this.$el.attr('data-position-observer') ? JSON.parse(this.$el.attr('data-position-observer')) : this.opts.positionObserver;
         this.closeOnItemClick = this.$el.data('closeOnItemClick') ? this.$el.data('closeOnItemClick') : this.opts.closeOnItemClick;
         this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
         this.contentOpen = false;
@@ -247,8 +248,10 @@ class Dropdown extends AbstractUIComponent {
         let dropdownTriggerHeight = this.$el.outerHeight(true);
         let dropdownTriggerPosX = this.$el.position().left;
         let dropdownTriggerPosY = this.$el.position().top;
-        let dropdownPosX;
-        let dropdownPosY;
+        let dropdownPosX = 0;
+        let dropdownPosY = 0;
+        let offsetX = 0;
+        let offsetY = 0;
 
         if (placement === 'top') {
 
@@ -283,14 +286,82 @@ class Dropdown extends AbstractUIComponent {
 
         if (this.offset) {
 
-            let offsets = this.offset.split(',')
-            let offsetX = offsets[0];
-            let offsetY = offsets[1];
+            const offsets = this.offset.split(',');
 
+            offsetX = offsets[0];
+            offsetY = offsets[1];
             dropdownPosX += parseInt(offsetX, 10);
             dropdownPosY += parseInt(offsetY, 10);
         }
 
+        if (this.positionObserver) {
+
+            // this is not set during init so we have to fetch it
+            // and let's assume that this containing parent fits and is inside
+            // viewport
+            let $containingParent = null;
+
+            do {
+                $containingParent = $containingParent ? $containingParent.parent() : this.$container.parent();
+
+                if (!$containingParent) {
+                    $containingParent = $('body');
+                    break;
+                }
+            } while ($containingParent.css('overflow-x') !== 'hidden' && $containingParent.css('overflow') !== 'hidden' && ($containingParent.prop('tagName') ? $containingParent.prop('tagName').toLowerCase() !== 'body' : false));
+
+            const containingBoundingRect = $containingParent.get(0).getBoundingClientRect();
+            const containerBoundingRect = this.$container.get(0).getBoundingClientRect();
+
+            if (containingBoundingRect.width < dropdownWidth) {
+                this.$dropdown.css('max-width', containingBoundingRect.width);
+                dropdownWidth = containingBoundingRect.width;
+            } else {
+                this.$dropdown.css('max-width', '');
+            }
+
+            if (containingBoundingRect.height < dropdownHeight) {
+                this.$dropdown.css('max-height', containingBoundingRect.height);
+                dropdownHeight = containingBoundingRect.height;
+            } else {
+                this.$dropdown.css('max-height', '');
+            }
+
+            const maxTop = Math.max(Math.abs(containingBoundingRect.y - containerBoundingRect.y), 0);
+            const maxLeft = Math.max(Math.abs(containingBoundingRect.x - containerBoundingRect.x), 0);
+            const maxRight = $containingParent.get(0).scrollWidth - (containerBoundingRect.x + containerBoundingRect.width);
+            const maxBottom = $containingParent.get(0).scrollHeight - (containerBoundingRect.y + (placement === 'dropbottom' ? containerBoundingRect.height : 0));
+
+            if (maxLeft < dropdownWidth && dropdownPosX < dropdownTriggerPosX) {
+                dropdownPosX = dropdownTriggerPosX;
+
+                // would be on top of the trigger
+                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
+                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
+                }
+            }
+
+            if (maxRight < dropdownWidth && dropdownPosX + dropdownWidth > dropdownTriggerPosX + dropdownTriggerWidth) {
+                dropdownPosX = dropdownTriggerPosX + dropdownTriggerWidth - dropdownWidth;
+
+                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
+                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
+                }
+            }
+
+            if (dropdownPosY < dropdownTriggerPosY && maxTop < dropdownHeight) {
+                dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + offsetY;
+            }
+
+            if (dropdownPosY >= dropdownTriggerPosY && maxBottom < dropdownHeight) {
+                if (dropdownPosX >= dropdownTriggerPosX + dropdownTriggerWidth || dropdownTriggerPosX >= dropdownPosX + dropdownWidth) {
+                    dropdownPosY = dropdownTriggerPosY - (dropdownHeight - maxBottom);
+                } else {
+                    dropdownPosY = dropdownTriggerPosY - dropdownHeight - offsetY
+                }
+            }
+        }
+
         this.$dropdown.css({
             position: 'absolute',
             top: '0px',
@@ -413,9 +484,9 @@ if (typeof $ !== 'undefined') {
 
     $.fn[NAME].noConflict = () => {
 
-        $.fn[NAME] = JQUERY_NO_CONFLICT
+        $.fn[NAME] = JQUERY_NO_CONFLICT;
 
-        return Dropdown._jQueryInterface
+        return Dropdown._jQueryInterface;
     }
 
     $.fn[NAME].defaults = {
@@ -427,6 +498,7 @@ if (typeof $ !== 'undefined') {
         minWidth: null,
         align: 'start',
         closeOnItemClick: true,
+        positionObserver: true,
         content: false,
         scroll: true,
         scrollContentHeight: 100,

package/js/src/popover.js

@@ -588,9 +588,9 @@ if (typeof $ !== 'undefined') {
 
     $.fn[NAME].noConflict = () => {
 
-        $.fn[NAME] = JQUERY_NO_CONFLICT
+        $.fn[NAME] = JQUERY_NO_CONFLICT;
 
-        return Popover._jQueryInterface
+        return Popover._jQueryInterface;
     }
 
     $.fn[NAME].defaults = {

package/js/src/section-tabs.js

@@ -188,9 +188,9 @@ if (typeof $ !== 'undefined') {
 
     $.fn[NAME].noConflict = () => {
 
-        $.fn[NAME] = JQUERY_NO_CONFLICT
+        $.fn[NAME] = JQUERY_NO_CONFLICT;
 
-        return SectionTabs._jQueryInterface
+        return SectionTabs._jQueryInterface;
     }
 
     $.fn[NAME].defaults = {