Merge lp:~daker/ubuntu-html5-theme/fix.1202349 into lp:ubuntu-html5-theme

[Adnane Belmadiaf]

Add swipe to reveal/hide the toolbar

[lp:~daker/ubuntu-html5-theme/fix.1202349]

99. By Adnane Belmadiaf on 2013-12-21

Added fixes for yuidoc

[Alexandre Abreu (abreu-alexandre)]

L89: shouldn't refer to global implicit var, should go through the delegate for the touch requests ...
L91: check for null,
L114: the initial state of the toolbar (not visible) should be set,
L146: the semantics is not very clear, ... why on touchleave while it is being said "called when the toolbar is touched" ?
L168: UI reference
L254: nothing returned if id not found?

I am not sure about the approach of forcing the user to go through a toolbar() call just to make a toolbar work properly & as expected instead of relying on the mandatory init() call ...

review: Needs Fixing

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2013-12-16 17:50:33 +0000
+++ 0.1/ambiance/js/core.js	2013-12-21 21:50:50 +0000
@@ -327,7 +327,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	2013-12-06 14:03:50 +0000
+++ 0.1/ambiance/js/toolbars.js	2013-12-21 21:50:50 +0000
@@ -21,10 +21,10 @@
  */
 
 /**
- * A Toolbar is the JavaScript representation of an Ubuntu HTML5 app <em>footer</em>. 
+ * A Toolbar is the JavaScript representation of an Ubuntu HTML5 app <em>footer</em>.
 
 ######Contained List provides buttons
-The Toolbar contains a List, where each list item is treated as a Button (see below). List items (Buttons) are pushed to the right. The default Back button always exists to the left and does not need to be declared. 
+The Toolbar contains a List, where each list item is treated as a Button (see below). List items (Buttons) are pushed to the right. The default Back button always exists to the left and does not need to be declared.
 
 #####Default and custom footers
 See the Pagestack class documentation for information about the default application-wide Footer, customizing it, and adding Page-specific Footers.
@@ -50,47 +50,204 @@
 
  */
 
-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.UI = UI;
+
+        this.toolbar = document.getElementById(id);
+
+        this._touchInfoDelegate = touchInfoDelegate;
+
+        var touchEvents = touchInfoDelegate.touchEvents;
+
+        this.fingerData = [];
+        this.fingerData.push({
+            start: {
+                x: 0,
+                y: 0
+            },
+            end: {
+                x: 0,
+                y: 0
+            },
+            identifier: 0
+        });
+
+        this.toolbar.addEventListener(touchEvents.touchStart, this.__onTouchStart.bind(this));
+        this.toolbar.addEventListener(touchEvents.touchMove, this.__onTouchMove.bind(this));
+        this.toolbar.addEventListener(touchEvents.touchEnd, this.__onTouchEnd.bind(this));
+        this.toolbar.addEventListener(touchEvents.touchLeave, 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');
+        },
+
+        /**
+         * 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(this.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;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchStart: function (evt) {
+
+            this.phase = this.PHASE_START;
+            var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+
+            if (!this.UI.isTouch) {
+                evt.touches = [{
+                    pageX: evt.pageX,
+                    pageY: evt.pageY
+                }];
+            }
+
+            this.fingerData[0].identifier = identifier;
+            this.fingerData[0].start.x = this.fingerData[0].end.x = evt.touches[0].pageX;
+            this.fingerData[0].start.y = this.fingerData[0].end.y = evt.touches[0].pageY;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchMove: function (evt) {
+
+            if (this.phase === this.PHASE_END || this.phase === this.PHASE_CANCEL)
+                return;
+
+            if (this.phase == this.PHASE_START) {
+                if (!this.UI.isTouch) {
+                    evt.touches = [{
+                        pageX: evt.pageX,
+                        pageY: evt.pageY
+                    }];
+                }
+
+                var identifier = evt.identifier !== undefined ? evt.identifier : 0;
+                var f = this.__getFingerData(identifier);
+
+                f.end.x = evt.touches[0].pageX;
+                f.end.y = evt.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) {
+            phase = this.PHASE_END;
+        },
+
+        /**
+         * @private
+         */
+        __onTouchLeave: function (e) {
+            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/app.js'
--- examples/html5-theme/apps/rss-reader/app.js	2013-11-05 15:13:05 +0000
+++ examples/html5-theme/apps/rss-reader/app.js	2013-12-21 21:50:50 +0000
@@ -26,6 +26,8 @@
 
     UI.init();
     UI.pagestack.push("main");
+    toolbar = UI.toolbar("footer1");
+
 
     if (typeof localStorage["feeds"] == "undefined") {
         restoreDefault();

=== modified file 'examples/html5-theme/apps/rss-reader/index.html'
--- examples/html5-theme/apps/rss-reader/index.html	2013-12-12 11:12:42 +0000
+++ examples/html5-theme/apps/rss-reader/index.html	2013-12-21 21:50:50 +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>
@@ -66,7 +67,7 @@
             <div data-role="pagestack">
                 <div data-role="page" id="main">
                     <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	2013-12-12 08:28:52 +0000
+++ examples/html5-theme/widgets/Toolbar.html	2013-12-21 21:50:50 +0000
@@ -5,18 +5,18 @@
  This file is part of ubuntu-html5-theme.
 
  This package is free software; you can redistribute it and/or modify
- it under the terms of the GNU Lesser General Public License as 
- published by the Free Software Foundation; either version 3 of the 
+ it under the terms of the GNU Lesser General Public License as
+ published by the Free Software Foundation; either version 3 of the
  License, or
  (at your option) any later version.
- 
+
  This package is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.
- 
- You should have received a copy of the GNU Lesser General Public 
- License along with this program. If not, see 
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this program. If not, see
  <http://www.gnu.org/licenses/>.
 -->
 
@@ -40,22 +40,12 @@
 </head>
 <body>
     <div data-role="page">
-        <header data-role="header">
-            <nav data-role="navbar" class="tabs">
-                <div class="tabs-inner">
-                    <ul data-role="tabs">
-                        <li class="active" data-role="tab">
-                            <a href="#item1">Tab 1</a>
-                        </li>
-                        <li class="inactive" data-role="tab">
-                            <a href="#item2">Tab 2</a>
-                        </li>
-                        <li class="inactive" data-role="tab">
-                            <a href="#item3">Tab 3</a>
-                        </li>
-                    </ul>
-                </div>
-            </nav>
+
+        <header data-role="header" id="headerID">
+            <ul data-role="tabs">
+                <li data-role="tab" data-page="main">Tab 1</li>
+                <li data-role="tab" data-page="page2">Tab 2</li>
+            </ul>
         </header>
 
         <div data-role="content">
@@ -82,12 +72,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>