From 65e2a9f25455ff174e641a6f3b1b29b5d992fa44 Mon Sep 17 00:00:00 2001 From: Nikos M Date: Fri, 1 Dec 2023 08:39:57 +0200 Subject: [PATCH] v.1.5.1 --- README.md | 3 ++- src/touchTouch.js | 23 ++++++++++++----------- src/touchTouch.min.js | 4 ++-- test/demo.html | 2 +- 4 files changed, 17 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 1ec4841..c36b204 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Enhanced Vanilla JavaScript version of [touchTouch Optimized Mobile Gallery](htt ![touchTouch Optimized Mobile Gallery](/touchtouch.jpg) -**version: 1.5.0** (9 kB minified) +**version: 1.5.1** (9 kB minified) [Live Demo](https://foo123.github.io/examples/touchtouch/) @@ -42,6 +42,7 @@ slideshow.dispose(); // dispose the slideshow instance * `caption` custom css class for caption * `swipe` duration in `ms` for swipe animation (**default** `400`) * `fit` scale factor in `[0, 1]` (relative to viewport dimensions) to fit image dimensions to current viewport (**default** `0` disabled) +* `fitsize` max size for fit to take place (**default** `Infinity` disabled) * `auto` boolean flag indicating that passed images are the hrefs of the gallery images themselves, instead of clickable elements (**default** `false`) diff --git a/src/touchTouch.js b/src/touchTouch.js index 16a00e6..426952c 100644 --- a/src/touchTouch.js +++ b/src/touchTouch.js @@ -1,7 +1,7 @@ /** * touchTouch.js * Enhanced Vanilla JavaScript version of https://github.com/tutorialzine/touchTouch Optimized Mobile Gallery by Martin Angelov -* @VERSION: 1.5.0 +* @VERSION: 1.5.1 * @license: MIT License * * https://github.com/foo123/touchTouch @@ -149,21 +149,21 @@ function loadImage(src, callback) }); img.src = src; } -function fit(img, scale) +function fit(img, scale, max) { if (!img || ('img' !== (img.tagName||'').toLowerCase())) return img; var w = img.width, h = img.height, - ww = scale*(window.innerWidth || document.documentElement.clientWidth), - wh = scale*(window.innerHeight || document.documentElement.clientHeight); - if (h * ww / w > wh) + ww = (window.innerWidth || document.documentElement.clientWidth), + wh = (window.innerHeight || document.documentElement.clientHeight); + if (h * ww > w * wh) { - img.style.height = String(wh) + 'px'; + img.style.height = String(scale*stdMath.min(max, wh)) + 'px'; img.style.width = 'auto'; } else { - img.style.width = String(ww) + 'px'; + img.style.width = String(scale*stdMath.min(max, ww)) + 'px'; img.style.height = 'auto'; } return img; @@ -219,7 +219,7 @@ function touchTouch(items, options) touchStart, touchMove, touchEnd, wheelTurn, keyPress, prevClick, nextClick, itemClick, onResize, showImage, preload, removeExtraHandlers, transform, - auto = false, fitscale = 0, + auto = false, fitscale = 0, fitsize = Infinity, factor = 4, threshold = 0.08, move_m = 15, move_d = 15, index = 0, tX = 0, tY = 0, sX = 1; @@ -234,11 +234,11 @@ function touchTouch(items, options) loadImage(items[index].href, function() { if (fitscale) { - fit(this, fitscale); + fit(this, fitscale, fitsize); if (!onResize) { addEvent(window, 'resize', onResize = debounce(function() { - placeholders.forEach(function(p) {fit(p.children[0], fitscale);}); + placeholders.forEach(function(p) {fit(p.children[0], fitscale, fitsize);}); }, 100), {passive:true, capture:false}); } } @@ -290,6 +290,7 @@ function touchTouch(items, options) auto = !!options.auto; fitscale = options.fit; + fitsize = null != options.fitsize ? (+options.fitsize) : Infinity; // undocumented options, for fine-tuning only if needed if (null != options._factor) factor = +options._factor; if (null != options._threshold) threshold = +options._threshold; @@ -703,7 +704,7 @@ function touchTouch(items, options) } }; } -touchTouch.VERSION = '1.5.0'; +touchTouch.VERSION = '1.5.1'; touchTouch.prototype = { constructor: touchTouch, dispose: noop, diff --git a/src/touchTouch.min.js b/src/touchTouch.min.js index f504b8b..4506e3c 100644 --- a/src/touchTouch.min.js +++ b/src/touchTouch.min.js @@ -1,10 +1,10 @@ /** * touchTouch.js * Enhanced Vanilla JavaScript version of https://github.com/tutorialzine/touchTouch Optimized Mobile Gallery by Martin Angelov -* @VERSION: 1.5.0 +* @VERSION: 1.5.1 * @license: MIT License * * https://github.com/foo123/touchTouch * **/ -!function(){"use strict";var L=Math,i=null,t=/(?:-?\d+(?:\.\d+)?)|(?:-?\.\d+)/g,n=/^\s+|\s+$/g,r=String.prototype.trim?function(e){return e.trim()}:function(e){return e.replace(n,"")};function X(){}function o(e){return parseFloat(e||0)||0}function G(e){return(String(e).match(t)||[]).map(o)}function V(e,t,n){return L.min(L.max(e,t),n)}function Y(n,r,i){var o;return function(){var e=this,t=arguments;if(clearTimeout(o),o=setTimeout(function(){o=null,n.apply(e,t)},r),i)return i.apply(e,t)}}function a(){var t=!1,e={};try{Object.defineProperty(e,"passive",{get:function(){return!(t=!0)}}),window.addEventListener("test",X,e),window.removeEventListener("test",X,e)}catch(e){t=!1}return t}function _(e,t,n,r){null==i&&(i=a()),e.attachEvent?e.attachEvent("on"+t,n):e.addEventListener(t,n,i?r:"object"==typeof r?!!r.capture:!!r)}function A(e,t,n,r){null==i&&(i=a()),e.detachEvent?e.detachEvent("on"+t,n):e.removeEventListener(t,n,i?r:"object"==typeof r?!!r.capture:!!r)}function j(e,t){return e.classList?e.classList.add(t):e.className=""===e.className?t:e.className+" "+t,e}function z(e,t){e.classList?e.classList.remove(t):e.className=r((" "+e.className+" ").replace(" "+t+" "," "))}function O(e){return e.style.setProperty("--touchTouchDisplay",e.style.getPropertyValue("display")),e.style.display="none",e}var H=null,W=null,q=!1,F=0;function I(){q&&(q=!1,H=null,z(O(W),"tt-visible"),setTimeout(function(){W.textContent=""},0))}function M(e,t){e.style.left=String(100*-t)+"%"}function R(e,t){var n,r,i;e&&"img"===(e.tagName||"").toLowerCase()&&(n=e.width,r=e.height,i=t*(window.innerWidth||document.documentElement.clientWidth),(t=t*(window.innerHeight||document.documentElement.clientHeight))=i.length)return!1;var t,n,r;o[e].children.length||(t=i[e].href,n=function(){P&&(R(this,P),y||_(window,"resize",y=Y(function(){o.forEach(function(e){R(e.children[0],P)})},100),{passive:!0,capture:!1})),o[e].textContent="",j(o[e],"tt-img"),o[e].appendChild(this)},_(r=document.createElement("img"),"load",function e(){A(r,"load",e),j(r,r.height>r.width?"tt-portrait":r.height===r.width?"tt-square":"tt-landscape"),n.call(r)}),r.src=t)},m=function(e){if(e<0||e>=i.length)return!1;setTimeout(function(){g(e)},200)},w=function(){d&&A(l,d.isTouch?"touchmove":"mousemove",d,{passive:!1,capture:!1}),f&&(f.isTouch?(A(l,"touchend",f,{passive:!0,capture:!1}),A(l,"touchcancel",f,{passive:!0,capture:!1})):A(l,"mouseup",f,{passive:!0,capture:!1})),f=d=null},D=function(e){var t;K=e?(t=[G((t=e).style.getPropertyValue("margin-left")||"")[0]||0,G(t.style.getPropertyValue("margin-top")||"")[0]||0],e=G(e.style.getPropertyValue("transform")||""),N=t[0],b=t[1],null!=e[0]?e[0]:1):(b=N=0,1)},C=!!(e=e||{}).auto,P=e.fit,null!=e._factor&&(x=+e._factor),null!=e._threshold&&(k=+e._threshold),null!=e._move&&(E=S=+e._move),W||(j(W=document.createElement("div"),"tt-gallery-overlay"),"ontouchstart"in window&&j(W,"tt-touch-screen"),O(W)),l=j(document.createElement("div"),"tt-gallery-slider"),e.slider&&j(l,e.slider),l.id="tt-gallery-slider-"+String(++F),l.style.setProperty("touch-action","none"),l.style.setProperty("-moz-transition-duration",String(e.swipe||400)+"ms"),l.style.setProperty("-webkit-transition-duration",String(e.swipe||400)+"ms"),l.style.setProperty("transition-duration",String(e.swipe||400)+"ms"),p=j(document.createElement("a"),"tt-prev-arrow"),e.prevArrow&&j(p,e.prevArrow),h=j(document.createElement("a"),"tt-next-arrow"),e.nextArrow&&j(h,e.nextArrow),e.showCaption&&(t=j(document.createElement("div"),"tt-caption"),e.caption)&&j(t,e.caption),o=i.map(function(e){var t=document.createElement("div");return j(t,"tt-placeholder"),l.appendChild(t),t}),_(l,"touchstart",n=Y(function(e){var o,a,u,n,r,s=e.touches&&e.touches.length,t=e.target;"img"===t.tagName.toLowerCase()?s&&2===e.touches.length||!s&&(e.ctrlKey||e.metaKey)?(w(),o=s?e.touches[0].pageX<=e.touches[1].pageX?[e.touches[0],e.touches[1]]:[e.touches[1],e.touches[0]]:null,a=s?[o[0].pageX,o[0].pageY,o[1].pageX,o[1].pageY]:[e.pageX,e.pageY],u=t,_(l,s?"touchmove":"mousemove",d=function(e){var t,n,r,i;return e.preventDefault&&e.preventDefault(),s&&2!==e.touches.length||(t=s?[o[0].identifier===e.touches[0].identifier?e.touches[0]:o[0].identifier===e.touches[1].identifier?e.touches[1]:null,o[1].identifier===e.touches[0].identifier?e.touches[0]:o[1].identifier===e.touches[1].identifier?e.touches[1]:null]:null,(!s||t[0]&&t[1])&&(t=s?[t[0].pageX,t[0].pageY,t[1].pageX,t[1].pageY]:[e.pageX,e.pageY],e=s?(n=N+t[2]-a[2],r=b+t[3]-a[3],i=L.hypot(t[2]-t[0],t[3]-t[1])/L.hypot(a[2]-a[0],a[3]-a[1])-1,V(K+i*x,1,3)):(n=N+t[0]-a[0],r=b+t[1]-a[1],K),L.abs(e-1)<.01?$(u,N=0,b=0,K=1):!s||L.abs(i)=i.length)return!1;var t,n,r;o[e].children.length||(t=i[e].href,n=function(){P&&($(this,P,x),y||z(window,"resize",y=_(function(){o.forEach(function(e){$(e.children[0],P,x)})},100),{passive:!0,capture:!1})),o[e].textContent="",j(o[e],"tt-img"),o[e].appendChild(this)},z(r=document.createElement("img"),"load",function e(){A(r,"load",e),j(r,r.height>r.width?"tt-portrait":r.height===r.width?"tt-square":"tt-landscape"),n.call(r)}),r.src=t)},g=function(e){if(e<0||e>=i.length)return!1;setTimeout(function(){m(e)},200)},w=function(){f&&A(c,f.isTouch?"touchmove":"mousemove",f,{passive:!1,capture:!1}),d&&(d.isTouch?(A(c,"touchend",d,{passive:!0,capture:!1}),A(c,"touchcancel",d,{passive:!0,capture:!1})):A(c,"mouseup",d,{passive:!0,capture:!1})),d=f=null},D=function(e){var t;L=e?(t=[V((t=e).style.getPropertyValue("margin-left")||"")[0]||0,V(t.style.getPropertyValue("margin-top")||"")[0]||0],e=V(e.style.getPropertyValue("transform")||""),b=t[0],K=t[1],null!=e[0]?e[0]:1):(K=b=0,1)},C=!!(e=e||{}).auto,P=e.fit,x=null!=e.fitsize?+e.fitsize:1/0,null!=e._factor&&(k=+e._factor),null!=e._threshold&&(E=+e._threshold),null!=e._move&&(S=T=+e._move),q||(j(q=document.createElement("div"),"tt-gallery-overlay"),"ontouchstart"in window&&j(q,"tt-touch-screen"),H(q)),c=j(document.createElement("div"),"tt-gallery-slider"),e.slider&&j(c,e.slider),c.id="tt-gallery-slider-"+String(++I),c.style.setProperty("touch-action","none"),c.style.setProperty("-moz-transition-duration",String(e.swipe||400)+"ms"),c.style.setProperty("-webkit-transition-duration",String(e.swipe||400)+"ms"),c.style.setProperty("transition-duration",String(e.swipe||400)+"ms"),p=j(document.createElement("a"),"tt-prev-arrow"),e.prevArrow&&j(p,e.prevArrow),h=j(document.createElement("a"),"tt-next-arrow"),e.nextArrow&&j(h,e.nextArrow),e.showCaption&&(t=j(document.createElement("div"),"tt-caption"),e.caption)&&j(t,e.caption),o=i.map(function(e){var t=document.createElement("div");return j(t,"tt-placeholder"),c.appendChild(t),t}),z(c,"touchstart",n=_(function(e){var o,a,u,n,r,s=e.touches&&e.touches.length,t=e.target;"img"===t.tagName.toLowerCase()?s&&2===e.touches.length||!s&&(e.ctrlKey||e.metaKey)?(w(),o=s?e.touches[0].pageX<=e.touches[1].pageX?[e.touches[0],e.touches[1]]:[e.touches[1],e.touches[0]]:null,a=s?[o[0].pageX,o[0].pageY,o[1].pageX,o[1].pageY]:[e.pageX,e.pageY],u=t,z(c,s?"touchmove":"mousemove",f=function(e){var t,n,r,i;return e.preventDefault&&e.preventDefault(),s&&2!==e.touches.length||(t=s?[o[0].identifier===e.touches[0].identifier?e.touches[0]:o[0].identifier===e.touches[1].identifier?e.touches[1]:null,o[1].identifier===e.touches[0].identifier?e.touches[0]:o[1].identifier===e.touches[1].identifier?e.touches[1]:null]:null,(!s||t[0]&&t[1])&&(t=s?[t[0].pageX,t[0].pageY,t[1].pageX,t[1].pageY]:[e.pageX,e.pageY],e=s?(n=b+t[2]-a[2],r=K+t[3]-a[3],i=X.hypot(t[2]-t[0],t[3]-t[1])/X.hypot(a[2]-a[0],a[3]-a[1])-1,Y(L+i*k,1,3)):(n=b+t[0]-a[0],r=K+t[1]-a[1],L),X.abs(e-1)<.01?B(u,b=0,K=0,L=1):!s||X.abs(i)Vanilla touchTouch Demo // multiple instances touchTouch(document.getElementById('gallery1').querySelectorAll('.magnifier'), {showCaption:true}); touchTouch(document.getElementById('gallery2').querySelectorAll('.magnifier'), {fit:0.7}); -const t = touchTouch([{href:"./imgs/1.jpg"},{href:"./imgs/2.jpg"},{href:"./imgs/4.jpg"},{href:"./imgs/3.jpg"}], {auto:true,fit:0.8}); +const t = touchTouch([{href:"./imgs/1.jpg"},{href:"./imgs/2.jpg"},{href:"./imgs/4.jpg"},{href:"./imgs/3.jpg"}], {auto:true,fit:0.8,fitsize:600}); document.getElementById('gallery3').addEventListener('click', () => t.showGallery(), false);