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

[Adnane Belmadiaf]

Removed ActionsBar deps
Fixed the back button in PageStack
Fixed PageStack actions

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

198. By Alexandre Abreu on 2015-03-04

revert revision 196: push to trunk instead of usual landing

199. By Adnane Belmadiaf on 2015-03-04

Merged trunk
Removed actionbar.js call

=== removed file '0.1/ambiance/js/actionsbar.js'
--- 0.1/ambiance/js/actionsbar.js	2015-01-30 23:39:20 +0000
+++ 0.1/ambiance/js/actionsbar.js	1970-01-01 00:00:00 +0000
@@ -1,151 +0,0 @@
-/*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
- * License granted by Canonical Limited
- *
- * This file is part of ubuntu-html5-ui-toolkit.
- *
- * 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
- * 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
- * <http://www.gnu.org/licenses/>.
- */
-
-/**
- * An ActionBar is the JavaScript representation of an Ubuntu HTML5 app <em>ActionBar</em>.
- */
-
-var ActionBar = (function () {
-
-    function ActionBar(tabs, oldFooter, parent) {
-        this._tabs = tabs;
-        this._oldFooter = oldFooter;
-        this._oldFooterParent = parent;
-
-        this._overlay = document.querySelector('[data-role="overlay"]');
-
-        var newActionsBar = document.querySelector('[data-role="actions"]');
-
-        if (!this._oldFooter)
-            return;
-
-        var actionBar = this._oldFooter,
-            actions = actionBar.querySelector('ul'),
-            actionButtons = actionBar.querySelectorAll('ul li'),
-            i = actionButtons.length;
-        newActionsBarWrapper = document.createElement('div');
-        newActionsBarWrapper.setAttribute("data-role", "actions-wrapper");
-        newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id);
-
-        if (actionButtons.length > 2) {
-            // Maintain the first then replace the rest with an action overflow
-            var firstAction = actionButtons[0],
-                overflowList = document.createElement('ul'),
-                /* Actions Button */
-                firstButton = document.createElement('button'),
-                overflowButton = document.createElement('button'),
-                /* Icon */
-                firstIcon = firstAction.querySelector('img').getAttribute('src'),
-                /* ID*/
-                firstId = firstAction.querySelector('a').getAttribute('id');
-
-            var k =1;
-
-            if (this._tabs._tabsitems.length == 1) {
-                k = 2;
-                this._tabs._tabtitle.style.width = "calc(100% - 155px)";
-
-                // Maintain the second
-                var secondAction = actionButtons[1],
-                /* Actions Button */
-                secondButton = document.createElement('button'),
-                /* Icon */
-                secondIcon = secondAction.querySelector('img').getAttribute('src'),
-                /* ID*/
-                secondId = secondAction.querySelector('a').getAttribute('id');
-            }
-
-            overflowList.setAttribute('data-role', 'actions-overflow-list');
-
-            // Hide the overflow
-            for (var x = k; x < i; x++) {
-                var li = document.createElement('li'),
-                    a_id = actionButtons[x].querySelector('a').getAttribute('id'),
-                    lbl = actionButtons[x].querySelector('span').innerHTML,
-                    icon = actionButtons[x].querySelector('img').getAttribute('src');
-
-                li.innerHTML = lbl;
-                li.setAttribute('id', a_id);
-
-                li.style.backgroundImage = 'url( ' + icon + ' )';
-                overflowList.appendChild(li);
-
-                li.onclick = function (e) {
-                    overflowList.classList.toggle('opened');
-                    self._overlay.classList.toggle('active');
-                    e.preventDefault();
-                };
-            }
-
-            // Add the action overflow button
-            overflowButton.setAttribute('data-role', 'actions-overflow-icon');
-
-            //firstButton.style.backgroundImage = 'url( ' + firstIcon + ' )';
-            firstButton.setAttribute('id', firstId);
-            document.styleSheets[0].addRule('#'+ firstId + ':after','background-image: url("' + firstIcon + '");');
-
-            newActionsBarWrapper.appendChild(firstButton);
-            if (this._tabs._tabsitems.length == 1) {
-                secondButton.setAttribute('id', secondId);
-                document.styleSheets[0].addRule('#'+ secondId + ':after','background-image: url("' + secondIcon + '");');
-                newActionsBarWrapper.appendChild(secondButton);
-            }
-            newActionsBarWrapper.appendChild(overflowButton);
-            newActionsBarWrapper.appendChild(overflowList);
-
-            self = this;
-            overflowButton.onclick = function (e) {
-                overflowList.classList.toggle('opened');
-                self._overlay.classList.toggle('active');
-                self._tabs._tabs.classList.remove('opened');
-                e.preventDefault();
-            };
-        } else {
-
-            for (var y = 0; y < i; y++) {
-                var actionButton = document.createElement('button'),
-                    actionButton_lbl = actionButtons[y].querySelector('span').innerHTML,
-                    actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'),
-                    actionButton_id = actionButtons[y].querySelector('a').getAttribute('id');
-
-                actionButton.setAttribute('id', actionButton_id);
-                document.styleSheets[0].addRule('#'+ actionButton_id + ':after','background-image: url("' + actionButton_icon + '");');
-                newActionsBarWrapper.appendChild(actionButton);
-            }
-        }
-
-        newActionsBar.appendChild(newActionsBarWrapper);
-    };
-
-    ActionBar.prototype = {
-        /**
-         * Returns the DOM element associated with the id this widget is bind to.
-         * @method element
-         * @example
-            var myactionbar = UI.actionbar("actionbarid").element();
-         */
-        element: function () {
-            return this.actionbar;
-        }
-    };
-    return ActionBar;
-})();

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2015-03-04 21:10:49 +0000
+++ 0.1/ambiance/js/core.js	2015-03-04 21:23:40 +0000
@@ -38,22 +38,23 @@
         [...]
       };
  */
