1
=== modified file '0.1/ambiance/css/default.css'
2
--- 0.1/ambiance/css/default.css	2013-11-27 16:48:37 +0000
3
+++ 0.1/ambiance/css/default.css	2013-12-16 18:05:54 +0000
4
@@ -34,6 +34,8 @@
5
34
@import url("toolbars.css");
34
@import url("toolbars.css");
6
35
@import url("shapes.css");
35
@import url("shapes.css");
7
36
@import url("indexbar.css");
36
@import url("indexbar.css");
8
37
@import url("option-selector.css");
9
38
10
37
39
11
38
* {
40
* {
12
39
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
41
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
13
40
42
14
=== added file '0.1/ambiance/css/option-selector.css'
15
--- 0.1/ambiance/css/option-selector.css	1970-01-01 00:00:00 +0000
16
+++ 0.1/ambiance/css/option-selector.css	2013-12-16 18:05:54 +0000
17
@@ -0,0 +1,137 @@
18
1
/*
19
2
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
20
3
 * License granted by Canonical Limited
21
4
 *
22
5
 * This file is part of ubuntu-html5-theme.
23
6
 *
24
7
 * This package is free software; you can redistribute it and/or modify
25
8
 * it under the terms of the GNU Lesser General Public License as
26
9
 * published by the Free Software Foundation; either version 3 of the
27
10
 * License, or
28
11
 * (at your option) any later version.
29
12
30
13
 * This package is distributed in the hope that it will be useful,
31
14
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
32
15
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
33
16
 * GNU General Public License for more details.
34
17
35
18
 * You should have received a copy of the GNU Lesser General Public
36
19
 * License along with this program. If not, see
37
20
 * <http://www.gnu.org/licenses/>.
38
21
 */
39
22
40
23
[data-role="option-selector"] {
41
24
    width: 100%;
42
25
    height: auto;
43
26
    margin: 0 auto;
44
27
    border: 1px solid #C7C7C7;
45
28
    overflow: hidden;
46
29
    -webkit-transition: height 0.4s;
47
30
    transition: height 0.4s;
48
31
    margin-top: 15px;
49
32
    margin-bottom: 15px;
50
33
    -webkit-border-radius: 10px;
51
34
    -moz-border-radius: 10px;
52
35
    border-radius: 10px;
53
36
    -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
54
37
    box-shadow: inset 0 2px 2px 0 #D5D5D5;
55
38
}
56
39
57
40
[data-role="option-selector"] li {
58
41
    text-decoration: none;
59
42
    color: #787878;
60
43
    display: block;
61
44
    height: 3rem;
62
45
    position: relative;
63
46
    line-height: 3rem;
64
47
    padding-left: 1rem;
65
48
    padding-right: 1.5rem;
66
49
    border: none;
67
50
    border-top: 1px solid #C7C7C7;
68
51
    font-size: 0.9rem;
69
52
    white-space: nowrap;
70
53
    overflow: hidden;
71
54
    text-overflow: ellipsis;
72
55
    cursor: pointer;
73
56
}
74
57
75
58
[data-role="option-selector"] ul li:first-child {
76
59
    border-top: 0!important;
77
60
}
78
61
79
62
[data-role="option-selector"] li.active:after{
80
63
    background: transparent url(../img/tick@30.png) no-repeat center center;
81
64
    background-size: 15px 15px;
82
65
    display: block;
83
66
    position: absolute;
84
67
    width: 2rem;
85
68
    height: 3rem;
86
69
    right: 0.5rem;
87
70
    content: "";
88
71
    top: 0;
89
72
}
90
73
91
74
[data-role="option-selector"] li.closed:after {
92
75
    background: transparent url(../img/chevron_down@30.png) no-repeat center center;
93
76
    background-size: 15px 15px;
94
77
    display: block;
95
78
    position: absolute;
96
79
    width: 2rem;
97
80
    height: 3rem;
98
81
    right: 0.5rem;
99
82
    content: "";
100
83
    top: 0;
101
84
}
102
85
103
86
[data-role="option-selector"] li aside {
104
87
    float: left;
105
88
    margin: -1.2em 0 0 0;
106
89
    max-width: 100%;
107
90
    vertical-align: bottom;
108
91
    position: relative;
109
92
    top: 50%;
110
93
    z-index: 2;
111
94
}
112
95
113
96
[data-role="option-selector"] li aside img {
114
97
    border-radius: 6px;
115
98
    margin-bottom: 0;
116
99
    float: left;
117
100
}
118
101
119
102
[data-role="option-selector"] li aside:after {
120
103
    background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
121
104
    background-size: 100% 100%;
122
105
    content: ' ';
123
106
    width: 100%;
124
107
    height: 100%;
125
108
    position: absolute;
126
109
    top: 0;
127
110
    left: 0;
128
111
}
129
112
130
113
[data-role="option-selector"] li aside+p {
131
114
    padding-left: 1rem;
132
115
}
133
116
134
117
[data-role="option-selector"] li p {
135
118
    white-space: nowrap;
136
119
    overflow: hidden;
137
120
    text-overflow: ellipsis;
138
121
    border: none;
139
122
    display: block;
140
123
    color: #787878;
141
124
    font-size: 0.9rem;
142
125
    padding-top: 0.5rem;
143
126
    line-height: 1rem;
144
127
}
145
128
146
129
[data-role="option-selector"] li p:only-child,
147
130
[data-role="option-selector"] li p:first-of-type:last-of-type {
148
131
    line-height: 2rem;
149
132
}
150
133
151
134
[data-role="option-selector"] li p+p {
152
135
    padding-top: 0.2rem;
153
136
    font-size: 0.7rem;
154
137
}
155
0
\ No newline at end of file
138
\ No newline at end of file
156
1
139
157
=== modified file '0.1/ambiance/img/back@18.png'
158
2
Binary files 0.1/ambiance/img/back@18.png	2013-06-22 14:52:18 +0000 and 0.1/ambiance/img/back@18.png	2013-12-16 18:05:54 +0000 differ
140
Binary files 0.1/ambiance/img/back@18.png	2013-06-22 14:52:18 +0000 and 0.1/ambiance/img/back@18.png	2013-12-16 18:05:54 +0000 differ
159
=== added file '0.1/ambiance/img/chevron_down@30.png'
160
3
Binary files 0.1/ambiance/img/chevron_down@30.png	1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/chevron_down@30.png	2013-12-16 18:05:54 +0000 differ
141
Binary files 0.1/ambiance/img/chevron_down@30.png	1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/chevron_down@30.png	2013-12-16 18:05:54 +0000 differ
161
=== modified file '0.1/ambiance/img/tick@30.png'
162
4
Binary files 0.1/ambiance/img/tick@30.png	2013-09-11 22:59:59 +0000 and 0.1/ambiance/img/tick@30.png	2013-12-16 18:05:54 +0000 differ
142
Binary files 0.1/ambiance/img/tick@30.png	2013-09-11 22:59:59 +0000 and 0.1/ambiance/img/tick@30.png	2013-12-16 18:05:54 +0000 differ
163
=== modified file '0.1/ambiance/js/core.js'
164
--- 0.1/ambiance/js/core.js	2013-12-11 10:13:17 +0000
165
+++ 0.1/ambiance/js/core.js	2013-12-16 18:05:54 +0000
166
@@ -344,13 +344,27 @@
167
344
        },
344
        },
