Merge lp:~abreu-alexandre/ubuntu-html5-theme/add-element-function into lp:ubuntu-html5-theme

[Alexandre Abreu]

Add convenient element() function to most widgets ... (we might want to factor those out in a second step)

Add convenient element() function to most widgets ... (we might want to factor those out in a second step)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:96
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/37/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/1459
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/21
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/21
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/1297
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1459
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/1459/artifact/work/output/*zip*/output.zip

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

review: Approve (continuous-integration)

=== modified file '0.1/ambiance/css/buttons.css'
--- 0.1/ambiance/css/buttons.css	2013-07-17 15:27:43 +0000
+++ 0.1/ambiance/css/buttons.css	2013-12-05 14:18:28 +0000
@@ -67,6 +67,12 @@
     left: 0;
 }
 
+[data-role="button"].ubuntu {
+    background: #dd4814;
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
 [data-role="button"].danger {
     background: red;
     color: #ffffff;

=== modified file '0.1/ambiance/css/default.css'
--- 0.1/ambiance/css/default.css	2013-07-19 13:18:03 +0000
+++ 0.1/ambiance/css/default.css	2013-12-05 14:18:28 +0000
@@ -53,6 +53,8 @@
     width: 100%;
     font-size: 1rem "Ubuntu";
     color: #787878;
+    margin-left: 1em;
+    margin-right: 1em;
 }
 
 [data-role="content"] p {

=== modified file '0.1/ambiance/css/tabs.css'
--- 0.1/ambiance/css/tabs.css	2013-07-19 13:18:03 +0000
+++ 0.1/ambiance/css/tabs.css	2013-12-05 14:18:28 +0000
@@ -35,6 +35,7 @@
     display: box;
     -webkit-box-orient: horizontal;
     box-orient: horizontal;
+    margin-bottom: 1em;
 }
 
 [data-role="header"] div.tabs-inner {

=== modified file '0.1/ambiance/js/buttons.js'
--- 0.1/ambiance/js/buttons.js	2013-11-01 15:19:11 +0000
+++ 0.1/ambiance/js/buttons.js	2013-12-05 14:18:28 +0000
@@ -49,9 +49,18 @@
         });
      */
     click: function (callback) {
-    if ( ! document.getElementById(this.id)) {
-        throw "Invalid button ID: " + String(this.id);
-    }
+        if ( ! document.getElementById(this.id)) {
+            throw "Invalid button ID: " + String(this.id);
+        }
         new FastButton(document.getElementById(this.id), callback);
+    },
+    /**
+     * Returns the DOM element associated with the id this widget is bind to.
+     * @method element
+     * @example
+        var mybutton = UI.button("buttonid").element();
+     */
+    element: function() {
+        return document.getElementById(this.id);
     }
 };

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/core.js	2013-12-05 14:18:28 +0000
@@ -291,13 +291,12 @@
         },
 
         /**
-         * Gets the HTML element associated with an Ubuntu HTML5 JavaScript object
-         * @method getEl
-         * @param {UbuntuObject} object - An UbuntuUI widget object
-         * @return {Element} - The HTML element
+         * Gets the DOM element from a given selector
+         * @method element
+         * @return {Element} - The DOM element
          */
-        getEl: function(widget) {
-          return document.getElementById(widget.id);
+        element: function(selector) {
+          return document.querySelector(selector);
         },
 
     };

=== modified file '0.1/ambiance/js/dialogs.js'
--- 0.1/ambiance/js/dialogs.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/dialogs.js	2013-12-05 14:18:28 +0000
@@ -44,6 +44,7 @@
 
  */
 var Dialog = function (id) {
+    this.id = id;
     this.dialog = document.getElementById(id);
 };
 
@@ -68,5 +69,14 @@
      */
     toggle: function () {
         this.dialog.classList.toggle('active');
+    },
+    /**
+     * Returns the DOM element associated with the id this widget is bind to.
+     * @method element
+     * @example
+        var mydialog = UI.dialog("dialogid").element();
+     */
+    element: function () {
+	return document.getElementById(this.id);
     }
 };

=== modified file '0.1/ambiance/js/header.js'
--- 0.1/ambiance/js/header.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/header.js	2013-12-05 14:18:28 +0000
@@ -60,6 +60,12 @@
 
 Header.prototype = {
     /**
-     * Placeholder for future methods
+     * Returns the DOM element associated with the id this widget is bind to.
+     * @method element
+     * @example
+        var myheader = UI.header("headerid").element();
      */
+    element: function () {
+        return document.getElementById(this.id);
+    }
 };