-var UbuntuUI = (function () {
+var UbuntuUI = (function() {
 
     PAGESTACK_BACK_ID = 'ubuntu-pagestack-back';
 
     function __hasPageStack(document) {
-        return document.querySelectorAll("[data-role='pagestack']") != null;
+        return document.querySelectorAll("[data-role='pagestack']").length >= 1;
     };
 
     function __hasTabs(document) {
-         return document.querySelectorAll("[data-role='tabs']") != null;
+        return document.querySelectorAll("[data-role='tabs']").length >= 1;
     };
 
     function __createBackButtonListItem() {
         var backBtn = document.createElement('button');
         backBtn.setAttribute('data-role', 'back-btn');
-        backBtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.random());
+        backBtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.floor(Math.random()));
+        backBtn.disabled = true;
         return backBtn;
     };
 
@@ -61,9 +62,9 @@
         var U = this;
         U.isTouch = "ontouchstart" in window;
         U.touchEvents = {
-            touchStart: ['touchstart','mousedown'],
-            touchMove: ['touchmove','mousemove'],
-            touchEnd: ['touchend','mouseup'],
+            touchStart: ['touchstart', 'mousedown'],
+            touchMove: ['touchmove', 'mousemove'],
+            touchEnd: ['touchend', 'mouseup'],
             touchLeave: ['mouseleave'],
         };
 
@@ -75,7 +76,7 @@
         this._content.style.paddingTop = this._headerHeight + "px";
 
         var self = this;
-        window.onscroll = function(event){
+        window.onscroll = function(event) {
             var scrollTop = window.pageYOffset;
             var y = Math.min(self._headerHeight, Math.max(0, (self._y + scrollTop - self._prevScrollTop)));
 
@@ -93,22 +94,7 @@
     };
 
     UbuntuUI.prototype = {
-        __setupPageStack: function (d) {
-            // TODO validate no more than one page stack etc.
-            // d.querySelectorAll("[data-role='pagestack']")
-
-            // FIXME: support multiple page stack & complex docs?
-            var pagestacks = d.querySelectorAll("[data-role='pagestack']");
-            if (pagestacks.length == 0)
-                return;
-            var pagestack = pagestacks[0];
-
-            this._pageStack = new Pagestack(pagestack);
-
-            var pages = pagestack.querySelectorAll("[data-role='page']");
-            if (pages.length > 0) {
-                this._pageStack.push(pages[0].getAttribute('id'));
-            }
+        __setupPageStack: function(d) {
 
             var header = d.querySelector("[data-role='header']");
 
@@ -122,13 +108,31 @@
             header.insertBefore(backBtn, header.firstChild);
 
             var self = this;
-            backBtn.onclick = function (e) {
-                if (self._pageStack.depth() > 1){
+            backBtn.onclick = function(e) {
+                if (self._pageStack.depth() > 1) {
                     self._pageStack.pop();
                 }
                 e.preventDefault();
             };
 
+            this._content = document.querySelector('[data-role="content"]');
+            this._overlay = document.createElement('div');
+            this._overlay.setAttribute('data-role', 'overlay');
+            this._content.appendChild(this._overlay);
+
+            // FIXME: support multiple page stack & complex docs?
+            var pagestacks = d.querySelectorAll("[data-role='pagestack']");
+            if (pagestacks.length == 0)
+                return;
+            var pagestack = pagestacks[0];
+
+            this._pageStack = new Pagestack(pagestack);
+
+            var pages = pagestack.querySelectorAll("[data-role='page']");
+            if (pages.length > 0) {
+                this._pageStack.push(pages[0].getAttribute('id'));
+            }
+
             this._pageActions = d.createElement('div');
             this._pageActions.setAttribute('data-role', 'actions');
 
@@ -145,7 +149,7 @@
             s.webkitTransform = s.transform = 'translate3d(0, ' + y + 'px, 0)';
         },
 
-        __setupPage: function (document) {
+        __setupPage: function(document) {
             if (this._pageStack != null)
                 return;
             if (__hasPageStack(document)) {
@@ -163,7 +167,7 @@
                     var footers = apptabsElements[idx].querySelectorAll("[data-role='footer']");
                     if (footers.length >= 0) {
                         // TODO: validate footer count: should be 1 footer
-                        actionBar = new ActionBar(this._tabs, footers[0], apptabsElements[idx]);
+                        actionBar = this.__setupTabAction(footers[0], apptabsElements[idx]);
                         if (footers[0] != null) footers[0].remove();
                     }
                 }
@@ -175,14 +179,14 @@
                     var footers = apppagesElements[idx].querySelectorAll("[data-role='footer']");
                     if (footers.length >= 0) {
                         // TODO: validate footer count: should be 1 footer
-                        actionBar = new ActionBar(this._tabs, footers[0], apppagesElements[idx]);
+                        actionBar = this.__setupPageAction(footers[0], apppagesElements[idx]);
                         if (footers[0] != null) footers[0].remove();
                     }
                 }
             }
         },
 
-        __setupTabs: function (document) {
+        __setupTabs: function(document) {
             if (this._tabs != null)
                 return;
             if (__hasTabs(document)) {
@@ -191,7 +195,7 @@
                     if (apptabsElements.length == 0)
                         return;
                     this._tabs = new Tabs(apptabsElements[0]);
-                    this._tabs.onTabChanged(function (e) {
+                    this._tabs.onTabChanged(function(e) {
                         if (!e || !e.infos)
                             return;
                         if (e.infos.tabId) {
@@ -199,14 +203,229 @@
                         }
                     }.bind(this));
                 }
-             }
+            }
+        },
+
+
+        __setupTabAction: function(oldFooter, parent) {
+            this._oldFooter = oldFooter;
+            this._oldFooterParent = parent;
+
+            this._overlay = document.querySelector('[data-role="overlay"]');
+
+            var newActionsBar = document.querySelector('[data-role="actions"]');
+
+            if (!this._oldFooter)
+                return;
+
+            var actionBar = this._oldFooter,
+                actions = actionBar.querySelector('ul'),
+                actionButtons = actionBar.querySelectorAll('ul li'),
+                i = actionButtons.length;
+            newActionsBarWrapper = document.createElement('div');
+            newActionsBarWrapper.setAttribute("data-role", "actions-wrapper");
+            newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id);
+
+            if (actionButtons.length > 2) {
+                // Maintain the first item then replace the rest with an action overflow
+                var firstAction = actionButtons[0],
+                    overflowList = document.createElement('ul'),
+                    /* Action Button */
+                    firstButton = document.createElement('button'),
+                    overflowButton = document.createElement('button'),
+                    /* Icon */
+                    firstIcon = firstAction.querySelector('img').getAttribute('src'),
+                    /* ID*/
+                    firstId = firstAction.querySelector('a').getAttribute('id'),
+                    k = 1;
+
+                if (this._tabs != 'undefined' && this._tabs) {
+                    if (this._tabs._tabsItems.length == 1) {
+                        k = 2;
+                        this._tabs._tabTitle.style.width = "calc(100% - 155px)";
+
+                        // Maintain the second item
+                        var secondAction = actionButtons[1],
+                            /* Action Button */
+                            secondButton = document.createElement('button'),
+                            /* Icon */
+                            secondIcon = secondAction.querySelector('img').getAttribute('src'),
+                            /* ID*/
+                            secondId = secondAction.querySelector('a').getAttribute('id');
+                    }
+                }
+
+                overflowList.setAttribute('data-role', 'actions-overflow-list');
+
+                // Hide the overflow
+                for (var x = k; x < i; x++) {
+                    var li = document.createElement('li'),
+                        a_id = actionButtons[x].querySelector('a').getAttribute('id'),
+                        lbl = actionButtons[x].querySelector('span').innerHTML,
+                        icon = actionButtons[x].querySelector('img').getAttribute('src');
+
+                    li.innerHTML = lbl;
+                    li.setAttribute('id', a_id);
+
+                    li.style.backgroundImage = 'url( ' + icon + ' )';
+                    overflowList.appendChild(li);
+
+                    li.onclick = function(e) {
+                        overflowList.classList.toggle('opened');
+                        self._overlay.classList.toggle('active');
+                        e.preventDefault();
+                    };
+                }
+
+                // Add the action overflow button
+                overflowButton.setAttribute('data-role', 'actions-overflow-icon');
+
+                //firstButton.style.backgroundImage = 'url( ' + firstIcon + ' )';
+                firstButton.setAttribute('id', firstId);
+                document.styleSheets[0].addRule('#' + firstId + ':after', 'background-image: url("' + firstIcon + '");');
+
+                newActionsBarWrapper.appendChild(firstButton);
+                if (this._tabs != 'undefined' && this._tabs) {
+                    if (this._tabs._tabsItems.length == 1) {
+                        secondButton.setAttribute('id', secondId);
+                        document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");');
+                        newActionsBarWrapper.appendChild(secondButton);
+                    }
+                }
+                newActionsBarWrapper.appendChild(overflowButton);
+                newActionsBarWrapper.appendChild(overflowList);
+
+                self = this;
+                overflowButton.onclick = function(e) {
+                    overflowList.classList.toggle('opened');
+                    self._overlay.classList.toggle('active');
+                    self._tabs._tabs.classList.remove('opened');
+                    e.preventDefault();
+                };
+            } else {
+
+                for (var y = 0; y < i; y++) {
+                    var actionButton = document.createElement('button'),
+                        actionButton_lbl = actionButtons[y].querySelector('span').innerHTML,
+                        actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'),
+                        actionButton_id = actionButtons[y].querySelector('a').getAttribute('id');
+
+                    actionButton.setAttribute('id', actionButton_id);
+                    document.styleSheets[0].addRule('#' + actionButton_id + ':after', 'background-image: url("' + actionButton_icon + '");');
+                    newActionsBarWrapper.appendChild(actionButton);
+                }
+            }
+
+            newActionsBar.appendChild(newActionsBarWrapper);
+        },
+
+
+        __setupPageAction: function(oldFooter, parent) {
+            this._oldFooter = oldFooter;
+            this._oldFooterParent = parent;
+            this._overlay = document.querySelector('[data-role="overlay"]');
+
+            var newActionsBar = document.querySelector('[data-role="actions"]');
+
+            if (!this._oldFooter)
+                return;
+
+            var actionBar = this._oldFooter,
+                actions = actionBar.querySelector('ul'),
+                actionButtons = actionBar.querySelectorAll('ul li'),
+                i = actionButtons.length;
+
+            newActionsBarWrapper = document.createElement('div');
+            newActionsBarWrapper.setAttribute("data-role", "actions-wrapper");
+            newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id);
+
+            if (actionButtons.length > 2) {
+                // Maintain the first then replace the rest with an action overflow
+                var firstAction = actionButtons[0],
+                    overflowList = document.createElement('ul'),
+                    /* Actions Button */
+                    firstButton = document.createElement('button'),
+                    overflowButton = document.createElement('button'),
+                    /* Icon */
+                    firstIcon = firstAction.querySelector('img').getAttribute('src'),
+                    /* ID*/
+                    firstId = firstAction.querySelector('a').getAttribute('id'),
+                    k = 2;
+
+                this._tabTitle.style.width = "calc(100% - 155px)";
+
+                // Maintain the second item
+                var secondAction = actionButtons[1],
+                    /* Action Button */
+                    secondButton = document.createElement('button'),
+                    /* Icon */
+                    secondIcon = secondAction.querySelector('img').getAttribute('src'),
+                    /* ID*/
+                    secondId = secondAction.querySelector('a').getAttribute('id');
+
+                overflowList.setAttribute('data-role', 'actions-overflow-list');
+
+                // Hide the overflow
+                for (var x = k; x < i; x++) {
+                    var li = document.createElement('li'),
+                        a_id = actionButtons[x].querySelector('a').getAttribute('id'),
+                        lbl = actionButtons[x].querySelector('span').innerHTML,
+                        icon = actionButtons[x].querySelector('img').getAttribute('src');
+
+                    li.innerHTML = lbl;
+                    li.setAttribute('id', a_id);
+
+                    li.style.backgroundImage = 'url( ' + icon + ' )';
+                    overflowList.appendChild(li);
+
+                    li.onclick = function(e) {
+                        overflowList.classList.toggle('opened');
+                        self._overlay.classList.toggle('active');
+                        e.preventDefault();
+                    };
+                }
+
+                // Add the action overflow button
+                overflowButton.setAttribute('data-role', 'actions-overflow-icon');
+
+                firstButton.setAttribute('id', firstId);
+                document.styleSheets[0].addRule('#' + firstId + ':after', 'background-image: url("' + firstIcon + '");');
+
+                newActionsBarWrapper.appendChild(firstButton);
+                secondButton.setAttribute('id', secondId);
+                document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");');
+                newActionsBarWrapper.appendChild(secondButton);
+                newActionsBarWrapper.appendChild(overflowButton);
+                newActionsBarWrapper.appendChild(overflowList);
+
+                self = this;
+                overflowButton.onclick = function(e) {
+                    overflowList.classList.toggle('opened');
+                    self._overlay.classList.toggle('active');
+                    e.preventDefault();
+                };
+            } else {
+
+                for (var y = 0; y < i; y++) {
+                    var actionButton = document.createElement('button'),
+                        actionButton_lbl = actionButtons[y].querySelector('span').innerHTML,
+                        actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'),
+                        actionButton_id = actionButtons[y].querySelector('a').getAttribute('id');
+
+                    actionButton.setAttribute('id', actionButton_id);
+                    document.styleSheets[0].addRule('#' + actionButton_id + ':after', 'background-image: url("' + actionButton_icon + '");');
+                    newActionsBarWrapper.appendChild(actionButton);
+                }
+            }
+
+            newActionsBar.appendChild(newActionsBarWrapper);
         },
 
         /**
          * Required call that initializes the UbuntuUI object
          * @method {} init
          */
-        init: function () {
+        init: function() {
             this.__setupTabs(document);
             this.__setupPage(document);
             this.__setupActionsBar(document);
@@ -218,11 +437,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Page} - The Page with the specified id
          */
-        page: function (id) {
-            if (typeof Page != 'undefined' && Page ) {
+        page: function(id) {
+            if (typeof Page != 'undefined' && Page) {
                 return new Page(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Page element. You might be missing the "page.js" Page definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -233,11 +451,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Tab} - The Tab with the specified id
          */
-        tab: function (id) {
-            if (typeof Tab != 'undefined' && Tab ) {
+        tab: function(id) {
+            if (typeof Tab != 'undefined' && Tab) {
                 return new Tab(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Tab element. You might be missing the "tab.js" Tab definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -248,11 +465,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Shape} - The Shape with the specified id
          */
-        shape: function (id) {
-            if (typeof Shape != 'undefined' && Shape ) {
+        shape: function(id) {
+            if (typeof Shape != 'undefined' && Shape) {
                 return new Shape(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Shape element. You might be missing the "shape.js" Shape definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -263,11 +479,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Button} - The Button with the specified id
          */
-        button: function (id) {
+        button: function(id) {
             if (typeof Button != 'undefined' && Button) {
                 return new Button(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Button element. You might be missing the "button.js" Button definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -278,7 +493,7 @@
          * @param {ID} id - The element's id attribute
          * @return {Progress} - The Progress with the specified id
          */
-        progress: function (id) {
+        progress: function(id) {
             if (typeof Progress != 'undefined' && Progress) {
                 return new Progress(id);
             }
@@ -290,11 +505,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Dialog} - The Dialog with the specified id
          */
-        dialog: function (id) {
+        dialog: function(id) {
             if (typeof Dialog != 'undefined' && Dialog) {
                 return new Dialog(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Dialog element. You might be missing the "dialog.js" Dialog definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -306,11 +520,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Popover} - The Popover with the specified id
          */
-        popover: function (elem, id) {
+        popover: function(elem, id) {
             if (typeof Popover != 'undefined' && Popover) {
                 return new Popover(elem, id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Popover element. You might be missing the "popover.js" Popover definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -321,11 +534,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Header} - The Header with the specified id
          */
-        header: function (id) {
+        header: function(id) {
             if (typeof Header != 'undefined' && Header) {
                 return new Header(id);
-            }
-            else {
+            } else {
                 console.error('Could not find the Header element. You might be missing the "header.js" Header definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -336,11 +548,10 @@
          * @param {ID} id - The element's id attribute
          * @return {Toolbar} - The Toolbar with the specified id
          */
-        toolbar: function (id) {
+        toolbar: function(id) {
             if (typeof Toolbar != 'undefined' && Toolbar) {
                 return new Toolbar(id, this.__getTabInfosDelegate());
-            }
-            else {
+            } else {
                 console.error('Could not find the Toolbar element. You might be missing the "toolbar.js" Toolbar definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -351,11 +562,10 @@
          * @param {Selector} selector - A selector that JavaScript querySelector method understands
          * @return {List}
          */
-        list: function (selector) {
+        list: function(selector) {
             if (typeof List != 'undefined' && List) {
                 return new List(selector);
-            }
-            else {
+            } else {
                 console.error('Could not find the List element. You might be missing the "list.js" List definition script. Please add a <script> declaration to include it.');
             }
         },
@@ -368,11 +578,10 @@
          * @param {Boolean} multiSelection - If multiple choice selection is enabled the list is always expanded.
          * @return {OptionSelector}
          */
-        optionselector: function (id, expanded, multiSelection) {
+        optionselector: function(id, expanded, multiSelection) {
             if (typeof OptionSelector != 'undefined' && OptionSelector) {
                 return new OptionSelector(id, expanded, multiSelection);
-            }
-            else {
+            } else {
                 console.error('Could not find the OptionSelector element. You might be missing the "option-selector.js" OptionSelector definition script. Please add a <script> declaration to include it.');
             }
         },

=== modified file '0.1/ambiance/js/page.js'
--- 0.1/ambiance/js/page.js	2014-05-25 22:08:39 +0000
+++ 0.1/ambiance/js/page.js	2015-03-04 21:23:40 +0000
@@ -58,9 +58,7 @@
     this.onActivatedCallbacks = [];
 
     this._header = document.querySelector('div[data-role="mainview"] header');
-    this._tabtitle = this._header.querySelector('[data-role="tabtitle"]');
-    this._backbtn = this._header.querySelector('[data-role="back-btn"]');
-
+    this._tabTitle = this._header.querySelector('[data-role="tabtitle"]');
     this.__setup();
 };
 Page.PAGE_ACTIVATED_EVENT = 'ubuntu-html5-on-page-activated';
@@ -178,7 +176,7 @@
         } catch (e) {}
 
         title = title || DEFAULT_TITLE;
-        this._tabtitle.textContent= title;
+        this._tabTitle.textContent= title;
     },
 
     /**
@@ -192,14 +190,6 @@
             element.getAttribute('data-role') === 'page';
     },
 
-
-    /**
-     * @private
-     */
-    isFirst_Page: function (element) {
-        return element.parentNode.querySelector(':first-child') ==  element;
-    },
-
     /**
      * @private
      */
@@ -210,8 +200,6 @@
         if (!this.isPage(page)) {
             return;
         }
-
-        this._backbtn.disabled = this.isFirst_Page(page);
         page.style.display = displayStyle;
     },
 

=== modified file '0.1/ambiance/js/pagestacks.js'
--- 0.1/ambiance/js/pagestacks.js	2014-09-17 17:44:50 +0000
+++ 0.1/ambiance/js/pagestacks.js	2015-03-04 21:23:40 +0000
@@ -86,9 +86,10 @@
         }
     };
 
-    function Pagestack(pagestack) {
+    function Pagestack(pageStack) {
         this._pages = [];
-        this._pagestack = pagestack;
+        this._pageStack = pageStack;
+        this._backBtn = document.querySelector('[data-role="back-btn"]');
     };
 
     Pagestack.prototype = {
@@ -161,7 +162,7 @@
         },
 
         onPageChanged : function(callback){
-            this._pagestack.addEventListener("pagechanged", callback);
+            this._pageStack.addEventListener("pagechanged", callback);
         },
 
         /**
@@ -170,15 +171,11 @@
         __setAllPagesVisibility: function (visible) {
             var visibility = visible ? "block" : "none";
 
-            var children = [].slice.call(this._pagestack.children);
+            var children = [].slice.call(this._pageStack.children);
             children.forEach(function(element) {
                 var pageHelper = new Page();
                 if (pageHelper.isPage(element)) {
-                    el.style.display = visibility;
-                    // treat footers separately
-                    var footer = el.querySelector('footer');
-                    if (footer)
-                        footer.style.display = visibility;
+                    element.style.display = visibility;
                 }
             });
         },
@@ -194,10 +191,21 @@
          * @private
          */
         __dispatchPageChanged: function (page) {
+            this._backBtn.disabled = (this.depth() ==  1);
+
+            [].forEach.call( document.querySelectorAll('[data-role="actions-wrapper"]'), function(el) {
+                el.style.display = 'none';
+            });
+
+            var pageActions = document.getElementById("actions_" + page);
+            if (pageActions !== null) {
+                pageActions.style.display = 'block';
+            }
+
             var event = document.createEvent('Event');
             event.initEvent('pagechanged',true,true);
             event.page = page;
-            this._pagestack.dispatchEvent(event);
+            this._pageStack.dispatchEvent(event);
         },
     };
 

=== modified file '0.1/ambiance/js/tabs.js'
--- 0.1/ambiance/js/tabs.js	2015-01-15 22:02:35 +0000
+++ 0.1/ambiance/js/tabs.js	2015-03-04 21:23:40 +0000
@@ -167,7 +167,7 @@
             var backbtn = document.createElement('button');
             backbtn.setAttribute('data-role', 'back-btn');
             backbtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.floor(Math.random()));
-            backbtn.style.display = 'none';
+            backbtn.disabled = true;
 
             if(this._tabs.childElementCount > 1) {
                 this._tabsbtn = document.createElement('button');
@@ -245,6 +245,7 @@
          * @private
          */
         __dispatchTabChangedEvent: function (tabId) {
+
             this._evt = document.createEvent('Event');
             this._evt.initEvent('tabchanged', true, true);
             this._evt.infos = {

=== modified file 'examples/html5-theme/widgets/Pagestack.html'
--- examples/html5-theme/widgets/Pagestack.html	2014-05-25 23:29:28 +0000
+++ examples/html5-theme/widgets/Pagestack.html	2015-03-04 21:23:40 +0000
@@ -48,11 +48,9 @@
     <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/actionsbar.js"></script>
     <script src="../../../0.1/ambiance/js/tab.js"></script>
     <script src="../../../0.1/ambiance/js/tabs.js"></script>
 
-    <script src="../apps/rss-reader/app.js"></script>
 </head>
 
 <body>
@@ -138,9 +136,8 @@
 
     </div>
 
-    <script type="text/javascript">
-        var UI = new UbuntuUI();
-    </script>
+    <script src="../apps/rss-reader/app.js"></script>
+
 </body>
 </html>
 

=== modified file 'examples/html5-theme/widgets/Tabs.html'
--- examples/html5-theme/widgets/Tabs.html	2014-08-30 20:10:18 +0000
+++ examples/html5-theme/widgets/Tabs.html	2015-03-04 21:23:40 +0000
@@ -35,7 +35,6 @@
     <!-- Ubuntu UI javascript imports - Ambiance theme -->
     <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
     <script src="../../../0.1/ambiance/js/core.js"></script>
-    <script src="../../../0.1/ambiance/js/actionsbar.js"></script>
     <script src="../../../0.1/ambiance/js/tab.js"></script>
     <script src="../../../0.1/ambiance/js/tabs.js"></script>
 </head>