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

[Adnane Belmadiaf]

Added support for scrollable list

[Adnane Belmadiaf (daker)]

Still WIP, need to fix some issues.

[Alexandre Abreu (abreu-alexandre)]

is it still WIP?

Unmerged revisions

144. By Adnane Belmadiaf on 2014-02-19

Initial support for native scrollable list

=== modified file '0.1/ambiance/js/core.js'
--- 0.1/ambiance/js/core.js	2014-02-18 17:22:15 +0000
+++ 0.1/ambiance/js/core.js	2014-02-19 22:02:14 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * Copyright (C) 2013, 2014 Adnane Belmadiaf <[e-mail]>
  * License granted by Canonical Limited
  *
  * This file is part of ubuntu-html5-ui-toolkit.
@@ -376,9 +376,9 @@
          * @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, containerHeight) {
             if (typeof OptionSelector != 'undefined' && OptionSelector) {
-                return new OptionSelector(id, expanded, multiSelection);
+                return new OptionSelector(id, expanded, multiSelection, containerHeight);
             }
         },
 

=== modified file '0.1/ambiance/js/option-selector.js'
--- 0.1/ambiance/js/option-selector.js	2014-01-27 18:42:31 +0000
+++ 0.1/ambiance/js/option-selector.js	2014-02-19 22:02:14 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * Copyright (C) 2013, 2014 Adnane Belmadiaf <[e-mail]>
  * License granted by Canonical Limited
  *
  * This file is part of ubuntu-html5-ui-toolkit.
@@ -49,11 +49,12 @@
 
     var  __values = "";
 
-    function OptionSelector (id, expanded, multiSelection) {
+    function OptionSelector (id, expanded, multiSelection, containerHeight) {
         this.currentIndex = 0;
         this.currentlyExpanded = false;
         this.expanded = typeof expanded !== 'undefined' ? expanded : false;
         this.multiSelection = typeof multiSelection !== 'undefined' ? multiSelection : false;
+        this.containerHeight_tmp = undefined;
 
         if (this.multiSelection)
             this.expanded = true;
@@ -72,13 +73,18 @@
         if (this.optionselector_ul.length == 0)
             return;
 
-
         this.optionselector_ul_li = this.optionselector.querySelectorAll('li');
         if (this.optionselector_ul == null)
             return;
         if (this.optionselector_ul_li.length == 0)
             return;
 
+        this.containerHeight = typeof containerHeight !== 'undefined' ? containerHeight : this.optionselector_ul_li.length;
+
+        if (typeof containerHeight != 'undefined') {
+            this.containerHeight_tmp = containerHeight;
+        }
+
         [].forEach.call(this.optionselector_ul_li, function (elm) {
             elm.addEventListener('click', this.__onClicked.bind(this, elm), false);
         }.bind(this));
@@ -179,22 +185,26 @@
          */
         __open: function () {
             this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
-            this.optionselector_ul.style.webkitTransform = 'translate3d(0, 0rem,0)';
-            this.optionselector.style.height = 3.07*this.optionselector_ul_li.length + 'rem';
+            this.optionselector_ul.style.webkitTransform = 'translate3d(0, 0, 0)';
+            this.optionselector.style.height = 3.05*this.containerHeight + 'rem';
             this.currentlyExpanded = true;
+            if (typeof this.containerHeight_tmp != 'undefined') {
+                this.optionselector.style['overflow-y'] = 'auto';
+            }
         },
 
         /**
          * @private
          */
         __close: function (currentIndex) {
+            this.optionselector.style['overflow-y'] = 'hidden';
             this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
-            this.optionselector_ul.style.webkitTransform = 'translate3d(0,' + -3*currentIndex + 'rem,0)';
             this.optionselector.style.height = '3rem';
             [].forEach.call(this.optionselector_ul_li, function (elm) {
                 elm.classList.remove('active');
             });
             this.currentlyExpanded = false;
+            this.optionselector_ul.style.webkitTransform = 'translate3d(0,' + -3*currentIndex + 'rem, 0)';
         },
 
         onClicked : function(callback){

=== modified file 'examples/html5-theme/widgets/OptionSelector.html'
--- examples/html5-theme/widgets/OptionSelector.html	2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/OptionSelector.html	2014-02-19 22:02:14 +0000
@@ -1,5 +1,5 @@
 <!--
- Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ Copyright (C) 2013, 2014 Adnane Belmadiaf <[e-mail]>
  License granted by Canonical Limited
 
  This file is part of ubuntu-html5-ui-toolkit.
@@ -54,6 +54,12 @@
             os3.onClicked(function (e) {
                 console.log("optionselector3 values: " + e.values);
             })
+
+            os4 = UI.optionselector('os4', expanded=false, multiSelection=false, containerHeight=4);
+
+            os4.onClicked(function (e) {
+                console.log("optionselector4 values: " + e.values);
+            })
         };
     </script>
 </head>
@@ -122,22 +128,55 @@
             </div>
             <div class="inset" style="margin: 15px;">
                 <h1>Expanded with a unique selection</h1>
-                <section data-role="option-selector" id="os3">
-                    <ul>
-                        <li data-value="0">
-                            <p>Label 1</p>
-                        </li>
-                        <li data-value="1">
-                            <p>Label 2</p>
-                        </li>
-                        <li data-value="3">
-                            <p>Label 3</p>
-                        </li>
-                        <li data-value="4">
-                            <p>Label 4</p>
-                        </li>
-                        <li data-value="5">
-                            <p>Label 5</p>
+                <section data-role="option-selector" id="os3" >
+                    <ul>
+                        <li data-value="0">
+                            <p>Label 1</p>
+                        </li>
+                        <li data-value="1">
+                            <p>Label 2</p>
+                        </li>
+                        <li data-value="3">
+                            <p>Label 3</p>
+                        </li>
+                        <li data-value="4">
+                            <p>Label 4</p>
+                        </li>
+                        <li data-value="5">
+                            <p>Label 5</p>
+                        </li>
+                    </ul>
+                </section>
+            </div>
+
+
+            <div class="inset" style="margin: 15px;">
+                <h1>Expanded with a unique selection, scrollable</h1>
+                <section data-role="option-selector" id="os4" >
+                    <ul>
+                        <li data-value="0">
+                            <p>Label 1</p>
+                        </li>
+                        <li data-value="1">
+                            <p>Label 2</p>
+                        </li>
+                        <li data-value="2">
+                            <p>Label 3</p>
+                        </li>
+                        <li data-value="3">
+                            <p>Label 4</p>
+                        </li>
+                        <li data-value="4">
+                            <p>Label 5</p>
+                        </li>
+                        <li data-value="5">
+                            <p>Label 6</p>
+                        </li>
+                        <li data-value="7">
+                            <p>Label 7</p>
+                        </li>
+                        <li data-value="8">
+                            <p>Label 8</p>
                         </li>
                     </ul>
                 </section>