Fixing a bug where clock selector doesn't work when scrolling (#49)

* fixing a bug which prevented the clock selector from working when the page was scrolled vertically or horizontally. The fix uses window.pageYOffset and window.pageXOffset in the bounds calculation for the clock circle. * Removing overly-eager return that was causing issues on window resizing.
bendavis78 · May 12, 2017 · f8ef1f8 · f8ef1f8
1 parent 6c310de
commit f8ef1f8
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/paper-clock-selector.html b/paper-clock-selector.html
@@ -364,9 +364,7 @@
         },
         _updateSize: function() {
           var radius = Math.min(this.offsetWidth, this.offsetHeight) / 2;
-          if (!radius || this._resizedCache === radius) {
-            return;
-          }
+
           this._radius = radius;
           this._selectorSize = 20;
           this._selectorDotSize = 3;
@@ -382,6 +380,15 @@
             // FIXME: this is hacky, but for some reason we need to wait a bit
             // to get an accurate measurement
             this._bounds = this.$.face.getBoundingClientRect();
+
+            // account for page scrolling
+            this._bounds = {
+                top: this._bounds.top + window.pageYOffset,
+                right: this._bounds.right + window.pageXOffset,
+                bottom: this._bounds.bottom + window.pageYOffset,
+                left: this._bounds.left + window.pageXOffset,
+                width: this._bounds.width
+            }
           }.bind(this), 150);
         },
         _positionClockPoints: function() {
@@ -424,8 +431,8 @@
             'A ' + inner + ' ' + inner + ' 0 0 1 ' + (radius - inner) + ' ' + radius;
         },
         _onTouch: function(event) {
-          var x = event.detail.x - this._bounds.left - this._radius;
-          var y = event.detail.y - this._bounds.top - this._radius;
+          var x = event.detail.x + window.pageXOffset - this._bounds.left - this._radius;
+          var y = event.detail.y + window.pageYOffset - this._bounds.top - this._radius;
 
           /* only rotate while in the touch area */
           var distance = Math.abs(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));