Merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-toolbar-swipe into lp:ubuntu-html5-theme

[Alexandre Abreu]

Based on a branch from daker: lp:~daker/ubuntu-html5-theme/fix.1202349

Revamped & made it work on desktop and touch. Remove the need to declare the toolbar in js.

Based on a branch from daker: lp:~daker/ubuntu-html5-theme/fix.1202349

Revamped & made it work on desktop and touch. Remove the need to declare the toolbar in js.

It needs:

https://code.launchpad.net/~abreu-alexandre/ubuntu-html5-theme/resize-webview-with-qtquick-resize/+merge/206971

to work properly on the device

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:129
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/100/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3216
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/84
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/84
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2826
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3218
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3218/artifact/work/output/*zip*/output.zip

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

review: Approve (continuous-integration)

[Adnane Belmadiaf (daker)]

LGTM but it still needs more work to make it perfect.

review: Approve

[lp:~abreu-alexandre/ubuntu-html5-theme/fix-toolbar-swipe]

137. By Alexandre Abreu on 2014-02-17

Fix page & pagestack behavior regarding the page title updates & tabs relationship which is very flawed atm.

A page should have a title.
In a page stack, the page's title should be reflected *dynamically* in the header as the page is pushed/popped. Fixes: 1279891

138. By Alexandre Abreu on 2014-02-17

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

139. By PS Jenkins bot on 2014-02-17

Releasing 0.1.2+14.04.20140217-0ubuntu1

140. By Alexandre Abreu on 2014-02-18

merge trunk

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2014-02-13 15:54:50 +0000
+++ 0.1/ambiance/js/core.js	2014-02-18 17:22:34 +0000
@@ -227,6 +227,18 @@
             };
         },
 
