Merge lp:~abreu-alexandre/ubuntu-html5-theme/add-setselected-tab-index into lp:ubuntu-html5-theme

[Alexandre Abreu]

Add a set selectedTabIndex property,
Add associated tabs AP tests,
Some minor fixes in tabs,

Add a set selectedTabIndex property,
Add associated tabs AP tests,
Some minor fixes in tabs,

[lp:~abreu-alexandre/ubuntu-html5-theme/add-setselected-tab-index]

153. By Alexandre Abreu on 2014-03-05

remove trailing log

154. By Alexandre Abreu on 2014-03-05

remove trailing js

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:154
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/130/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3688
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/114
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/114
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/3239
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3693
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3693/artifact/work/output/*zip*/output.zip

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

review: Approve (continuous-integration)

[Adnane Belmadiaf (daker)]

Spaces instead of tabs.

review: Needs Fixing

[lp:~abreu-alexandre/ubuntu-html5-theme/add-setselected-tab-index]

155. By Alexandre Abreu on 2014-03-07

untabify

[Alexandre Abreu (abreu-alexandre)]

> Spaces instead of tabs.
done

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:155
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/133/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3743
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/117
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/117
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/3290
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3749
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3749/artifact/work/output/*zip*/output.zip

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

review: Approve (continuous-integration)

[Adnane Belmadiaf (daker)]

+1

review: Approve

[lp:~abreu-alexandre/ubuntu-html5-theme/add-setselected-tab-index]

156. By Alexandre Abreu on 2014-03-19

Remove wrong 'inactive' class set on first visibility setup; Add a force selection flag to disable the unecessary 'inactive' check when forcefully setting the tab index; Fix tab index validation

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:156
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/137/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/4084/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/121
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/121
    FAILURE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/3565/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/4136
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/4136/artifact/work/output/*zip*/output.zip

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

review: Needs Fixing (continuous-integration)

