Ubuntu HTML5 UI SDK

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

  1. fix.1269074
  2. Merge into trunk
Proposed by Adnane Belmadiaf
Status: Work in progress
Proposed branch: lp:~daker/ubuntu-html5-theme/fix.1269074
Merge into: lp:ubuntu-html5-theme
Diff against target: 193 lines (+75/-26)
3 files modified
0.1/ambiance/js/core.js (+3/-3)
0.1/ambiance/js/option-selector.js (+16/-6)
examples/html5-theme/widgets/OptionSelector.html (+56/-17)
To merge this branch: bzr merge lp:~daker/ubuntu-html5-theme/fix.1269074
Reviewer Review Type Date Requested Status
Ubuntu HTML5 Theme Developers Pending
Review via email: mp+207317@code.launchpad.net

Commit message

Added support for scrollable list

To post a comment you must log in.
Revision history for this message
Adnane Belmadiaf (daker) wrote :

Still WIP, need to fix some issues.

Reply
Revision history for this message
Alexandre Abreu (abreu-alexandre) wrote :

is it still WIP?

Reply

Unmerged revisions

144. By Adnane Belmadiaf

Initial support for native scrollable list

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
1/*1/*
2 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>2 * Copyright (C) 2013, 2014 Adnane Belmadiaf <daker@ubuntu.com>
3 * License granted by Canonical Limited3 * License granted by Canonical Limited
4 *4 *
5 * This file is part of ubuntu-html5-ui-toolkit.5 * This file is part of ubuntu-html5-ui-toolkit.
@@ -376,9 +376,9 @@
376 * @param {Boolean} multiSelection - If multiple choice selection is enabled the list is always expanded.376 * @param {Boolean} multiSelection - If multiple choice selection is enabled the list is always expanded.
377 * @return {OptionSelector}377 * @return {OptionSelector}
378 */378 */
379 optionselector: function (id, expanded, multiSelection) {379 optionselector: function (id, expanded, multiSelection, containerHeight) {
380 if (typeof OptionSelector != 'undefined' && OptionSelector) {380 if (typeof OptionSelector != 'undefined' && OptionSelector) {
381 return new OptionSelector(id, expanded, multiSelection);381 return new OptionSelector(id, expanded, multiSelection, containerHeight);
382 }382 }
383 },383 },
384384
385385
=== 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 @@
1/*1/*
2 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>2 * Copyright (C) 2013, 2014 Adnane Belmadiaf <daker@ubuntu.com>
3 * License granted by Canonical Limited3 * License granted by Canonical Limited
4 *4 *
5 * This file is part of ubuntu-html5-ui-toolkit.5 * This file is part of ubuntu-html5-ui-toolkit.
@@ -49,11 +49,12 @@
4949
50 var __values = "";50 var __values = "";
5151
52 function OptionSelector (id, expanded, multiSelection) {52 function OptionSelector (id, expanded, multiSelection, containerHeight) {
53 this.currentIndex = 0;53 this.currentIndex = 0;
54 this.currentlyExpanded = false;54 this.currentlyExpanded = false;
55 this.expanded = typeof expanded !== 'undefined' ? expanded : false;55 this.expanded = typeof expanded !== 'undefined' ? expanded : false;
56 this.multiSelection = typeof multiSelection !== 'undefined' ? multiSelection : false;56 this.multiSelection = typeof multiSelection !== 'undefined' ? multiSelection : false;
57 this.containerHeight_tmp = undefined;
5758
58 if (this.multiSelection)59 if (this.multiSelection)
59 this.expanded = true;60 this.expanded = true;
@@ -72,13 +73,18 @@
72 if (this.optionselector_ul.length == 0)73 if (this.optionselector_ul.length == 0)
73 return;74 return;
7475
75
76 this.optionselector_ul_li = this.optionselector.querySelectorAll('li');76 this.optionselector_ul_li = this.optionselector.querySelectorAll('li');
77 if (this.optionselector_ul == null)77 if (this.optionselector_ul == null)
78 return;78 return;
79 if (this.optionselector_ul_li.length == 0)79 if (this.optionselector_ul_li.length == 0)
80 return;80 return;
8181
82 this.containerHeight = typeof containerHeight !== 'undefined' ? containerHeight : this.optionselector_ul_li.length;
83
84 if (typeof containerHeight != 'undefined') {
85 this.containerHeight_tmp = containerHeight;
86 }
87
82 [].forEach.call(this.optionselector_ul_li, function (elm) {88 [].forEach.call(this.optionselector_ul_li, function (elm) {
83 elm.addEventListener('click', this.__onClicked.bind(this, elm), false);89 elm.addEventListener('click', this.__onClicked.bind(this, elm), false);
84 }.bind(this));90 }.bind(this));
@@ -179,22 +185,26 @@
179 */185 */
180 __open: function () {186 __open: function () {
181 this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';187 this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
182 this.optionselector_ul.style.webkitTransform = 'translate3d(0, 0rem,0)';188 this.optionselector_ul.style.webkitTransform = 'translate3d(0, 0, 0)';
183 this.optionselector.style.height = 3.07*this.optionselector_ul_li.length + 'rem';189 this.optionselector.style.height = 3.05*this.containerHeight + 'rem';
184 this.currentlyExpanded = true;190 this.currentlyExpanded = true;
191 if (typeof this.containerHeight_tmp != 'undefined') {
192 this.optionselector.style['overflow-y'] = 'auto';
193 }
185 },194 },
186195
187 /**196 /**
188 * @private197 * @private
189 */198 */
190 __close: function (currentIndex) {199 __close: function (currentIndex) {
200 this.optionselector.style['overflow-y'] = 'hidden';
191 this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';201 this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
192 this.optionselector_ul.style.webkitTransform = 'translate3d(0,' + -3*currentIndex + 'rem,0)';
193 this.optionselector.style.height = '3rem';202 this.optionselector.style.height = '3rem';
194 [].forEach.call(this.optionselector_ul_li, function (elm) {203 [].forEach.call(this.optionselector_ul_li, function (elm) {
195 elm.classList.remove('active');204 elm.classList.remove('active');
196 });205 });
197 this.currentlyExpanded = false;206 this.currentlyExpanded = false;
207 this.optionselector_ul.style.webkitTransform = 'translate3d(0,' + -3*currentIndex + 'rem, 0)';
198 },208 },
199209
200 onClicked : function(callback){210 onClicked : function(callback){
201211
=== 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 @@
1<!--1<!--
2 Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>2 Copyright (C) 2013, 2014 Adnane Belmadiaf <daker@ubuntu.com>
3 License granted by Canonical Limited3 License granted by Canonical Limited
44
5 This file is part of ubuntu-html5-ui-toolkit.5 This file is part of ubuntu-html5-ui-toolkit.
@@ -54,6 +54,12 @@
54 os3.onClicked(function (e) {54 os3.onClicked(function (e) {
55 console.log("optionselector3 values: " + e.values);55 console.log("optionselector3 values: " + e.values);
56 })56 })
57
58 os4 = UI.optionselector('os4', expanded=false, multiSelection=false, containerHeight=4);
59
60 os4.onClicked(function (e) {
61 console.log("optionselector4 values: " + e.values);
62 })
57 };63 };
58 </script>64 </script>
59</head>65</head>
@@ -122,22 +128,55 @@
122 </div>128 </div>
123 <div class="inset" style="margin: 15px;">129 <div class="inset" style="margin: 15px;">
124 <h1>Expanded with a unique selection</h1>130 <h1>Expanded with a unique selection</h1>
125 <section data-role="option-selector" id="os3">131 <section data-role="option-selector" id="os3" >
126 <ul>132 <ul>
127 <li data-value="0">133 <li data-value="0">
128 <p>Label 1</p>134 <p>Label 1</p>
129 </li>135 </li>
130 <li data-value="1">136 <li data-value="1">
131 <p>Label 2</p>137 <p>Label 2</p>
132 </li>138 </li>
133 <li data-value="3">139 <li data-value="3">
134 <p>Label 3</p>140 <p>Label 3</p>
135 </li>141 </li>
136 <li data-value="4">142 <li data-value="4">
137 <p>Label 4</p>143 <p>Label 4</p>
138 </li>144 </li>
139 <li data-value="5">145 <li data-value="5">
140 <p>Label 5</p>146 <p>Label 5</p>
147 </li>
148 </ul>
149 </section>
150 </div>
151
152
153 <div class="inset" style="margin: 15px;">
154 <h1>Expanded with a unique selection, scrollable</h1>
155 <section data-role="option-selector" id="os4" >
156 <ul>
157 <li data-value="0">
158 <p>Label 1</p>
159 </li>
160 <li data-value="1">
161 <p>Label 2</p>
162 </li>
163 <li data-value="2">
164 <p>Label 3</p>
165 </li>
166 <li data-value="3">
167 <p>Label 4</p>
168 </li>
169 <li data-value="4">
170 <p>Label 5</p>
171 </li>
172 <li data-value="5">
173 <p>Label 6</p>
174 </li>
175 <li data-value="7">
176 <p>Label 7</p>
177 </li>
178 <li data-value="8">
179 <p>Label 8</p>
141 </li>180 </li>
142 </ul>181 </ul>
143 </section>182 </section>

Subscribers

People subscribed via source and target branches