From ea5dd9f1584e3826bff648e123f2c0727eadca42 Mon Sep 17 00:00:00 2001 From: Paul Straw Date: Tue, 29 Dec 2015 15:08:30 -0800 Subject: [PATCH 1/3] WIP Fixing `containInline` scroll support Working on desktop --- dist/Drift.js | 37 ++++++++++++++++++++++++------------- dist/Drift.min.js | 2 +- index.html | 6 +++--- src/js/Trigger.js | 7 ++++--- src/js/ZoomPane.js | 31 ++++++++++++++++++++----------- 5 files changed, 52 insertions(+), 31 deletions(-) diff --git a/dist/Drift.js b/dist/Drift.js index 75956b28..53a7470a 100644 --- a/dist/Drift.js +++ b/dist/Drift.js @@ -292,15 +292,18 @@ var _initialiseProps = function _initialiseProps() { } var movementX = undefined, - movementY = undefined; + movementY = undefined, + isTouch = undefined; if (e.touches) { var firstTouch = e.touches[0]; movementX = firstTouch.clientX; movementY = firstTouch.clientY; + isTouch = true; } else { movementX = e.clientX; movementY = e.clientY; + isTouch = false; } var el = _this.settings.el; @@ -311,7 +314,7 @@ var _initialiseProps = function _initialiseProps() { var percentageOffsetX = offsetX / _this.settings.el.clientWidth; var percentageOffsetY = offsetY / _this.settings.el.clientHeight; - _this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, _this.settings.el.clientWidth, _this.settings.el.clientHeight, rect); + _this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect, isTouch); }; }; @@ -440,29 +443,37 @@ var ZoomPane = (function () { }, { key: 'setPosition', - value: function setPosition(percentageOffsetX, percentageOffsetY, triggerWidth, triggerHeight, triggerRect) { + value: function setPosition(percentageOffsetX, percentageOffsetY, triggerRect, isTouch) { var left = -(this.imgEl.clientWidth * percentageOffsetX - this.el.clientWidth / 2); var top = -(this.imgEl.clientHeight * percentageOffsetY - this.el.clientHeight / 2); var maxLeft = -(this.imgEl.clientWidth - this.el.clientWidth); var maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - var inlineLeft = triggerRect.left + percentageOffsetX * triggerWidth - this.el.clientWidth / 2 + this.settings.inlineOffsetX; - var inlineTop = triggerRect.top + percentageOffsetY * triggerHeight - this.el.clientHeight / 2 + this.settings.inlineOffsetY; + var scrollX = window.scrollX; + var scrollY = window.scrollY; + + var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + this.settings.inlineOffsetX; + var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + this.settings.inlineOffsetY; + + if (!isTouch) { + inlineLeft += scrollX; + inlineTop += scrollY; + } if (this.settings.containInline) { var elRect = this.el.getBoundingClientRect(); - if (inlineLeft < triggerRect.left) { - inlineLeft = triggerRect.left; - } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerWidth) { - inlineLeft = triggerRect.left + triggerWidth - this.el.clientWidth; + if (inlineLeft < triggerRect.left + scrollX) { + inlineLeft = triggerRect.left + scrollX; + } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + scrollX) { + inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + scrollX; } - if (inlineTop < triggerRect.top) { - inlineTop = triggerRect.top; - } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerHeight) { - inlineTop = triggerRect.top + triggerHeight - this.el.clientHeight; + if (inlineTop < triggerRect.top + scrollY) { + inlineTop = triggerRect.top + scrollY; + } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + scrollY) { + inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + scrollY; } } diff --git a/dist/Drift.min.js b/dist/Drift.min.js index 33fdbb72..f21b71b6 100644 --- a/dist/Drift.min.js +++ b/dist/Drift.min.js @@ -1 +1 @@ -!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ls.left+n&&(h=s.left+n-this.el.clientWidth),us.top+i&&(u=s.top+i-this.el.clientHeight)}this.el.style.left=h+"px",this.el.style.top=u+"px"}this.settings.showWhitespaceAtEdges||(o>0?o=0:a>o&&(o=a),l>0?l=0:r>l&&(l=r)),this.imgEl.style.transform="translate("+o+"px, "+l+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file +!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ln.left+n.width+r&&(u=n.left+n.width-this.el.clientWidth+r),dn.top+n.height+h&&(d=n.top+n.height-this.el.clientHeight+h)}this.el.style.left=u+"px",this.el.style.top=d+"px"}this.settings.showWhitespaceAtEdges||(s>0?s=0:l>s&&(s=l),o>0?o=0:a>o&&(o=a)),this.imgEl.style.transform="translate("+s+"px, "+o+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file diff --git a/index.html b/index.html index 278ebd42..725d5694 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ } .drift-demo-trigger { - max-width: 100%; + /*max-width: 100%;*/ } .detail { @@ -54,7 +54,7 @@ - +
@@ -72,7 +72,7 @@

Drift Demo

new Drift(document.querySelector('.drift-demo-trigger'), { paneContainer: document.querySelector('.detail'), inlinePane: 400, - inlineOffsetY: -85, + // inlineOffsetY: -85, containInline: true }); diff --git a/src/js/Trigger.js b/src/js/Trigger.js index 8fe25021..ad0b22a8 100644 --- a/src/js/Trigger.js +++ b/src/js/Trigger.js @@ -78,15 +78,17 @@ export default class Trigger { return; } - let movementX, movementY; + let movementX, movementY, isTouch; if (e.touches) { let firstTouch = e.touches[0]; movementX = firstTouch.clientX; movementY = firstTouch.clientY; + isTouch = true; } else { movementX = e.clientX; movementY = e.clientY; + isTouch = false; } let el = this.settings.el; @@ -98,7 +100,6 @@ export default class Trigger { let percentageOffsetY = offsetY / this.settings.el.clientHeight; this.settings.zoomPane.setPosition(percentageOffsetX, - percentageOffsetY, this.settings.el.clientWidth, - this.settings.el.clientHeight, rect); + percentageOffsetY, rect, isTouch); } } diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index 61e639e0..97bb6b2b 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -61,31 +61,40 @@ export default class ZoomPane { // `percentageOffsetX` and `percentageOffsetY` must be percentages // expressed as floats between `0' and `1`. - setPosition(percentageOffsetX, percentageOffsetY, triggerWidth, triggerHeight, triggerRect) { + setPosition(percentageOffsetX, percentageOffsetY, triggerRect, isTouch) { let left = -(this.imgEl.clientWidth * percentageOffsetX - (this.el.clientWidth / 2)); let top = -(this.imgEl.clientHeight * percentageOffsetY - (this.el.clientHeight / 2)); let maxLeft = -(this.imgEl.clientWidth - this.el.clientWidth); let maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - let inlineLeft = triggerRect.left + (percentageOffsetX * triggerWidth) + let scrollX = window.scrollX; + let scrollY = window.scrollY; + + let inlineLeft = triggerRect.left + (percentageOffsetX * triggerRect.width) - (this.el.clientWidth / 2) + this.settings.inlineOffsetX; - let inlineTop = triggerRect.top + (percentageOffsetY * triggerHeight) + let inlineTop = triggerRect.top + (percentageOffsetY * triggerRect.height) - (this.el.clientHeight / 2) + this.settings.inlineOffsetY; + if (!isTouch) { + inlineLeft += scrollX; + inlineTop += scrollY; + } + if (this.settings.containInline) { let elRect = this.el.getBoundingClientRect(); - if (inlineLeft < triggerRect.left) { - inlineLeft = triggerRect.left; - } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerWidth) { - inlineLeft = triggerRect.left + triggerWidth - this.el.clientWidth; + + if (inlineLeft < triggerRect.left + scrollX) { + inlineLeft = triggerRect.left + scrollX; + } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + scrollX) { + inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + scrollX; } - if (inlineTop < triggerRect.top) { - inlineTop = triggerRect.top; - } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerHeight) { - inlineTop = triggerRect.top + triggerHeight - this.el.clientHeight; + if (inlineTop < triggerRect.top + scrollY) { + inlineTop = triggerRect.top + scrollY; + } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + scrollY) { + inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + scrollY; } } From bedee427c4c25e8d96daf7e823090223d6b2a1d2 Mon Sep 17 00:00:00 2001 From: Paul Straw Date: Tue, 29 Dec 2015 15:13:10 -0800 Subject: [PATCH 2/3] Fix `containInline` mobile scroll support. --- dist/Drift.js | 13 ++++--------- dist/Drift.min.js | 2 +- index.html | 2 +- src/js/ZoomPane.js | 13 ++++--------- 4 files changed, 10 insertions(+), 20 deletions(-) diff --git a/dist/Drift.js b/dist/Drift.js index 53a7470a..d3bf8b0a 100644 --- a/dist/Drift.js +++ b/dist/Drift.js @@ -450,16 +450,11 @@ var ZoomPane = (function () { var maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - var scrollX = window.scrollX; - var scrollY = window.scrollY; + var scrollX = isTouch ? 0 : window.scrollX; + var scrollY = isTouch ? 0 : window.scrollY; - var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + this.settings.inlineOffsetX; - var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + this.settings.inlineOffsetY; - - if (!isTouch) { - inlineLeft += scrollX; - inlineTop += scrollY; - } + var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + this.settings.inlineOffsetX + scrollX; + var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + this.settings.inlineOffsetY + scrollY; if (this.settings.containInline) { var elRect = this.el.getBoundingClientRect(); diff --git a/dist/Drift.min.js b/dist/Drift.min.js index f21b71b6..8ba5417a 100644 --- a/dist/Drift.min.js +++ b/dist/Drift.min.js @@ -1 +1 @@ -!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ln.left+n.width+r&&(u=n.left+n.width-this.el.clientWidth+r),dn.top+n.height+h&&(d=n.top+n.height-this.el.clientHeight+h)}this.el.style.left=u+"px",this.el.style.top=d+"px"}this.settings.showWhitespaceAtEdges||(s>0?s=0:l>s&&(s=l),o>0?o=0:a>o&&(o=a)),this.imgEl.style.transform="translate("+s+"px, "+o+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file +!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ln.left+n.width+r&&(u=n.left+n.width-this.el.clientWidth+r),dn.top+n.height+h&&(d=n.top+n.height-this.el.clientHeight+h)}this.el.style.left=u+"px",this.el.style.top=d+"px"}this.settings.showWhitespaceAtEdges||(s>0?s=0:l>s&&(s=l),o>0?o=0:a>o&&(o=a)),this.imgEl.style.transform="translate("+s+"px, "+o+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file diff --git a/index.html b/index.html index 725d5694..8dc19cc7 100644 --- a/index.html +++ b/index.html @@ -54,7 +54,7 @@ - +
diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index 97bb6b2b..a468639e 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -68,18 +68,13 @@ export default class ZoomPane { let maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - let scrollX = window.scrollX; - let scrollY = window.scrollY; + let scrollX = isTouch ? 0 : window.scrollX; + let scrollY = isTouch ? 0 : window.scrollY; let inlineLeft = triggerRect.left + (percentageOffsetX * triggerRect.width) - - (this.el.clientWidth / 2) + this.settings.inlineOffsetX; + - (this.el.clientWidth / 2) + this.settings.inlineOffsetX + scrollX; let inlineTop = triggerRect.top + (percentageOffsetY * triggerRect.height) - - (this.el.clientHeight / 2) + this.settings.inlineOffsetY; - - if (!isTouch) { - inlineLeft += scrollX; - inlineTop += scrollY; - } + - (this.el.clientHeight / 2) + this.settings.inlineOffsetY + scrollY; if (this.settings.containInline) { let elRect = this.el.getBoundingClientRect(); From e0c96057bdc38eee00f814309a62903e9403a51f Mon Sep 17 00:00:00 2001 From: Paul Straw Date: Tue, 29 Dec 2015 15:39:31 -0800 Subject: [PATCH 3/3] Final `containInline` mobile scroll tweaks --- dist/Drift.js | 17 +++++++++-------- dist/Drift.min.js | 2 +- index.html | 12 ++++++------ src/js/Trigger.js | 6 ++---- src/js/ZoomPane.js | 10 +++++++--- 5 files changed, 25 insertions(+), 22 deletions(-) diff --git a/dist/Drift.js b/dist/Drift.js index d3bf8b0a..f1505a14 100644 --- a/dist/Drift.js +++ b/dist/Drift.js @@ -292,18 +292,15 @@ var _initialiseProps = function _initialiseProps() { } var movementX = undefined, - movementY = undefined, - isTouch = undefined; + movementY = undefined; if (e.touches) { var firstTouch = e.touches[0]; movementX = firstTouch.clientX; movementY = firstTouch.clientY; - isTouch = true; } else { movementX = e.clientX; movementY = e.clientY; - isTouch = false; } var el = _this.settings.el; @@ -314,7 +311,7 @@ var _initialiseProps = function _initialiseProps() { var percentageOffsetX = offsetX / _this.settings.el.clientWidth; var percentageOffsetY = offsetY / _this.settings.el.clientHeight; - _this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect, isTouch); + _this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect); }; }; @@ -443,15 +440,19 @@ var ZoomPane = (function () { }, { key: 'setPosition', - value: function setPosition(percentageOffsetX, percentageOffsetY, triggerRect, isTouch) { + value: function setPosition(percentageOffsetX, percentageOffsetY, triggerRect) { var left = -(this.imgEl.clientWidth * percentageOffsetX - this.el.clientWidth / 2); var top = -(this.imgEl.clientHeight * percentageOffsetY - this.el.clientHeight / 2); var maxLeft = -(this.imgEl.clientWidth - this.el.clientWidth); var maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - var scrollX = isTouch ? 0 : window.scrollX; - var scrollY = isTouch ? 0 : window.scrollY; + // This may be needed in the future to deal with browser event + // inconsistencies, but it's difficult to tell for sure. + // let scrollX = isTouch ? 0 : window.scrollX; + // let scrollY = isTouch ? 0 : window.scrollY; + var scrollX = window.scrollX; + var scrollY = window.scrollY; var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + this.settings.inlineOffsetX + scrollX; var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + this.settings.inlineOffsetY + scrollY; diff --git a/dist/Drift.min.js b/dist/Drift.min.js index 8ba5417a..34ae391d 100644 --- a/dist/Drift.min.js +++ b/dist/Drift.min.js @@ -1 +1 @@ -!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ln.left+n.width+r&&(u=n.left+n.width-this.el.clientWidth+r),dn.top+n.height+h&&(d=n.top+n.height-this.el.clientHeight+h)}this.el.style.left=u+"px",this.el.style.top=d+"px"}this.settings.showWhitespaceAtEdges||(s>0?s=0:l>s&&(s=l),o>0?o=0:a>o&&(o=a)),this.imgEl.style.transform="translate("+s+"px, "+o+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file +!function e(t,n,i){function s(l,a){if(!n[l]){if(!t[l]){var r="function"==typeof require&&require;if(!a&&r)return r(l,!0);if(o)return o(l,!0);var h=new Error("Cannot find module '"+l+"'");throw h.code="MODULE_NOT_FOUND",h}var u=n[l]={exports:{}};t[l][0].call(u.exports,function(e){var n=t[l][1][e];return s(n?n:e)},u,u.exports,e,t,n,i)}return n[l].exports}for(var o="function"==typeof require&&require,l=0;ln.left+n.width+a&&(h=n.left+n.width-this.el.clientWidth+a),un.top+n.height+r&&(u=n.top+n.height-this.el.clientHeight+r)}this.el.style.left=h+"px",this.el.style.top=u+"px"}this.settings.showWhitespaceAtEdges||(i>0?i=0:o>i&&(i=o),s>0?s=0:l>s&&(s=l)),this.imgEl.style.transform="translate("+i+"px, "+s+"px)"}},{key:"_removeListenersAndResetClasses",value:function(){this.el.removeEventListener("animationend",this._completeShow,!1),this.el.removeEventListener("animationend",this._completeHide,!1),(0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.closingClasses)}},{key:"show",value:function(e,t){this._removeListenersAndResetClasses(),this.isShowing=!0,(0,r.addClasses)(this.el,this.openClasses),this._setImageURL(e),this._setImageSize(t),this._isInline?this._showInline():this._showInContainer(),h&&(this.el.addEventListener("animationend",this._completeShow,!1),(0,r.addClasses)(this.el,this.openingClasses))}},{key:"_showInline",value:function(){this.settings.inlineContainer.appendChild(this.el),(0,r.addClasses)(this.el,this.inlineClasses)}},{key:"_showInContainer",value:function(){this.settings.container.appendChild(this.el)}},{key:"hide",value:function(){this._removeListenersAndResetClasses(),this.isShowing=!1,h?(this.el.addEventListener("animationend",this._completeHide,!1),(0,r.addClasses)(this.el,this.closingClasses)):((0,r.removeClasses)(this.el,this.openClasses),(0,r.removeClasses)(this.el,this.inlineClasses))}},{key:"_isInline",get:function(){var e=this.settings.inline;return e===!0||"number"==typeof e&&window.innerWidth<=e}}]),e}();n["default"]=u},{"./util/dom":5,"./util/throwIfMissing":6}],4:[function(e,t,n){"use strict";function i(){if(!document.querySelector(".drift-base-styles")){var e=document.createElement("style");e.type="text/css",e.classList.add("drift-base-styles"),e.appendChild(document.createTextNode(s));var t=document.head;t.insertBefore(e,t.firstChild)}}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i;var s="\n@keyframes noop { }\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;\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}\n\n.drift-zoom-pane.drift-inline {\n pointer-events: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n}\n"},{}],5:[function(e,t,n){"use strict";function i(e){return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e}function s(e){return a?e instanceof HTMLElement:e&&"object"===("undefined"==typeof e?"undefined":i(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName}function o(e,t){t.forEach(function(t){e.classList.add(t)})}function l(e,t){t.forEach(function(t){e.classList.remove(t)})}Object.defineProperty(n,"__esModule",{value:!0}),n.isDOMElement=s,n.addClasses=o,n.removeClasses=l;var a="object"===("undefined"==typeof HTMLElement?"undefined":i(HTMLElement))},{}],6:[function(e,t,n){"use strict";function i(){throw new Error("Missing parameter")}Object.defineProperty(n,"__esModule",{value:!0}),n["default"]=i},{}]},{},[1]); \ No newline at end of file diff --git a/index.html b/index.html index 8dc19cc7..533467a9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + Drift Playground @@ -19,7 +19,7 @@ } .drift-demo-trigger { - /*max-width: 100%;*/ + max-width: 100%; } .detail { @@ -54,12 +54,12 @@ - +

Drift Demo

-

This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from imgix. This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can learn more and download it here.

+

This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from imgix. This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can learn more and download it here.

@@ -71,8 +71,8 @@

Drift Demo

diff --git a/src/js/Trigger.js b/src/js/Trigger.js index ad0b22a8..289fd13b 100644 --- a/src/js/Trigger.js +++ b/src/js/Trigger.js @@ -78,17 +78,15 @@ export default class Trigger { return; } - let movementX, movementY, isTouch; + let movementX, movementY; if (e.touches) { let firstTouch = e.touches[0]; movementX = firstTouch.clientX; movementY = firstTouch.clientY; - isTouch = true; } else { movementX = e.clientX; movementY = e.clientY; - isTouch = false; } let el = this.settings.el; @@ -100,6 +98,6 @@ export default class Trigger { let percentageOffsetY = offsetY / this.settings.el.clientHeight; this.settings.zoomPane.setPosition(percentageOffsetX, - percentageOffsetY, rect, isTouch); + percentageOffsetY, rect); } } diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index a468639e..946bb9d1 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -61,15 +61,19 @@ export default class ZoomPane { // `percentageOffsetX` and `percentageOffsetY` must be percentages // expressed as floats between `0' and `1`. - setPosition(percentageOffsetX, percentageOffsetY, triggerRect, isTouch) { + setPosition(percentageOffsetX, percentageOffsetY, triggerRect) { let left = -(this.imgEl.clientWidth * percentageOffsetX - (this.el.clientWidth / 2)); let top = -(this.imgEl.clientHeight * percentageOffsetY - (this.el.clientHeight / 2)); let maxLeft = -(this.imgEl.clientWidth - this.el.clientWidth); let maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); if (this.el.parentElement === this.settings.inlineContainer) { - let scrollX = isTouch ? 0 : window.scrollX; - let scrollY = isTouch ? 0 : window.scrollY; + // This may be needed in the future to deal with browser event + // inconsistencies, but it's difficult to tell for sure. + // let scrollX = isTouch ? 0 : window.scrollX; + // let scrollY = isTouch ? 0 : window.scrollY; + let scrollX = window.scrollX; + let scrollY = window.scrollY; let inlineLeft = triggerRect.left + (percentageOffsetX * triggerRect.width) - (this.el.clientWidth / 2) + this.settings.inlineOffsetX + scrollX;