168
345
345
169
346
        /**
346
        /**
170
347
         * Gets an Ubuntu Option Selector
171
348
         * @method optionselector
172
349
         * @param {ID} id - The element's id attrubute
173
350
         * @param {Boolean} expanded - Specifies whether the list is always expanded
174
351
         * @param {Boolean} multiSelection - If multiple choice selection is enabled the list is always expanded.
175
352
         * @return {OptionSelector}
176
353
         */
177
354
        optionselector: function (id, expanded, multiSelection) {
178
355
            if (typeof OptionSelector != 'undefined' && OptionSelector) {
179
356
                return new OptionSelector(id, expanded, multiSelection);
180
357
            }
181
358
        },
182
359
183
360
        /**
184
347
         * Gets the DOM element from a given selector
361
         * Gets the DOM element from a given selector
185
348
         * @method element
362
         * @method element
186
349
         * @return {Element} - The DOM element
363
         * @return {Element} - The DOM element
187
350
         * Gets the HTML element associated with an Ubuntu HTML5 JavaScript object
364
         * Gets the HTML element associated with an Ubuntu HTML5 JavaScript object
188
351
         */
365
         */
189
352
        element: function(selector) {
366
        element: function(selector) {
191
353
          return document.querySelector(selector);
367
            return document.querySelector(selector);
192
354
        },
368
        },
