From 9ace87e73d48497c940705ca6f30d92c450c7e1d Mon Sep 17 00:00:00 2001
From: Pavel Khoroshkov <pvlgood@gmail.com>
Date: Tue, 30 Jun 2020 00:40:50 +0300
Subject: [PATCH] Sizing bug fixes, image extensions option

---
 .gitignore            |  6 +++++-
 README.md             |  1 +
 demo/index.html       |  6 +++---
 jquery.viewbox.js     | 49 +++++++++++++++++++++++++++----------------
 jquery.viewbox.min.js |  2 +-
 viewbox.css           | 16 ++++++++++++--
 6 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/.gitignore b/.gitignore
index 86c090e..d6db2e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 demo/images/Thumbs.db
-.vscode
\ No newline at end of file
+.vscode
+node_modules/
+package-lock.json
+package.json
+gulpfile.js
\ No newline at end of file
diff --git a/README.md b/README.md
index 4e21f5b..79b1435 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ $(function(){
 		,closeOnSideClick: true
 		,nextOnContentClick: false
 		,useGestures: true
+		,imageExt: ['png','jpg','jpeg','webp','gif'] //to determine if a target url is an image file
 	});
 });
 ```
diff --git a/demo/index.html b/demo/index.html
index 506c790..3db667c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -186,9 +186,9 @@ <h2>Custom events</h2>
 			<span class="text-muted">© 2018 Pavel Khoroshkov &nbsp; <a href="http://pgood.space/">pgood.space</a></span>
 		</div>
 	</footer>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<script src="../jquery.viewbox.min.js"></script>
 	<script>
diff --git a/jquery.viewbox.js b/jquery.viewbox.js
index d791e9b..af6c4dd 100644
--- a/jquery.viewbox.js
+++ b/jquery.viewbox.js
@@ -23,6 +23,7 @@
 		,closeOnSideClick: true
 		,nextOnContentClick: false
 		,useGestures: true
+		,imageExt: ['png','jpg','jpeg','webp','gif']
 	},options);
 	
 	var $links = $(this)
@@ -107,10 +108,15 @@
 		var $body = get('body')
 			,$content = get('content')
 			,$header = get('header')
+			,$footer = get('footer')
 			,w,h;
 		if(width){
 			$content.width(width);
 			$header.width(width);
+			$footer.width(width);
+		}else if(!state){
+			$header.width(1);
+			$footer.width(1);
 		}
 		if(height)
 			$content.height(height);
@@ -154,8 +160,8 @@
 	};
 	
 	function isImage(href){
-		if(href)
-			return href.match(/(png|jpg|jpeg|gif)(\?.*)?$/i);
+		if(href && $.isArray(options.imageExt) && options.imageExt.length)
+			return href.match(new RegExp('('+options.imageExt.join('|')+')(\\?.*)?$','i'));
 	};
 	
 	function isAnchor(href){
@@ -207,36 +213,41 @@
 		}
 	};
 	
-	function showImage(href,caption){
+	function showImage(href,caption,footer){
 		var $img = $('<img class="viewbox-image" alt="">').attr('src',href);
 		if(!isImageLoaded($img))
 			loader(true);
+		set('header',caption);
 		set('content','');
-		set('header','');
-		openWindow();
+		set('footer',footer);
 		var $body = get('body')
 			,counter = 0
 			,$content = get('content')
 			,$header = get('header')
-			,timerId = window.setInterval(function(){
+			,$footer = get('footer')
+			,hasHeader = Boolean(jQuery.type(caption) === 'string' && caption.length)
+			,hasFooter = Boolean(jQuery.type(footer) === 'string' && footer.length);
+		$header.toggle(hasHeader);
+		$footer.toggle(hasFooter);
+		openWindow();
+		var timerId = window.setInterval(function(){
 				if(!isImageLoaded($img) && counter < 1000){
 					counter++;
 					return;
 				};
-
 				window.clearInterval(timerId);
 				loader(false);
-
 				$('body').append($img);
 
-				$header.hide();
-
 				var wOffset = $body.width() - $content.width() + options.margin*2
 					,hOffset = $body.height() - $content.height() + options.margin*2
+					,headerHeight = hasHeader ? $header.outerHeight(): 0
+					,footerHeight = hasFooter ? $footer.outerHeight() : 0
 					,windowWidth = $(window).width() - wOffset
-					,windowHeight = $(window).height() - hOffset
+					,windowHeight = $(window).height() - hOffset - headerHeight - footerHeight
 					,w = $img.width()
 					,h = $img.height();
+				
 				$img.detach();
 
 				if(w > windowWidth){
@@ -248,20 +259,22 @@
 					h = windowHeight;
 				};
 				locked = true;
+				$header.add($footer).animate(
+					{width: w}
+					,options.resizeDuration
+				);
+				$content.animate(
+					{width: w,height: h}
+					,options.resizeDuration
+				);
 				$body.animate(
 					{
 						'margin-left': -(w + wOffset)/2 + options.margin
 						,'margin-top': -(h + hOffset)/2 + options.margin
 					}
 					,options.resizeDuration
-				);
-				$content.animate(
-					{width: w,height: h}
-					,options.resizeDuration
 					,function(){
 						$content.append($img);
-						$header.show().width(w);
-						set('header',caption);
 						locked = false;
 					}
 				);
@@ -339,7 +352,7 @@
 			else
 				$fullScreenBtn.hide();
 		});
-	}
+	};
 	
 	if(options.closeOnSideClick){
 		$container.click(function(){
diff --git a/jquery.viewbox.min.js b/jquery.viewbox.min.js
index 9deb4a1..7507b91 100644
--- a/jquery.viewbox.min.js
+++ b/jquery.viewbox.min.js
@@ -1 +1 @@
-!function(e){e.fn.viewbox=function(t){void 0===t&&(t={}),t=e.extend({template:'<div class="viewbox-container"><div class="viewbox-body"><div class="viewbox-header"></div><div class="viewbox-content"></div><div class="viewbox-footer"></div></div></div>',loader:'<div class="loader"><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div></div>',setTitle:!0,margin:20,resizeDuration:400,openDuration:200,closeDuration:200,closeButton:!0,fullscreenButton:!1,navButtons:!0,closeOnSideClick:!0,nextOnContentClick:!1,useGestures:!0},t);var n,i,o,r,a,c=e(this),l=e(t.template),s=e(t.loader),d=!1,u=!1,v=[];function h(i){if(!u){!function(){var e;for(;v.length;)(e=v.shift()).placeholder.before(e.content),e.placeholder.detach()}();var o=i.attr("href"),r=t.setTitle&&i.attr("title")?i.attr("title"):"";o?p(o)?(n=i,function(n,i){var o=e('<img class="viewbox-image" alt="">').attr("src",n);x(o)||m(!0);b("content",""),b("header",""),g();var r=w("body"),a=0,c=w("content"),l=w("header"),s=window.setInterval(function(){if(!x(o)&&a<1e3)a++;else{window.clearInterval(s),m(!1),e("body").append(o),l.hide();var n=r.width()-c.width()+2*t.margin,d=r.height()-c.height()+2*t.margin,v=e(window).width()-n,h=e(window).height()-d,g=o.width(),w=o.height();o.detach(),g>v&&(w=w*v/g,g=v),w>h&&(g=g*h/w,w=h),u=!0,r.animate({"margin-left":-(g+n)/2+t.margin,"margin-top":-(w+d)/2+t.margin},t.resizeDuration),c.animate({width:g,height:w},t.resizeDuration,function(){c.append(o),l.show().width(g),b("header",i),u=!1})}},x(o)?0:200)}(o,r)):function(t){return t.match(/^#.+$/i)&&e(t).length}(o)&&(n=i,k(o,r)):(n=i,k(i,r))}}function g(n,i){var o,r,a=w("body"),c=w("content"),s=w("header");n&&(c.width(n),s.width(n)),i&&c.height(i),d?(o=a.width(),r=a.height()):(d=!0,e("body").append(l),l.show(),o=a.width(),r=a.height(),l.hide(),l.fadeIn(t.openDuration)),a.css({"margin-left":-o/2,"margin-top":-r/2})}function w(e){return l.find(".viewbox-"+e)}function b(e,t){w(e).html(t)}function f(){var e=-1;return n&&c.each(function(t){if(n.is(this))return e=t,!1}),e}function p(e){if(e)return e.match(/(png|jpg|jpeg|gif)(\?.*)?$/i)}function x(e){return e.get(0).complete}function m(e){e?s.appendTo(w("body")):s.detach()}function y(t){var n=e('<div class="viewbox-button-default viewbox-button-'+t+'"></div>'),i=window.location.pathname+window.location.search+"#viewbox-"+t+"-icon";return n.appendTo(l).get(0).insertAdjacentHTML("afterbegin",'<svg><use xlink:href="'+i+'"/></svg>'),n}function k(t,n){var i=e(t),o=e('<div class="viewbox-content-placeholder"></div>');i.before(o),d&&l.trigger("viewbox.close"),b("content",""),b("header",n),w("content").append(i),g("auto","auto"),v.push({placeholder:o,content:i})}if(e("#viewbox-sprite").length||e("body").get(0).insertAdjacentHTML("afterbegin",'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="viewbox-sprite" style="display:none"><symbol id="viewbox-close-icon" viewBox="0 0 50 50"><path d="M37.304 11.282l1.414 1.414-26.022 26.02-1.414-1.413z"/><path d="M12.696 11.282l26.022 26.02-1.414 1.415-26.022-26.02z"/></symbol><symbol id="viewbox-prev-icon" viewBox="0 0 50 50"><path d="M27.3 34.7L17.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"/></symbol><symbol id="viewbox-next-icon" viewBox="0 0 50 50"><path d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></symbol><symbol id="viewbox-full-screen-icon" viewBox="0 0 50 50"><path d="M8.242 11.387v9.037h2.053v-6.986h9.197v-2.051H8.242zm22.606 0v2.05h9.367v6.987h2.05v-9.037H30.849zM8.242 29.747v8.866h11.25v-2.05h-9.197v-6.817H8.242zm31.973 0v6.816h-9.367v2.05h11.418v-8.867h-2.051z"/></symbol></svg>'),l.bind("viewbox.open",function(t,n){Number.isInteger(n)&&c.length?h(c.eq(n>=0&&n<c.length?n:0)):n&&n.tagName?h(e(n)):c.length&&h(c.eq(0))}),l.bind("viewbox.next",function(e){if(!(c.length<=1)){var t=f()+1;t>=c.length&&(t=0),h(c.eq(t))}}),l.bind("viewbox.prev",function(e){if(!(c.length<=1)){var t=f()-1;t<0&&(t=c.length-1),h(c.eq(t))}}),l.bind("viewbox.close",function(e){d&&l.fadeOut(t.closeDuration,function(){d=!1})}),l.bind("viewbox.fullscreen",function(e){var t=w("content").find(".viewbox-image").get(0);t&&(t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen())}),c.filter("a").click(function(){return l.trigger("viewbox.open",[this]),!1}),w("body").click(function(e){e.stopPropagation(),t.nextOnContentClick&&l.trigger("viewbox.next")}),t.closeButton&&y("close").click(function(e){e.stopPropagation(),l.trigger("viewbox.close")}),t.navButtons&&c.length>1&&(y("next").click(function(e){e.stopPropagation(),l.trigger("viewbox.next")}),y("prev").click(function(e){e.stopPropagation(),l.trigger("viewbox.prev")})),t.fullscreenButton){var z=y("full-screen").click(function(e){e.stopPropagation(),l.trigger("viewbox.fullscreen")});l.on("viewbox.open",function(t,n){p(e(n).attr("href"))?z.show():z.hide()})}return t.closeOnSideClick&&l.click(function(){l.trigger("viewbox.close")}),t.useGestures&&"ontouchstart"in document.documentElement&&(i=l,"function"==typeof(o=function(e){switch(e){case"left":l.trigger("viewbox.next");break;case"right":l.trigger("viewbox.prev")}})&&(i.on("touchstart",function(e){var t=e.originalEvent.changedTouches[0];r={x:t.pageX,y:t.pageY},a=(new Date).getTime()}),i.on("touchend",function(e){var t=e.originalEvent.changedTouches[0],n="none",i=(new Date).getTime()-a,c=t.pageX,l=t.pageY,s={x:c-r.x,y:l-r.y};i<=300&&(Math.abs(s.x)>=150&&Math.abs(s.y)<=100?n=s.x<0?"left":"right":Math.abs(s.y)>=150&&Math.abs(s.x)<=100&&(n=s.y<0?"up":"down")),o.call(this,n)}))),l}}(jQuery);
\ No newline at end of file
+!function(q){q.fn.viewbox=function(f){void 0===f&&(f={}),f=q.extend({template:'<div class="viewbox-container"><div class="viewbox-body"><div class="viewbox-header"></div><div class="viewbox-content"></div><div class="viewbox-footer"></div></div></div>',loader:'<div class="loader"><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div></div>',setTitle:!0,margin:20,resizeDuration:400,openDuration:200,closeDuration:200,closeButton:!0,fullscreenButton:!1,navButtons:!0,closeOnSideClick:!0,nextOnContentClick:!1,useGestures:!0,imageExt:["png","jpg","jpeg","webp","gif"]},f);var o,n,e,c,l,s,i=q(this),d=q(f.template),t=q(f.loader),u=!1,p=!1,r=[];function a(e){var t,n,i;p||(function(){var e;for(;r.length;)(e=r.shift()).placeholder.before(e.content),e.placeholder.detach()}(),t=e.attr("href"),n=f.setTitle?e.data("viewbox-title")||e.attr("title"):"",t?h(t)?(o=e,function(e,t,n){var l=q('<img class="viewbox-image" alt="">').attr("src",e);k(l)||z(!0);y("header",t),y("content",""),y("footer",n);var s=m("body"),d=0,u=m("content"),v=m("header"),h=m("footer"),g=Boolean("string"===jQuery.type(t)&&t.length),w=Boolean("string"===jQuery.type(n)&&n.length);v.toggle(g),h.toggle(w),x();var b=window.setInterval(function(){var e,t,n,i,o,r,a,c;!k(l)&&d<1e3?d++:(window.clearInterval(b),z(!1),q("body").append(l),e=s.width()-u.width()+2*f.margin,t=s.height()-u.height()+2*f.margin,n=g?v.outerHeight():0,i=w?h.outerHeight():0,o=q(window).width()-e,r=q(window).height()-t-n-i,a=l.width(),c=l.height(),l.detach(),o<a&&(c=c*o/a,a=o),r<c&&(a=a*r/c,c=r),p=!0,v.add(h).animate({width:a},f.resizeDuration),u.animate({width:a,height:c},f.resizeDuration),s.animate({"margin-left":-(a+e)/2+f.margin,"margin-top":-(c+t)/2+f.margin},f.resizeDuration,function(){u.append(l),p=!1}))},k(l)?0:200)}(t,n)):(i=t).match(/^#.+$/i)&&q(i).length&&(o=e,w(t,n)):w(o=e,n))}function x(e,t){var n,i,o=m("body"),r=m("content"),a=m("header"),c=m("footer");e?(r.width(e),a.width(e),c.width(e)):u||(a.width(1),c.width(1)),t&&r.height(t),u?(n=o.width(),i=o.height()):(u=!0,q("body").append(d),d.show(),n=o.width(),i=o.height(),d.hide(),d.fadeIn(f.openDuration)),o.css({"margin-left":-n/2,"margin-top":-i/2})}function m(e){return d.find(".viewbox-"+e)}function y(e,t){m(e).html(t)}function v(){var t=-1;return o&&i.each(function(e){if(o.is(this))return t=e,!1}),t}function h(e){return e&&q.isArray(f.imageExt)&&f.imageExt.length&&e.match(new RegExp("("+f.imageExt.join("|")+")(\\?.*)?$","i"))}function k(e){return e.get(0).complete}function z(e){e?t.appendTo(m("body")):t.detach()}function g(e){var t=q('<div class="viewbox-button-default viewbox-button-'+e+'"></div>'),n=window.location.pathname+window.location.search+"#viewbox-"+e+"-icon";return t.appendTo(d).get(0).insertAdjacentHTML("afterbegin",'<svg><use xlink:href="'+n+'"/></svg>'),t}function w(e,t){var n=q(e),i=q('<div class="viewbox-content-placeholder"></div>');n.before(i),u&&d.trigger("viewbox.close"),y("content",""),y("header",t),m("content").append(n),x("auto","auto"),r.push({placeholder:i,content:n})}return q("#viewbox-sprite").length||q("body").get(0).insertAdjacentHTML("afterbegin",'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="viewbox-sprite" style="display:none"><symbol id="viewbox-close-icon" viewBox="0 0 50 50"><path d="M37.304 11.282l1.414 1.414-26.022 26.02-1.414-1.413z"/><path d="M12.696 11.282l26.022 26.02-1.414 1.415-26.022-26.02z"/></symbol><symbol id="viewbox-prev-icon" viewBox="0 0 50 50"><path d="M27.3 34.7L17.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"/></symbol><symbol id="viewbox-next-icon" viewBox="0 0 50 50"><path d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></symbol><symbol id="viewbox-full-screen-icon" viewBox="0 0 50 50"><path d="M8.242 11.387v9.037h2.053v-6.986h9.197v-2.051H8.242zm22.606 0v2.05h9.367v6.987h2.05v-9.037H30.849zM8.242 29.747v8.866h11.25v-2.05h-9.197v-6.817H8.242zm31.973 0v6.816h-9.367v2.05h11.418v-8.867h-2.051z"/></symbol></svg>'),d.bind("viewbox.open",function(e,t){Number.isInteger(t)&&i.length?a(i.eq(0<=t&&t<i.length?t:0)):t&&t.tagName?a(q(t)):i.length&&a(i.eq(0))}),d.bind("viewbox.next",function(e){var t;i.length<=1||((t=v()+1)>=i.length&&(t=0),a(i.eq(t)))}),d.bind("viewbox.prev",function(e){var t;i.length<=1||((t=v()-1)<0&&(t=i.length-1),a(i.eq(t)))}),d.bind("viewbox.close",function(e){u&&d.fadeOut(f.closeDuration,function(){u=!1})}),d.bind("viewbox.fullscreen",function(e){var t=m("content").find(".viewbox-image").get(0);t&&(t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen())}),i.filter("a").click(function(){return d.trigger("viewbox.open",[this]),!1}),m("body").click(function(e){e.stopPropagation(),f.nextOnContentClick&&d.trigger("viewbox.next")}),f.closeButton&&g("close").click(function(e){e.stopPropagation(),d.trigger("viewbox.close")}),f.navButtons&&1<i.length&&(g("next").click(function(e){e.stopPropagation(),d.trigger("viewbox.next")}),g("prev").click(function(e){e.stopPropagation(),d.trigger("viewbox.prev")})),f.fullscreenButton&&(n=g("full-screen").click(function(e){e.stopPropagation(),d.trigger("viewbox.fullscreen")}),d.on("viewbox.open",function(e,t){h(q(t).attr("href"))?n.show():n.hide()})),f.closeOnSideClick&&d.click(function(){d.trigger("viewbox.close")}),f.useGestures&&"ontouchstart"in document.documentElement&&(e=d,"function"==typeof(c=function(e){switch(e){case"left":d.trigger("viewbox.next");break;case"right":d.trigger("viewbox.prev")}})&&(e.on("touchstart",function(e){var t=e.originalEvent.changedTouches[0];l={x:t.pageX,y:t.pageY},s=(new Date).getTime()}),e.on("touchend",function(e){var t=e.originalEvent.changedTouches[0],n="none",i=(new Date).getTime()-s,o=t.pageX,r=t.pageY,a={x:o-l.x,y:r-l.y};i<=300&&(150<=Math.abs(a.x)&&Math.abs(a.y)<=100?n=a.x<0?"left":"right":150<=Math.abs(a.y)&&Math.abs(a.x)<=100&&(n=a.y<0?"up":"down")),c.call(this,n)}))),d}}(jQuery);
\ No newline at end of file
diff --git a/viewbox.css b/viewbox.css
index 5049789..d86c6f3 100644
--- a/viewbox.css
+++ b/viewbox.css
@@ -8,6 +8,8 @@
 	z-index: 700;
 }
 .viewbox-body{
+	display: flex;
+	flex-direction: column;
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -21,7 +23,12 @@
 	overflow: auto;
 }
 .viewbox-header{
-	margin: 10px;
+	padding: 10px 0 0;
+	margin: 0 10px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
 }
 .viewbox-content{
 	margin: 10px;
@@ -29,7 +36,12 @@
 	height: 300px;
 }
 .viewbox-footer{
-	margin: 10px;
+	padding: 0 0 10px;
+	margin: 0 10px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
 }
 .viewbox-content .viewbox-image{
 	width: 100%;