jsuites 4.9.31 → 4.9.32

package/dist/jsuites.basic.css

@@ -529,7 +529,6 @@ div[data-before]:before {
 
 
 .jcolor {
-    position: absolute;
     display: none;
     outline: none;
 }
@@ -544,7 +543,6 @@ div[data-before]:before {
 
 .jcolor-content {
     position: absolute;
-    left: 0px;
     z-index: 9000;
     user-select: none;
     -webkit-font-smoothing: antialiased;
@@ -603,6 +601,7 @@ div[data-before]:before {
 
 .jcolor-fullscreen {
     position: fixed;
+    left: 0px;
     bottom: 0px;
     width:100%;
     max-height: 290px;
@@ -2087,7 +2086,6 @@ div[data-before]:before {
 }
 
 .jtoolbar .jtoolbar-item {
-    position: relative;
     text-align: center;
     margin: auto;
     padding: 2px;
@@ -2096,6 +2094,7 @@ div[data-before]:before {
 }
 
 .jtoolbar-mobile .jtoolbar-item {
+    position: relative;
     flex:1;
 } 
 
@@ -2221,10 +2220,6 @@ div[data-before]:before {
     display: none;
 }
 
-.jtoolbar-floating > div {
-    display: block;
-}
-
 .jtoolbar-arrow-selected .jtoolbar-floating {
     display: flex;
     flex-wrap: wrap;

package/dist/jsuites.basic.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.9.22';
+    var version = '4.9.32';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -2035,10 +2035,15 @@ jSuites.color = (function(el, options) {
             // Show colorpicker
             container.classList.add('jcolor-focus');
 
+            // Reset margin
+            content.style.marginTop = '';
+            content.style.marginLeft = '';
+
             var rectContent = content.getBoundingClientRect();
+            var availableWidth = jSuites.getWindowWidth();
+            var availableHeight = jSuites.getWindowHeight();
 
-            if (jSuites.getWindowWidth() < 800 || obj.options.fullscreen == true) {
-                content.style.top = '';
+            if (availableWidth < 800 || obj.options.fullscreen == true) {
                 content.classList.add('jcolor-fullscreen');
                 jSuites.animation.slideBottom(content, 1);
                 backdrop.style.display = 'block';
@@ -2048,25 +2053,21 @@ jSuites.color = (function(el, options) {
                     backdrop.style.display = '';
                 }
 
-                var rect = el.getBoundingClientRect();
-
                 if (obj.options.position) {
                     content.style.position = 'fixed';
-                    if (window.innerHeight < rect.bottom + rectContent.height) {
-                        content.style.top = (rect.top - (rectContent.height + 2)) + 'px';
-                    } else {
-                        content.style.top = (rect.top + rect.height + 2) + 'px';
-                    }
-                    content.style.left = rect.left + 'px';
                 } else {
-                    if (window.innerHeight < rect.bottom + rectContent.height) {
-                        content.style.top = -1 * (rectContent.height + rect.height + 2) + 'px';
-                    } else {
-                        content.style.top = '2px';
-                    }
+                    content.style.position = '';
+                }
+
+                if (rectContent.left + rectContent.width > availableWidth) {
+                    content.style.marginLeft = -1 * (rectContent.left + rectContent.width - (availableWidth - 20)) + 'px';
+                }
+                if (rectContent.top + rectContent.height > availableHeight) {
+                    content.style.marginTop = -1 * (rectContent.top + rectContent.height - (availableHeight - 20)) + 'px';
                 }
             }
 
+
             if (typeof(obj.options.onopen) == 'function') {
                 obj.options.onopen(el);
             }
@@ -2542,10 +2543,10 @@ jSuites.color = (function(el, options) {
             backdropClickControl = true;
         });
 
-        backdrop.addEventListener("mouseup", function(e) {
+        backdrop.addEventListener("click", function(e) {
             if (backdropClickControl) {
-                obj.close();
                 backdropClickControl = false;
+                obj.close();
             }
         });
 
@@ -8336,18 +8337,35 @@ jSuites.picker = (function(el, options) {
             el.classList.add('jpicker-focus');
             el.focus();
 
+            var top = 0;
+            var left = 0;
+
+            dropdownContent.style.marginLeft = '';
+
             var rectHeader = dropdownHeader.getBoundingClientRect();
             var rectContent = dropdownContent.getBoundingClientRect();
+
             if (window.innerHeight < rectHeader.bottom + rectContent.height) {
-                dropdownContent.style.marginTop = -1 * (rectContent.height + 4) + 'px';
+                top = -1 * (rectContent.height + 4);
             } else {
-                dropdownContent.style.marginTop = rectHeader.height + 2 + 'px';
+                top = rectHeader.height + 4;
             }
 
             if (obj.options.right === true) {
-                dropdownContent.style.marginLeft = -1 * rectContent.width + 24 + 'px';
+                left = -1 * rectContent.width + rectHeader.width;
+            }
+
+            if (rectContent.left + left < 0) {
+                left = left + rectContent.left + 10;
             }
+            if (rectContent.left + rectContent.width > window.innerWidth) {
+                left = -1 * (10 + rectContent.left + rectContent.width - window.innerWidth);
+            }
+
+            dropdownContent.style.marginTop = parseInt(top) + 'px';
+            dropdownContent.style.marginLeft = parseInt(left) + 'px';
 
+            //dropdownContent.style.marginTop
             if (typeof obj.options.onopen == 'function') {
                 obj.options.onopen(el, obj);
             }

package/dist/jsuites.css

@@ -529,7 +529,6 @@ div[data-before]:before {
 
 
 .jcolor {
-    position: absolute;
     display: none;
     outline: none;
 }
@@ -544,7 +543,6 @@ div[data-before]:before {
 
 .jcolor-content {
     position: absolute;
-    left: 0px;
     z-index: 9000;
     user-select: none;
     -webkit-font-smoothing: antialiased;
@@ -603,6 +601,7 @@ div[data-before]:before {
 
 .jcolor-fullscreen {
     position: fixed;
+    left: 0px;
     bottom: 0px;
     width:100%;
     max-height: 290px;
@@ -2657,7 +2656,6 @@ div[data-before]:before {
 }
 
 .jtoolbar .jtoolbar-item {
-    position: relative;
     text-align: center;
     margin: auto;
     padding: 2px;
@@ -2666,6 +2664,7 @@ div[data-before]:before {
 }
 
 .jtoolbar-mobile .jtoolbar-item {
+    position: relative;
     flex:1;
 } 
 
@@ -2791,10 +2790,6 @@ div[data-before]:before {
     display: none;
 }
 
-.jtoolbar-floating > div {
-    display: block;
-}
-
 .jtoolbar-arrow-selected .jtoolbar-floating {
     display: flex;
     flex-wrap: wrap;

package/dist/jsuites.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.9.22';
+    var version = '4.9.32';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -2046,10 +2046,15 @@ jSuites.color = (function(el, options) {
             // Show colorpicker
             container.classList.add('jcolor-focus');
 
+            // Reset margin
+            content.style.marginTop = '';
+            content.style.marginLeft = '';
+
             var rectContent = content.getBoundingClientRect();
+            var availableWidth = jSuites.getWindowWidth();
+            var availableHeight = jSuites.getWindowHeight();
 
-            if (jSuites.getWindowWidth() < 800 || obj.options.fullscreen == true) {
-                content.style.top = '';
+            if (availableWidth < 800 || obj.options.fullscreen == true) {
                 content.classList.add('jcolor-fullscreen');
                 jSuites.animation.slideBottom(content, 1);
                 backdrop.style.display = 'block';
@@ -2059,25 +2064,21 @@ jSuites.color = (function(el, options) {
                     backdrop.style.display = '';
                 }
 
-                var rect = el.getBoundingClientRect();
-
                 if (obj.options.position) {
                     content.style.position = 'fixed';
-                    if (window.innerHeight < rect.bottom + rectContent.height) {
-                        content.style.top = (rect.top - (rectContent.height + 2)) + 'px';
-                    } else {
-                        content.style.top = (rect.top + rect.height + 2) + 'px';
-                    }
-                    content.style.left = rect.left + 'px';
                 } else {
-                    if (window.innerHeight < rect.bottom + rectContent.height) {
-                        content.style.top = -1 * (rectContent.height + rect.height + 2) + 'px';
-                    } else {
-                        content.style.top = '2px';
-                    }
+                    content.style.position = '';
+                }
+
+                if (rectContent.left + rectContent.width > availableWidth) {
+                    content.style.marginLeft = -1 * (rectContent.left + rectContent.width - (availableWidth - 20)) + 'px';
+                }
+                if (rectContent.top + rectContent.height > availableHeight) {
+                    content.style.marginTop = -1 * (rectContent.top + rectContent.height - (availableHeight - 20)) + 'px';
                 }
             }
 
+
             if (typeof(obj.options.onopen) == 'function') {
                 obj.options.onopen(el);
             }
@@ -2553,10 +2554,10 @@ jSuites.color = (function(el, options) {
             backdropClickControl = true;
         });
 
-        backdrop.addEventListener("mouseup", function(e) {
+        backdrop.addEventListener("click", function(e) {
             if (backdropClickControl) {
-                obj.close();
                 backdropClickControl = false;
+                obj.close();
             }
         });
 
@@ -8988,18 +8989,35 @@ jSuites.picker = (function(el, options) {
             el.classList.add('jpicker-focus');
             el.focus();
 
+            var top = 0;
+            var left = 0;
+
+            dropdownContent.style.marginLeft = '';
+
             var rectHeader = dropdownHeader.getBoundingClientRect();
             var rectContent = dropdownContent.getBoundingClientRect();
+
             if (window.innerHeight < rectHeader.bottom + rectContent.height) {
-                dropdownContent.style.marginTop = -1 * (rectContent.height + 4) + 'px';
+                top = -1 * (rectContent.height + 4);
             } else {
-                dropdownContent.style.marginTop = rectHeader.height + 2 + 'px';
+                top = rectHeader.height + 4;
             }
 
             if (obj.options.right === true) {
-                dropdownContent.style.marginLeft = -1 * rectContent.width + 24 + 'px';
+                left = -1 * rectContent.width + rectHeader.width;
+            }
+
+            if (rectContent.left + left < 0) {
+                left = left + rectContent.left + 10;
             }
+            if (rectContent.left + rectContent.width > window.innerWidth) {
+                left = -1 * (10 + rectContent.left + rectContent.width - window.innerWidth);
+            }
+
+            dropdownContent.style.marginTop = parseInt(top) + 'px';
+            dropdownContent.style.marginLeft = parseInt(left) + 'px';
 
+            //dropdownContent.style.marginTop
             if (typeof obj.options.onopen == 'function') {
                 obj.options.onopen(el, obj);
             }

package/dist/jsuites.layout.js

@@ -1,20 +1,3 @@
-/**
- * (c) jSuites Javascript Web Components
- *
- * Website: https://jsuites.net
- * Description: Create amazing web based applications.
- *
- * MIT License
- *
- */
-;(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.jSuites = factory();
-}(this, (function () {
-
-    'use strict';
-
 jSuites.crop = (function(el, options) {
     // Already created, update options
     if (el.crop) {
@@ -3468,9 +3451,3 @@ jSuites.timeline = (function(el, options) {
 
     return obj;
 });
-
-
-
-    return jSuites;
-
-})));

package/package.json

@@ -19,7 +19,7 @@
         "javascript plugins"
     ],
     "main": "dist/jsuites.js",
-    "version": "4.9.31",
+    "version": "4.9.32",
     "bugs": "https://github.com/jsuites/jsuites/issues",
     "homepage": "https://github.com/jsuites/jsuites",
     "docs": "https://jsuites.net",