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

[Adnane Belmadiaf]

Added timer to hide the toolbar

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

162. By Adnane Belmadiaf on 2014-03-30

Fixed toolbar docs

[Alexandre Abreu (abreu-alexandre)]

I think it could be a bit better/cleaner. Maybe something more consistent, and prone to errors (forgot to add a window.clearTimeout, etc.) w/ e.g. the MutationObserver class:

    function ToolbarListener(id) {
 this._id = id;
 this._onChangedCallbacks = [];
 this._listen();
    };
    ToolbarListener.prototype = {
 onchanged: function(callback) {
     if (callback && typeof callback === 'function')
  this._onChangedCallbacks.push(callback);
 },
 _listen: function() {
     var mutationObserverClass =
  this._getNativeMutationObserverClass();
     if ( ! mutationObserverClass) {
  console.error(
      'Could not listen to toolbar changes: no mutation observer found');
  return;
     }
     var toolbar = document.getElementById(this._id);
     if (toolbar) {
  var observer = new mutationObserverClass(
      this._onMutated.bind(this));
  observer.observe(toolbar, {attributes: true});
     }
 },
 _onMutated: function(mutations, observer) {
     for (var i = 0; i < this._onChangedCallbacks.length; ++i) {
  this._onChangedCallbacks[i](mutations);
     }
 },
 _getNativeMutationObserverClass: function() {
     return window.MutationObserver || window.WebKitMutationObserver;
 },
    };

and in function Toolbar(id, touchInfoDelegate):

 this._timer = null;

 var listener = new ToolbarListener(id);
        var self = this;
 listener.onchanged(function() {
     var toolbar = self.toolbar;
     function __isToolbarVisible() {
  return Array.prototype.slice.call(toolbar.classList).indexOf('revealed') >= 0;
     }
     if (__isToolbarVisible()) {
  self._timer = window.setTimeout(
      function () { self.hide(); },
      5000);
     }
     else {
  if (self._timer) {
      window.clearTimeout(self._timer);
      self._timer = null;
  }
     }
 });

no need to sparkle logic bits in the class, the states are kept consistent in one location along w/ the management of the timer

?

review: Needs Fixing

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

163. By Adnane Belmadiaf on 2014-04-03

Fixed the timer class

164. By Adnane Belmadiaf on 2014-04-03

Fixed timer name

[Alexandre Abreu (abreu-alexandre)]

Could you make sure that the ToolbarListener is private to the Toolbar def? like inside at the top of the (function() { ?

review: Needs Fixing

[Alexandre Abreu (abreu-alexandre)]

And you can remove the cleartimeouts ... they are being handled automatically

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

165. By Adnane Belmadiaf on 2014-04-04

Made ToolbarListener private

166. By Adnane Belmadiaf on 2014-04-04

Removed last clearTimeout

[Alexandre Abreu (abreu-alexandre)]

review: Approve

=== modified file '0.1/ambiance/js/toolbars.js'
--- 0.1/ambiance/js/toolbars.js	2014-02-13 17:20:57 +0000
+++ 0.1/ambiance/js/toolbars.js	2014-04-04 21:23:13 +0000
@@ -43,7 +43,7 @@
       </footer>
 
       JavaScript access:
-      var toolbar = UI.footer("footerID");
+      var toolbar = UI.toolbar("toolbarID");
       UI.button('home').click(function () {
         UI.pagestack.push("main");
       });
@@ -52,6 +52,45 @@
 
 var Toolbar = (function () {
 
+    function ToolbarListener(id) {
+        this._id = id;
+        this._onChangedCallbacks = [];
+        this._listen();
+    };
+
+    ToolbarListener.prototype = {
+        onchanged: function (callback) {
+            if (callback && typeof callback === 'function')
+                this._onChangedCallbacks.push(callback);
+        },
+        _listen: function () {
+            var mutationObserverClass =
+                this._getNativeMutationObserverClass();
+            if (!mutationObserverClass) {
+                console.error(
+                    'Could not listen to toolbar changes: no mutation observer found');
+                return;
+            }
+            var toolbar = document.getElementById(this._id);
+            if (toolbar) {
+                var observer = new mutationObserverClass(
+                    this._onMutated.bind(this));
+                observer.observe(toolbar, {
+                    attributes: true
+                });
+            }
+        },
+        _onMutated: function (mutations, observer) {
+            for (var i = 0; i < this._onChangedCallbacks.length; ++i) {
+                this._onChangedCallbacks[i](mutations);
+            }
+        },
+        _getNativeMutationObserverClass: function () {
+            return window.MutationObserver || window.WebKitMutationObserver;
+        },
+    };
+
+
     function Toolbar(id, touchInfoDelegate) {
 
         this.PHASE_START = "start";
@@ -90,6 +129,31 @@
             touchEvents.touchMove, this.toolbar, this.__onTouchMove.bind(this));
         touchInfoDelegate.registerTouchEvent(
             touchEvents.touchLeave, this.toolbar, this.__onTouchLeave.bind(this));
+
+        this._timer = null;
+
+        var listener = new ToolbarListener(id);
+        var self = this;
+        listener.onchanged(function () {
+            var toolbar = self.toolbar;
+
+            function __isToolbarVisible() {
+                return Array.prototype.slice.call(toolbar.classList)
+                    .indexOf('revealed') >= 0;
+            }
+            if (__isToolbarVisible()) {
+                self._timer = window.setTimeout(
+                    function () {
+                        self.hide();
+                    },
+                    5000);
+            } else {
+                if (self._timer) {
+                    window.clearTimeout(self._timer);
+                    self._timer = null;
+                }
+            }
+        });
     };
 
     Toolbar.prototype = {