Final containInline mobile scroll tweaks

strawdynamics · Dec 29, 2015 · e0c9605 · e0c9605
1 parent bedee42
commit e0c9605
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 22 deletions.
diff --git 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
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="designer" content="imgix">
     <meta name="developer" content="imgix">
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1">
     <meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
 
     <title>Drift Playground</title>
@@ -19,7 +19,7 @@
       }
 
       .drift-demo-trigger {
-        /*max-width: 100%;*/
+        max-width: 100%;
       }
 
       .detail {
@@ -54,12 +54,12 @@
   </head>
 
   <body>
-    <img class="drift-demo-trigger" data-zoom="http://assets.imgix.net/unsplash/lighthouse.jpg?w=1200&amp;ch=DPR&amp;dpr=2" src="http://assets.imgix.net/unsplash/lighthouse.jpg?w=600&amp;ch=DPR&amp;dpr=2">
+    <img class="drift-demo-trigger" data-zoom="http://assets.imgix.net/unsplash/lighthouse.jpg?w=1200&amp;ch=DPR&amp;dpr=2" src="http://assets.imgix.net/unsplash/lighthouse.jpg?w=400&amp;ch=DPR&amp;dpr=2">
 
     <div class="detail">
       <section>
         <h1>Drift Demo</h1>
-        <p>This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from <a href="http://imgix.com">imgix</a>. This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can <a href="https://github.com/imgix/luminous">learn more and download it here</a>.</p>
+        <p>This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from <a href="http://imgix.com">imgix</a>. This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can <a href="https://github.com/imgix/drift">learn more and download it here</a>.</p>
       </section>
 
       <a href="https://imgix.com">
@@ -71,8 +71,8 @@ <h1>Drift Demo</h1>
     <script>
       new Drift(document.querySelector('.drift-demo-trigger'), {
         paneContainer: document.querySelector('.detail'),
-        inlinePane: 400,
-        // inlineOffsetY: -85,
+        inlinePane: true,
+        inlineOffsetY: -85,
         containInline: true
       });
     </script>

diff --git 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
@@ -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;