v4.11.2 release

jsPanel v 4.11.2 release
Flyer53 · Dec 9, 2020 · 2bae4ac · 2bae4ac
1 parent 30b2fa5
commit 2bae4ac
Show file tree

Hide file tree

Showing 27 changed files with 292 additions and 297 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## <span style='color:#563D7C;'>CHANGELOG</span>
 
+### <span style='color:#563D7C;'>Version 4.11.2 *2020-12-09*</span>
+
++ **bugfix** in the code for the `dragit` interaction reducing memory leaks. [See GitHub issue](https://github.com/Flyer53/jsPanel4/issues/121)
+
 ### <span style='color:#563D7C;'>Version 4.11.1 *2020-11-23*</span>
 
 + **bugfix** in the `maximize()` method

diff --git a/README.md b/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.1 released 2020-11-23](#)
+## [jsPanel 4.11.2 released 2020-12-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/
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jspanel4x",
-  "version": "4.11.1",
+  "version": "4.11.2",
   "authors": [
     "Stefan Straesser <[email protected]> (http://jspanel.de/)"
   ],

diff --git a/dist/extensions/contextmenu/jspanel.contextmenu.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/datepicker/jspanel.datepicker.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/datepicker/theme/default.css b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/dock/jspanel.dock.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/hint/jspanel.hint.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/layout/jspanel.layout.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/modal/jspanel.modal.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/extensions/tooltip/jspanel.tooltip.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/jspanel.css b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/dist/jspanel.js b/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.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]
@@ -24,8 +24,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 // eslint-disable-next-line no-redeclare
 var jsPanel = {
-  version: '4.11.1',
-  date: '2020-11-23 09:37',
+  version: '4.11.2',
+  date: '2020-12-09 10:10',
   ajaxAlwaysCallbacks: [],
   autopositionSpacing: 4,
   closeOnEscape: function () {
@@ -3246,6 +3246,101 @@ var jsPanel = {
 
       var handles = options.handles || jsPanel.defaults.dragit.handles;
       var cursor = options.cursor || jsPanel.defaults.dragit.cursor;
+
+      function pointerUpHandler(e, event) {
+        jsPanel.pointermove.forEach(function (e) {
+          document.removeEventListener(e, dragElmt);
+        });
+        jsPanel.removeSnapAreas();
+
+        if (dragstarted) {
+          self.style.opacity = 1;
+          dragstarted = undefined;
+
+          if (opts.snap) {
+            switch (self.snappableTo) {
+              case 'left-top':
+                self.snap(opts.snap.snapLeftTop);
+                break;
+
+              case 'center-top':
+                self.snap(opts.snap.snapCenterTop);
+                break;
+
+              case 'right-top':
+                self.snap(opts.snap.snapRightTop);
+                break;
+
+              case 'right-center':
+                self.snap(opts.snap.snapRightCenter);
+                break;
+
+              case 'right-bottom':
+                self.snap(opts.snap.snapRightBottom);
+                break;
+
+              case 'center-bottom':
+                self.snap(opts.snap.snapCenterBottom);
+                break;
+
+              case 'left-bottom':
+                self.snap(opts.snap.snapLeftBottom);
+                break;
+
+              case 'left-center':
+                self.snap(opts.snap.snapLeftCenter);
+                break;
+            }
+
+            if (opts.snap.callback && self.snappableTo && typeof opts.snap.callback === 'function') {
+              opts.snap.callback.call(self, self);
+
+              if (opts.snap.repositionOnSnap && opts.snap[camelcase(self.snappableTo)] !== false) {
+                self.repositionOnSnap(self.snappableTo);
+              }
+            }
+
+            if (self.snappableTo && opts.snap.repositionOnSnap && opts.snap[camelcase(self.snappableTo)]) {
+              self.repositionOnSnap(self.snappableTo);
+            }
+          } // opts.drop
+
+
+          if (self.droppableTo && self.droppableTo) {
+            var sourceContainer = self.parentElement;
+            self.move(self.droppableTo);
+
+            if (opts.drop.callback) {
+              opts.drop.callback.call(self, self, self.droppableTo, sourceContainer);
+            }
+          }
+
+          document.dispatchEvent(jspaneldragstop);
+
+          if (opts.stop.length) {
+            var stopStyles = window.getComputedStyle(self),
+                paneldata = {
+              left: parseFloat(stopStyles.left),
+              top: parseFloat(stopStyles.top),
+              width: parseFloat(stopStyles.width),
+              height: parseFloat(stopStyles.height)
+            };
+            jsPanel.processCallbacks(self, opts.stop, false, paneldata, e);
+          }
+
+          self.saveCurrentPosition();
+          self.calcSizeFactors(); // important for options onwindowresize/onparentresize
+        }
+
+        self.controlbar.style.pointerEvents = 'inherit';
+        self.content.style.pointerEvents = 'inherit'; // restore other panel's css pointer-events
+
+        document.querySelectorAll('iframe').forEach(function (frame) {
+          frame.style.pointerEvents = 'auto';
+        });
+        document.removeEventListener(event, pointerUpHandler);
+      }
+
       self.querySelectorAll(handles).forEach(function (handle) {
         handle.style.touchAction = 'none';
         handle.style.cursor = cursor;
@@ -3680,101 +3775,7 @@ var jsPanel = {
           });
         });
         jsPanel.pointerup.forEach(function (event) {
-          document.addEventListener(event, function (e) {
-            jsPanel.pointermove.forEach(function (e) {
-              document.removeEventListener(e, dragElmt);
-            }); //document.body.style.overflow = 'inherit';
-
-            jsPanel.removeSnapAreas();
-
-            if (dragstarted) {
-              self.style.opacity = 1;
-              dragstarted = undefined;
-
-              if (opts.snap) {
-                switch (self.snappableTo) {
-                  case 'left-top':
-                    self.snap(opts.snap.snapLeftTop);
-                    break;
-
-                  case 'center-top':
-                    self.snap(opts.snap.snapCenterTop);
-                    break;
-
-                  case 'right-top':
-                    self.snap(opts.snap.snapRightTop);
-                    break;
-
-                  case 'right-center':
-                    self.snap(opts.snap.snapRightCenter);
-                    break;
-
-                  case 'right-bottom':
-                    self.snap(opts.snap.snapRightBottom);
-                    break;
-
-                  case 'center-bottom':
-                    self.snap(opts.snap.snapCenterBottom);
-                    break;
-
-                  case 'left-bottom':
-                    self.snap(opts.snap.snapLeftBottom);
-                    break;
-
-                  case 'left-center':
-                    self.snap(opts.snap.snapLeftCenter);
-                    break;
-                }
-
-                if (opts.snap.callback && self.snappableTo && typeof opts.snap.callback === 'function') {
-                  opts.snap.callback.call(self, self);
-
-                  if (opts.snap.repositionOnSnap && opts.snap[camelcase(self.snappableTo)] !== false) {
-                    self.repositionOnSnap(self.snappableTo);
-                  }
-                }
-
-                if (self.snappableTo && opts.snap.repositionOnSnap && opts.snap[camelcase(self.snappableTo)]) {
-                  self.repositionOnSnap(self.snappableTo);
-                }
-              } // opts.drop
-
-
-              if (self.droppableTo && self.droppableTo
-              /* !== elmt.parentElement*/
-              ) {
-                  var sourceContainer = self.parentElement;
-                  self.move(self.droppableTo);
-
-                  if (opts.drop.callback) {
-                    opts.drop.callback.call(self, self, self.droppableTo, sourceContainer);
-                  }
-                }
-
-              document.dispatchEvent(jspaneldragstop);
-
-              if (opts.stop.length) {
-                var stopStyles = window.getComputedStyle(self),
-                    paneldata = {
-                  left: parseFloat(stopStyles.left),
-                  top: parseFloat(stopStyles.top),
-                  width: parseFloat(stopStyles.width),
-                  height: parseFloat(stopStyles.height)
-                };
-                jsPanel.processCallbacks(self, opts.stop, false, paneldata, e);
-              }
-
-              self.saveCurrentPosition();
-              self.calcSizeFactors(); // important for options onwindowresize/onparentresize
-            }
-
-            self.controlbar.style.pointerEvents = 'inherit';
-            self.content.style.pointerEvents = 'inherit'; // restore other panel's css pointer-events
-
-            document.querySelectorAll('iframe').forEach(function (frame) {
-              frame.style.pointerEvents = 'auto';
-            });
-          });
+          document.addEventListener(event, pointerUpHandler);
           window.removeEventListener('mouseout', windowListener);
         }); // dragit is initialized - now disable if set
 

diff --git a/dist/jspanel.min.js b/dist/jspanel.min.js
diff --git a/es6module/extensions/contextmenu/jspanel.contextmenu.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/datepicker/jspanel.datepicker.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/datepicker/theme/default.css b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/dock/jspanel.dock.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/hint/jspanel.hint.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/layout/jspanel.layout.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/modal/jspanel.modal.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/extensions/tooltip/jspanel.tooltip.js b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]

diff --git a/es6module/jspanel.css b/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.11.1
+ * @version v4.11.2
  * @homepage https://jspanel.de/
  * @license MIT
  * @author Stefan Sträßer - [email protected]