=== modified file '0.1/ambiance/js/list.js'
--- 0.1/ambiance/js/list.js	2013-11-01 15:19:11 +0000
+++ 0.1/ambiance/js/list.js	2013-12-05 14:18:28 +0000
@@ -67,6 +67,7 @@
         if (list == null || list.nodeName.toLowerCase() !== 'section' || list.getAttribute('data-role') != LIST_DATA_ROLE) {
             throw new Error('Element with selector "' + selector + '" does not exist or not declared as a "list" <section>');
         }
+        this._selector = selector;
         this._list = list;
 
         __addUlIfNotFound(this._list);
@@ -98,7 +99,7 @@
                 header.innerText = text;
             }
         },
-	    /**
+            /**
          * Append an item to a list
          * @method append
          * @param {String} text - The main text, flushed left (no markup)
@@ -181,7 +182,16 @@
                 func(element, index);
             });
         },
+        /**
+         * Returns the DOM element associated with the selector this widget is bind to.
+         * @method element
+         * @example
+            var mylist = UI.list("#listid").element();
+        */
+        element: function () {
+            return this._list;
+        }
     };
 
     return List;
-})();
\ No newline at end of file
+})();

=== modified file '0.1/ambiance/js/page.js'
--- 0.1/ambiance/js/page.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/page.js	2013-12-05 14:18:28 +0000
@@ -56,7 +56,13 @@
 };
 
 Page.prototype = {
-    /*
-     * placeholder for future methods
-     */
+    /**
+     * Returns the DOM element associated with the selector this widget is bind to.
+     * @method element
+     * @example
+       var mypage = UI.page("pageid").element();
+    */
+    element: function () {
+        return document.getElementById(this.id);
+    }
 };

=== modified file '0.1/ambiance/js/popovers.js'
--- 0.1/ambiance/js/popovers.js	2013-11-01 15:40:10 +0000
+++ 0.1/ambiance/js/popovers.js	2013-12-05 14:18:28 +0000
@@ -226,5 +226,14 @@
             this.popover.style.left = pos_left+ 'px';
 
         return this.popover;
+    },
+    /**
+     * Returns the DOM element associated with the id this widget is bind to.
+     * @method element
+     * @example
+        var mypopover = UI.popover("popoverid").element();
+     */
+    element: function () {
+        return this.popover;
     }
 };

=== modified file '0.1/ambiance/js/shape.js'
--- 0.1/ambiance/js/shape.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/shape.js	2013-12-05 14:18:28 +0000
@@ -56,4 +56,13 @@
         el.addEventListener('click', callback);
       }
     },
+    /**
+     * Returns the DOM element associated with the id this widget is bind to.
+     * @method element
+     * @example
+        var myshape = UI.shape("shapeid").element();
+     */
+    element: function () {
+        return document.getElementById(this.id);
+    }
 };

=== modified file '0.1/ambiance/js/toolbars.js'
--- 0.1/ambiance/js/toolbars.js	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/toolbars.js	2013-12-05 14:18:28 +0000
@@ -83,5 +83,14 @@
      */
     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;
     }
 };

=== modified file '0.1/examples/widgets/Buttons.html'
--- 0.1/examples/widgets/Buttons.html	2013-07-17 15:27:43 +0000
+++ 0.1/examples/widgets/Buttons.html	2013-12-05 14:18:28 +0000
@@ -60,10 +60,12 @@
             <div class="inset">
                 <button data-role="button" class="danger">Delete</button>
             </div>
-
             <div class="inset">
                 <button data-role="button" class="warning">Warning</button>
             </div>
+            <div class="inset">
+                <button data-role="button" class="ubuntu">Ubuntu</button>
+            </div>
 
             <h1>Links</h1>
             <div class="inset">
@@ -75,10 +77,12 @@
             <div class="inset">
                 <a href="#" data-role="button">Delete</a>
             </div>
-
             <div class="inset">
                 <a href="#" data-role="button">Warning</a>
             </div>
+            <div class="inset">
+                <a href="#" data-role="button">Ubuntu</a>
+            </div>
         </div>
     </div>
 </body>