jsuites 4.11.6 → 4.12.3

package/dist/jsuites.basic.css

@@ -143,7 +143,37 @@ div[data-before]:before {
     border-radius: 1000px;
 }
 
+.jtooltip {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 5;
 
+    font-family: initial;
+    font-size: 12px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid black;
+    padding: 8px;
+    margin: 10px;
+
+    display: block;
+    animation: fadeIn 0.5s;
+    pointer-events: none;
+}
+
+.jtooltip:empty {
+    display: none;
+}
+
+@keyframes fadeIn {
+     0% {
+          opacity: 0;
+     }
+     100% {
+          opacity: 1;
+     }
+}
 
 /** Animations **/
 .fade-in {
@@ -825,22 +855,15 @@ div[data-before]:before {
 .jcontextmenu > div::before {
     content: attr(data-icon);
     font-family: 'Material Icons' !important;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
+    font-size: 15px;
     position: absolute;
     left: 9px;
 }
 
+.jcontextmenu.symbols > div::before {
+    font-family: 'Material Symbols Outlined' !important;
+}
+
 .jcontextmenu > div.header {
     display: none;
 }
@@ -920,25 +943,6 @@ div[data-before]:before {
     .jcontextmenu > div.header > a.close {
         text-align: right;
     }
-
-    .jcontextmenu > div::before {
-        content: attr(data-icon);
-        font-family: 'Material Icons' !important;
-        font-weight: normal;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        position: absolute;
-        left: 9px;
-    }
     .jcontextmenu a {
         font-size: 1.4em;
         text-transform: uppercase;

package/dist/jsuites.basic.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.11.6';
+    var version = '4.12.3';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -55,8 +55,12 @@ var jSuites = function(options) {
             y: null,
         }
 
+        // Tooltip element
+        var tooltip = document.createElement('div')
+        tooltip.classList.add('jtooltip');
+
         // Events
-        var editorMouseDown = function(e) {
+        var mouseDown = function(e) {
             // Check if this is the floating
             var item = jSuites.findElement(e.target, 'jpanel');
             // Jfloating found
@@ -73,6 +77,7 @@ var jSuites = function(options) {
                     h: rect.height,
                     d: item.style.cursor,
                     resizing: item.style.cursor ? true : false,
+                    actioned: false,
                 }
 
                 // Make sure width and height styling is OK
@@ -128,9 +133,9 @@ var jSuites = function(options) {
             isOpened(element);
         }
 
-        var editorMouseUp = function(e) {
+        var mouseUp = function(e) {
             if (editorAction && editorAction.e) {
-                if (typeof(editorAction.e.refresh) == 'function') {
+                if (typeof(editorAction.e.refresh) == 'function' && state.actioned) {
                     editorAction.e.refresh();
                 }
                 editorAction.e.style.cursor = '';
@@ -145,7 +150,7 @@ var jSuites = function(options) {
             editorAction = false;
         }
 
-        var editorMouseMove = function(e) {
+        var mouseMove = function(e) {
             if (editorAction) {
                 var x = e.clientX || e.pageX;
                 var y = e.clientY || e.pageY;
@@ -173,6 +178,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('position', top, left);
                     }
                 } else {
@@ -203,6 +209,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('dimensions', width, height);
                     }
                 }
@@ -241,7 +248,31 @@ var jSuites = function(options) {
             }
         }
 
-        var editorDblClick = function(e) {
+        var mouseOver = function(e) {
+            var message = e.target.getAttribute('data-tooltip');
+            if (message) {
+                // Instructions
+                tooltip.innerText = message;
+
+                // Position
+                if (e.changedTouches && e.changedTouches[0]) {
+                    var x = e.changedTouches[0].clientX;
+                    var y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
+
+                tooltip.style.top = y + 'px';
+                tooltip.style.left = x + 'px';
+                document.body.appendChild(tooltip);
+            } else if (tooltip.innerText) {
+                tooltip.innerText = '';
+                document.body.removeChild(tooltip);
+            }
+        }
+
+        var dblClick = function(e) {
             var item = jSuites.findElement(e.target, 'jpanel');
             if (item && typeof(item.dblclick) == 'function') {
                 // Create edition
@@ -249,7 +280,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorContextmenu = function(e) {
+        var contextMenu = function(e) {
             var item = document.activeElement;
             if (item && typeof(item.contextmenu) == 'function') {
                 // Create edition
@@ -276,7 +307,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorKeyDown = function(e) {
+        var keyDown = function(e) {
             var item = document.activeElement;
             if (item) {
                 if (e.key == "Delete" && typeof(item.delete) == 'function') {
@@ -297,12 +328,13 @@ var jSuites = function(options) {
             }
         }
 
-        document.addEventListener('mouseup', editorMouseUp);
-        document.addEventListener("mousedown", editorMouseDown);
-        document.addEventListener('mousemove', editorMouseMove);
-        document.addEventListener('dblclick', editorDblClick);
-        document.addEventListener('keydown', editorKeyDown);
-        document.addEventListener('contextmenu', editorContextmenu);
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener("mousedown", mouseDown);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseover', mouseOver);
+        document.addEventListener('dblclick', dblClick);
+        document.addEventListener('keydown', keyDown);
+        document.addEventListener('contextmenu', contextMenu);
         document.dictionary = {};
 
         obj.version = version;
@@ -1882,6 +1914,7 @@ jSuites.calendar.prettifyAll = function() {
             elements[i].innerHTML = jSuites.calendar.prettify(elements[i].getAttribute('data-date'));
         } else {
             if (elements[i].innerHTML) {
+                elements[i].setAttribute('title', elements[i].innerHTML);
                 elements[i].setAttribute('data-date', elements[i].innerHTML);
                 elements[i].innerHTML = jSuites.calendar.prettify(elements[i].innerHTML);
             }
@@ -2305,7 +2338,7 @@ jSuites.color = (function(el, options) {
     }
 
     obj.select = function(color) {
-        // Remove current selecded mark
+        // Remove current selected mark
         var selected = container.querySelector('.jcolor-selected');
         if (selected) {
             selected.classList.remove('jcolor-selected');
@@ -2315,6 +2348,8 @@ jSuites.color = (function(el, options) {
         if (obj.values[color]) {
             obj.values[color].classList.add('jcolor-selected');
         }
+
+        obj.options.value = color;
     }
 
     /**
@@ -2936,8 +2971,13 @@ jSuites.contextmenu = (function(el, options) {
         // Coordinates
         if ((obj.options.items && obj.options.items.length > 0) || el.children.length) {
             if (e.target) {
-                var x = e.clientX;
-                var y = e.clientY;
+                if (e.changedTouches && e.changedTouches[0]) {
+                    x = e.changedTouches[0].clientX;
+                    y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
             } else {
                 var x = e.x;
                 var y = e.y;
@@ -2967,6 +3007,10 @@ jSuites.contextmenu = (function(el, options) {
         }
     }
 
+    obj.isOpened = function() {
+        return el.classList.contains('jcontextmenu-focus') ? true : false;
+    }
+
     /**
      * Close menu
      */
@@ -8021,14 +8065,12 @@ jSuites.mask = (function() {
                 if (o.mask.indexOf('##') !== -1) {
                     var d = o.mask.split(';');
                     if (d[0]) {
-                        d[0] = d[0].replace('*', '');
-                        d[0] = d[0].replace(/_/g, '');
-                        d[0] = d[0].replace(/-/g, '');
-                        d[0] = d[0].replace('(','');
-                        d[0] = d[0].replace(')','');
+                        d[0] = d[0].replace('*', '\t');
+                        d[0] = d[0].replace(new RegExp(/_-/g), ' ');
                         d[0] = d[0].replace('##0.###','##0.000');
                         d[0] = d[0].replace('##0.##','##0.00');
                         d[0] = d[0].replace('##0.#','##0.0');
+                        d[0] = d[0].replace(new RegExp(/\[.*?\]/),'');
                     }
                     o.mask = d[0];
                 }

package/dist/jsuites.css

@@ -143,7 +143,37 @@ div[data-before]:before {
     border-radius: 1000px;
 }
 
+.jtooltip {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 5;
 
+    font-family: initial;
+    font-size: 12px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid black;
+    padding: 8px;
+    margin: 10px;
+
+    display: block;
+    animation: fadeIn 0.5s;
+    pointer-events: none;
+}
+
+.jtooltip:empty {
+    display: none;
+}
+
+@keyframes fadeIn {
+     0% {
+          opacity: 0;
+     }
+     100% {
+          opacity: 1;
+     }
+}
 
 /** Animations **/
 .fade-in {
@@ -825,22 +855,15 @@ div[data-before]:before {
 .jcontextmenu > div::before {
     content: attr(data-icon);
     font-family: 'Material Icons' !important;
-    font-weight: normal;
-    font-style: normal;
-    font-size: 16px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
+    font-size: 15px;
     position: absolute;
     left: 9px;
 }
 
+.jcontextmenu.symbols > div::before {
+    font-family: 'Material Symbols Outlined' !important;
+}
+
 .jcontextmenu > div.header {
     display: none;
 }
@@ -920,25 +943,6 @@ div[data-before]:before {
     .jcontextmenu > div.header > a.close {
         text-align: right;
     }
-
-    .jcontextmenu > div::before {
-        content: attr(data-icon);
-        font-family: 'Material Icons' !important;
-        font-weight: normal;
-        font-style: normal;
-        font-size: 16px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-        position: absolute;
-        left: 9px;
-    }
     .jcontextmenu a {
         font-size: 1.4em;
         text-transform: uppercase;
@@ -1689,38 +1693,61 @@ div[data-before]:before {
     left:50%;
     width:60%;
     height:60%;
-    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
-    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
+    -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.2);
+    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.2);
     border:1px solid #ccc;
     background-color:#fff;
     transform: translate(-50%, -50%);
     box-sizing: border-box;
-    padding-top:50px !important;
+    padding-top: 50px !important;
     z-index:9002;
-    border-radius: 8px;
+    border-radius: 4px;
 }
 
 .jmodal:before {
-    position:absolute;
-    top:0;
-    left:0;
-    width:100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
     content:attr(title);
-    padding:15px;
+    padding: 25px;
+    padding-bottom: 20px;
     box-sizing: border-box;
-    font-size:1.2em;
-    box-shadow: 1px 1px 3px rgba(0,0,0,.2);
+    font-size: 1.4em;
     background-color: #fff;
     border-radius: 8px 8px 0px 0px;
 }
 
 .jmodal_content {
-    padding:20px;
-    overflow-y:auto;
-    max-height:100%;
+    padding: 22px;
+    overflow-y: auto;
+    max-height: 100%;
     box-sizing: border-box;
     height: -webkit-fill-available;
+
+    scrollbar-width: thin;
+    scrollbar-color: #333 transparent;
+}
+
+.jmodal_content::-webkit-scrollbar {
+    height: 12px;
+}
+
+.jmodal_content::-webkit-scrollbar {
+    width: 12px;
+}
+
+.jmodal_content::-webkit-scrollbar-track {
+    border: 1px solid #fff;
+    background: #eee;
+}
+
+.jmodal_content::-webkit-scrollbar-thumb {
+    border: 1px solid #fff;
+    background: #888;
 }
+
+
 .jmodal.no-title {
     padding-top: initial !important;
 }
@@ -1730,16 +1757,16 @@ div[data-before]:before {
 }
 
 .jmodal:after {
-    content:'';
+    content: '';
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-    position:absolute;
-    top:0;
-    right:0;
-    margin:14px;
-    font-size:24px;
-    width:24px;
-    height:24px;
-    cursor:pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 25px;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
     text-shadow: 0px 0px 5px #fff;
 }
 

package/dist/jsuites.js

@@ -17,7 +17,7 @@
 
 var jSuites = function(options) {
     var obj = {}
-    var version = '4.11.6';
+    var version = '4.12.3';
 
     var find = function(DOMElement, component) {
         if (DOMElement[component.type] && DOMElement[component.type] == component) {
@@ -55,8 +55,12 @@ var jSuites = function(options) {
             y: null,
         }
 
+        // Tooltip element
+        var tooltip = document.createElement('div')
+        tooltip.classList.add('jtooltip');
+
         // Events
-        var editorMouseDown = function(e) {
+        var mouseDown = function(e) {
             // Check if this is the floating
             var item = jSuites.findElement(e.target, 'jpanel');
             // Jfloating found
@@ -73,6 +77,7 @@ var jSuites = function(options) {
                     h: rect.height,
                     d: item.style.cursor,
                     resizing: item.style.cursor ? true : false,
+                    actioned: false,
                 }
 
                 // Make sure width and height styling is OK
@@ -128,9 +133,9 @@ var jSuites = function(options) {
             isOpened(element);
         }
 
-        var editorMouseUp = function(e) {
+        var mouseUp = function(e) {
             if (editorAction && editorAction.e) {
-                if (typeof(editorAction.e.refresh) == 'function') {
+                if (typeof(editorAction.e.refresh) == 'function' && state.actioned) {
                     editorAction.e.refresh();
                 }
                 editorAction.e.style.cursor = '';
@@ -145,7 +150,7 @@ var jSuites = function(options) {
             editorAction = false;
         }
 
-        var editorMouseMove = function(e) {
+        var mouseMove = function(e) {
             if (editorAction) {
                 var x = e.clientX || e.pageX;
                 var y = e.clientY || e.pageY;
@@ -173,6 +178,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('position', top, left);
                     }
                 } else {
@@ -203,6 +209,7 @@ var jSuites = function(options) {
 
                     // Update element
                     if (typeof(editorAction.e.refresh) == 'function') {
+                        state.actioned = true;
                         editorAction.e.refresh('dimensions', width, height);
                     }
                 }
@@ -241,7 +248,31 @@ var jSuites = function(options) {
             }
         }
 
-        var editorDblClick = function(e) {
+        var mouseOver = function(e) {
+            var message = e.target.getAttribute('data-tooltip');
+            if (message) {
+                // Instructions
+                tooltip.innerText = message;
+
+                // Position
+                if (e.changedTouches && e.changedTouches[0]) {
+                    var x = e.changedTouches[0].clientX;
+                    var y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
+
+                tooltip.style.top = y + 'px';
+                tooltip.style.left = x + 'px';
+                document.body.appendChild(tooltip);
+            } else if (tooltip.innerText) {
+                tooltip.innerText = '';
+                document.body.removeChild(tooltip);
+            }
+        }
+
+        var dblClick = function(e) {
             var item = jSuites.findElement(e.target, 'jpanel');
             if (item && typeof(item.dblclick) == 'function') {
                 // Create edition
@@ -249,7 +280,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorContextmenu = function(e) {
+        var contextMenu = function(e) {
             var item = document.activeElement;
             if (item && typeof(item.contextmenu) == 'function') {
                 // Create edition
@@ -276,7 +307,7 @@ var jSuites = function(options) {
             }
         }
 
-        var editorKeyDown = function(e) {
+        var keyDown = function(e) {
             var item = document.activeElement;
             if (item) {
                 if (e.key == "Delete" && typeof(item.delete) == 'function') {
@@ -297,12 +328,13 @@ var jSuites = function(options) {
             }
         }
 
-        document.addEventListener('mouseup', editorMouseUp);
-        document.addEventListener("mousedown", editorMouseDown);
-        document.addEventListener('mousemove', editorMouseMove);
-        document.addEventListener('dblclick', editorDblClick);
-        document.addEventListener('keydown', editorKeyDown);
-        document.addEventListener('contextmenu', editorContextmenu);
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener("mousedown", mouseDown);
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseover', mouseOver);
+        document.addEventListener('dblclick', dblClick);
+        document.addEventListener('keydown', keyDown);
+        document.addEventListener('contextmenu', contextMenu);
         document.dictionary = {};
 
         obj.version = version;
@@ -1893,6 +1925,7 @@ jSuites.calendar.prettifyAll = function() {
             elements[i].innerHTML = jSuites.calendar.prettify(elements[i].getAttribute('data-date'));
         } else {
             if (elements[i].innerHTML) {
+                elements[i].setAttribute('title', elements[i].innerHTML);
                 elements[i].setAttribute('data-date', elements[i].innerHTML);
                 elements[i].innerHTML = jSuites.calendar.prettify(elements[i].innerHTML);
             }
@@ -2316,7 +2349,7 @@ jSuites.color = (function(el, options) {
     }
 
     obj.select = function(color) {
-        // Remove current selecded mark
+        // Remove current selected mark
         var selected = container.querySelector('.jcolor-selected');
         if (selected) {
             selected.classList.remove('jcolor-selected');
@@ -2326,6 +2359,8 @@ jSuites.color = (function(el, options) {
         if (obj.values[color]) {
             obj.values[color].classList.add('jcolor-selected');
         }
+
+        obj.options.value = color;
     }
 
     /**
@@ -2947,8 +2982,13 @@ jSuites.contextmenu = (function(el, options) {
         // Coordinates
         if ((obj.options.items && obj.options.items.length > 0) || el.children.length) {
             if (e.target) {
-                var x = e.clientX;
-                var y = e.clientY;
+                if (e.changedTouches && e.changedTouches[0]) {
+                    x = e.changedTouches[0].clientX;
+                    y = e.changedTouches[0].clientY;
+                } else {
+                    var x = e.clientX;
+                    var y = e.clientY;
+                }
             } else {
                 var x = e.x;
                 var y = e.y;
@@ -2978,6 +3018,10 @@ jSuites.contextmenu = (function(el, options) {
         }
     }
 
+    obj.isOpened = function() {
+        return el.classList.contains('jcontextmenu-focus') ? true : false;
+    }
+
     /**
      * Close menu
      */
@@ -8446,14 +8490,12 @@ jSuites.mask = (function() {
                 if (o.mask.indexOf('##') !== -1) {
                     var d = o.mask.split(';');
                     if (d[0]) {
-                        d[0] = d[0].replace('*', '');
-                        d[0] = d[0].replace(/_/g, '');
-                        d[0] = d[0].replace(/-/g, '');
-                        d[0] = d[0].replace('(','');
-                        d[0] = d[0].replace(')','');
+                        d[0] = d[0].replace('*', '\t');
+                        d[0] = d[0].replace(new RegExp(/_-/g), ' ');
                         d[0] = d[0].replace('##0.###','##0.000');
                         d[0] = d[0].replace('##0.##','##0.00');
                         d[0] = d[0].replace('##0.#','##0.0');
+                        d[0] = d[0].replace(new RegExp(/\[.*?\]/),'');
                     }
                     o.mask = d[0];
                 }

package/package.json

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