+        __setupToolbars: function(document) {
+            var toolbars =
+                document.querySelectorAll('footer[data-role="footer"]');
+            for (var i = 0; i < toolbars.length; ++i) {
+                var id = toolbars[i].getAttribute('id');
+                if ( !id)
+                    continue;
+                var toolbar = new Toolbar(
+                    id, this.__getTabInfosDelegate());
+            }
+        },
+
         __setupTabs: function (document) {
             if (this._tabs != null)
                 return;
@@ -256,6 +268,7 @@
         init: function () {
             this.__setupTabs(document);
             this.__setupPage(document);
+            this.__setupToolbars(document);
         },
 
         /**
@@ -339,7 +352,7 @@
          */
         toolbar: function (id) {
             if (typeof Toolbar != 'undefined' && Toolbar) {
-                return new Toolbar(this, id);
+                return new Toolbar(id, this.__getTabInfosDelegate());
             }
         },
 

=== modified file '0.1/ambiance/js/toolbars.js'
--- 0.1/ambiance/js/toolbars.js	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/js/toolbars.js	2014-02-18 17:22:34 +0000
@@ -50,47 +50,202 @@
 
  */
 
-var Toolbar = function (UbuntuUI, id) {
-    this.toolbar = document.getElementById(id);
-};
-
-Toolbar.prototype = {
-    /**-
-     * Display a Toolbar
-     * @method show
-     */
-    show: function () {
-        this.toolbar.classList.add('revealed');
-    },
-    /**-
-     * Hide a Toolbar
-     * @method hide
-     */
-    hide: function () {
-        this.toolbar.classList.remove('revealed');
-    },
-    /**
-     * Toggle show/hide status of a Toolbar
-     * @method toggle
-     */
-    toggle: function () {
-        this.toolbar.classList.toggle('revealed');
-    },
-    /**
-     * Provide a callback function that's called with the Toolbar is touched
-     * @method touch
-     * @param {Function} function - The function that is called when the Toolbar is touched
-     */
-    touch: function (callback) {
-        this.toolbar.addEventListener(UbuntuUI.touchEvents.touchEnd, callback);
-    },
-    /**
-     * Returns the DOM element associated with the id this widget is bind to.
-     * @method element
-     * @example
-        var mytoolbar = UI.toolbar("toolbarid").element();
-     */
-    element: function () {
-        return this.toolbar;
-    }
-};
+var Toolbar = (function () {
+
+    function Toolbar(id, touchInfoDelegate) {
+
+        this.PHASE_START = "start";
+        this.PHASE_MOVE = "move";
+        this.PHASE_END = "end";
+        this.PHASE_CANCEL = "cancel";
+
+        this.phase = null;
+
+        this.toolbar = document.getElementById(id);
+        if ( ! this.toolbar)
+            throw "Invalid toolbar id";
+
+        this._touchDown = false;
+        this._touchInfoDelegate = touchInfoDelegate;
+
+        this.fingerData = [];
+        this.fingerData.push({
+            start: {
+                x: 0,
+                y: 0
+            },
+            end: {
+                x: 0,
+                y: 0
+            },
+            identifier: 0
+        });
+
+        var touchEvents = touchInfoDelegate.touchEvents;
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchStart, this.toolbar, this.__onTouchStart.bind(this));
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchEnd, this.toolbar, this.__onTouchEnd.bind(this));
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchMove, this.toolbar, this.__onTouchMove.bind(this));
+        touchInfoDelegate.registerTouchEvent(
+            touchEvents.touchLeave, this.toolbar, this.__onTouchLeave.bind(this));
+    };
+
+    Toolbar.prototype = {
+        /**-
+         * Display a Toolbar
+         * @method show
+         */
+        show: function () {
+            this.toolbar.classList.add('revealed');
+        },
+
+        /**-
+         * Hide a Toolbar
+         * @method hide
+         */
+        hide: function () {
+            this.toolbar.classList.remove('revealed');
+        },
+
+        /**
+         * Toggle show/hide status of a Toolbar
+         * @method toggle
+         */
+        toggle: function () {
+            this.toolbar.classList.toggle('revealed');
+        },
+
+        /**
+         * Returns the DOM element associated with the id this widget is bind to.
+         * @method element
+         * @example
+            var mytoolbar = UI.toolbar("toolbarid").element();
+         */
+        element: function () {
+            return this.toolbar;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchStart: function (evt) {
+            this._touchDown = true;
+
+            evt.preventDefault();
+
+            this.phase = this.PHASE_START;
+            var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+
+            var touchEvent =
+                this._touchInfoDelegate.translateTouchEvent(evt);
+
+            this.fingerData[0].identifier = identifier;
+            this.fingerData[0].start.x =
+                this.fingerData[0].end.x = touchEvent.touches[0].pageX;
+            this.fingerData[0].start.y =
+                this.fingerData[0].end.y = touchEvent.touches[0].pageY;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchMove: function (evt) {
+            if ( ! this._touchDown)
+                return;
+
+            if (this.phase === this.PHASE_END || this.phase === this.PHASE_CANCEL)
+                return;
+
+            if (this.phase == this.PHASE_START) {
+                evt.preventDefault();
+
+                var touchEvent =
+                    this._touchInfoDelegate.translateTouchEvent(evt);
+
+                var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+                var f = this.__getFingerData(identifier);
+
+                f.end.x = touchEvent.touches[0].pageX;
+                f.end.y = touchEvent.touches[0].pageY;
+
+                direction = this.__calculateDirection(f.start, f.end);
+
+                if (direction == "DOWN") {
+                    this.hide();
+                }
+
+                if (direction == "UP") {
+                    this.show();
+                }
+
+                phase = this.PHASE_MOVE;
+            }
+        },
+
+        /**
+         * @private
+         */
+        __onTouchEnd: function (e) {
+            this._touchDown = false;
+            phase = this.PHASE_END;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchLeave: function (e) {
+            this._touchDown = false;
+            phase = this.PHASE_CANCEL;
+        },
+
+        /**
+         * @private
+         */
+        __calculateDirection: function (startPoint, endPoint) {
+            var angle = this.__calculateAngle(startPoint, endPoint);
+
+            if ((angle <= 45) && (angle >= 0)) {
+                return "LEFT";
+            } else if ((angle <= 360) && (angle >= 315)) {
+                return "LEFT";
+            } else if ((angle >= 135) && (angle <= 225)) {
+                return "RIGHT";
+            } else if ((angle > 45) && (angle < 135)) {
+                return "DOWN";
+            } else {
+                return "UP";
+            }
+        },
+
+        /**
+         * @private
+         */
+        __getFingerData: function (id) {
+            for (var i = 0; i < this.fingerData.length; i++) {
+                if (this.fingerData[i].identifier == id) {
+                    return this.fingerData[i];
+                }
+            }
+        },
+
+        /**
+         * @private
+         */
+        __calculateAngle: function (startPoint, endPoint) {
+            var x = startPoint.x - endPoint.x;
+            var y = endPoint.y - startPoint.y;
+            var r = Math.atan2(y, x); //radians
+            var angle = Math.round(r * 180 / Math.PI); //degrees
+
+            //ensure value is positive
+            if (angle < 0) {
+                angle = 360 - Math.abs(angle);
+            }
+
+            return angle;
+        }
+    };
+    return Toolbar;
+})();

=== modified file 'examples/html5-theme/apps/rss-reader/index.html'
--- examples/html5-theme/apps/rss-reader/index.html	2014-02-13 16:55:29 +0000
+++ examples/html5-theme/apps/rss-reader/index.html	2014-02-18 17:22:34 +0000
@@ -47,6 +47,7 @@
     <script src="../../../../0.1/ambiance/js/pagestacks.js"></script>
     <script src="../../../../0.1/ambiance/js/popovers.js"></script>
     <script src="../../../../0.1/ambiance/js/list.js"></script>
+    <script src="../../../../0.1/ambiance/js/toolbars.js"></script>
     <script src="../../../../0.1/ambiance/js/tabs.js"></script>
     <script src="app.js"></script>
 </head>
@@ -63,7 +64,7 @@
 
                 <div data-role="page" id="main" data-title="RSS Mobile Reader">
                     <section data-role="list" id="yourfeeds"></section>
-                    <footer data-role="footer" class="revealed">
+                    <footer id="footer1" data-role="footer" class="revealed">
                         <nav>
                             <ul>
                                 <li>

=== modified file 'examples/html5-theme/widgets/Toolbar.html'
--- examples/html5-theme/widgets/Toolbar.html	2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/Toolbar.html	2014-02-18 17:22:34 +0000
@@ -40,6 +40,7 @@
 </head>
 
 <body>
+
     <div data-role="mainview">
 
         <div data-role="content">
@@ -66,12 +67,12 @@
         </div>
     </div>
     <script type="text/javascript">
-        var UI = new UbuntuUI(),
-            tabs = UI.tabs("[data-role='tabs']");
+        var UI = new UbuntuUI();
+        window.onload = function() {
+            UI.init();
             toolbar = UI.toolbar("footer1");
-            toolbar.touch(function (event) {
-                toolbar.toggle();
-            });
+        };
+    </script>
     </script>
 </body>
 </html>