- Přidáno option overlayPreventClose přes volitelný atribut `data-p…

…dbox-overlay-prevent-close="true"` zabraňující vypnutí pdBoxu kliknutím na overlay

README.md

@@ -17,6 +17,9 @@ $ cat bower.json
 
 ## Changelog
 
+### v1.3.15
+- přidáno option `overlayPreventClose` přes volitelný atribut `data-pdbox-overlay-prevent-close="true"` zabraňující vypnutí pdBoxu kliknutím na overlay
+
 ### v1.3.14
 - oprava srbského překladu
 

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "jquery.pdbox",
-	"version": "1.3.14",
+	"version": "1.3.15",
 	"homepage": "https://github.com/peckadesign/jquery.pdbox",
 	"authors": [
 		"PeckaDesign, s.r.o <support@peckadesign.cz>"

dist/js/jquery.pdbox.js

@@ -3,10 +3,10 @@
  * https://github.com/peckadesign/jquery.pdbox
  *
  * @author PeckaDesign, s.r.o <support@peckadesign.cz>
- * @copyright Copyright (c) 2014-2021 PeckaDesign, s.r.o
+ * @copyright Copyright (c) 2014-2022 PeckaDesign, s.r.o
  * @license MIT
  *
- * @version 1.3.14
+ * @version 1.3.15
  */
 $.pdBox = (function () {
 
@@ -21,6 +21,7 @@ $.pdBox = (function () {
 			block: 'nearest',
 			inline: 'center'
 		},
+		overlayPreventClose: false,
 		infinitePager: false,
 		lang: ($('html').attr('lang') || 'cs')
 	};
@@ -265,6 +266,7 @@ $.pdBox = (function () {
 
 			elOptions.width = this.$el.data('pdboxWidth');
 			elOptions.className = this.$el.data('pdboxClassName') ? this.$el.data('pdboxClassName') + ' ' + this.defaults.className : this.defaults.className;
+			elOptions.overlayPreventClose = this.$el.data('pdboxOverlayPreventClose') ? this.$el.data('pdboxOverlayPreventClose') : this.defaults.overlayPreventClose;
 
 			for (i = 0; i < events.length; i++) {
 				dataName = getEventDataName(events[i]);
@@ -728,7 +730,11 @@ $.pdBox = (function () {
 
 	function windowElemClickHandler(e) {
 		var $el = $(e.target).closest('a');
-		if(e.target === this.window.elem[0] || (this.window.elem.has(e.target).length && ($el.hasClass('pdbox__close') || $el.hasClass('pdbox__close--alternative')))) {
+
+		if(
+			(!this.options.overlayPreventClose && e.target === this.window.elem[0])
+			|| (this.window.elem.has(e.target).length && ($el.hasClass('pdbox__close') || $el.hasClass('pdbox__close--alternative')))
+		) {
 			this.close(e);
 			e.preventDefault();
 		}

example/index.html

@@ -164,6 +164,16 @@
 							Video
 						</a>
 					</li>
+					<li>
+						<a href="https://unsplash.it/160/90/?image=1043"
+						   data-pdbox-thumbnail="https://unsplash.it/160/90/?image=1043"
+						   data-pdbox-overlay-prevent-close="true"
+						   class="js-pdbox"
+						   data-rel="media"
+						   title="Image 4">
+							Prevent pdbox close via overlay
+						</a>
+					</li>
 				</ul>
 			</li>
 		</ul>

package.json

@@ -2,7 +2,7 @@
 	"name": "jquery.pdbox",
 	"title": "jQuery pdBox",
 	"description": "pdBox is thickbox-like jQeruy plugin developed in PeckaDesign",
-	"version": "1.3.14",
+	"version": "1.3.15",
 	"author": {
 		"name": "PeckaDesign, s.r.o",
 		"email": "support@peckadesign.cz"

src/js/jquery.pdbox.js

@@ -11,6 +11,7 @@ $.pdBox = (function () {
 			block: 'nearest',
 			inline: 'center'
 		},
+		overlayPreventClose: false,
 		infinitePager: false,
 		lang: ($('html').attr('lang') || 'cs')
 	};
@@ -255,6 +256,7 @@ $.pdBox = (function () {
 
 			elOptions.width = this.$el.data('pdboxWidth');
 			elOptions.className = this.$el.data('pdboxClassName') ? this.$el.data('pdboxClassName') + ' ' + this.defaults.className : this.defaults.className;
+			elOptions.overlayPreventClose = this.$el.data('pdboxOverlayPreventClose') ? this.$el.data('pdboxOverlayPreventClose') : this.defaults.overlayPreventClose;
 
 			for (i = 0; i < events.length; i++) {
 				dataName = getEventDataName(events[i]);
@@ -718,7 +720,11 @@ $.pdBox = (function () {
 
 	function windowElemClickHandler(e) {
 		var $el = $(e.target).closest('a');
-		if(e.target === this.window.elem[0] || (this.window.elem.has(e.target).length && ($el.hasClass('pdbox__close') || $el.hasClass('pdbox__close--alternative')))) {
+
+		if(
+			(!this.options.overlayPreventClose && e.target === this.window.elem[0])
+			|| (this.window.elem.has(e.target).length && ($el.hasClass('pdbox__close') || $el.hasClass('pdbox__close--alternative')))
+		) {
 			this.close(e);
 			e.preventDefault();
 		}