Fix closing on mobile devices when draggable

StephanWagner · Mar 2, 2021 · 25d0f36 · 25d0f36
1 parent ab12b83
commit 25d0f36
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/demo/es6/package-lock.json b/demo/es6/package-lock.json
diff --git a/demo/es6/package.json b/demo/es6/package.json
@@ -6,7 +6,7 @@
   "license": "ISC",
   "main": "index.js",
   "dependencies": {
-    "jbox": "^1.2.11"
+    "jbox": "^1.2.12"
   },
   "devDependencies": {
     "snowpack": "^3.0.11"

diff --git a/dist/jBox.all.js b/dist/jBox.all.js
diff --git a/dist/jBox.all.min.js b/dist/jBox.all.min.js
diff --git a/dist/jBox.js b/dist/jBox.js
diff --git a/dist/jBox.min.js b/dist/jBox.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jbox",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.",
   "keywords": [
     "jquery-plugin",

diff --git a/src/js/jBox.js b/src/js/jBox.js
@@ -354,6 +354,10 @@ function jBoxWrapper(jQuery) {
       handle.addClass('jBox-draggable').data('jBox-draggable', true).on('touchstart mousedown', function (ev)
       {
         if (ev.button == 2 || jQuery(ev.target).hasClass('jBox-noDrag') || jQuery(ev.target).parents('.jBox-noDrag').length) {
+          // Hacky fix for jBox not closing on mobile devices when using draggable
+          if (ev.type == 'touchstart' && (jQuery(ev.target).hasClass('jBox-closeButton') || jQuery(ev.target).parents('.jBox-closeButton').length)) {
+            this.close({ignoreDelay: true});
+          }
           return;
         }
 
@@ -483,7 +487,7 @@ function jBoxWrapper(jQuery) {
       if (this.options.closeButton) {
         var closeButtonSVG = this._createSVG('svg', [['viewBox', '0 0 24 24']]);
         closeButtonSVG.appendChild(this._createSVG('path', [['d', 'M22.2,4c0,0,0.5,0.6,0,1.1l-6.8,6.8l6.9,6.9c0.5,0.5,0,1.1,0,1.1L20,22.3c0,0-0.6,0.5-1.1,0L12,15.4l-6.9,6.9c-0.5,0.5-1.1,0-1.1,0L1.7,20c0,0-0.5-0.6,0-1.1L8.6,12L1.7,5.1C1.2,4.6,1.7,4,1.7,4L4,1.7c0,0,0.6-0.5,1.1,0L12,8.5l6.8-6.8c0.5-0.5,1.1,0,1.1,0L22.2,4z']]));
-        this.closeButton = jQuery('<div class="jBox-closeButton jBox-noDrag"/>').on('click tap', function (ev) { this.close({ignoreDelay: true}); ev.stopPropagation(); }.bind(this)).append(closeButtonSVG);
+        this.closeButton = jQuery('<div class="jBox-closeButton jBox-noDrag"/>').on('click tap', function (ev) { this.close({ignoreDelay: true}); }.bind(this)).append(closeButtonSVG);
 
         // Add close button to jBox container
         if (this.options.closeButton == 'box' || (this.options.closeButton === true && !this.options.overlay && !this.options.title && !this.options.getTitle)) {