From 70367a36289b673056abb86670408e5723f3b760 Mon Sep 17 00:00:00 2001 From: imgix-git-robot Date: Mon, 10 Oct 2022 19:22:58 +0000 Subject: [PATCH] chore(release): 1.5.1 ## [1.5.1](https://github.com/imgix/drift/compare/v1.5.0...v1.5.1) (2022-10-10) ### Bug Fixes * add required test for eventlistener ([c43f12e](https://github.com/imgix/drift/commit/c43f12eb9b9bcb2fbbbc8edfc4e3cfd94bb2f0b0)), closes [#647](https://github.com/imgix/drift/issues/647) * remove optional eventlistener parameters ([d546ce1](https://github.com/imgix/drift/commit/d546ce1f5ed4260d698ecd46be2a092221630d55)), closes [#647](https://github.com/imgix/drift/issues/647) [skip ci] --- dist/Drift.js | 24 ++++++++++++------------ dist/Drift.min.js | 24 ++++++++++++------------ dist/Drift.min.js.map | 2 +- dist/drift-basic.min.css | 2 +- package.json | 2 +- src/js/Drift.js | 2 +- 6 files changed, 28 insertions(+), 28 deletions(-) diff --git a/dist/Drift.js b/dist/Drift.js index f508c12d..c8d74542 100644 --- a/dist/Drift.js +++ b/dist/Drift.js @@ -6,17 +6,17 @@ containerEl:a};this.openClasses=this._buildClasses("open");this._buildElement()} v=void 0===a.hoverDelay?0:a.hoverDelay,w=void 0===a.touchDelay?0:a.touchDelay,l=void 0===a.hoverBoundingBox?x():a.hoverBoundingBox,m=void 0===a.touchBoundingBox?x():a.touchBoundingBox,n=void 0===a.namespace?null:a.namespace,p=void 0===a.zoomFactor?x():a.zoomFactor,B=void 0===a.boundingBoxContainer?x():a.boundingBoxContainer;this.settings={el:b,zoomPane:c,sourceAttribute:e,handleTouch:f,onShow:q,onHide:k,hoverDelay:v,touchDelay:w,hoverBoundingBox:l,touchBoundingBox:m,namespace:n,zoomFactor:p,boundingBoxContainer:B, passive:void 0===a.passive?!1:a.passive};if(this.settings.hoverBoundingBox||this.settings.touchBoundingBox)this.boundingBox=new y({namespace:this.settings.namespace,zoomFactor:this.settings.zoomFactor,containerEl:this.settings.boundingBoxContainer});this.enabled=!0;this._bindEvents()},A=function(a){a=void 0===a?{}:a;this.HAS_ANIMATION=!1;if("undefined"!==typeof document){var b=document.createElement("div").style;this.HAS_ANIMATION="animation"in b||"webkitAnimation"in b}this._completeShow=this._completeShow.bind(this); this._completeHide=this._completeHide.bind(this);this._handleLoad=this._handleLoad.bind(this);this.isShowing=!1;b=void 0===a.container?null:a.container;var c=void 0===a.zoomFactor?x():a.zoomFactor,e=void 0===a.inline?x():a.inline,f=void 0===a.namespace?null:a.namespace,q=void 0===a.showWhitespaceAtEdges?x():a.showWhitespaceAtEdges,k=void 0===a.containInline?x():a.containInline;this.settings={container:b,zoomFactor:c,inline:e,namespace:f,showWhitespaceAtEdges:q,containInline:k,inlineOffsetX:void 0=== -a.inlineOffsetX?0:a.inlineOffsetX,inlineOffsetY:void 0===a.inlineOffsetY?0:a.inlineOffsetY,inlineContainer:void 0===a.inlineContainer?document.body:a.inlineContainer};this.openClasses=this._buildClasses("open");this.openingClasses=this._buildClasses("opening");this.closingClasses=this._buildClasses("closing");this.inlineClasses=this._buildClasses("inline");this.loadingClasses=this._buildClasses("loading");this._buildElement()},C=function(a,b){b=void 0===b?{}:b;this.VERSION="1.4.5";this.triggerEl= +a.inlineOffsetX?0:a.inlineOffsetX,inlineOffsetY:void 0===a.inlineOffsetY?0:a.inlineOffsetY,inlineContainer:void 0===a.inlineContainer?document.body:a.inlineContainer};this.openClasses=this._buildClasses("open");this.openingClasses=this._buildClasses("opening");this.closingClasses=this._buildClasses("closing");this.inlineClasses=this._buildClasses("inline");this.loadingClasses=this._buildClasses("loading");this._buildElement()},C=function(a,b){b=void 0===b?{}:b;this.VERSION="1.5.0";this.triggerEl= a;this.destroy=this.destroy.bind(this);if(!r(this.triggerEl))throw new TypeError("`new Drift` requires a DOM element as its first argument.");a=b.namespace||null;var c=b.showWhitespaceAtEdges||!1,e=b.containInline||!1,f=b.inlineOffsetX||0,q=b.inlineOffsetY||0,k=b.inlineContainer||document.body,v=b.sourceAttribute||"data-zoom",w=b.zoomFactor||3,l=void 0===b.paneContainer?document.body:b.paneContainer,m=b.inlinePane||375,n="handleTouch"in b?!!b.handleTouch:!0,p=b.onShow||null,B=b.onHide||null,D="injectBaseStyles"in b?!!b.injectBaseStyles:!0,E=b.hoverDelay||0,F=b.touchDelay||0,G=b.hoverBoundingBox||!1,H=b.touchBoundingBox||!1,I=b.boundingBoxContainer||document.body;b=b.passive||!1;if(!0!==m&&!r(l))throw new TypeError("`paneContainer` must be a DOM element when `inlinePane !== true`");if(!r(k))throw new TypeError("`inlineContainer` must be a DOM element");this.settings={namespace:a,showWhitespaceAtEdges:c,containInline:e,inlineOffsetX:f,inlineOffsetY:q,inlineContainer:k,sourceAttribute:v,zoomFactor:w,paneContainer:l, inlinePane:m,handleTouch:n,onShow:p,onHide:B,injectBaseStyles:D,hoverDelay:E,touchDelay:F,hoverBoundingBox:G,touchBoundingBox:H,boundingBoxContainer:I,passive:b};this.settings.injectBaseStyles&&!document.querySelector(".drift-base-styles")&&(b=document.createElement("style"),b.type="text/css",b.classList.add("drift-base-styles"),b.appendChild(document.createTextNode(".drift-bounding-box,.drift-zoom-pane{position:absolute;pointer-events:none}@keyframes noop{0%{zoom:1}}@-webkit-keyframes noop{0%{zoom:1}}.drift-zoom-pane.drift-open{display:block}.drift-zoom-pane.drift-closing,.drift-zoom-pane.drift-opening{animation:noop 1ms;-webkit-animation:noop 1ms}.drift-zoom-pane{overflow:hidden;width:100%;height:100%;top:0;left:0}.drift-zoom-pane-loader{display:none}.drift-zoom-pane img{position:absolute;display:block;max-width:none;max-height:none}")), a=document.head,a.insertBefore(b,a.firstChild));this._buildZoomPane();this._buildTrigger()},h="object"===typeof HTMLElement;y.prototype._buildClasses=function(a){var b=["drift-"+a],c=this.settings.namespace;c&&b.push(c+"-"+a);return b};y.prototype._buildElement=function(){this.el=document.createElement("div");t(this.el,this._buildClasses("bounding-box"))};y.prototype.show=function(a,b){this.isShowing=!0;this.settings.containerEl.appendChild(this.el);var c=this.el.style;c.width=Math.round(a/this.settings.zoomFactor)+"px";c.height=Math.round(b/this.settings.zoomFactor)+"px";t(this.el,this.openClasses)}; y.prototype.hide=function(){this.isShowing&&this.settings.containerEl.removeChild(this.el);this.isShowing=!1;u(this.el,this.openClasses)}; y.prototype.setPosition=function(a,b,c){var e=window.pageXOffset,f=window.pageYOffset;a=c.left+a*c.width-this.el.clientWidth/2+e;b=c.top+b*c.height-this.el.clientHeight/2+f;ac.left+c.width+e&&(a=c.left+c.width-this.el.clientWidth+e);bc.top+c.height+f&&(b=c.top+c.height-this.el.clientHeight+f);this.el.style.left=a+"px";this.el.style.top=b+"px"};z.prototype._preventDefault=function(a){a.preventDefault()};z.prototype._preventDefaultAllowTouchScroll=function(a){this.settings.touchDelay&&this._isTouchEvent(a)&&!this.isShowing||a.preventDefault()};z.prototype._isTouchEvent=function(a){return!!a.touches}; -z.prototype._bindEvents=function(){this.settings.el.addEventListener("mouseenter",this._handleEntry,!1);this.settings.el.addEventListener("mouseleave",this._hide,!1);this.settings.el.addEventListener("mousemove",this._handleMovement,!1);var a={passive:this.settings.passive};this.settings.handleTouch?(this.settings.el.addEventListener("touchstart",this._handleEntry,a),this.settings.el.addEventListener("touchend",this._hide,!1),this.settings.el.addEventListener("touchmove",this._handleMovement,a)): -(this.settings.el.addEventListener("touchstart",this._preventDefault,a),this.settings.el.addEventListener("touchend",this._preventDefault,!1),this.settings.el.addEventListener("touchmove",this._preventDefault,a))}; -z.prototype._unbindEvents=function(){this.settings.el.removeEventListener("mouseenter",this._handleEntry,!1);this.settings.el.removeEventListener("mouseleave",this._hide,!1);this.settings.el.removeEventListener("mousemove",this._handleMovement,!1);this.settings.handleTouch?(this.settings.el.removeEventListener("touchstart",this._handleEntry,!1),this.settings.el.removeEventListener("touchend",this._hide,!1),this.settings.el.removeEventListener("touchmove",this._handleMovement,!1)):(this.settings.el.removeEventListener("touchstart", -this._preventDefault,!1),this.settings.el.removeEventListener("touchend",this._preventDefault,!1),this.settings.el.removeEventListener("touchmove",this._preventDefault,!1))};z.prototype._handleEntry=function(a){this._preventDefaultAllowTouchScroll(a);this._lastMovement=a;"mouseenter"==a.type&&this.settings.hoverDelay?this.entryTimeout=setTimeout(this._show,this.settings.hoverDelay):this.settings.touchDelay?this.entryTimeout=setTimeout(this._show,this.settings.touchDelay):this._show()}; +z.prototype._bindEvents=function(){this.settings.el.addEventListener("mouseenter",this._handleEntry);this.settings.el.addEventListener("mouseleave",this._hide);this.settings.el.addEventListener("mousemove",this._handleMovement);var a={passive:this.settings.passive};this.settings.handleTouch?(this.settings.el.addEventListener("touchstart",this._handleEntry,a),this.settings.el.addEventListener("touchend",this._hide),this.settings.el.addEventListener("touchmove",this._handleMovement,a)):(this.settings.el.addEventListener("touchstart", +this._preventDefault,a),this.settings.el.addEventListener("touchend",this._preventDefault),this.settings.el.addEventListener("touchmove",this._preventDefault,a))}; +z.prototype._unbindEvents=function(){this.settings.el.removeEventListener("mouseenter",this._handleEntry);this.settings.el.removeEventListener("mouseleave",this._hide);this.settings.el.removeEventListener("mousemove",this._handleMovement);this.settings.handleTouch?(this.settings.el.removeEventListener("touchstart",this._handleEntry),this.settings.el.removeEventListener("touchend",this._hide),this.settings.el.removeEventListener("touchmove",this._handleMovement)):(this.settings.el.removeEventListener("touchstart", +this._preventDefault),this.settings.el.removeEventListener("touchend",this._preventDefault),this.settings.el.removeEventListener("touchmove",this._preventDefault))};z.prototype._handleEntry=function(a){this._preventDefaultAllowTouchScroll(a);this._lastMovement=a;"mouseenter"==a.type&&this.settings.hoverDelay?this.entryTimeout=setTimeout(this._show,this.settings.hoverDelay):this.settings.touchDelay?this.entryTimeout=setTimeout(this._show,this.settings.touchDelay):this._show()}; z.prototype._show=function(){if(this.enabled){var a=this.settings.onShow;a&&"function"===typeof a&&a();this.settings.zoomPane.show(this.settings.el.getAttribute(this.settings.sourceAttribute),this.settings.el.clientWidth,this.settings.el.clientHeight);this._lastMovement&&((a=this._lastMovement.touches)&&this.settings.touchBoundingBox||!a&&this.settings.hoverBoundingBox)&&this.boundingBox.show(this.settings.zoomPane.el.clientWidth,this.settings.zoomPane.el.clientHeight);this._handleMovement()}}; z.prototype._hide=function(a){a&&this._preventDefaultAllowTouchScroll(a);this._lastMovement=null;this.entryTimeout&&clearTimeout(this.entryTimeout);this.boundingBox&&this.boundingBox.hide();(a=this.settings.onHide)&&"function"===typeof a&&a();this.settings.zoomPane.hide()}; z.prototype._handleMovement=function(a){if(a)this._preventDefaultAllowTouchScroll(a),this._lastMovement=a;else if(this._lastMovement)a=this._lastMovement;else return;if(a.touches){a=a.touches[0];var b=a.clientX;var c=a.clientY}else b=a.clientX,c=a.clientY;a=this.settings.el.getBoundingClientRect();b=(b-a.left)/this.settings.el.clientWidth;c=(c-a.top)/this.settings.el.clientHeight;this.boundingBox&&this.boundingBox.setPosition(b,c,a);this.settings.zoomPane.setPosition(b,c,a)}; @@ -24,13 +24,13 @@ __wpcc.d.global.Object.defineProperties(z.prototype,{isShowing:{configurable:!0, A.prototype._setImageSize=function(a,b){this.imgEl.style.width=a*this.settings.zoomFactor+"px";this.imgEl.style.height=b*this.settings.zoomFactor+"px"}; A.prototype.setPosition=function(a,b,c){var e=this.imgEl.offsetWidth,f=this.imgEl.offsetHeight,q=this.el.offsetWidth,k=this.el.offsetHeight,v=q/2-e*a,w=k/2-f*b,l=q-e,m=k-f,n=0c.left+c.width+p&& (a=c.left+c.width-q+p),bc.top+c.height+n&&(b=c.top+c.height-k+n)),this.el.style.left=a+"px",this.el.style.top=b+"px");this.settings.showWhitespaceAtEdges||(v>f?v=f:ve?w=e:wc.left+c.width+e&&(a=c.left+c.width-this.el.clientWidth+e);bc.top+c.height+f&&(b=c.top+c.height-this.el.clientHeight+f);this.el.style.left=a+"px";this.el.style.top=b+"px"};z.prototype._preventDefault=function(a){a.preventDefault()};z.prototype._preventDefaultAllowTouchScroll=function(a){this.settings.touchDelay&&this._isTouchEvent(a)&&!this.isShowing||a.preventDefault()};z.prototype._isTouchEvent=function(a){return!!a.touches}; -z.prototype._bindEvents=function(){this.settings.el.addEventListener("mouseenter",this._handleEntry,!1);this.settings.el.addEventListener("mouseleave",this._hide,!1);this.settings.el.addEventListener("mousemove",this._handleMovement,!1);var a={passive:this.settings.passive};this.settings.handleTouch?(this.settings.el.addEventListener("touchstart",this._handleEntry,a),this.settings.el.addEventListener("touchend",this._hide,!1),this.settings.el.addEventListener("touchmove",this._handleMovement,a)): -(this.settings.el.addEventListener("touchstart",this._preventDefault,a),this.settings.el.addEventListener("touchend",this._preventDefault,!1),this.settings.el.addEventListener("touchmove",this._preventDefault,a))}; -z.prototype._unbindEvents=function(){this.settings.el.removeEventListener("mouseenter",this._handleEntry,!1);this.settings.el.removeEventListener("mouseleave",this._hide,!1);this.settings.el.removeEventListener("mousemove",this._handleMovement,!1);this.settings.handleTouch?(this.settings.el.removeEventListener("touchstart",this._handleEntry,!1),this.settings.el.removeEventListener("touchend",this._hide,!1),this.settings.el.removeEventListener("touchmove",this._handleMovement,!1)):(this.settings.el.removeEventListener("touchstart", -this._preventDefault,!1),this.settings.el.removeEventListener("touchend",this._preventDefault,!1),this.settings.el.removeEventListener("touchmove",this._preventDefault,!1))};z.prototype._handleEntry=function(a){this._preventDefaultAllowTouchScroll(a);this._lastMovement=a;"mouseenter"==a.type&&this.settings.hoverDelay?this.entryTimeout=setTimeout(this._show,this.settings.hoverDelay):this.settings.touchDelay?this.entryTimeout=setTimeout(this._show,this.settings.touchDelay):this._show()}; +z.prototype._bindEvents=function(){this.settings.el.addEventListener("mouseenter",this._handleEntry);this.settings.el.addEventListener("mouseleave",this._hide);this.settings.el.addEventListener("mousemove",this._handleMovement);var a={passive:this.settings.passive};this.settings.handleTouch?(this.settings.el.addEventListener("touchstart",this._handleEntry,a),this.settings.el.addEventListener("touchend",this._hide),this.settings.el.addEventListener("touchmove",this._handleMovement,a)):(this.settings.el.addEventListener("touchstart", +this._preventDefault,a),this.settings.el.addEventListener("touchend",this._preventDefault),this.settings.el.addEventListener("touchmove",this._preventDefault,a))}; +z.prototype._unbindEvents=function(){this.settings.el.removeEventListener("mouseenter",this._handleEntry);this.settings.el.removeEventListener("mouseleave",this._hide);this.settings.el.removeEventListener("mousemove",this._handleMovement);this.settings.handleTouch?(this.settings.el.removeEventListener("touchstart",this._handleEntry),this.settings.el.removeEventListener("touchend",this._hide),this.settings.el.removeEventListener("touchmove",this._handleMovement)):(this.settings.el.removeEventListener("touchstart", +this._preventDefault),this.settings.el.removeEventListener("touchend",this._preventDefault),this.settings.el.removeEventListener("touchmove",this._preventDefault))};z.prototype._handleEntry=function(a){this._preventDefaultAllowTouchScroll(a);this._lastMovement=a;"mouseenter"==a.type&&this.settings.hoverDelay?this.entryTimeout=setTimeout(this._show,this.settings.hoverDelay):this.settings.touchDelay?this.entryTimeout=setTimeout(this._show,this.settings.touchDelay):this._show()}; z.prototype._show=function(){if(this.enabled){var a=this.settings.onShow;a&&"function"===typeof a&&a();this.settings.zoomPane.show(this.settings.el.getAttribute(this.settings.sourceAttribute),this.settings.el.clientWidth,this.settings.el.clientHeight);this._lastMovement&&((a=this._lastMovement.touches)&&this.settings.touchBoundingBox||!a&&this.settings.hoverBoundingBox)&&this.boundingBox.show(this.settings.zoomPane.el.clientWidth,this.settings.zoomPane.el.clientHeight);this._handleMovement()}}; z.prototype._hide=function(a){a&&this._preventDefaultAllowTouchScroll(a);this._lastMovement=null;this.entryTimeout&&clearTimeout(this.entryTimeout);this.boundingBox&&this.boundingBox.hide();(a=this.settings.onHide)&&"function"===typeof a&&a();this.settings.zoomPane.hide()}; z.prototype._handleMovement=function(a){if(a)this._preventDefaultAllowTouchScroll(a),this._lastMovement=a;else if(this._lastMovement)a=this._lastMovement;else return;if(a.touches){a=a.touches[0];var b=a.clientX;var c=a.clientY}else b=a.clientX,c=a.clientY;a=this.settings.el.getBoundingClientRect();b=(b-a.left)/this.settings.el.clientWidth;c=(c-a.top)/this.settings.el.clientHeight;this.boundingBox&&this.boundingBox.setPosition(b,c,a);this.settings.zoomPane.setPosition(b,c,a)}; @@ -24,13 +24,13 @@ __wpcc.d.global.Object.defineProperties(z.prototype,{isShowing:{configurable:!0, A.prototype._setImageSize=function(a,b){this.imgEl.style.width=a*this.settings.zoomFactor+"px";this.imgEl.style.height=b*this.settings.zoomFactor+"px"}; A.prototype.setPosition=function(a,b,c){var e=this.imgEl.offsetWidth,f=this.imgEl.offsetHeight,q=this.el.offsetWidth,k=this.el.offsetHeight,v=q/2-e*a,w=k/2-f*b,l=q-e,m=k-f,n=0c.left+c.width+p&& (a=c.left+c.width-q+p),bc.top+c.height+n&&(b=c.top+c.height-k+n)),this.el.style.left=a+"px",this.el.style.top=b+"px");this.settings.showWhitespaceAtEdges||(v>f?v=f:ve?w=e:w triggerRect.left + triggerRect.width + pageXOffset) {\n inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + pageXOffset;\n }\n\n if (inlineTop < triggerRect.top + pageYOffset) {\n inlineTop = triggerRect.top + pageYOffset;\n } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + pageYOffset) {\n inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + pageYOffset;\n }\n\n this.el.style.left = `${inlineLeft}px`;\n this.el.style.top = `${inlineTop}px`;\n }\n}\n","import throwIfMissing from \"1\"\nimport BoundingBox from \"5\"\n\nexport default class Trigger {\n constructor(options = {}) {\n this._show = this._show.bind(this);\n this._hide = this._hide.bind(this);\n this._handleEntry = this._handleEntry.bind(this);\n this._handleMovement = this._handleMovement.bind(this);\n\n const {\n el = throwIfMissing(),\n zoomPane = throwIfMissing(),\n sourceAttribute = throwIfMissing(),\n handleTouch = throwIfMissing(),\n onShow = null,\n onHide = null,\n hoverDelay = 0,\n touchDelay = 0,\n hoverBoundingBox = throwIfMissing(),\n touchBoundingBox = throwIfMissing(),\n namespace = null,\n zoomFactor = throwIfMissing(),\n boundingBoxContainer = throwIfMissing(),\n passive = false,\n } = options;\n\n this.settings = {\n el,\n zoomPane,\n sourceAttribute,\n handleTouch,\n onShow,\n onHide,\n hoverDelay,\n touchDelay,\n hoverBoundingBox,\n touchBoundingBox,\n namespace,\n zoomFactor,\n boundingBoxContainer,\n passive,\n };\n\n if (this.settings.hoverBoundingBox || this.settings.touchBoundingBox) {\n this.boundingBox = new BoundingBox({\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n containerEl: this.settings.boundingBoxContainer,\n });\n }\n\n this.enabled = true;\n\n this._bindEvents();\n }\n\n get isShowing() {\n return this.settings.zoomPane.isShowing;\n }\n\n _preventDefault(event) {\n event.preventDefault();\n }\n\n _preventDefaultAllowTouchScroll(event) {\n if (!this.settings.touchDelay || !this._isTouchEvent(event) || this.isShowing) {\n event.preventDefault();\n }\n }\n\n _isTouchEvent(event) {\n return !!event.touches;\n }\n\n _bindEvents() {\n this.settings.el.addEventListener(\"mouseenter\", this._handleEntry, false);\n this.settings.el.addEventListener(\"mouseleave\", this._hide, false);\n this.settings.el.addEventListener(\"mousemove\", this._handleMovement, false);\n\n const isPassive = { passive: this.settings.passive };\n if (this.settings.handleTouch) {\n this.settings.el.addEventListener(\"touchstart\", this._handleEntry, isPassive);\n this.settings.el.addEventListener(\"touchend\", this._hide, false);\n this.settings.el.addEventListener(\"touchmove\", this._handleMovement, isPassive);\n } else {\n this.settings.el.addEventListener(\"touchstart\", this._preventDefault, isPassive);\n this.settings.el.addEventListener(\"touchend\", this._preventDefault, false);\n this.settings.el.addEventListener(\"touchmove\", this._preventDefault, isPassive);\n }\n }\n\n _unbindEvents() {\n this.settings.el.removeEventListener(\"mouseenter\", this._handleEntry, false);\n this.settings.el.removeEventListener(\"mouseleave\", this._hide, false);\n this.settings.el.removeEventListener(\"mousemove\", this._handleMovement, false);\n\n if (this.settings.handleTouch) {\n this.settings.el.removeEventListener(\"touchstart\", this._handleEntry, false);\n this.settings.el.removeEventListener(\"touchend\", this._hide, false);\n this.settings.el.removeEventListener(\"touchmove\", this._handleMovement, false);\n } else {\n this.settings.el.removeEventListener(\"touchstart\", this._preventDefault, false);\n this.settings.el.removeEventListener(\"touchend\", this._preventDefault, false);\n this.settings.el.removeEventListener(\"touchmove\", this._preventDefault, false);\n }\n }\n\n _handleEntry(e) {\n this._preventDefaultAllowTouchScroll(e);\n this._lastMovement = e;\n\n if (e.type == \"mouseenter\" && this.settings.hoverDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.hoverDelay);\n } else if (this.settings.touchDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.touchDelay);\n } else {\n this._show();\n }\n }\n\n _show() {\n if (!this.enabled) {\n return;\n }\n\n const onShow = this.settings.onShow;\n if (onShow && typeof onShow === \"function\") {\n onShow();\n }\n\n this.settings.zoomPane.show(\n this.settings.el.getAttribute(this.settings.sourceAttribute),\n this.settings.el.clientWidth,\n this.settings.el.clientHeight\n );\n\n if (this._lastMovement) {\n const touchActivated = this._lastMovement.touches;\n if ((touchActivated && this.settings.touchBoundingBox) || (!touchActivated && this.settings.hoverBoundingBox)) {\n this.boundingBox.show(this.settings.zoomPane.el.clientWidth, this.settings.zoomPane.el.clientHeight);\n }\n }\n\n this._handleMovement();\n }\n\n _hide(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n }\n\n this._lastMovement = null;\n\n if (this.entryTimeout) {\n clearTimeout(this.entryTimeout);\n }\n\n if (this.boundingBox) {\n this.boundingBox.hide();\n }\n\n const onHide = this.settings.onHide;\n if (onHide && typeof onHide === \"function\") {\n onHide();\n }\n\n this.settings.zoomPane.hide();\n }\n\n _handleMovement(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n this._lastMovement = e;\n } else if (this._lastMovement) {\n e = this._lastMovement;\n } else {\n return;\n }\n\n let movementX;\n let movementY;\n\n if (e.touches) {\n const firstTouch = e.touches[0];\n movementX = firstTouch.clientX;\n movementY = firstTouch.clientY;\n } else {\n movementX = e.clientX;\n movementY = e.clientY;\n }\n\n const el = this.settings.el;\n const rect = el.getBoundingClientRect();\n const offsetX = movementX - rect.left;\n const offsetY = movementY - rect.top;\n\n const percentageOffsetX = offsetX / this.settings.el.clientWidth;\n const percentageOffsetY = offsetY / this.settings.el.clientHeight;\n\n if (this.boundingBox) {\n this.boundingBox.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n\n this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n}\n","import throwIfMissing from \"1\"\nimport { addClasses, removeClasses } from \"0\"\n\nexport default class ZoomPane {\n constructor(options = {}) {\n // All officially-supported browsers have this, but it's easy to\n // account for, just in case.\n this.HAS_ANIMATION = false;\n if (typeof document !== \"undefined\") {\n const divStyle = document.createElement(\"div\").style;\n this.HAS_ANIMATION = \"animation\" in divStyle || \"webkitAnimation\" in divStyle;\n }\n\n this._completeShow = this._completeShow.bind(this);\n this._completeHide = this._completeHide.bind(this);\n this._handleLoad = this._handleLoad.bind(this);\n\n this.isShowing = false;\n\n const {\n container = null,\n zoomFactor = throwIfMissing(),\n inline = throwIfMissing(),\n namespace = null,\n showWhitespaceAtEdges = throwIfMissing(),\n containInline = throwIfMissing(),\n inlineOffsetX = 0,\n inlineOffsetY = 0,\n inlineContainer = document.body,\n } = options;\n\n this.settings = {\n container,\n zoomFactor,\n inline,\n namespace,\n showWhitespaceAtEdges,\n containInline,\n inlineOffsetX,\n inlineOffsetY,\n inlineContainer,\n };\n\n this.openClasses = this._buildClasses(\"open\");\n this.openingClasses = this._buildClasses(\"opening\");\n this.closingClasses = this._buildClasses(\"closing\");\n this.inlineClasses = this._buildClasses(\"inline\");\n this.loadingClasses = this._buildClasses(\"loading\");\n\n this._buildElement();\n }\n\n _buildClasses(suffix) {\n const classes = [`drift-${suffix}`];\n\n const ns = this.settings.namespace;\n if (ns) {\n classes.push(`${ns}-${suffix}`);\n }\n\n return classes;\n }\n\n _buildElement() {\n this.el = document.createElement(\"div\");\n addClasses(this.el, this._buildClasses(\"zoom-pane\"));\n\n const loaderEl = document.createElement(\"div\");\n addClasses(loaderEl, this._buildClasses(\"zoom-pane-loader\"));\n this.el.appendChild(loaderEl);\n\n this.imgEl = document.createElement(\"img\");\n this.el.appendChild(this.imgEl);\n }\n\n _setImageURL(imageURL) {\n this.imgEl.setAttribute(\"src\", imageURL);\n }\n\n _setImageSize(triggerWidth, triggerHeight) {\n this.imgEl.style.width = `${triggerWidth * this.settings.zoomFactor}px`;\n this.imgEl.style.height = `${triggerHeight * this.settings.zoomFactor}px`;\n }\n\n // `percentageOffsetX` and `percentageOffsetY` must be percentages\n // expressed as floats between `0' and `1`.\n setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {\n const imgElWidth = this.imgEl.offsetWidth;\n const imgElHeight = this.imgEl.offsetHeight;\n const elWidth = this.el.offsetWidth;\n const elHeight = this.el.offsetHeight;\n\n const centreOfContainerX = elWidth / 2;\n const centreOfContainerY = elHeight / 2;\n\n const targetImgXToBeCentre = imgElWidth * percentageOffsetX;\n const targetImgYToBeCentre = imgElHeight * percentageOffsetY;\n\n let left = centreOfContainerX - targetImgXToBeCentre;\n let top = centreOfContainerY - targetImgYToBeCentre;\n\n const differenceBetweenContainerWidthAndImgWidth = elWidth - imgElWidth;\n const differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight;\n const isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0;\n const isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0;\n\n const minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0;\n const minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0;\n\n const maxLeft = isContainerLargerThanImgX\n ? differenceBetweenContainerWidthAndImgWidth / 2\n : differenceBetweenContainerWidthAndImgWidth;\n const maxTop = isContainerLargerThanImgY\n ? differenceBetweenContainerHeightAndImgHeight / 2\n : differenceBetweenContainerHeightAndImgHeight;\n\n if (this.el.parentElement === this.settings.inlineContainer) {\n // This may be needed in the future to deal with browser event\n // inconsistencies, but it's difficult to tell for sure.\n // let scrollX = isTouch ? 0 : window.scrollX;\n // let scrollY = isTouch ? 0 : window.scrollY;\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n let inlineLeft =\n triggerRect.left + percentageOffsetX * triggerRect.width - elWidth / 2 + this.settings.inlineOffsetX + scrollX;\n let inlineTop =\n triggerRect.top + percentageOffsetY * triggerRect.height - elHeight / 2 + this.settings.inlineOffsetY + scrollY;\n\n if (this.settings.containInline) {\n if (inlineLeft < triggerRect.left + scrollX) {\n inlineLeft = triggerRect.left + scrollX;\n } else if (inlineLeft + elWidth > triggerRect.left + triggerRect.width + scrollX) {\n inlineLeft = triggerRect.left + triggerRect.width - elWidth + scrollX;\n }\n\n if (inlineTop < triggerRect.top + scrollY) {\n inlineTop = triggerRect.top + scrollY;\n } else if (inlineTop + elHeight > triggerRect.top + triggerRect.height + scrollY) {\n inlineTop = triggerRect.top + triggerRect.height - elHeight + scrollY;\n }\n }\n\n this.el.style.left = `${inlineLeft}px`;\n this.el.style.top = `${inlineTop}px`;\n }\n\n if (!this.settings.showWhitespaceAtEdges) {\n if (left > minLeft) {\n left = minLeft;\n } else if (left < maxLeft) {\n left = maxLeft;\n }\n\n if (top > minTop) {\n top = minTop;\n } else if (top < maxTop) {\n top = maxTop;\n }\n }\n\n this.imgEl.style.transform = `translate(${left}px, ${top}px)`;\n this.imgEl.style.webkitTransform = `translate(${left}px, ${top}px)`;\n }\n\n get _isInline() {\n const inline = this.settings.inline;\n\n return inline === true || (typeof inline === \"number\" && window.innerWidth <= inline);\n }\n\n _removeListenersAndResetClasses() {\n this.el.removeEventListener(\"animationend\", this._completeShow, false);\n this.el.removeEventListener(\"animationend\", this._completeHide, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n }\n\n show(imageURL, triggerWidth, triggerHeight) {\n this._removeListenersAndResetClasses();\n this.isShowing = true;\n\n addClasses(this.el, this.openClasses);\n\n if (this.imgEl.getAttribute(\"src\") != imageURL) {\n addClasses(this.el, this.loadingClasses);\n this.imgEl.addEventListener(\"load\", this._handleLoad, false);\n this._setImageURL(imageURL);\n }\n\n this._setImageSize(triggerWidth, triggerHeight);\n\n if (this._isInline) {\n this._showInline();\n } else {\n this._showInContainer();\n }\n\n if (this.HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeShow, false);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n addClasses(this.el, this.openingClasses);\n }\n }\n\n _showInline() {\n this.settings.inlineContainer.appendChild(this.el);\n addClasses(this.el, this.inlineClasses);\n }\n\n _showInContainer() {\n this.settings.container.appendChild(this.el);\n }\n\n hide() {\n this._removeListenersAndResetClasses();\n this.isShowing = false;\n\n if (this.HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeHide, false);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n addClasses(this.el, this.closingClasses);\n } else {\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.inlineClasses);\n }\n }\n\n _completeShow() {\n this.el.removeEventListener(\"animationend\", this._completeShow, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n\n removeClasses(this.el, this.openingClasses);\n }\n\n _completeHide() {\n this.el.removeEventListener(\"animationend\", this._completeHide, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n removeClasses(this.el, this.inlineClasses);\n\n this.el.style.left = \"\";\n this.el.style.top = \"\";\n\n // The window could have been resized above or below `inline`\n // limits since the ZoomPane was shown. Because of this, we\n // can't rely on `this._isInline` here.\n if (this.el.parentElement === this.settings.container) {\n this.settings.container.removeChild(this.el);\n } else if (this.el.parentElement === this.settings.inlineContainer) {\n this.settings.inlineContainer.removeChild(this.el);\n }\n }\n\n _handleLoad() {\n this.imgEl.removeEventListener(\"load\", this._handleLoad, false);\n removeClasses(this.el, this.loadingClasses);\n }\n}\n","import { isDOMElement } from \"0\"\nimport injectBaseStylesheet from \"3\"\n\nimport Trigger from \"4\"\nimport ZoomPane from \"6\"\n\nexport default class Drift {\n constructor(triggerEl, options = {}) {\n this.VERSION = \"1.4.5\";\n this.triggerEl = triggerEl;\n\n this.destroy = this.destroy.bind(this);\n\n if (!isDOMElement(this.triggerEl)) {\n throw new TypeError(\"`new Drift` requires a DOM element as its first argument.\");\n }\n\n // Prefix for generated element class names (e.g. `my-ns` will\n // result in classes such as `my-ns-pane`. Default `drift-`\n // prefixed classes will always be added as well.\n const namespace = options[\"namespace\"] || null;\n // Whether the ZoomPane should show whitespace when near the edges.\n const showWhitespaceAtEdges = options[\"showWhitespaceAtEdges\"] || false;\n // Whether the inline ZoomPane should stay inside\n // the bounds of its image.\n const containInline = options[\"containInline\"] || false;\n // How much to offset the ZoomPane from the\n // interaction point when inline.\n const inlineOffsetX = options[\"inlineOffsetX\"] || 0;\n const inlineOffsetY = options[\"inlineOffsetY\"] || 0;\n // A DOM element to append the inline ZoomPane to\n const inlineContainer = options[\"inlineContainer\"] || document.body;\n // Which trigger attribute to pull the ZoomPane image source from.\n const sourceAttribute = options[\"sourceAttribute\"] || \"data-zoom\";\n // How much to magnify the trigger by in the ZoomPane.\n // (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane imag\n // if the trigger is displayed at 300 px wide)\n const zoomFactor = options[\"zoomFactor\"] || 3;\n // A DOM element to append the non-inline ZoomPane to.\n // Required if `inlinePane !== true`.\n const paneContainer = options[\"paneContainer\"] === undefined ? document.body : options[\"paneContainer\"];\n // When to switch to an inline ZoomPane. This can be a boolean or\n // an integer. If `true`, the ZoomPane will always be inline,\n // if `false`, it will switch to inline when `windowWidth <= inlinePane`\n const inlinePane = options[\"inlinePane\"] || 375;\n // If `true`, touch events will trigger the zoom, like mouse events.\n const handleTouch = \"handleTouch\" in options ? !!options[\"handleTouch\"] : true;\n // If present (and a function), this will be called\n // whenever the ZoomPane is shown.\n const onShow = options[\"onShow\"] || null;\n // If present (and a function), this will be called\n // whenever the ZoomPane is hidden.\n const onHide = options[\"onHide\"] || null;\n // Add base styles to the page. See the \"Theming\"\n // section of README.md for more information.\n const injectBaseStyles = \"injectBaseStyles\" in options ? !!options[\"injectBaseStyles\"] : true;\n // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `mouseenter` event.\n const hoverDelay = options[\"hoverDelay\"] || 0;\n // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `touchstart` event.\n // It's unlikely that you would want to use this option, since\n // \"tap and hold\" is much more intentional than a hover event.\n const touchDelay = options[\"touchDelay\"] || 0;\n // If true, a bounding box will show the area currently being previewed\n // during mouse hover\n const hoverBoundingBox = options[\"hoverBoundingBox\"] || false;\n // If true, a bounding box will show the area currently being previewed\n // during touch events\n const touchBoundingBox = options[\"touchBoundingBox\"] || false;\n // A DOM element to append the bounding box to.\n const boundingBoxContainer = options[\"boundingBoxContainer\"] || document.body;\n // If true, the events related to handleTouch use passive listeners in\n // order to improve performance for touch devices.\n const passive = options[\"passive\"] || false;\n\n if (inlinePane !== true && !isDOMElement(paneContainer)) {\n throw new TypeError(\"`paneContainer` must be a DOM element when `inlinePane !== true`\");\n }\n if (!isDOMElement(inlineContainer)) {\n throw new TypeError(\"`inlineContainer` must be a DOM element\");\n }\n\n this.settings = {\n namespace,\n showWhitespaceAtEdges,\n containInline,\n inlineOffsetX,\n inlineOffsetY,\n inlineContainer,\n sourceAttribute,\n zoomFactor,\n paneContainer,\n inlinePane,\n handleTouch,\n onShow,\n onHide,\n injectBaseStyles,\n hoverDelay,\n touchDelay,\n hoverBoundingBox,\n touchBoundingBox,\n boundingBoxContainer,\n passive,\n };\n\n if (this.settings.injectBaseStyles) {\n injectBaseStylesheet();\n }\n\n this._buildZoomPane();\n this._buildTrigger();\n }\n\n get isShowing() {\n return this.zoomPane.isShowing;\n }\n\n get zoomFactor() {\n return this.settings.zoomFactor;\n }\n\n set zoomFactor(zf) {\n this.settings.zoomFactor = zf;\n this.zoomPane.settings.zoomFactor = zf;\n this.trigger.settings.zoomFactor = zf;\n this.boundingBox.settings.zoomFactor = zf;\n }\n\n _buildZoomPane() {\n this.zoomPane = new ZoomPane({\n container: this.settings.paneContainer,\n zoomFactor: this.settings.zoomFactor,\n showWhitespaceAtEdges: this.settings.showWhitespaceAtEdges,\n containInline: this.settings.containInline,\n inline: this.settings.inlinePane,\n namespace: this.settings.namespace,\n inlineOffsetX: this.settings.inlineOffsetX,\n inlineOffsetY: this.settings.inlineOffsetY,\n inlineContainer: this.settings.inlineContainer,\n });\n }\n\n _buildTrigger() {\n this.trigger = new Trigger({\n el: this.triggerEl,\n zoomPane: this.zoomPane,\n handleTouch: this.settings.handleTouch,\n onShow: this.settings.onShow,\n onHide: this.settings.onHide,\n sourceAttribute: this.settings.sourceAttribute,\n hoverDelay: this.settings.hoverDelay,\n touchDelay: this.settings.touchDelay,\n hoverBoundingBox: this.settings.hoverBoundingBox,\n touchBoundingBox: this.settings.touchBoundingBox,\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n boundingBoxContainer: this.settings.boundingBoxContainer,\n passive: this.settings.passive,\n });\n }\n\n setZoomImageURL(imageURL) {\n this.zoomPane._setImageURL(imageURL);\n }\n\n disable() {\n this.trigger.enabled = false;\n }\n\n enable() {\n this.trigger.enabled = true;\n }\n\n destroy() {\n this.trigger._hide();\n this.trigger._unbindEvents();\n }\n}\n\n// Public API\n/* eslint-disable no-self-assign */\nObject.defineProperty(Drift.prototype, \"isShowing\", {\n get: function () {\n return this.isShowing;\n },\n});\nObject.defineProperty(Drift.prototype, \"zoomFactor\", {\n get: function () {\n return this.zoomFactor;\n },\n set: function (value) {\n this.zoomFactor = value;\n },\n});\nDrift.prototype[\"setZoomImageURL\"] = Drift.prototype.setZoomImageURL;\nDrift.prototype[\"disable\"] = Drift.prototype.disable;\nDrift.prototype[\"enable\"] = Drift.prototype.enable;\nDrift.prototype[\"destroy\"] = Drift.prototype.destroy;\n/* eslint-enable no-self-assign */\n","/* UNMINIFIED RULES\n\nconst RULES = `\n@keyframes noop {\n 0% { zoom: 1; }\n}\n\n@-webkit-keyframes noop {\n 0% { zoom: 1; }\n}\n\n.drift-zoom-pane.drift-open {\n display: block;\n}\n\n.drift-zoom-pane.drift-opening, .drift-zoom-pane.drift-closing {\n animation: noop 1ms;\n -webkit-animation: noop 1ms;\n}\n\n.drift-zoom-pane {\n position: absolute;\n overflow: hidden;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.drift-zoom-pane-loader {\n display: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n max-width: none;\n max-height: none;\n}\n\n.drift-bounding-box {\n position: absolute;\n pointer-events: none;\n}\n`;\n\n*/\n\nconst RULES =\n \".drift-bounding-box,.drift-zoom-pane{position:absolute;pointer-events:none}@keyframes noop{0%{zoom:1}}@-webkit-keyframes noop{0%{zoom:1}}.drift-zoom-pane.drift-open{display:block}.drift-zoom-pane.drift-closing,.drift-zoom-pane.drift-opening{animation:noop 1ms;-webkit-animation:noop 1ms}.drift-zoom-pane{overflow:hidden;width:100%;height:100%;top:0;left:0}.drift-zoom-pane-loader{display:none}.drift-zoom-pane img{position:absolute;display:block;max-width:none;max-height:none}\";\n\nexport default function injectBaseStylesheet() {\n if (document.querySelector(\".drift-base-styles\")) {\n return;\n }\n\n const styleEl = document.createElement(\"style\");\n styleEl.type = \"text/css\";\n styleEl.classList.add(\"drift-base-styles\");\n\n styleEl.appendChild(document.createTextNode(RULES));\n\n const head = document.head;\n head.insertBefore(styleEl, head.firstChild);\n}\n","// This file is used for the standalone browser build\n\nimport Drift from \"2\"\n\nwindow[\"Drift\"] = Drift;\n"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///./src/js/util/dom.js","webpack:///./src/js/util/throwIfMissing.js","webpack:///./src/js/BoundingBox.js","webpack:///./src/js/Trigger.js","webpack:///./src/js/ZoomPane.js","webpack:///./src/js/Drift.js","webpack:///./src/js/injectBaseStylesheet.js","webpack:///./src/js/Drift-browser.js"],"names":["isDOMElement","obj","HAS_DOM_2","HTMLElement","nodeType","nodeName","addClasses","el","classNames","forEach","className","classList","add","removeClasses","remove","throwIfMissing","Error","constructor","options","isShowing","namespace","zoomFactor","containerEl","settings","openClasses","_buildClasses","_buildElement","_show","bind","_hide","_handleEntry","_handleMovement","zoomPane","sourceAttribute","handleTouch","onShow","onHide","hoverDelay","touchDelay","hoverBoundingBox","touchBoundingBox","boundingBoxContainer","passive","boundingBox","BoundingBox","enabled","_bindEvents","HAS_ANIMATION","document","divStyle","createElement","style","_completeShow","_completeHide","_handleLoad","container","inline","showWhitespaceAtEdges","containInline","inlineOffsetX","inlineOffsetY","inlineContainer","body","openingClasses","closingClasses","inlineClasses","loadingClasses","triggerEl","VERSION","destroy","TypeError","paneContainer","undefined","inlinePane","injectBaseStyles","querySelector","styleEl","type","appendChild","createTextNode","RULES","head","insertBefore","firstChild","_buildZoomPane","_buildTrigger","suffix","classes","ns","push","show","zoomPaneWidth","zoomPaneHeight","width","Math","round","height","hide","removeChild","setPosition","percentageOffsetX","percentageOffsetY","triggerRect","pageXOffset","window","pageYOffset","inlineLeft","left","clientWidth","inlineTop","top","clientHeight","_preventDefault","event","preventDefault","_preventDefaultAllowTouchScroll","_isTouchEvent","touches","addEventListener","isPassive","_unbindEvents","removeEventListener","e","_lastMovement","entryTimeout","setTimeout","getAttribute","touchActivated","clearTimeout","firstTouch","movementX","clientX","movementY","clientY","rect","getBoundingClientRect","Trigger","loaderEl","imgEl","_setImageURL","imageURL","setAttribute","_setImageSize","triggerWidth","triggerHeight","imgElWidth","offsetWidth","imgElHeight","offsetHeight","elWidth","elHeight","differenceBetweenContainerWidthAndImgWidth","differenceBetweenContainerHeightAndImgHeight","isContainerLargerThanImgX","isContainerLargerThanImgY","minLeft","minTop","maxLeft","maxTop","parentElement","scrollX","scrollY","transform","webkitTransform","_removeListenersAndResetClasses","_isInline","_showInline","_showInContainer","ZoomPane","innerWidth","trigger","setZoomImageURL","disable","enable","Drift","zf","Object","defineProperty","prototype","get","set","value"],"mappings":"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","file":"Drift.min.js","sourcesContent":["// This is not really a perfect check, but works fine.\n// From http://stackoverflow.com/questions/384286\nconst HAS_DOM_2 = typeof HTMLElement === \"object\";\n\nexport function isDOMElement(obj) {\n return HAS_DOM_2\n ? obj instanceof HTMLElement\n : obj && typeof obj === \"object\" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === \"string\";\n}\n\nexport function addClasses(el, classNames) {\n classNames.forEach(function (className) {\n el.classList.add(className);\n });\n}\n\nexport function removeClasses(el, classNames) {\n classNames.forEach(function (className) {\n el.classList.remove(className);\n });\n}\n","export default function throwIfMissing() {\n throw new Error(\"Missing parameter\");\n}\n","import throwIfMissing from \"1\"\nimport { addClasses, removeClasses } from \"0\"\n\nexport default class BoundingBox {\n constructor(options) {\n this.isShowing = false;\n\n const { namespace = null, zoomFactor = throwIfMissing(), containerEl = throwIfMissing() } = options;\n\n this.settings = { namespace, zoomFactor, containerEl };\n\n this.openClasses = this._buildClasses(\"open\");\n\n this._buildElement();\n }\n\n _buildClasses(suffix) {\n const classes = [`drift-${suffix}`];\n\n const ns = this.settings.namespace;\n if (ns) {\n classes.push(`${ns}-${suffix}`);\n }\n\n return classes;\n }\n\n _buildElement() {\n this.el = document.createElement(\"div\");\n addClasses(this.el, this._buildClasses(\"bounding-box\"));\n }\n\n show(zoomPaneWidth, zoomPaneHeight) {\n this.isShowing = true;\n\n this.settings.containerEl.appendChild(this.el);\n\n const style = this.el.style;\n style.width = `${Math.round(zoomPaneWidth / this.settings.zoomFactor)}px`;\n style.height = `${Math.round(zoomPaneHeight / this.settings.zoomFactor)}px`;\n\n addClasses(this.el, this.openClasses);\n }\n\n hide() {\n if (this.isShowing) {\n this.settings.containerEl.removeChild(this.el);\n }\n\n this.isShowing = false;\n\n removeClasses(this.el, this.openClasses);\n }\n\n setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {\n const pageXOffset = window.pageXOffset;\n const pageYOffset = window.pageYOffset;\n\n let inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + pageXOffset;\n let inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + pageYOffset;\n\n if (inlineLeft < triggerRect.left + pageXOffset) {\n inlineLeft = triggerRect.left + pageXOffset;\n } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + pageXOffset) {\n inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + pageXOffset;\n }\n\n if (inlineTop < triggerRect.top + pageYOffset) {\n inlineTop = triggerRect.top + pageYOffset;\n } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + pageYOffset) {\n inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + pageYOffset;\n }\n\n this.el.style.left = `${inlineLeft}px`;\n this.el.style.top = `${inlineTop}px`;\n }\n}\n","import throwIfMissing from \"1\"\nimport BoundingBox from \"5\"\n\nexport default class Trigger {\n constructor(options = {}) {\n this._show = this._show.bind(this);\n this._hide = this._hide.bind(this);\n this._handleEntry = this._handleEntry.bind(this);\n this._handleMovement = this._handleMovement.bind(this);\n\n const {\n el = throwIfMissing(),\n zoomPane = throwIfMissing(),\n sourceAttribute = throwIfMissing(),\n handleTouch = throwIfMissing(),\n onShow = null,\n onHide = null,\n hoverDelay = 0,\n touchDelay = 0,\n hoverBoundingBox = throwIfMissing(),\n touchBoundingBox = throwIfMissing(),\n namespace = null,\n zoomFactor = throwIfMissing(),\n boundingBoxContainer = throwIfMissing(),\n passive = false,\n } = options;\n\n this.settings = {\n el,\n zoomPane,\n sourceAttribute,\n handleTouch,\n onShow,\n onHide,\n hoverDelay,\n touchDelay,\n hoverBoundingBox,\n touchBoundingBox,\n namespace,\n zoomFactor,\n boundingBoxContainer,\n passive,\n };\n\n if (this.settings.hoverBoundingBox || this.settings.touchBoundingBox) {\n this.boundingBox = new BoundingBox({\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n containerEl: this.settings.boundingBoxContainer,\n });\n }\n\n this.enabled = true;\n\n this._bindEvents();\n }\n\n get isShowing() {\n return this.settings.zoomPane.isShowing;\n }\n\n _preventDefault(event) {\n event.preventDefault();\n }\n\n _preventDefaultAllowTouchScroll(event) {\n if (!this.settings.touchDelay || !this._isTouchEvent(event) || this.isShowing) {\n event.preventDefault();\n }\n }\n\n _isTouchEvent(event) {\n return !!event.touches;\n }\n\n _bindEvents() {\n this.settings.el.addEventListener(\"mouseenter\", this._handleEntry);\n this.settings.el.addEventListener(\"mouseleave\", this._hide);\n this.settings.el.addEventListener(\"mousemove\", this._handleMovement);\n\n const isPassive = { passive: this.settings.passive };\n if (this.settings.handleTouch) {\n this.settings.el.addEventListener(\"touchstart\", this._handleEntry, isPassive);\n this.settings.el.addEventListener(\"touchend\", this._hide);\n this.settings.el.addEventListener(\"touchmove\", this._handleMovement, isPassive);\n } else {\n this.settings.el.addEventListener(\"touchstart\", this._preventDefault, isPassive);\n this.settings.el.addEventListener(\"touchend\", this._preventDefault);\n this.settings.el.addEventListener(\"touchmove\", this._preventDefault, isPassive);\n }\n }\n\n _unbindEvents() {\n this.settings.el.removeEventListener(\"mouseenter\", this._handleEntry);\n this.settings.el.removeEventListener(\"mouseleave\", this._hide);\n this.settings.el.removeEventListener(\"mousemove\", this._handleMovement);\n\n if (this.settings.handleTouch) {\n this.settings.el.removeEventListener(\"touchstart\", this._handleEntry);\n this.settings.el.removeEventListener(\"touchend\", this._hide);\n this.settings.el.removeEventListener(\"touchmove\", this._handleMovement);\n } else {\n this.settings.el.removeEventListener(\"touchstart\", this._preventDefault);\n this.settings.el.removeEventListener(\"touchend\", this._preventDefault);\n this.settings.el.removeEventListener(\"touchmove\", this._preventDefault);\n }\n }\n\n _handleEntry(e) {\n this._preventDefaultAllowTouchScroll(e);\n this._lastMovement = e;\n\n if (e.type == \"mouseenter\" && this.settings.hoverDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.hoverDelay);\n } else if (this.settings.touchDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.touchDelay);\n } else {\n this._show();\n }\n }\n\n _show() {\n if (!this.enabled) {\n return;\n }\n\n const onShow = this.settings.onShow;\n if (onShow && typeof onShow === \"function\") {\n onShow();\n }\n\n this.settings.zoomPane.show(\n this.settings.el.getAttribute(this.settings.sourceAttribute),\n this.settings.el.clientWidth,\n this.settings.el.clientHeight\n );\n\n if (this._lastMovement) {\n const touchActivated = this._lastMovement.touches;\n if ((touchActivated && this.settings.touchBoundingBox) || (!touchActivated && this.settings.hoverBoundingBox)) {\n this.boundingBox.show(this.settings.zoomPane.el.clientWidth, this.settings.zoomPane.el.clientHeight);\n }\n }\n\n this._handleMovement();\n }\n\n _hide(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n }\n\n this._lastMovement = null;\n\n if (this.entryTimeout) {\n clearTimeout(this.entryTimeout);\n }\n\n if (this.boundingBox) {\n this.boundingBox.hide();\n }\n\n const onHide = this.settings.onHide;\n if (onHide && typeof onHide === \"function\") {\n onHide();\n }\n\n this.settings.zoomPane.hide();\n }\n\n _handleMovement(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n this._lastMovement = e;\n } else if (this._lastMovement) {\n e = this._lastMovement;\n } else {\n return;\n }\n\n let movementX;\n let movementY;\n\n if (e.touches) {\n const firstTouch = e.touches[0];\n movementX = firstTouch.clientX;\n movementY = firstTouch.clientY;\n } else {\n movementX = e.clientX;\n movementY = e.clientY;\n }\n\n const el = this.settings.el;\n const rect = el.getBoundingClientRect();\n const offsetX = movementX - rect.left;\n const offsetY = movementY - rect.top;\n\n const percentageOffsetX = offsetX / this.settings.el.clientWidth;\n const percentageOffsetY = offsetY / this.settings.el.clientHeight;\n\n if (this.boundingBox) {\n this.boundingBox.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n\n this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n}\n","import throwIfMissing from \"1\"\nimport { addClasses, removeClasses } from \"0\"\n\nexport default class ZoomPane {\n constructor(options = {}) {\n // All officially-supported browsers have this, but it's easy to\n // account for, just in case.\n this.HAS_ANIMATION = false;\n if (typeof document !== \"undefined\") {\n const divStyle = document.createElement(\"div\").style;\n this.HAS_ANIMATION = \"animation\" in divStyle || \"webkitAnimation\" in divStyle;\n }\n\n this._completeShow = this._completeShow.bind(this);\n this._completeHide = this._completeHide.bind(this);\n this._handleLoad = this._handleLoad.bind(this);\n\n this.isShowing = false;\n\n const {\n container = null,\n zoomFactor = throwIfMissing(),\n inline = throwIfMissing(),\n namespace = null,\n showWhitespaceAtEdges = throwIfMissing(),\n containInline = throwIfMissing(),\n inlineOffsetX = 0,\n inlineOffsetY = 0,\n inlineContainer = document.body,\n } = options;\n\n this.settings = {\n container,\n zoomFactor,\n inline,\n namespace,\n showWhitespaceAtEdges,\n containInline,\n inlineOffsetX,\n inlineOffsetY,\n inlineContainer,\n };\n\n this.openClasses = this._buildClasses(\"open\");\n this.openingClasses = this._buildClasses(\"opening\");\n this.closingClasses = this._buildClasses(\"closing\");\n this.inlineClasses = this._buildClasses(\"inline\");\n this.loadingClasses = this._buildClasses(\"loading\");\n\n this._buildElement();\n }\n\n _buildClasses(suffix) {\n const classes = [`drift-${suffix}`];\n\n const ns = this.settings.namespace;\n if (ns) {\n classes.push(`${ns}-${suffix}`);\n }\n\n return classes;\n }\n\n _buildElement() {\n this.el = document.createElement(\"div\");\n addClasses(this.el, this._buildClasses(\"zoom-pane\"));\n\n const loaderEl = document.createElement(\"div\");\n addClasses(loaderEl, this._buildClasses(\"zoom-pane-loader\"));\n this.el.appendChild(loaderEl);\n\n this.imgEl = document.createElement(\"img\");\n this.el.appendChild(this.imgEl);\n }\n\n _setImageURL(imageURL) {\n this.imgEl.setAttribute(\"src\", imageURL);\n }\n\n _setImageSize(triggerWidth, triggerHeight) {\n this.imgEl.style.width = `${triggerWidth * this.settings.zoomFactor}px`;\n this.imgEl.style.height = `${triggerHeight * this.settings.zoomFactor}px`;\n }\n\n // `percentageOffsetX` and `percentageOffsetY` must be percentages\n // expressed as floats between `0' and `1`.\n setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {\n const imgElWidth = this.imgEl.offsetWidth;\n const imgElHeight = this.imgEl.offsetHeight;\n const elWidth = this.el.offsetWidth;\n const elHeight = this.el.offsetHeight;\n\n const centreOfContainerX = elWidth / 2;\n const centreOfContainerY = elHeight / 2;\n\n const targetImgXToBeCentre = imgElWidth * percentageOffsetX;\n const targetImgYToBeCentre = imgElHeight * percentageOffsetY;\n\n let left = centreOfContainerX - targetImgXToBeCentre;\n let top = centreOfContainerY - targetImgYToBeCentre;\n\n const differenceBetweenContainerWidthAndImgWidth = elWidth - imgElWidth;\n const differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight;\n const isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0;\n const isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0;\n\n const minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0;\n const minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0;\n\n const maxLeft = isContainerLargerThanImgX\n ? differenceBetweenContainerWidthAndImgWidth / 2\n : differenceBetweenContainerWidthAndImgWidth;\n const maxTop = isContainerLargerThanImgY\n ? differenceBetweenContainerHeightAndImgHeight / 2\n : differenceBetweenContainerHeightAndImgHeight;\n\n if (this.el.parentElement === this.settings.inlineContainer) {\n // This may be needed in the future to deal with browser event\n // inconsistencies, but it's difficult to tell for sure.\n // let scrollX = isTouch ? 0 : window.scrollX;\n // let scrollY = isTouch ? 0 : window.scrollY;\n const scrollX = window.pageXOffset;\n const scrollY = window.pageYOffset;\n\n let inlineLeft =\n triggerRect.left + percentageOffsetX * triggerRect.width - elWidth / 2 + this.settings.inlineOffsetX + scrollX;\n let inlineTop =\n triggerRect.top + percentageOffsetY * triggerRect.height - elHeight / 2 + this.settings.inlineOffsetY + scrollY;\n\n if (this.settings.containInline) {\n if (inlineLeft < triggerRect.left + scrollX) {\n inlineLeft = triggerRect.left + scrollX;\n } else if (inlineLeft + elWidth > triggerRect.left + triggerRect.width + scrollX) {\n inlineLeft = triggerRect.left + triggerRect.width - elWidth + scrollX;\n }\n\n if (inlineTop < triggerRect.top + scrollY) {\n inlineTop = triggerRect.top + scrollY;\n } else if (inlineTop + elHeight > triggerRect.top + triggerRect.height + scrollY) {\n inlineTop = triggerRect.top + triggerRect.height - elHeight + scrollY;\n }\n }\n\n this.el.style.left = `${inlineLeft}px`;\n this.el.style.top = `${inlineTop}px`;\n }\n\n if (!this.settings.showWhitespaceAtEdges) {\n if (left > minLeft) {\n left = minLeft;\n } else if (left < maxLeft) {\n left = maxLeft;\n }\n\n if (top > minTop) {\n top = minTop;\n } else if (top < maxTop) {\n top = maxTop;\n }\n }\n\n this.imgEl.style.transform = `translate(${left}px, ${top}px)`;\n this.imgEl.style.webkitTransform = `translate(${left}px, ${top}px)`;\n }\n\n get _isInline() {\n const inline = this.settings.inline;\n\n return inline === true || (typeof inline === \"number\" && window.innerWidth <= inline);\n }\n\n _removeListenersAndResetClasses() {\n this.el.removeEventListener(\"animationend\", this._completeShow);\n this.el.removeEventListener(\"animationend\", this._completeHide);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide);\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n }\n\n show(imageURL, triggerWidth, triggerHeight) {\n this._removeListenersAndResetClasses();\n this.isShowing = true;\n\n addClasses(this.el, this.openClasses);\n\n if (this.imgEl.getAttribute(\"src\") != imageURL) {\n addClasses(this.el, this.loadingClasses);\n this.imgEl.addEventListener(\"load\", this._handleLoad);\n this._setImageURL(imageURL);\n }\n\n this._setImageSize(triggerWidth, triggerHeight);\n\n if (this._isInline) {\n this._showInline();\n } else {\n this._showInContainer();\n }\n\n if (this.HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeShow);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeShow);\n addClasses(this.el, this.openingClasses);\n }\n }\n\n _showInline() {\n this.settings.inlineContainer.appendChild(this.el);\n addClasses(this.el, this.inlineClasses);\n }\n\n _showInContainer() {\n this.settings.container.appendChild(this.el);\n }\n\n hide() {\n this._removeListenersAndResetClasses();\n this.isShowing = false;\n\n if (this.HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeHide);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeHide);\n addClasses(this.el, this.closingClasses);\n } else {\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.inlineClasses);\n }\n }\n\n _completeShow() {\n this.el.removeEventListener(\"animationend\", this._completeShow);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow);\n\n removeClasses(this.el, this.openingClasses);\n }\n\n _completeHide() {\n this.el.removeEventListener(\"animationend\", this._completeHide);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide);\n\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n removeClasses(this.el, this.inlineClasses);\n\n this.el.style.left = \"\";\n this.el.style.top = \"\";\n\n // The window could have been resized above or below `inline`\n // limits since the ZoomPane was shown. Because of this, we\n // can't rely on `this._isInline` here.\n if (this.el.parentElement === this.settings.container) {\n this.settings.container.removeChild(this.el);\n } else if (this.el.parentElement === this.settings.inlineContainer) {\n this.settings.inlineContainer.removeChild(this.el);\n }\n }\n\n _handleLoad() {\n this.imgEl.removeEventListener(\"load\", this._handleLoad);\n removeClasses(this.el, this.loadingClasses);\n }\n}\n","import { isDOMElement } from \"0\"\nimport injectBaseStylesheet from \"3\"\n\nimport Trigger from \"4\"\nimport ZoomPane from \"6\"\n\nexport default class Drift {\n constructor(triggerEl, options = {}) {\n this.VERSION = \"1.5.0\";\n this.triggerEl = triggerEl;\n\n this.destroy = this.destroy.bind(this);\n\n if (!isDOMElement(this.triggerEl)) {\n throw new TypeError(\"`new Drift` requires a DOM element as its first argument.\");\n }\n\n // Prefix for generated element class names (e.g. `my-ns` will\n // result in classes such as `my-ns-pane`. Default `drift-`\n // prefixed classes will always be added as well.\n const namespace = options[\"namespace\"] || null;\n // Whether the ZoomPane should show whitespace when near the edges.\n const showWhitespaceAtEdges = options[\"showWhitespaceAtEdges\"] || false;\n // Whether the inline ZoomPane should stay inside\n // the bounds of its image.\n const containInline = options[\"containInline\"] || false;\n // How much to offset the ZoomPane from the\n // interaction point when inline.\n const inlineOffsetX = options[\"inlineOffsetX\"] || 0;\n const inlineOffsetY = options[\"inlineOffsetY\"] || 0;\n // A DOM element to append the inline ZoomPane to\n const inlineContainer = options[\"inlineContainer\"] || document.body;\n // Which trigger attribute to pull the ZoomPane image source from.\n const sourceAttribute = options[\"sourceAttribute\"] || \"data-zoom\";\n // How much to magnify the trigger by in the ZoomPane.\n // (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane imag\n // if the trigger is displayed at 300 px wide)\n const zoomFactor = options[\"zoomFactor\"] || 3;\n // A DOM element to append the non-inline ZoomPane to.\n // Required if `inlinePane !== true`.\n const paneContainer = options[\"paneContainer\"] === undefined ? document.body : options[\"paneContainer\"];\n // When to switch to an inline ZoomPane. This can be a boolean or\n // an integer. If `true`, the ZoomPane will always be inline,\n // if `false`, it will switch to inline when `windowWidth <= inlinePane`\n const inlinePane = options[\"inlinePane\"] || 375;\n // If `true`, touch events will trigger the zoom, like mouse events.\n const handleTouch = \"handleTouch\" in options ? !!options[\"handleTouch\"] : true;\n // If present (and a function), this will be called\n // whenever the ZoomPane is shown.\n const onShow = options[\"onShow\"] || null;\n // If present (and a function), this will be called\n // whenever the ZoomPane is hidden.\n const onHide = options[\"onHide\"] || null;\n // Add base styles to the page. See the \"Theming\"\n // section of README.md for more information.\n const injectBaseStyles = \"injectBaseStyles\" in options ? !!options[\"injectBaseStyles\"] : true;\n // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `mouseenter` event.\n const hoverDelay = options[\"hoverDelay\"] || 0;\n // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `touchstart` event.\n // It's unlikely that you would want to use this option, since\n // \"tap and hold\" is much more intentional than a hover event.\n const touchDelay = options[\"touchDelay\"] || 0;\n // If true, a bounding box will show the area currently being previewed\n // during mouse hover\n const hoverBoundingBox = options[\"hoverBoundingBox\"] || false;\n // If true, a bounding box will show the area currently being previewed\n // during touch events\n const touchBoundingBox = options[\"touchBoundingBox\"] || false;\n // A DOM element to append the bounding box to.\n const boundingBoxContainer = options[\"boundingBoxContainer\"] || document.body;\n // If true, the events related to handleTouch use passive listeners in\n // order to improve performance for touch devices.\n const passive = options[\"passive\"] || false;\n\n if (inlinePane !== true && !isDOMElement(paneContainer)) {\n throw new TypeError(\"`paneContainer` must be a DOM element when `inlinePane !== true`\");\n }\n if (!isDOMElement(inlineContainer)) {\n throw new TypeError(\"`inlineContainer` must be a DOM element\");\n }\n\n this.settings = {\n namespace,\n showWhitespaceAtEdges,\n containInline,\n inlineOffsetX,\n inlineOffsetY,\n inlineContainer,\n sourceAttribute,\n zoomFactor,\n paneContainer,\n inlinePane,\n handleTouch,\n onShow,\n onHide,\n injectBaseStyles,\n hoverDelay,\n touchDelay,\n hoverBoundingBox,\n touchBoundingBox,\n boundingBoxContainer,\n passive,\n };\n\n if (this.settings.injectBaseStyles) {\n injectBaseStylesheet();\n }\n\n this._buildZoomPane();\n this._buildTrigger();\n }\n\n get isShowing() {\n return this.zoomPane.isShowing;\n }\n\n get zoomFactor() {\n return this.settings.zoomFactor;\n }\n\n set zoomFactor(zf) {\n this.settings.zoomFactor = zf;\n this.zoomPane.settings.zoomFactor = zf;\n this.trigger.settings.zoomFactor = zf;\n this.boundingBox.settings.zoomFactor = zf;\n }\n\n _buildZoomPane() {\n this.zoomPane = new ZoomPane({\n container: this.settings.paneContainer,\n zoomFactor: this.settings.zoomFactor,\n showWhitespaceAtEdges: this.settings.showWhitespaceAtEdges,\n containInline: this.settings.containInline,\n inline: this.settings.inlinePane,\n namespace: this.settings.namespace,\n inlineOffsetX: this.settings.inlineOffsetX,\n inlineOffsetY: this.settings.inlineOffsetY,\n inlineContainer: this.settings.inlineContainer,\n });\n }\n\n _buildTrigger() {\n this.trigger = new Trigger({\n el: this.triggerEl,\n zoomPane: this.zoomPane,\n handleTouch: this.settings.handleTouch,\n onShow: this.settings.onShow,\n onHide: this.settings.onHide,\n sourceAttribute: this.settings.sourceAttribute,\n hoverDelay: this.settings.hoverDelay,\n touchDelay: this.settings.touchDelay,\n hoverBoundingBox: this.settings.hoverBoundingBox,\n touchBoundingBox: this.settings.touchBoundingBox,\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n boundingBoxContainer: this.settings.boundingBoxContainer,\n passive: this.settings.passive,\n });\n }\n\n setZoomImageURL(imageURL) {\n this.zoomPane._setImageURL(imageURL);\n }\n\n disable() {\n this.trigger.enabled = false;\n }\n\n enable() {\n this.trigger.enabled = true;\n }\n\n destroy() {\n this.trigger._hide();\n this.trigger._unbindEvents();\n }\n}\n\n// Public API\n/* eslint-disable no-self-assign */\nObject.defineProperty(Drift.prototype, \"isShowing\", {\n get: function () {\n return this.isShowing;\n },\n});\nObject.defineProperty(Drift.prototype, \"zoomFactor\", {\n get: function () {\n return this.zoomFactor;\n },\n set: function (value) {\n this.zoomFactor = value;\n },\n});\nDrift.prototype[\"setZoomImageURL\"] = Drift.prototype.setZoomImageURL;\nDrift.prototype[\"disable\"] = Drift.prototype.disable;\nDrift.prototype[\"enable\"] = Drift.prototype.enable;\nDrift.prototype[\"destroy\"] = Drift.prototype.destroy;\n/* eslint-enable no-self-assign */\n","/* UNMINIFIED RULES\n\nconst RULES = `\n@keyframes noop {\n 0% { zoom: 1; }\n}\n\n@-webkit-keyframes noop {\n 0% { zoom: 1; }\n}\n\n.drift-zoom-pane.drift-open {\n display: block;\n}\n\n.drift-zoom-pane.drift-opening, .drift-zoom-pane.drift-closing {\n animation: noop 1ms;\n -webkit-animation: noop 1ms;\n}\n\n.drift-zoom-pane {\n position: absolute;\n overflow: hidden;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.drift-zoom-pane-loader {\n display: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n max-width: none;\n max-height: none;\n}\n\n.drift-bounding-box {\n position: absolute;\n pointer-events: none;\n}\n`;\n\n*/\n\nconst RULES =\n \".drift-bounding-box,.drift-zoom-pane{position:absolute;pointer-events:none}@keyframes noop{0%{zoom:1}}@-webkit-keyframes noop{0%{zoom:1}}.drift-zoom-pane.drift-open{display:block}.drift-zoom-pane.drift-closing,.drift-zoom-pane.drift-opening{animation:noop 1ms;-webkit-animation:noop 1ms}.drift-zoom-pane{overflow:hidden;width:100%;height:100%;top:0;left:0}.drift-zoom-pane-loader{display:none}.drift-zoom-pane img{position:absolute;display:block;max-width:none;max-height:none}\";\n\nexport default function injectBaseStylesheet() {\n if (document.querySelector(\".drift-base-styles\")) {\n return;\n }\n\n const styleEl = document.createElement(\"style\");\n styleEl.type = \"text/css\";\n styleEl.classList.add(\"drift-base-styles\");\n\n styleEl.appendChild(document.createTextNode(RULES));\n\n const head = document.head;\n head.insertBefore(styleEl, head.firstChild);\n}\n","// This file is used for the standalone browser build\n\nimport Drift from \"2\"\n\nwindow[\"Drift\"] = Drift;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/drift-basic.min.css b/dist/drift-basic.min.css index 6a726719..57f1d9a8 100644 --- a/dist/drift-basic.min.css +++ b/dist/drift-basic.min.css @@ -1 +1 @@ -@keyframes a{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes b{0%{transform:scale(1);opacity:1}15%{transform:scale(1.1);opacity:1}to{transform:scale(.5);opacity:0}}@keyframes c{0%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(-1turn)}}@keyframes d{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(6px)}25%{transform:scale(1.3) translateX(8px)}40%{transform:scale(1.2) translateX(6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(6px)}75%{transform:scale(.7) translateX(8px)}90%{transform:scale(.8) translateX(6px)}to{transform:scale(1)}}@keyframes e{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(-6px)}25%{transform:scale(1.3) translateX(-8px)}40%{transform:scale(1.2) translateX(-6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(-6px)}75%{transform:scale(.7) translateX(-8px)}90%{transform:scale(.8) translateX(-6px)}to{transform:scale(1)}}.drift-zoom-pane{background:rgba(0,0,0,.5);transform:translateZ(0);-webkit-transform:translateZ(0)}.drift-zoom-pane.drift-opening{animation:a .18s ease-out;-webkit-animation:a .18s ease-out}.drift-zoom-pane.drift-closing{animation:b .21s ease-in;-webkit-animation:b .21s ease-in}.drift-zoom-pane.drift-inline{position:absolute;width:150px;height:150px;border-radius:75px;box-shadow:0 6px 18px rgba(0,0,0,.3)}.drift-loading .drift-zoom-pane-loader{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width:66px;height:20px;animation:c 1.8s linear infinite;-webkit-animation:c 1.8s linear infinite}.drift-zoom-pane-loader:after,.drift-zoom-pane-loader:before{content:"";display:block;width:20px;height:20px;position:absolute;top:50%;margin-top:-10px;border-radius:20px;background:hsla(0,0%,100%,.9)}.drift-zoom-pane-loader:before{left:0;animation:d 1.8s linear infinite;-webkit-animation:d 1.8s linear infinite}.drift-zoom-pane-loader:after{right:0;animation:e 1.8s linear infinite;-webkit-animation:e 1.8s linear infinite;animation-delay:-.9s;-webkit-animation-delay:-.9s}.drift-bounding-box{background-color:rgba(0,0,0,.4)} \ No newline at end of file +@keyframes a{0%{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes b{0%{opacity:1;transform:scale(1)}15%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(.5)}}@keyframes c{0%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(-1turn)}}@keyframes d{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(6px)}25%{transform:scale(1.3) translateX(8px)}40%{transform:scale(1.2) translateX(6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(6px)}75%{transform:scale(.7) translateX(8px)}90%{transform:scale(.8) translateX(6px)}to{transform:scale(1)}}@keyframes e{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(-6px)}25%{transform:scale(1.3) translateX(-8px)}40%{transform:scale(1.2) translateX(-6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(-6px)}75%{transform:scale(.7) translateX(-8px)}90%{transform:scale(.8) translateX(-6px)}to{transform:scale(1)}}.drift-zoom-pane{background:rgba(0,0,0,.5);transform:translateZ(0);-webkit-transform:translateZ(0)}.drift-zoom-pane.drift-opening{animation:a .18s ease-out;-webkit-animation:a .18s ease-out}.drift-zoom-pane.drift-closing{animation:b .21s ease-in;-webkit-animation:b .21s ease-in}.drift-zoom-pane.drift-inline{border-radius:75px;box-shadow:0 6px 18px rgba(0,0,0,.3);height:150px;position:absolute;width:150px}.drift-loading .drift-zoom-pane-loader{animation:c 1.8s linear infinite;-webkit-animation:c 1.8s linear infinite;display:block;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width:66px}.drift-zoom-pane-loader:after,.drift-zoom-pane-loader:before{background:hsla(0,0%,100%,.9);border-radius:20px;content:"";display:block;height:20px;margin-top:-10px;position:absolute;top:50%;width:20px}.drift-zoom-pane-loader:before{animation:d 1.8s linear infinite;-webkit-animation:d 1.8s linear infinite;left:0}.drift-zoom-pane-loader:after{animation:e 1.8s linear infinite;-webkit-animation:e 1.8s linear infinite;animation-delay:-.9s;-webkit-animation-delay:-.9s;right:0}.drift-bounding-box{background-color:rgba(0,0,0,.4)} \ No newline at end of file diff --git a/package.json b/package.json index 5a9e2a54..7797f81b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "drift-zoom", - "version": "1.5.0", + "version": "1.5.1", "description": "Easily add \"zoom on hover\" functionality to your site's images. Lightweight, no-dependency JavaScript.", "contributors": [ "Frederick Fogerty (https://github.com/frederickfogerty)", diff --git a/src/js/Drift.js b/src/js/Drift.js index f251a0de..ae0d9edc 100644 --- a/src/js/Drift.js +++ b/src/js/Drift.js @@ -6,7 +6,7 @@ import ZoomPane from "./ZoomPane"; export default class Drift { constructor(triggerEl, options = {}) { - this.VERSION = "1.5.0"; + this.VERSION = "1.5.1"; this.triggerEl = triggerEl; this.destroy = this.destroy.bind(this);