193
355
369
194
356
        /**
370
        /**
195
357
371
196
=== added file '0.1/ambiance/js/option-selector.js'
197
--- 0.1/ambiance/js/option-selector.js	1970-01-01 00:00:00 +0000
198
+++ 0.1/ambiance/js/option-selector.js	2013-12-16 18:05:54 +0000
199
@@ -0,0 +1,205 @@
200
1
/*
201
2
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
202
3
 * License granted by Canonical Limited
203
4
 *
204
5
 * This file is part of ubuntu-html5-theme.
205
6
 *
206
7
 * This package is free software; you can redistribute it and/or modify
207
8
 * it under the terms of the GNU Lesser General Public License as
208
9
 * published by the Free Software Foundation; either version 3 of the
209
10
 * License, or
210
11
 * (at your option) any later version.
211
12
212
13
 * This package is distributed in the hope that it will be useful,
213
14
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
214
15
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
215
16
 * GNU General Public License for more details.
216
17
217
18
 * You should have received a copy of the GNU Lesser General Public
218
19
 * License along with this program. If not, see
219
20
 * <http://www.gnu.org/licenses/>
220
21
 */
221
22
222
23
/**
223
24
 * OptionSelector is a component displaying either a single selected value or expanded multiple choice with an optional image and subtext when not expanded, when expanding it opens a
224
25
    listing of all the possible values for selection with an additional option of always being expanded. If multiple choice is selected the list is expanded automatically.
225
26
226
27
 * @class OptionSelector
227
28
 * @constructor
228
29
 * @namespace UbuntuUI
229
30
 * @example
230
31
      <section data-role="option-selector" id="OptionSelectorID">
231
32
        <ul>
232
33
          <li data-value="0">
233
34
            <p>Label 1</p>
234
35
          </li>
235
36
          <li data-value="1">
236
37
            <p>Label 2</p>
237
38
          </li>
238
39
          <li data-value="3">
239
40
            <p>Label 3</p>
240
41
          </li>
241
42
        </ul>
242
43
      </section>
243
44
244
45
      JavaScript:
245
46
      UI.optionselector.METHOD();
246
47
*/
247
48
var OptionSelector = (function () {
248
49
249
50
    var  __values = "";
250
51
251
52
    function OptionSelector (id, expanded, multiSelection) {
252
53
        this.currentIndex = 0;
253
54
        this.currentlyExpanded = false;
254
55
        this.expanded = typeof expanded !== 'undefined' ? expanded : false;
255
56
        this.multiSelection = typeof multiSelection !== 'undefined' ? multiSelection : false;
256
57
257
58
        if (this.multiSelection)
258
59
            this.expanded = true;
259
60
260
61
        this.optionselector = document.getElementById(id);
261
62
262
63
        if (this.optionselector == null) {
263
64
            console.error('The OptionSelector with the ID #' + this.id + ' doesn\'t exist');
264
65
            return;
265
66
        }
266
67
267
68
        this.optionselector_ul = this.optionselector.querySelectorAll('ul')[0];
268
69
        if (this.optionselector_ul == null)
269
70
            return;
270
71
271
72
        if (this.optionselector_ul.length == 0)
272
73
            return;
273
74
274
75
275
76
        this.optionselector_ul_li = this.optionselector.querySelectorAll('li');
276
77
        if (this.optionselector_ul == null)
277
78
            return;
278
79
        if (this.optionselector_ul_li.length == 0)
279
80
            return;
280
81
281
82
        [].forEach.call(this.optionselector_ul_li, function (elm) {
282
83
            elm.addEventListener('click', this.__onClicked.bind(this, elm), false);
283
84
        }.bind(this));
284
85
285
86
        if (this.expanded) {
286
87
            this.__open();
287
88
            this.optionselector_ul_li[0].classList.add('active');
288
89
        }
289
90
        else {
290
91
            if (this.currentlyExpanded) {
291
92
                this.__open();
292
93
                this.optionselector_ul_li[0].classList.add('active');
293
94
            } else {
294
95
                this.__close(this.currentIndex);
295
96
                this.optionselector_ul_li[0].classList.add('closed');
296
97
            }
297
98
        }
298
99
    }
299
100
300
101
    OptionSelector.prototype = {
301
102
302
103
        /**
303
104
         * @private
304
105
         */
305
106
        __onClicked: function (elm, e) {
306
107
            __values = "";
307
108
            this.currentIndex = 0;
308
109
309
110
            if (this.expanded) {
310
111
                if (!this.multiSelection) {
311
112
                    [].forEach.call(this.optionselector_ul_li, function (elm) {
312
113
                        elm.classList.remove('active');
313
114
                    });
314
115
                    elm.classList.toggle('active');
315
116
                }
316
117
                else {
317
118
                    elm.classList.toggle('active');
318
119
                }
319
120
            }
320
121
            else {
321
122
322
123
                for(i = 0, max = this.optionselector_ul_li.length; i < max; i++) {
323
124
                    if (this.optionselector_ul_li[i]==elm) break;
324
125
                    this.currentIndex++;
325
126
                }
326
127
327
128
                if (this.currentlyExpanded) {
328
129
                    this.__close(this.currentIndex);
329
130
                    elm.classList.add('active');
330
131
                    elm.classList.add('closed');
331
132
                    elm.style.borderTop = '0';
332
133
                }
333
134
                else {
334
135
                    elm.classList.add('active');
335
136
                    elm.classList.remove('closed');
336
137
                    this.__open();
337
138
                    elm.style.borderTop = '1px solid #C7C7C7';
338
139
                }
339
140
            }
340
141
341
142
            k = 0;
342
143
            for (i = 0, max = this.optionselector_ul_li.length; i < max; i++) {
343
144
                var li = this.optionselector_ul_li[i];
344
145
                if ((li.className).indexOf('active') > -1) {
345
146
                    if (k === 0) {
346
147
                        __values = li.getAttribute("data-value");
347
148
                    } else {
348
149
                        __values = __values + ", " + li.getAttribute("data-value");
349
150
                    }
350
151
                    k++;
351
152
                }
352
153
            }
353
154
354
155
            if (!this.currentlyExpanded && !this.expanded) {
355
156
                this.__ClickEvent(elm);
356
157
            }
357
158
            else {
358
159
                if (this.expanded) {
359
160
                    this.__ClickEvent(elm);
360
161
                }
361
162
            }
362
163
363
164
            e.preventDefault();
364
165
        },
365
166
366
167
        /**
367
168
         * @private
368
169
         */
369
170
        __ClickEvent: function (elm) {
370
171
            elm._evt = document.createEvent('Event');
371
172
            elm._evt.initEvent('onclicked', true, true);
372
173
            elm._evt.values = __values;
373
174
            elm.dispatchEvent(elm._evt);
374
175
        },
375
176
376
177
        /**
377
178
         * @private
378
179
         */
379
180
        __open: function () {
380
181
            this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
381
182
            this.optionselector_ul.style.webkitTransform = 'translate3d(0, 0rem,0)';
382
183
            this.optionselector.style.height = 3.07*this.optionselector_ul_li.length + 'rem';
383
184
            this.currentlyExpanded = true;
384
185
        },
385
186
386
187
        /**
387
188
         * @private
388
189
         */
389
190
        __close: function (currentIndex) {
390
191
            this.optionselector_ul.style['-webkit-transition-duration'] = '.4s';
391
192
            this.optionselector_ul.style.webkitTransform = 'translate3d(0,' + -3*currentIndex + 'rem,0)';
392
193
            this.optionselector.style.height = '3rem';
393
194
            [].forEach.call(this.optionselector_ul_li, function (elm) {
394
195
                elm.classList.remove('active');
395
196
            });
396
197
            this.currentlyExpanded = false;
397
198
        },
398
199
399
200
        onClicked : function(callback){
400
201
            this.optionselector_ul.addEventListener("onclicked", callback);
401
202
        }
402
203
    };
403
204
    return OptionSelector;
404
205
})();
405
0
206
406
=== added file 'examples/html5-theme/widgets/OptionSelector.html'
407
--- examples/html5-theme/widgets/OptionSelector.html	1970-01-01 00:00:00 +0000
408
+++ examples/html5-theme/widgets/OptionSelector.html	2013-12-16 18:05:54 +0000
409
@@ -0,0 +1,165 @@
410
1
<!--
411
2
 Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
