Merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-touch-detection-on-desktop-and-tabs into lp:ubuntu-html5-theme

[Alexandre Abreu]

Fix touch detection on UbuntuTouch & Desktop: we handle both. Touch detection does not work reliably, we should embrace the dual world.

Fix touch detection on UbuntuTouch & Desktop: we handle both. Touch detection does not work reliably, we should embrace the dual world.

[lp:~abreu-alexandre/ubuntu-html5-theme/fix-touch-detection-on-desktop-and-tabs]

130. By Alexandre Abreu on 2014-02-13

untabify

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:130
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/98/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3211
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/82
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/82
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2823
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3213
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3213/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/98/rebuild

review: Approve (continuous-integration)

[Alexandre Abreu (abreu-alexandre)]

review: Approve

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/js/core.js	2014-02-13 15:55:07 +0000
@@ -103,10 +103,10 @@
         var U = this;
         U.isTouch = "ontouchstart" in window;
         U.touchEvents = {
-            touchStart: U.isTouch ? 'touchstart' : 'mousedown',
-            touchMove: U.isTouch ? 'touchmove' : 'mousemove',
-            touchEnd: U.isTouch ? 'touchend' : 'mouseup',
-            touchLeave: U.isTouch ? null : 'mouseleave' //we manually detect leave on touch devices, so null event here
+            touchStart: ['touchstart','mousedown'],
+            touchMove: ['touchmove','mousemove'],
+            touchEnd: ['touchend','mouseup'],
+            touchLeave: ['mouseleave'],
         };
     };
 
@@ -187,6 +187,20 @@
                 get isTouch() {
                     return self.isTouch;
                 },
+                registerTouchEvent: function(eventId,
+                                             element,
+                                             callback) {
+                    if ( ! eventId
+                         || typeof(eventId) !== 'object'
+                         || eventId.length === 0) {
+                        console.log('Invalid or empty eventId for registerTouchEvent: ' + eventId.toString() + ' ' + typeof(eventId));
+                        return;
+                    }
+
+                    for (var i = 0; i < eventId.length; ++i) {
+                        element.addEventListener(eventId[i], callback);
+                    }
+                },
                 touchEvents: {
                     get touchStart() {
                         return self.touchEvents.touchStart;
@@ -202,8 +216,6 @@
                     },
                 },
                 translateTouchEvent: function(event) {
-                    if (self.isTouch)
-                        return event;
                     var touch = __createTouchObject(event);
                     var translatedTouchEvent = event;
                     translatedTouchEvent.changedTouches = [touch];
 
=== modified file '0.1/ambiance/js/tabs.js'
--- 0.1/ambiance/js/tabs.js	2014-01-30 19:56:22 +0000
+++ 0.1/ambiance/js/tabs.js	2014-02-13 15:55:07 +0000
@@ -75,6 +75,7 @@
         if (tabs == null || touchInfoDelegate == null) {
             return;
         }
+        this._touchDown = false;
         this._tabs = tabs;
 
         this._infos = {
@@ -84,16 +85,21 @@
         this._touchInfoDelegate = touchInfoDelegate;
 
         var touchEvents = touchInfoDelegate.touchEvents;
-        this._tabs.addEventListener(touchEvents.touchStart,
-                                    this.__onTouchStart.bind(this));
-        this._tabs.addEventListener(touchEvents.touchMove, this.__onTouchMove.bind(this));
-        this._tabs.addEventListener(touchEvents.touchEnd, this.__onTouchEnd.bind(this));
-
-        // we only have leave events on desktop, we manually calcuate
-        // leave on touch as its not supported in webkit
-        if (touchEvents.touchLeave) {
-            this._tabs.addEventListener(touchEvents.touchLeave, this.__onTouchLeave.bind(this));
-        }
+
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchStart,
+            this._tabs,
+            this.__onTouchStart.bind(this));
+
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchMove,
+            this._tabs,
+            this.__onTouchMove.bind(this));
+
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchEnd,
+            this._tabs,
+            this.__onTouchEnd.bind(this));
 
         // initialize default page
         this.__setupInitialTabVisibility();
@@ -156,6 +162,7 @@
                 if (targetPage)
                     targetPage.style.display=value;
             };
+            updateDisplayStyle(tab, 'block');
             [].slice.
                 call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(:first-child)')).
                 forEach(function(element) {
@@ -203,8 +210,10 @@
          * @private
          */
         __onTouchStart: function (e) {
-            console.log('touchstart');
             if (!this._tabs) return;
+
+            e.preventDefault();
+
             this.__clearInternalState();
 
             if (state === STATES.basic) {
@@ -219,12 +228,20 @@
             startTimestamp = _e.timeStamp;
 
             this._tabs.style['-webkit-transition-duration'] = 0;
+
+            this._touchDown = true;
         },
 
         /**
          * @private
          */
         __onTouchMove: function (e) {
+            if (!this._touchDown) {
+                return;
+            }
+
+            e.preventDefault();
+
             var _e = this._touchInfoDelegate.translateTouchEvent(e);
             deltaX = _e.touches[0].pageX - pageX;
             deltaY = _e.touches[0].pageY - pageY;
@@ -242,11 +259,17 @@
 
             offsetX = (deltaX / resistance) + this.__getScroll();
 
-            var maxLeftReached = this._tabs.querySelector('li:first-child').getBoundingClientRect().left >= 0 &&
+            var firstTab = this._tabs.querySelector('li:first-child');
+            var maxRightScrollReached = 
+                firstTab.getBoundingClientRect().left >= 0 &&
                 deltaX > 0;
-            var maxRightReached = this._tabs.querySelector('li:last-child').getBoundingClientRect().right <= this.__getHeaderWidth() &&
+
+            var lastTab = this._tabs.querySelector('li:last-child');
+            var maxLeftScrollReached = 
+                lastTab.getBoundingClientRect().right <= this.__getHeaderWidth() &&
                 deltaX < 0;
-            if (this.__getTabHeadersWidth() > this.__getHeaderWidth() && !maxLeftReached && !maxRightReached) {
+
+            if (!maxRightScrollReached && !maxLeftScrollReached) {
                 this._tabs.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
             }
         },
@@ -257,13 +280,17 @@
         __onTouchEnd: function (e) {
             if (!this._tabs || isScrolling) return;
 
+            e.preventDefault();
+            this._touchDown = false;
+
             var _e = this._touchInfoDelegate.translateTouchEvent(e);
 
             var MIN_JITTER_THRESHOLD = 20;
             if (state === STATES.transitioning_to_navigation) {
                 state = STATES.navigating;
             }
-            else if (state === STATES.navigating && Math.abs((_e.changedTouches[0].pageX - pageX)) < MIN_JITTER_THRESHOLD) {
+            else if (state === STATES.navigating &&
+                     Math.abs((_e.changedTouches[0].pageX - pageX)) < MIN_JITTER_THRESHOLD) {
                 this.__onClicked(_e);
                 // Timer should have been cancelled, back to basic
                 state = STATES.basic;