From 3537ca2f664d315ab864bd0af3306ba2e42b5b9c Mon Sep 17 00:00:00 2001 From: Marek Grzybek Date: Tue, 23 Jan 2018 14:31:31 +0100 Subject: [PATCH] Build update --- dist/baguetteBox.js | 128 ++++++++++++++++++++++++++-------------- dist/baguetteBox.min.js | 2 +- 2 files changed, 86 insertions(+), 44 deletions(-) diff --git a/dist/baguetteBox.js b/dist/baguetteBox.js index 869fb440..2b151f3a 100644 --- a/dist/baguetteBox.js +++ b/dist/baguetteBox.js @@ -58,6 +58,8 @@ var currentGallery = []; // Current image index inside the slider var currentIndex = 0; + // Visibility of the overlay + var isOverlayVisible = false; // Touch event start position (for slide gesture) var touch = {}; // If set to true ignore touch events because animation was already fired @@ -162,11 +164,12 @@ function run(selector, userOptions) { // Fill supports object supports.transforms = testTransformsSupport(); - supports.svg = testSVGSupport(); + supports.svg = testSvgSupport(); + supports.passiveEvents = testPassiveEventsSupport(); buildOverlay(); removeFromCache(selector); - bindImageClickListeners(selector, userOptions); + return bindImageClickListeners(selector, userOptions); } function bindImageClickListeners(selector, userOptions) { @@ -217,6 +220,8 @@ }); selectorData.galleries.push(gallery); }); + + return selectorData.galleries; } function clearCachedData() { @@ -306,25 +311,27 @@ } function bindEvents() { + var options = supports.passiveEvents ? { passive: true } : null; bind(overlay, 'click', overlayClickHandler); bind(previousButton, 'click', previousButtonClickHandler); bind(nextButton, 'click', nextButtonClickHandler); bind(closeButton, 'click', closeButtonClickHandler); bind(slider, 'contextmenu', contextmenuHandler); - bind(overlay, 'touchstart', touchstartHandler); - bind(overlay, 'touchmove', touchmoveHandler); + bind(overlay, 'touchstart', touchstartHandler, options); + bind(overlay, 'touchmove', touchmoveHandler, options); bind(overlay, 'touchend', touchendHandler); bind(document, 'focus', trapFocusInsideOverlay, true); } function unbindEvents() { + var options = supports.passiveEvents ? { passive: true } : null; unbind(overlay, 'click', overlayClickHandler); unbind(previousButton, 'click', previousButtonClickHandler); unbind(nextButton, 'click', nextButtonClickHandler); unbind(closeButton, 'click', closeButtonClickHandler); unbind(slider, 'contextmenu', contextmenuHandler); - unbind(overlay, 'touchstart', touchstartHandler); - unbind(overlay, 'touchmove', touchmoveHandler); + unbind(overlay, 'touchstart', touchstartHandler, options); + unbind(overlay, 'touchmove', touchmoveHandler, options); unbind(overlay, 'touchend', touchendHandler); unbind(document, 'focus', trapFocusInsideOverlay, true); } @@ -430,6 +437,7 @@ } documentLastFocus = document.activeElement; initFocus(); + isOverlayVisible = true; } function initFocus() { @@ -482,6 +490,7 @@ options.afterHide(); } documentLastFocus && documentLastFocus.focus(); + isOverlayVisible = false; }, 500); } @@ -581,46 +590,62 @@ // Return false at the right end of the gallery function showNextImage() { - var returnValue; - // Check if next image exists - if (currentIndex <= imagesElements.length - 2) { - currentIndex++; - updateOffset(); - preloadNext(currentIndex); - returnValue = true; - } else if (options.animation) { - slider.className = 'bounce-from-right'; - setTimeout(function() { - slider.className = ''; - }, 400); - returnValue = false; - } - if (options.onChange) { - options.onChange(currentIndex, imagesElements.length); - } - return returnValue; + return show(currentIndex + 1); } // Return false at the left end of the gallery function showPreviousImage() { - var returnValue; - // Check if previous image exists - if (currentIndex >= 1) { - currentIndex--; - updateOffset(); - preloadPrev(currentIndex); - returnValue = true; - } else if (options.animation) { - slider.className = 'bounce-from-left'; - setTimeout(function() { - slider.className = ''; - }, 400); - returnValue = false; + return show(currentIndex - 1); + } + + /** + * Move the gallery to a specific index + * @param `index` {number} - the position of the image + * @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one + * @return {boolean} - true on success or false if the index is invalid + */ + function show(index, gallery) { + if (!isOverlayVisible && index >= 0 && index < gallery.length) { + prepareOverlay(gallery, options); + showOverlay(index); + return true; + } + if (index < 0) { + if (options.animation) { + bounceAnimation('left'); + } + return false; } + if (index >= imagesElements.length) { + if (options.animation) { + bounceAnimation('right'); + } + return false; + } + + currentIndex = index; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + updateOffset(); + if (options.onChange) { options.onChange(currentIndex, imagesElements.length); } - return returnValue; + + return true; + } + + /** + * Triggers the bounce animation + * @param {('left'|'right')} direction - Direction of the movement + */ + function bounceAnimation(direction) { + slider.className = 'bounce-from-' + direction; + setTimeout(function() { + slider.className = ''; + }, 400); } function updateOffset() { @@ -647,12 +672,27 @@ } // Inline SVG test - function testSVGSupport() { + function testSvgSupport() { var div = create('div'); div.innerHTML = ''; return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg'; } + // Borrowed from https://github.com/seiyria/bootstrap-slider/pull/680/files + function testPassiveEventsSupport() { + var passiveEvents = false; + try { + var opts = Object.defineProperty({}, 'passive', { + get: function() { + passiveEvents = true; + } + }); + window.addEventListener('test', null, opts); + } catch (e) { /* Silence the error and continue */ } + + return passiveEvents; + } + function preloadNext(index) { if (index - currentIndex >= options.preload) { return; @@ -671,9 +711,9 @@ }); } - function bind(element, event, callback, useCapture) { + function bind(element, event, callback, options) { if (element.addEventListener) { - element.addEventListener(event, callback, useCapture); + element.addEventListener(event, callback, options); } else { // IE8 fallback element.attachEvent('on' + event, function(event) { @@ -685,9 +725,9 @@ } } - function unbind(element, event, callback, useCapture) { + function unbind(element, event, callback, options) { if (element.removeEventListener) { - element.removeEventListener(event, callback, useCapture); + element.removeEventListener(event, callback, options); } else { // IE8 fallback element.detachEvent('on' + event, callback); @@ -714,8 +754,10 @@ return { run: run, + show: show, showNext: showNextImage, showPrevious: showPreviousImage, + hide: hideOverlay, destroy: destroyPlugin }; })); diff --git a/dist/baguetteBox.min.js b/dist/baguetteBox.min.js index 671d6ace..d680a3fc 100644 --- a/dist/baguetteBox.min.js +++ b/dist/baguetteBox.min.js @@ -4,4 +4,4 @@ * @version 1.9.1 * @url https://github.com/feimosi/baguetteBox.js */ -!function(t,e){"use strict";"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():t.baguetteBox=e()}(this,function(){"use strict";function t(t,e){var n=document.querySelectorAll(t),o={galleries:[],nodeList:n};D[t]=o,[].forEach.call(n,function(t){e&&e.filter&&(z=e.filter);var n=[];if(n="A"===t.tagName?[t]:t.getElementsByTagName("a"),0!==(n=[].filter.call(n,function(t){if(-1===t.className.indexOf(e&&e.ignoreClass))return z.test(t.href)})).length){var i=[];[].forEach.call(n,function(t,n){var o=function(t){t.preventDefault?t.preventDefault():t.returnValue=!1,r(i,e),u(n)},a={eventHandler:o,imageElement:t};x(t,"click",o),i.push(a)}),o.galleries.push(i)}})}function e(){for(var t in D)D.hasOwnProperty(t)&&n(t)}function n(t){if(D.hasOwnProperty(t)){var e=D[t].galleries;[].forEach.call(e,function(t){[].forEach.call(t,function(t){E(t.imageElement,"click",t.eventHandler)}),X===t&&(X=[])}),delete D[t]}}function o(){if(N=B("baguetteBox-overlay"))return A=B("baguetteBox-slider"),L=B("previous-button"),S=B("next-button"),void(P=B("close-button"));(N=T("div")).setAttribute("role","dialog"),N.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(N),(A=T("div")).id="baguetteBox-slider",N.appendChild(A),(L=T("button")).setAttribute("type","button"),L.id="previous-button",L.setAttribute("aria-label","Previous"),L.innerHTML=j.svg?F:"<",N.appendChild(L),(S=T("button")).setAttribute("type","button"),S.id="next-button",S.setAttribute("aria-label","Next"),S.innerHTML=j.svg?H:">",N.appendChild(S),(P=T("button")).setAttribute("type","button"),P.id="close-button",P.setAttribute("aria-label","Close"),P.innerHTML=j.svg?I:"×",N.appendChild(P),L.className=S.className=P.className="baguetteBox-button",a()}function i(t){switch(t.keyCode){case 37:h();break;case 39:p();break;case 27:g()}}function a(){x(N,"click",W),x(L,"click",G),x(S,"click",J),x(P,"click",K),x(A,"contextmenu",_),x(N,"touchstart",Q),x(N,"touchmove",Z),x(N,"touchend",$),x(document,"focus",tt,!0)}function l(){E(N,"click",W),E(L,"click",G),E(S,"click",J),E(P,"click",K),E(A,"contextmenu",_),E(N,"touchstart",Q),E(N,"touchmove",Z),E(N,"touchend",$),E(document,"focus",tt,!0)}function r(t,e){if(X!==t){for(X=t,s(e);A.firstChild;)A.removeChild(A.firstChild);V.length=0;for(var n,o=[],i=[],a=0;a
',Y.captions&&l){var u=T("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=l,s.appendChild(u)}n.appendChild(s);var c=T("img");c.onload=function(){var n=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");s.removeChild(n),!Y.async&&e&&e()},c.setAttribute("src",r),c.alt=a?a.alt||"":"",Y.titleTag&&l&&(c.title=l),s.appendChild(c),Y.async&&e&&e()}}function b(t){var e=t.href;if(t.dataset){var n=[];for(var o in t.dataset)"at-"!==o.substring(0,3)||isNaN(o.substring(3))||(n[o.replace("at-","")]=t.dataset[o]);for(var i=Object.keys(n).sort(function(t,e){return parseInt(t,10)=1?(M--,y(),C(M),t=!0):Y.animation&&(A.className="bounce-from-left",setTimeout(function(){A.className=""},400),t=!1),Y.onChange&&Y.onChange(M,V.length),t}function y(){var t=100*-M+"%";"fadeIn"===Y.animation?(A.style.opacity=0,setTimeout(function(){j.transforms?A.style.transform=A.style.webkitTransform="translate3d("+t+",0,0)":A.style.left=t,A.style.opacity=1},400)):j.transforms?A.style.transform=A.style.webkitTransform="translate3d("+t+",0,0)":A.style.left=t}function v(){var t=T("div");return"undefined"!=typeof t.style.perspective||"undefined"!=typeof t.style.webkitPerspective}function w(){var t=T("div");return t.innerHTML="","http://www.w3.org/2000/svg"===(t.firstChild&&t.firstChild.namespaceURI)}function k(t){t-M>=Y.preload||m(t+1,function(){k(t+1)})}function C(t){M-t>=Y.preload||m(t-1,function(){C(t-1)})}function x(t,e,n,o){t.addEventListener?t.addEventListener(e,n,o):t.attachEvent("on"+e,function(t){(t=t||window.event).target=t.target||t.srcElement,n(t)})}function E(t,e,n,o){t.removeEventListener?t.removeEventListener(e,n,o):t.detachEvent("on"+e,n)}function B(t){return document.getElementById(t)}function T(t){return document.createElement(t)}var N,A,L,S,P,F='',H='',I='',Y={},q={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},j={},X=[],M=0,R={},O=!1,z=/.+\.(gif|jpe?g|png|webp)/i,D={},V=[],U=null,W=function(t){-1!==t.target.id.indexOf("baguette-img")&&g()},G=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,h()},J=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,p()},K=function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0,g()},Q=function(t){R.count++,R.count>1&&(R.multitouch=!0),R.startX=t.changedTouches[0].pageX,R.startY=t.changedTouches[0].pageY},Z=function(t){if(!O&&!R.multitouch){t.preventDefault?t.preventDefault():t.returnValue=!1;var e=t.touches[0]||t.changedTouches[0];e.pageX-R.startX>40?(O=!0,h()):e.pageX-R.startX<-40?(O=!0,p()):R.startY-e.pageY>100&&g()}},$=function(){R.count--,R.count<=0&&(R.multitouch=!1),O=!1},_=function(){$()},tt=function(t){"block"===N.style.display&&N.contains&&!N.contains(t.target)&&(t.stopPropagation(),c())};return[].forEach||(Array.prototype.forEach=function(t,e){for(var n=0;n1&&(p.multitouch=!0),p.startX=e.changedTouches[0].pageX,p.startY=e.changedTouches[0].pageY},B=function(e){if(!b&&!p.multitouch){e.preventDefault?e.preventDefault():e.returnValue=!1;var t=e.touches[0]||e.changedTouches[0];t.pageX-p.startX>40?(b=!0,q()):t.pageX-p.startX<-40?(b=!0,j()):p.startY-t.pageY>100&&I()}},T=function(){p.count--,p.count<=0&&(p.multitouch=!1),b=!1},N=function(){T()},L=function(t){"block"===e.style.display&&e.contains&&!e.contains(t.target)&&(t.stopPropagation(),H())};function A(e){if(v.hasOwnProperty(e)){var t=v[e].galleries;[].forEach.call(t,function(e){[].forEach.call(e,function(e){V(e.imageElement,"click",e.eventHandler)}),d===e&&(d=[])}),delete v[e]}}function P(e){switch(e.keyCode){case 37:q();break;case 39:j();break;case 27:I()}}function S(i,a){if(d!==i){for(d=i,function(i){i||(i={});for(var a in u)r[a]=u[a],"undefined"!=typeof i[a]&&(r[a]=i[a]);t.style.transition=t.style.webkitTransition="fadeIn"===r.animation?"opacity .4s ease":"slideIn"===r.animation?"":"none","auto"===r.buttons&&("ontouchstart"in window||1===d.length)&&(r.buttons=!1);n.style.display=o.style.display=r.buttons?"":"none";try{e.style.backgroundColor=r.overlayBackgroundColor}catch(s){}}(a);t.firstChild;)t.removeChild(t.firstChild);h.length=0;for(var s,l=[],c=[],f=0;f
',r.captions&&s){var c=W("figcaption");c.id="baguetteBox-figcaption-"+e,c.innerHTML=s,u.appendChild(c)}n.appendChild(u);var f=W("img");f.onload=function(){var n=document.querySelector("#baguette-img-"+e+" .baguetteBox-spinner");u.removeChild(n),!r.async&&t&&t()},f.setAttribute("src",l),f.alt=a&&a.alt||"",r.titleTag&&s&&(f.title=s),u.appendChild(f),r.async&&t&&t()}}function j(){return X(f+1)}function q(){return X(f-1)}function X(e,t){return!g&&e>=0&&e=h.length?(r.animation&&M("right"),!1):(Y(f=e,function(){R(f),z(f)}),O(),r.onChange&&r.onChange(f,h.length),!0)}function M(e){t.className="bounce-from-"+e,setTimeout(function(){t.className=""},400)}function O(){var e=100*-f+"%";"fadeIn"===r.animation?(t.style.opacity=0,setTimeout(function(){c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e,t.style.opacity=1},400)):c.transforms?t.style.transform=t.style.webkitTransform="translate3d("+e+",0,0)":t.style.left=e}function R(e){e-f>=r.preload||Y(e+1,function(){R(e+1)})}function z(e){f-e>=r.preload||Y(e-1,function(){z(e-1)})}function D(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function V(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function U(e){return document.getElementById(e)}function W(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(f.firstChild&&f.firstChild.namespaceURI)),c.passiveEvents=function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function(){if(e=U("baguetteBox-overlay"))return t=U("baguetteBox-slider"),n=U("previous-button"),o=U("next-button"),void(i=U("close-button"));var r;(e=W("div")).setAttribute("role","dialog"),e.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(e),(t=W("div")).id="baguetteBox-slider",e.appendChild(t),(n=W("button")).setAttribute("type","button"),n.id="previous-button",n.setAttribute("aria-label","Previous"),n.innerHTML=c.svg?a:"<",e.appendChild(n),(o=W("button")).setAttribute("type","button"),o.id="next-button",o.setAttribute("aria-label","Next"),o.innerHTML=c.svg?s:">",e.appendChild(o),(i=W("button")).setAttribute("type","button"),i.id="close-button",i.setAttribute("aria-label","Close"),i.innerHTML=c.svg?l:"×",e.appendChild(i),n.className=o.className=i.className="baguetteBox-button",r=c.passiveEvents?{passive:!0}:null,D(e,"click",w),D(n,"click",k),D(o,"click",x),D(i,"click",C),D(t,"contextmenu",N),D(e,"touchstart",E,r),D(e,"touchmove",B,r),D(e,"touchend",T),D(document,"focus",L,!0)}(),A(r),g=r,p=u,b=document.querySelectorAll(g),h={galleries:[],nodeList:b},v[g]=h,[].forEach.call(b,function(e){p&&p.filter&&(m=p.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(p&&p.ignoreClass))return m.test(e.href)})).length){var n=[];[].forEach.call(t,function(e,t){var o=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,S(n,p),F(t)},i={eventHandler:o,imageElement:e};D(e,"click",o),n.push(i)}),h.galleries.push(n)}}),h.galleries},show:X,showNext:j,showPrevious:q,hide:I,destroy:function(){var a;a=c.passiveEvents?{passive:!0}:null,V(e,"click",w),V(n,"click",k),V(o,"click",x),V(i,"click",C),V(t,"contextmenu",N),V(e,"touchstart",E,a),V(e,"touchmove",B,a),V(e,"touchend",T),V(document,"focus",L,!0),function(){for(var e in v)v.hasOwnProperty(e)&&A(e)}(),V(document,"keydown",P),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),v={},d=[],f=0}}}); \ No newline at end of file