=== modified file '0.1/ambiance/js/tab.js'
--- 0.1/ambiance/js/tab.js	2014-02-28 20:29:07 +0000
+++ 0.1/ambiance/js/tab.js	2014-03-19 16:52:31 +0000
@@ -91,7 +91,6 @@
      * @method {} activate
      */
     activate: function (id) {
-        console.log('actiatin');
         this.__hideVisibleSibling();
         this.__updateVisibleState('block', function(footer) {
             if (!footer)

=== modified file '0.1/ambiance/js/tabs.js'
--- 0.1/ambiance/js/tabs.js	2014-03-03 16:54:31 +0000
+++ 0.1/ambiance/js/tabs.js	2014-03-19 16:52:31 +0000
@@ -46,13 +46,13 @@
           </header>
 
           <div data-role="content">
-	    <div data-role="tab" id="main">
+            <div data-role="tab" id="main">
               [...]
-	    </div>
+            </div>
 
-	    <div data-role="tab" id="page2">
+            <div data-role="tab" id="page2">
               [...]
-	    </div>
+            </div>
           </div>
 
         </div>
@@ -120,10 +120,23 @@
         /**
          * Return the index of the selected tab
          * @property selectedTabIndex
-         * @return {Integer} - The index of the element in the list of tabs or -1
+         * @return {Integer} - The zero based index of the element in the list of tabs or -1
          */
         get selectedTabIndex() {
-            return [].prototype.slice.call(this._tabs.querySelector('ul').children).indexOf(activeTab);
+            return Array.prototype.slice.call(this._tabs.querySelectorAll('li')).indexOf(activeTab);
+        },
+
+        /**
+         * Sets the index of the selected tab
+         * @property selectedTabIndex
+         * @param {Integer} - The zero based index of the element in the list of tabs
+         */
+        set selectedTabIndex(index) {
+            var tabs = Array.prototype.slice.call(this._tabs.querySelectorAll('li'));
+            if (index < 0 || index >= tabs.length)
+                return;
+
+            this.__doSelectTab(tabs[index], true);
         },
 
         /**
@@ -181,6 +194,7 @@
          */
         __setupInitialTabVisibility: function() {
             var tab = this._tabs.querySelector('[data-role="tabitem"]:first-child');
+            tab.classList.remove('inactive');
             tab.classList.add('active');
             var updateDisplayStyle = function(tab, value) {
                 var targetPage = document.getElementById(tab.getAttribute('data-page'));
@@ -191,6 +205,7 @@
             [].slice.
                 call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(:first-child)')).
                 forEach(function(element) {
+                    element.classList.remove('inactive');
                     updateDisplayStyle(element, 'none');
                 });
         },
@@ -396,9 +411,23 @@
             var selectedTab = document.elementFromPoint(touch.pageX, touch.pageY);
             if (selectedTab == null)
                 return;
-            if (selectedTab.getAttribute("data-role") !== 'tabitem')
-                return;
-            if ((selectedTab.className).indexOf('inactive') > -1) {
+            this.__doSelectTab(selectedTab);
+            e.preventDefault();
+        },
+
+        /**
+         * @private
+         */
+        __doSelectTab: function(tabElement, forcedSelection) {
+            if ( ! tabElement)
+                return;
+
+            if (tabElement.getAttribute("data-role") !== 'tabitem')
+                return;
+
+            if (forcedSelection ||
+		(Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) {
+
                 window.clearTimeout(t2);
 
                 activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
@@ -406,13 +435,13 @@
                 this._tabs.style['-webkit-transition-duration'] = '.3s';
                 this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
 
-                this.__updateActiveTab(selectedTab, activeTab);
+                this.__updateActiveTab(tabElement, activeTab);
 
                 [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
                     e.classList.remove('inactive');
                 });
 
-                var targetPageId = selectedTab.getAttribute('data-page');
+                var targetPageId = tabElement.getAttribute('data-page');
                 this.activate(targetPageId);
                 this.__dispatchTabChangedEvent(targetPageId);
             } else {
@@ -420,13 +449,15 @@
                 [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
                     el.classList.toggle('inactive');
                 });
+
+                var self = this;
                 t2 = window.setTimeout(function () {
-                    [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
+                    var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)');
+                    [].forEach.call(nonActiveTabs, function (el) {
                         el.classList.toggle('inactive');
                     });
                 }, 3000);
             }
-            e.preventDefault();
         },
 
         /**

=== modified file 'tests/autopilot/tools/qml/webview.qml'
--- tests/autopilot/tools/qml/webview.qml	2014-02-11 03:16:49 +0000
+++ tests/autopilot/tools/qml/webview.qml	2014-03-19 16:52:31 +0000
@@ -116,13 +116,12 @@
     function getAttributeForElementWithId(id,attribute) {
         var tid = __gentid();
         function __getAttributeWithId() {
-            try { return document.querySelector('#' + id).getAttribute(attribute); } catch (e) {};
-            return undefined;
+            try { var value = document.querySelector('#' + id).getAttribute(attribute); return value || ""; } catch (e) { return e.toString(); };
+            return "";
         };
-
         var statement = __setupClosedVariables({'id': id, 'attribute': attribute});
         statement += __getAttributeWithId.toString();
-        statement += "; return __getAttributeWithId(id,attribute,value); "
+        statement += "; return __getAttributeWithId(); "
 
         webview.experimental.evaluateJavaScript(__wrapJsCommands(statement),
 		function(result) { root.resultUpdated(root.__createResult(result, tid)); });

=== added file 'tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py'
--- tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py	1970-01-01 00:00:00 +0000
+++ tests/autopilot/ubuntu_html5_ui_toolkit/tests/test_tabs.py	2014-03-19 16:52:31 +0000
@@ -0,0 +1,31 @@
+# -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
+# Copyright 2014 Canonical
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Lesser General Public License version 3, as published
+# by the Free Software Foundation.
+
+from __future__ import absolute_import
+
+import time
+
+from testtools.matchers import Contains, Equals
+from autopilot.matchers import Eventually
+
+from ubuntu_html5_ui_toolkit.tests import UbuntuHTML5TestCaseBase
+
+class UbuntuUIToolkitTabsTestCase(UbuntuHTML5TestCaseBase):
+
+    def setUp(self):
+        super(UbuntuUIToolkitTabsTestCase, self).setUp()
+
+    def test_programaticTabSelectIndex(self):
+        self.browse_to_test_html('test-tabs-in-app.html')
+        self.assertThat(self.eval_expression_in_page_unsafe('var UI = new UbuntuUI(); UI.init(); UI.tabs.selectedTabIndex = 1; return "ok";'), Equals('ok'));
+
+        self.assertThat(lambda: self.is_dom_node_visible('tab1'), Eventually(Equals(False)))
+        self.assertThat(lambda: self.is_dom_node_visible('tab2'), Eventually(Equals(True)))
+        self.assertThat(lambda: self.is_dom_node_visible('tab3'), Eventually(Equals(False)))
+
+        self.assertThat(self.eval_expression_in_page_unsafe('var UI = new UbuntuUI(); UI.init(); return UI.tabs.selectedTabIndex = 1;'), Equals(1));
+

=== added file 'tests/data/html/test-tabs-in-app.html'
--- tests/data/html/test-tabs-in-app.html	1970-01-01 00:00:00 +0000
+++ tests/data/html/test-tabs-in-app.html	2014-03-19 16:52:31 +0000
@@ -0,0 +1,90 @@
+<!--
+ Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+
+ 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/>.
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="copyright" content="Adnane Belmadiaf <[e-mail]>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Ubuntu UI HTML5: Application Template</title>
+
+    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
+
+    <!-- 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/buttons.js"></script>
+    <script src="../../../0.1/ambiance/js/dialogs.js"></script>
+    <script src="../../../0.1/ambiance/js/page.js"></script>
+    <script src="../../../0.1/ambiance/js/pagestacks.js"></script>
+    <script src="../../../0.1/ambiance/js/popovers.js"></script>
+    <script src="../../../0.1/ambiance/js/tab.js"></script>
+    <script src="../../../0.1/ambiance/js/tabs.js"></script>
+    <script>
+      window.onload = function () {
+      };
+    </script>
+
+</head>
+
+<body>
+
+    <div data-role="mainview">
+
+        <header data-role="header">
+          <ul data-role="tabs">
+            <li data-role="tabitem" data-page="tab1">Tab 1</li>
+            <li data-role="tabitem" data-page="tab2">Tab 2</li>
+            <li data-role="tabitem" data-page="tab3">Tab 3</li>
+          </ul>
+        </header>
+
+        <div data-role="content">
+
+          <div data-role="tab" id="tab1">
+            <footer data-role="footer" class="revealed">
+              <nav>
+                <ul>
+                  <li>
+                    <a href="#" id="addfeed">
+                      <img src="../../../0.1/ambiance/img/[e-mail]" alt="Tap me!" />
+                      <span>Add feed</span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </footer>
+          </div>
+
+          <div data-role="tab" id="tab2">
+          </div>
+
+          <div data-role="tab" id="tab3">
+          </div>
+
+        </div>
+
+    </div>
+
+</body>
+
+</html>