412
3
 License granted by Canonical Limited
413
4
414
5
 This file is part of ubuntu-html5-theme.
415
6
416
7
 This package is free software; you can redistribute it and/or modify
417
8
 it under the terms of the GNU Lesser General Public License as
418
9
 published by the Free Software Foundation; either version 3 of the
419
10
 License, or
420
11
 (at your option) any later version.
421
12
422
13
 This package is distributed in the hope that it will be useful,
423
14
 but WITHOUT ANY WARRANTY; without even the implied warranty of
424
15
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
425
16
 GNU General Public License for more details.
426
17
427
18
 You should have received a copy of the GNU Lesser General Public
428
19
 License along with this program. If not, see
429
20
 <http://www.gnu.org/licenses/>.
430
21
-->
431
22
432
23
<!DOCTYPE html>
433
24
<html>
434
25
<head>
435
26
    <meta charset="utf-8" />
436
27
    <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
437
28
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
438
29
    <title>Ubuntu UI HTML5 Theme: ListItems</title>
439
30
    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
440
31
    <!-- Ubuntu UI javascript imports - Ambiance theme -->
441
32
    <script src="../../../0.1/ambiance/js/option-selector.js"></script>
442
33
    <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
443
34
    <script src="../../../0.1/ambiance/js/core.js"></script>
