Vertical slider

src/js/lib.js

@@ -588,37 +588,33 @@ vjs.log = function(){
 
 // Offset Left
 // getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
-if ('getBoundingClientRect' in document.documentElement) {
-  vjs.findPosX = function(el) {
-    var box;
+vjs.findPosition = function(el) {
+    var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
 
-    try {
+    if (el.getBoundingClientRect) {
       box = el.getBoundingClientRect();
-    } catch(e) {}
+    }
 
-    if (!box) { return 0; }
+    if (!box) {
+      return {
+        left: 0,
+        top: 0
+      };
+    }
 
-    var docEl = document.documentElement,
-        body = document.body,
-        clientLeft = docEl.clientLeft || body.clientLeft || 0,
-        scrollLeft = window.pageXOffset || body.scrollLeft,
-        left = box.left + scrollLeft - clientLeft;
+    docEl = document.documentElement;
+    body = document.body;
 
-    return left;
-  };
-} else {
-  vjs.findPosX = function(el) {
-    var curleft = el.offsetLeft;
-    // vjs.log(obj.className, obj.offsetLeft)
-    while(el = el.offsetParent) {
-      if (el.className.indexOf('video-js') == -1) {
-        // vjs.log(el.offsetParent, 'OFFSETLEFT', el.offsetLeft)
-        // vjs.log('-webkit-full-screen', el.webkitMatchesSelector('-webkit-full-screen'));
-        // vjs.log('-webkit-full-screen', el.querySelectorAll('.video-js:-webkit-full-screen'));
-      } else {
-      }
-      curleft += el.offsetLeft;
-    }
-    return curleft;
-  };
-}
+    clientLeft = docEl.clientLeft || body.clientLeft || 0;
+    scrollLeft = window.pageXOffset || body.scrollLeft;
+    left = box.left + scrollLeft - clientLeft;
+
+    clientTop = docEl.clientTop || body.clientTop || 0;
+    scrollTop = window.pageYOffset || body.scrollTop;
+    top = box.top + scrollTop - clientTop;
+
+    return {
+      left: left,
+      top: top
+    };
+};

src/js/slider.js

@@ -121,26 +121,52 @@ vjs.Slider.prototype.update = function(){
 };
 
 vjs.Slider.prototype.calculateDistance = function(event){
-  var box = this.el_,
-      boxX = vjs.findPosX(box),
-      boxW = box.offsetWidth,
-      handle = this.handle,
+  var el, box, boxX, boxY, boxW, boxH, handle, pageX, pageY;
+
+  el = this.el_;
+  box = vjs.findPosition(el);
+  boxW = boxH = el.offsetWidth;
+  handle = this.handle;
+
+  if (this.options_.vertical) {
+    boxY = box.top;
+
+    if (event.changedTouches) {
+      pageY = event.changedTouches[0].pageY;
+    } else {
+      pageY = event.pageY;
+    }
+
+    if (handle) {
+      var handleH = handle.el().offsetHeight;
+      // Adjusted X and Width, so handle doesn't go outside the bar
+      boxY = boxY + (handleH / 2);
+      boxH = boxH - handleH;
+    }
+
+    // Percent that the click is through the adjusted area
+    return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+
+  } else {
+    boxX = box.left;
+
+    if (event.changedTouches) {
+      pageX = event.changedTouches[0].pageX;
+    } else {
       pageX = event.pageX;
+    }
 
-  if (handle) {
-    var handleW = handle.el().offsetWidth;
+    if (handle) {
+      var handleW = handle.el().offsetWidth;
 
-    // Adjusted X and Width, so handle doesn't go outside the bar
-    boxX = boxX + (handleW / 2);
-    boxW = boxW - handleW;
-  }
+      // Adjusted X and Width, so handle doesn't go outside the bar
+      boxX = boxX + (handleW / 2);
+      boxW = boxW - handleW;
+    }
 
-  if (event.changedTouches) {
-    pageX = event.changedTouches[0].pageX;
+    // Percent that the click is through the adjusted area
+    return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
   }
-
-  // Percent that the click is through the adjusted area
-  return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
 };
 
 vjs.Slider.prototype.onFocus = function(){

test/unit/lib.js

@@ -204,3 +204,21 @@ test('should get an absolute URL', function(){
   ok(vjs.getAbsoluteURL('http://asdf.com') === 'http://asdf.com');
   ok(vjs.getAbsoluteURL('https://asdf.com/index.html') === 'https://asdf.com/index.html');
 });
+
+test('vjs.findPosition should find top and left position', function() {
+  var d = document.createElement('div'),
+    position = vjs.findPosition(d);
+  d.style.top = '10px';
+  d.style.left = '20px';
+  d.style.position = 'absolute';
+
+  deepEqual(position, {left: 0, top: 0}, 'If element isn\'t in the DOM, we should get zeros');
+
+  document.body.appendChild(d);
+  position = vjs.findPosition(d);
+  deepEqual(position, {left: 20, top: 10}, 'The position was not correct');
+
+  d.getBoundingClientRect = null;
+  position = vjs.findPosition(d);
+  deepEqual(position, {left: 0, top: 0}, 'If there is no gBCR, we should get zeros');
+});