v4.12.0

v4.12.0 release

CHANGELOG.md

@@ -1,5 +1,12 @@
 ## <span style='color:#563D7C;'>CHANGELOG</span>
 
+### <span style='color:#563D7C;'>Version 4.12.0 *2021-07-09*</span>
+
++ updated CSS files to **bugfix** a minor issue in `option.minimizeTo`
++ **bugfix** in `resizeit` interaction 
++ **added** string value `'closed'` to panel property `status`. Since a closed panel is removed from the DOM this value is only available when a panel reference is saved.
++ **added** option to use a custom callback function as setting for `option.closeOnEscape` instead of just boolean true/false
+
 ### <span style='color:#563D7C;'>Version 4.11.4 *2021-04-10*</span>
 
 + **bugfix** in `dragit` interaction

Gulpfile.js

@@ -2,7 +2,7 @@
 const { series, src, dest } = require('gulp');
 const babel    = require('gulp-babel');
 const minify   = require('gulp-minify');
-const sass     = require('gulp-sass');
+const sass     = require('gulp-sass')(require('node-sass'));
 const cleanCSS = require('gulp-clean-css');
 const rename   = require('gulp-rename');
 const header   = require('gulp-header');

README.md

@@ -1,7 +1,7 @@
 <img alt="NPM license"   src="https://img.shields.io/npm/l/jspanel4"> <img alt="npm version"   src="https://img.shields.io/npm/v/jspanel4?color=0677b8"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/jspanel4?color=0677b8">
 
 
-## [jsPanel 4.11.4 released 2021-04-10](#)
+## [jsPanel 4.12.0 released 2021-07-09](#)
 
 > As of v4.11.0-beta methods `jsPanel.ajax()` and `jsPanel.fetch()` are updated. That also affects options `contentAjax` and `contentFetch`. These updates might break existing code. So please check the docs for this beta release on https://jspanel.de/
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jspanel4x",
-  "version": "4.11.4",
+  "version": "4.12.0",
   "authors": [
     "Stefan Straesser <[email protected]> (http://jspanel.de/)"
   ],

dist/extensions/contextmenu/jspanel.contextmenu.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/datepicker/jspanel.datepicker.js

@@ -1,14 +1,14 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
  * @github https://github.com/Flyer53/jsPanel4.git
  */
 
 'use strict';
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 

dist/extensions/datepicker/theme/default.css

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/dock/jspanel.dock.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/hint/jspanel.hint.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/layout/jspanel.layout.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/modal/jspanel.modal.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/tooltip/jspanel.tooltip.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/jspanel.css

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
@@ -249,31 +249,32 @@
   position: fixed;
   width: auto;
   z-index: 9998; }
-  #jsPanel-replacement-container .jsPanel-replacement, .jsPanel-minimized-box .jsPanel-replacement, .jsPanel-minimized-container .jsPanel-replacement {
-    font-family: Roboto,"Open Sans",Lato,"Helvetica Neue",Arial,sans-serif;
-    display: flex;
-    align-items: center;
-    width: 200px;
+
+.jsPanel-replacement {
+  font-family: Roboto,"Open Sans",Lato,"Helvetica Neue",Arial,sans-serif;
+  display: flex;
+  align-items: center;
+  width: 200px;
+  height: 34px;
+  margin: 1px 1px 0 0;
+  z-index: 9999; }
+  .jsPanel-replacement .jsPanel-hdr {
+    flex-grow: 1;
+    min-width: 0;
+    padding: 0;
     height: 34px;
-    margin: 1px 1px 0 0;
-    z-index: 9999; }
-    #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr, .jsPanel-minimized-container .jsPanel-replacement .jsPanel-hdr {
-      flex-grow: 1;
-      min-width: 0;
-      padding: 0;
-      height: 34px;
+    overflow: hidden; }
+    .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo {
+      max-width: 50%;
       overflow: hidden; }
