v4.13.0 release

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## <span style='color:#563D7C;'>CHANGELOG</span>
 
+### <span style='color:#563D7C;'>Version 4.13.0 *2021-11-24*</span>
+
++ enabled default use of the PointerEvent API
++ **added** method `jsPanel.usePointerEvents()` to disable/enable use of PointerEvent API
+
 ### <span style='color:#563D7C;'>Version 4.12.0 *2021-07-09*</span>
 
 + updated CSS files to **bugfix** a minor issue in `option.minimizeTo`

README.md

@@ -1,9 +1,9 @@
 <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.12.0 released 2021-07-09](#)
+## [jsPanel 4.13.0 released 2021-11-24](#)
 
-> 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/
+> 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 on https://jspanel.de/
 
 <img src="https://res.cloudinary.com/stefanstraesser-eu/image/upload/v1558601426/jsPanel4.7.0-sample-panels-1920_yzobd9.jpg">
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jspanel4x",
-  "version": "4.12.0",
+  "version": "4.13.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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

dist/extensions/datepicker/jspanel.datepicker.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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
@@ -26,8 +26,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 // noinspection JSVoidFunctionReturnValueUsed
 // eslint-disable-next-line no-redeclare
 var jsPanel = {
-  version: '4.12.0',
-  date: '2021-07-09 09:15',
+  version: '4.13.0',
+  date: '2021-11-24 11:58',
   ajaxAlwaysCallbacks: [],
   autopositionSpacing: 4,
   closeOnEscape: function () {
@@ -109,12 +109,9 @@ var jsPanel = {
   isIE: function () {
     return navigator.appVersion.match(/Trident/);
   }(),
-  // pointerdown: 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
-  // pointermove: 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
-  // pointerup: 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
-  pointerdown: 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
-  pointermove: 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
-  pointerup: 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
+  pointerdown: 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
+  pointermove: 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
+  pointerup: 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
   polyfills: function () {
     // Polyfills for IE11 only
     // Object.assign polyfill - https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
@@ -751,6 +748,19 @@ var jsPanel = {
       jsPanel.modifier = false;
     });
   }(),
+  usePointerEvents: function usePointerEvents() {
+    var use = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+    if (!use) {
+      this.pointerdown = 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'];
+      this.pointermove = 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'];
+      this.pointerup = 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'];
+    } else {
+      this.pointerdown = 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'];
+      this.pointermove = 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'];
+      this.pointerup = 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'];
+    }
+  },
   // color methods ---------------
   color: function color(val) {
     var color = val.toLowerCase(),
@@ -809,52 +819,52 @@ var jsPanel = {
       result.rgb.css = "rgb(".concat(result.rgb.r, ",").concat(result.rgb.g, ",").concat(result.rgb.b, ")");
     } // check val for rgb/rgba color
     else if (color.match(RGBAPattern)) {
-        match = RGBAPattern.exec(color);
-        result.rgb = {
-          css: color,
-          r: match[1],
-          g: match[2],
-          b: match[3]
-        };
-        result.hex = this.rgbToHex(match[1], match[2], match[3]);
-        hsl = this.rgbToHsl(match[1], match[2], match[3]);
-        result.hsl = hsl;
-      } // check val for hsl/hsla color
-      else if (color.match(HSLAPattern)) {
-          match = HSLAPattern.exec(color);
-          h = match[1] / 360;
-          s = match[2].substr(0, match[2].length - 1) / 100;
-          l = match[3].substr(0, match[3].length - 1) / 100;
-          channels = this.hslToRgb(h, s, l);
-          result.rgb = {
-            css: "rgb(".concat(channels[0], ",").concat(channels[1], ",").concat(channels[2], ")"),
-            r: channels[0],
-            g: channels[1],
-            b: channels[2]
-          };
-          result.hex = this.rgbToHex(result.rgb.r, result.rgb.g, result.rgb.b);
-          result.hsl = {
-            css: "hsl(".concat(match[1], ",").concat(match[2], ",").concat(match[3], ")"),
-            h: match[1],
-            s: match[2],
-            l: match[3]
-          };
-        } // or return #f5f5f5
-        else {
-            result.hex = '#f5f5f5';
-            result.rgb = {
-              css: 'rgb(245,245,245)',
-              r: 245,
-              g: 245,
-              b: 245
-            };
-            result.hsl = {
-              css: 'hsl(0,0%,96%)',
-              h: 0,
-              s: '0%',
-              l: '96%'
-            };
-          }
+      match = RGBAPattern.exec(color);
+      result.rgb = {
+        css: color,
+        r: match[1],
+        g: match[2],
+        b: match[3]
+      };
+      result.hex = this.rgbToHex(match[1], match[2], match[3]);
+      hsl = this.rgbToHsl(match[1], match[2], match[3]);
+      result.hsl = hsl;
+    } // check val for hsl/hsla color
+    else if (color.match(HSLAPattern)) {
+      match = HSLAPattern.exec(color);
+      h = match[1] / 360;
+      s = match[2].substr(0, match[2].length - 1) / 100;
+      l = match[3].substr(0, match[3].length - 1) / 100;
+      channels = this.hslToRgb(h, s, l);
+      result.rgb = {
+        css: "rgb(".concat(channels[0], ",").concat(channels[1], ",").concat(channels[2], ")"),
+        r: channels[0],
+        g: channels[1],
+        b: channels[2]
+      };
+      result.hex = this.rgbToHex(result.rgb.r, result.rgb.g, result.rgb.b);
+      result.hsl = {
+        css: "hsl(".concat(match[1], ",").concat(match[2], ",").concat(match[3], ")"),
+        h: match[1],
+        s: match[2],
+        l: match[3]
+      };
+    } // or return #f5f5f5
+    else {
+      result.hex = '#f5f5f5';
+      result.rgb = {
+        css: 'rgb(245,245,245)',
+        r: 245,
+        g: 245,
+        b: 245
+      };
+      result.hsl = {
+        css: 'hsl(0,0%,96%)',
+        h: 0,
+        s: '0%',
+        l: '96%'
+      };
+    }
 
     return result;
   },

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/extensions/datepicker/jspanel.datepicker.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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

es6module/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.12.0
+ * @version v4.13.0
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
@@ -11,8 +11,8 @@ export // eslint-disable-next-line no-redeclare
 // noinspection JSVoidFunctionReturnValueUsed
 // eslint-disable-next-line no-redeclare
 let jsPanel = {
-    version: '4.12.0',
-    date: '2021-07-09 09:15',
+    version: '4.13.0',
+    date: '2021-11-24 11:58',
     ajaxAlwaysCallbacks: [],
     autopositionSpacing: 4,
     closeOnEscape: (() => {
@@ -85,12 +85,9 @@ let jsPanel = {
     isIE: (() => {
         return navigator.appVersion.match(/Trident/);
     })(),
-    // pointerdown: 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
-    // pointermove: 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
-    // pointerup: 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
-    pointerdown: 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
-    pointermove: 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
-    pointerup: 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
+    pointerdown: 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'],
+    pointermove: 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'],
+    pointerup: 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'],
     polyfills: (() => {
         // Polyfills for IE11 only
         // Object.assign polyfill - https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
@@ -703,6 +700,18 @@ let jsPanel = {
         });
     })(),
 
+    usePointerEvents(use = true) {
+        if (!use) {
+            this.pointerdown = 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'];
+            this.pointermove = 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'];
+            this.pointerup = 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'];
+        } else {
+            this.pointerdown = 'onpointerdown' in window ? ['pointerdown'] : 'ontouchend' in window ? ['touchstart', 'mousedown'] : ['mousedown'];
+            this.pointermove = 'onpointermove' in window ? ['pointermove'] : 'ontouchend' in window ? ['touchmove', 'mousemove'] : ['mousemove'];
+            this.pointerup = 'onpointerup' in window ? ['pointerup'] : 'ontouchend' in window ? ['touchend', 'mouseup'] : ['mouseup'];
+        }
+    },
+
     // color methods ---------------
     color(val) {
         let color = val.toLowerCase(),