444
35
    <script src="../../../0.1/ambiance/js/pagestacks.js"></script>
445
36
    <script>
446
37
        var UI = new UbuntuUI();
447
38
        window.onload = function() {
448
39
            UI.init();
449
40
            os1 = UI.optionselector('os1');
450
41
451
42
            os1.onClicked(function (e) {
452
43
                console.log("optionselector1 values: " + e.values);
453
44
            })
454
45
455
46
            os2 = UI.optionselector('os2', expanded=false, multiSelection=true);
456
47
457
48
            os2.onClicked(function (e) {
458
49
                console.log("optionselector2 values: " + e.values);
459
50
            })
460
51
461
52
            os3 = UI.optionselector('os3', expanded=true, multiSelection=false);
462
53
463
54
            os3.onClicked(function (e) {
464
55
                console.log("optionselector3 values: " + e.values);
465
56
            })
466
57
        };
467
58
    </script>
468
59
</head>
469
60
<body>
470
61
    <div data-role="page">
471
62
        <header data-role="header">
472
63
            <nav data-role="navbar" class="tabs">
473
64
                <div class="tabs-inner">
474
65
                    <ul data-role="tabs">
475
66
                        <li class="active" data-role="tab">
476
67
                            <a href="#item1">Tab 1</a>
477
68
                        </li>