-      #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo, .jsPanel-minimized-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo {
-        max-width: 50%;
-        overflow: hidden; }
-        #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img, .jsPanel-minimized-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img {
-          max-width: 100px;
-          max-height: 34px; }
-    #jsPanel-replacement-container .jsPanel-replacement .jsPanel-titlebar, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-titlebar, .jsPanel-minimized-container .jsPanel-replacement .jsPanel-titlebar {
-      cursor: default;
-      min-width: 0; }
-    #jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize, .jsPanel-minimized-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
-      display: block; }
+      .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img {
+        max-width: 100px;
+        max-height: 34px; }
+  .jsPanel-replacement .jsPanel-titlebar {
+    cursor: default;
+    min-width: 0; }
+  .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize {
+    display: block; }
 
 .jsPanel-minimized-box, .jsPanel-minimized-container {
   position: absolute;
@@ -540,7 +541,7 @@
 
 /* IE11 CSS styles go here */
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  #jsPanel-replacement-container .jsPanel-replacement .jsPanel-titlebar {
+  .jsPanel-replacement .jsPanel-titlebar {
     max-width: 105px; } }
 
 /* XXXXXXXXXXXXXXXXXXXXXXX */

dist/jspanel.js

@@ -1,6 +1,6 @@
 /**
  * jsPanel - A JavaScript library to create highly configurable multifunctional floating panels that can also be used as modal, tooltip, hint or contextmenu
- * @version v4.11.4
+ * @version v4.12.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
@@ -14,7 +14,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
@@ -26,19 +26,23 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 // noinspection JSVoidFunctionReturnValueUsed
 // eslint-disable-next-line no-redeclare
 var jsPanel = {
-  version: '4.11.4',
-  date: '2021-04-10 09:23',
+  version: '4.12.0',
+  date: '2021-07-09 09:15',
   ajaxAlwaysCallbacks: [],
   autopositionSpacing: 4,
   closeOnEscape: function () {
     document.addEventListener('keydown', function (e) {
       if (e.key === 'Escape' || e.code === 'Escape' || e.key === 'Esc') {
-        jsPanel.getPanels(function () {
-          return this.classList.contains('jsPanel');
+        jsPanel.getPanels(function (panel) {
+          return panel.classList.contains('jsPanel'); // Array is sorted by z-index (highest first)
         }).some(function (item) {
           if (item.options.closeOnEscape) {
-            item.close(null, true);
-            return true;
+            if (typeof item.options.closeOnEscape === 'function') {
+              return item.options.closeOnEscape.call(item, item); // if return value is falsy next panel in sequence will close, otherwise processing of Array.prototype.some() stops
+            } else {
+              item.close(null, true);
+              return true;
+            }
           }
 
           return false;
@@ -2673,6 +2677,7 @@ var jsPanel = {
 
       if (!document.getElementById(id)) {
         self.removeMinimizedReplacement();
+        self.status = 'closed';
 
         if (closedBy) {
           document.dispatchEvent(jspanelcloseduser);
@@ -2705,6 +2710,7 @@ var jsPanel = {
       }
 
       document.dispatchEvent(jspanelbeforeclose);
+      self.statusBefore = self.status;
 
       if (self.options.onbeforeclose && self.options.onbeforeclose.length > 0 && !jsPanel.processCallbacks(self, self.options.onbeforeclose, 'some', self.status, closedByUser)) {
         return self;
@@ -4036,8 +4042,8 @@ var jsPanel = {
                 elmtParentBLW = parseInt(elmtParentStyles.borderLeftWidth, 10),
                 elmtParentBTW = parseInt(elmtParentStyles.borderTopWidth, 10),
                 elmtParentPosition = elmtParentStyles.getPropertyValue('position'),
-                startX = e.clientX || e.touches[0].clientX,
-                startY = e.clientY || e.touches[0].clientY,
+                startX = e.clientX || e.clientX === 0 || e.touches[0].clientX,
+                startY = e.clientY || e.clientY === 0 || e.touches[0].clientY,
                 startRatio = startX / startY,
                 resizeHandleClassList = e.target.classList,
                 scaleFactor = self.getScaleFactor(),