478
69
                        <li class="inactive" data-role="tab">
479
70
                            <a href="#item2">Tab 2</a>
480
71
                        </li>
481
72
                        <li class="inactive" data-role="tab">
482
73
                            <a href="#item3">Tab 3</a>
483
74
                        </li>
484
75
                    </ul>
485
76
                </div>
486
77
            </nav>
487
78
        </header>
488
79
489
80
        <div data-role="content">
490
81
            <div class="inset" style="margin: 15px;">
491
82
                <h1>Collapsed</h1>
492
83
                <section data-role="option-selector" id="os1">
493
84
                    <ul>
494
85
                        <li data-value="0">
495
86
                            <aside>
496
87
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
497
88
                            <p>Label 1</p>
498
89
                        </li>
499
90
                        <li data-value="1">
500
91
                            <aside>
501
92
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
502
93
                            <p>Label 2</p>
503
94
                        </li>
504
95
                        <li data-value="3">
505
96
                            <aside>
506
97
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
507
98
                            <p>Label 3</p>
508
99
                        </li>
509
100
                        <li data-value="4">
510
101
                            <aside>
511
102
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
512
103
                            <p>Label 4</p>
513
104
                        </li>
514
105
                        <li data-value="5">
515
106
                            <aside>
516
107
                                <img alt="placeholder" src="../../../0.1/ambiance/img/avatar_contacts_list@8.png"></aside>
517
108
                            <p>Label 5</p>
518
109
                        </li>
519
110
                    </ul>
520
111
                </section>
521
112
            </div>
522
113
            <div class="inset" style="margin: 15px;">
523
114
                <h1>Expanded with a multiple selections</h1>
524
115
                <section data-role="option-selector" id="os2">
525
116
                    <ul>
526
117
                        <li data-value="0">
527
118
                            <p>Label 1</p>
528
119
                            <p>Subtext 1</p>
529
120
                        </li>
530
121
                        <li data-value="1">
531
122
                            <p>Label 2</p>
532
123
                            <p>Subtext 2</p>
533
124
                        </li>
534
125
                        <li data-value="3">
535
126
                            <p>Label 3</p>
536
127
                            <p>Subtext 3</p>
537
128
                        </li>
538
129
                        <li data-value="4">
539
130
                            <p>Label 4</p>
540
131
                            <p>Subtext 4</p>
541
132
                        </li>
542
133
                        <li data-value="5">
543
134
                            <p>Label 5</p>
544
135
                            <p>Subtext 5</p>
545
136
                        </li>
546
137
                    </ul>
547
138
                </section>
548
139
            </div>
549
140
            <div class="inset" style="margin: 15px;">
550
141
                <h1>Expanded with a unique selection</h1>
551
142
                <section data-role="option-selector" id="os3">
552
143
                    <ul>
553
144
                        <li data-value="0">
554
145
                            <p>Label 1</p>
555
146
                        </li>
556
147
                        <li data-value="1">
557
148
                            <p>Label 2</p>
558
149
                        </li>
559
150
                        <li data-value="3">
560
151
                            <p>Label 3</p>
561
152
                        </li>
562
153
                        <li data-value="4">
563
154
                            <p>Label 4</p>
564
155
                        </li>
565
156
                        <li data-value="5">
566
157
                            <p>Label 5</p>
567
158
                        </li>
568
159
                    </ul>
569
160
                </section>
570
161
            </div>
571
162
        </div>
572
163
    </div>
573
164
</body>
574
165
</html>
575
0
\ No newline at end of file
166
\ No newline at end of file
Reviewer	Review Type	Status
Alexandre Abreu		Approve on 2013-12-17
PS Jenkins bot	continuous-integration	Approve on 2013-12-16
Review via email: mp+197882@code.launchpad.net