Merge lp:~daker/ubuntu-html5-theme/fix.1427729-1427909 into lp:ubuntu-html5-theme
- fix.1427729-1427909
- Merge into trunk
Proposed by
Adnane Belmadiaf
Status: | Merged | ||||||||
---|---|---|---|---|---|---|---|---|---|
Approved by: | David Barth | ||||||||
Approved revision: | 199 | ||||||||
Merged at revision: | 199 | ||||||||
Proposed branch: | lp:~daker/ubuntu-html5-theme/fix.1427729-1427909 | ||||||||
Merge into: | lp:ubuntu-html5-theme | ||||||||
Diff against target: |
871 lines (+300/-249) 7 files modified
0.1/ambiance/js/actionsbar.js (+0/-151) 0.1/ambiance/js/core.js (+276/-67) 0.1/ambiance/js/page.js (+2/-14) 0.1/ambiance/js/pagestacks.js (+18/-10) 0.1/ambiance/js/tabs.js (+2/-1) examples/html5-theme/widgets/Pagestack.html (+2/-5) examples/html5-theme/widgets/Tabs.html (+0/-1) |
||||||||
To merge this branch: | bzr merge lp:~daker/ubuntu-html5-theme/fix.1427729-1427909 | ||||||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Ubuntu HTML5 Theme Developers | Pending | ||
Review via email: mp+251678@code.launchpad.net |
Commit message
Removed ActionsBar deps
Fixed the back button in PageStack
Fixed PageStack actions
Description of the change
To post a comment you must log in.
- 198. By Alexandre Abreu
-
revert revision 196: push to trunk instead of usual landing
- 199. By Adnane Belmadiaf
-
Merged trunk
Removed actionbar.js call
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === removed file '0.1/ambiance/js/actionsbar.js' |
2 | --- 0.1/ambiance/js/actionsbar.js 2015-01-30 23:39:20 +0000 |
3 | +++ 0.1/ambiance/js/actionsbar.js 1970-01-01 00:00:00 +0000 |
4 | @@ -1,151 +0,0 @@ |
5 | -/* |
6 | - * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com> |
7 | - * License granted by Canonical Limited |
8 | - * |
9 | - * This file is part of ubuntu-html5-ui-toolkit. |
10 | - * |
11 | - * This package is free software; you can redistribute it and/or modify |
12 | - * it under the terms of the GNU Lesser General Public License as |
13 | - * published by the Free Software Foundation; either version 3 of the |
14 | - * License, or |
15 | - * (at your option) any later version. |
16 | - |
17 | - * This package is distributed in the hope that it will be useful, |
18 | - * but WITHOUT ANY WARRANTY; without even the implied warranty of |
19 | - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
20 | - * GNU General Public License for more details. |
21 | - |
22 | - * You should have received a copy of the GNU Lesser General Public |
23 | - * License along with this program. If not, see |
24 | - * <http://www.gnu.org/licenses/>. |
25 | - */ |
26 | - |
27 | -/** |
28 | - * An ActionBar is the JavaScript representation of an Ubuntu HTML5 app <em>ActionBar</em>. |
29 | - */ |
30 | - |
31 | -var ActionBar = (function () { |
32 | - |
33 | - function ActionBar(tabs, oldFooter, parent) { |
34 | - this._tabs = tabs; |
35 | - this._oldFooter = oldFooter; |
36 | - this._oldFooterParent = parent; |
37 | - |
38 | - this._overlay = document.querySelector('[data-role="overlay"]'); |
39 | - |
40 | - var newActionsBar = document.querySelector('[data-role="actions"]'); |
41 | - |
42 | - if (!this._oldFooter) |
43 | - return; |
44 | - |
45 | - var actionBar = this._oldFooter, |
46 | - actions = actionBar.querySelector('ul'), |
47 | - actionButtons = actionBar.querySelectorAll('ul li'), |
48 | - i = actionButtons.length; |
49 | - newActionsBarWrapper = document.createElement('div'); |
50 | - newActionsBarWrapper.setAttribute("data-role", "actions-wrapper"); |
51 | - newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id); |
52 | - |
53 | - if (actionButtons.length > 2) { |
54 | - // Maintain the first then replace the rest with an action overflow |
55 | - var firstAction = actionButtons[0], |
56 | - overflowList = document.createElement('ul'), |
57 | - /* Actions Button */ |
58 | - firstButton = document.createElement('button'), |
59 | - overflowButton = document.createElement('button'), |
60 | - /* Icon */ |
61 | - firstIcon = firstAction.querySelector('img').getAttribute('src'), |
62 | - /* ID*/ |
63 | - firstId = firstAction.querySelector('a').getAttribute('id'); |
64 | - |
65 | - var k =1; |
66 | - |
67 | - if (this._tabs._tabsitems.length == 1) { |
68 | - k = 2; |
69 | - this._tabs._tabtitle.style.width = "calc(100% - 155px)"; |
70 | - |
71 | - // Maintain the second |
72 | - var secondAction = actionButtons[1], |
73 | - /* Actions Button */ |
74 | - secondButton = document.createElement('button'), |
75 | - /* Icon */ |
76 | - secondIcon = secondAction.querySelector('img').getAttribute('src'), |
77 | - /* ID*/ |
78 | - secondId = secondAction.querySelector('a').getAttribute('id'); |
79 | - } |
80 | - |
81 | - overflowList.setAttribute('data-role', 'actions-overflow-list'); |
82 | - |
83 | - // Hide the overflow |
84 | - for (var x = k; x < i; x++) { |
85 | - var li = document.createElement('li'), |
86 | - a_id = actionButtons[x].querySelector('a').getAttribute('id'), |
87 | - lbl = actionButtons[x].querySelector('span').innerHTML, |
88 | - icon = actionButtons[x].querySelector('img').getAttribute('src'); |
89 | - |
90 | - li.innerHTML = lbl; |
91 | - li.setAttribute('id', a_id); |
92 | - |
93 | - li.style.backgroundImage = 'url( ' + icon + ' )'; |
94 | - overflowList.appendChild(li); |
95 | - |
96 | - li.onclick = function (e) { |
97 | - overflowList.classList.toggle('opened'); |
98 | - self._overlay.classList.toggle('active'); |
99 | - e.preventDefault(); |
100 | - }; |
101 | - } |
102 | - |
103 | - // Add the action overflow button |
104 | - overflowButton.setAttribute('data-role', 'actions-overflow-icon'); |
105 | - |
106 | - //firstButton.style.backgroundImage = 'url( ' + firstIcon + ' )'; |
107 | - firstButton.setAttribute('id', firstId); |
108 | - document.styleSheets[0].addRule('#'+ firstId + ':after','background-image: url("' + firstIcon + '");'); |
109 | - |
110 | - newActionsBarWrapper.appendChild(firstButton); |
111 | - if (this._tabs._tabsitems.length == 1) { |
112 | - secondButton.setAttribute('id', secondId); |
113 | - document.styleSheets[0].addRule('#'+ secondId + ':after','background-image: url("' + secondIcon + '");'); |
114 | - newActionsBarWrapper.appendChild(secondButton); |
115 | - } |
116 | - newActionsBarWrapper.appendChild(overflowButton); |
117 | - newActionsBarWrapper.appendChild(overflowList); |
118 | - |
119 | - self = this; |
120 | - overflowButton.onclick = function (e) { |
121 | - overflowList.classList.toggle('opened'); |
122 | - self._overlay.classList.toggle('active'); |
123 | - self._tabs._tabs.classList.remove('opened'); |
124 | - e.preventDefault(); |
125 | - }; |
126 | - } else { |
127 | - |
128 | - for (var y = 0; y < i; y++) { |
129 | - var actionButton = document.createElement('button'), |
130 | - actionButton_lbl = actionButtons[y].querySelector('span').innerHTML, |
131 | - actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'), |
132 | - actionButton_id = actionButtons[y].querySelector('a').getAttribute('id'); |
133 | - |
134 | - actionButton.setAttribute('id', actionButton_id); |
135 | - document.styleSheets[0].addRule('#'+ actionButton_id + ':after','background-image: url("' + actionButton_icon + '");'); |
136 | - newActionsBarWrapper.appendChild(actionButton); |
137 | - } |
138 | - } |
139 | - |
140 | - newActionsBar.appendChild(newActionsBarWrapper); |
141 | - }; |
142 | - |
143 | - ActionBar.prototype = { |
144 | - /** |
145 | - * Returns the DOM element associated with the id this widget is bind to. |
146 | - * @method element |
147 | - * @example |
148 | - var myactionbar = UI.actionbar("actionbarid").element(); |
149 | - */ |
150 | - element: function () { |
151 | - return this.actionbar; |
152 | - } |
153 | - }; |
154 | - return ActionBar; |
155 | -})(); |
156 | |
157 | === modified file '0.1/ambiance/js/core.js' |
158 | --- 0.1/ambiance/js/core.js 2015-03-04 21:10:49 +0000 |
159 | +++ 0.1/ambiance/js/core.js 2015-03-04 21:23:40 +0000 |
160 | @@ -38,22 +38,23 @@ |
161 | [...] |
162 | }; |
163 | */ |
164 | -var UbuntuUI = (function () { |
165 | +var UbuntuUI = (function() { |
166 | |
167 | PAGESTACK_BACK_ID = 'ubuntu-pagestack-back'; |
168 | |
169 | function __hasPageStack(document) { |
170 | - return document.querySelectorAll("[data-role='pagestack']") != null; |
171 | + return document.querySelectorAll("[data-role='pagestack']").length >= 1; |
172 | }; |
173 | |
174 | function __hasTabs(document) { |
175 | - return document.querySelectorAll("[data-role='tabs']") != null; |
176 | + return document.querySelectorAll("[data-role='tabs']").length >= 1; |
177 | }; |
178 | |
179 | function __createBackButtonListItem() { |
180 | var backBtn = document.createElement('button'); |
181 | backBtn.setAttribute('data-role', 'back-btn'); |
182 | - backBtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.random()); |
183 | + backBtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.floor(Math.random())); |
184 | + backBtn.disabled = true; |
185 | return backBtn; |
186 | }; |
187 | |
188 | @@ -61,9 +62,9 @@ |
189 | var U = this; |
190 | U.isTouch = "ontouchstart" in window; |
191 | U.touchEvents = { |
192 | - touchStart: ['touchstart','mousedown'], |
193 | - touchMove: ['touchmove','mousemove'], |
194 | - touchEnd: ['touchend','mouseup'], |
195 | + touchStart: ['touchstart', 'mousedown'], |
196 | + touchMove: ['touchmove', 'mousemove'], |
197 | + touchEnd: ['touchend', 'mouseup'], |
198 | touchLeave: ['mouseleave'], |
199 | }; |
200 | |
201 | @@ -75,7 +76,7 @@ |
202 | this._content.style.paddingTop = this._headerHeight + "px"; |
203 | |
204 | var self = this; |
205 | - window.onscroll = function(event){ |
206 | + window.onscroll = function(event) { |
207 | var scrollTop = window.pageYOffset; |
208 | var y = Math.min(self._headerHeight, Math.max(0, (self._y + scrollTop - self._prevScrollTop))); |
209 | |
210 | @@ -93,22 +94,7 @@ |
211 | }; |
212 | |
213 | UbuntuUI.prototype = { |
214 | - __setupPageStack: function (d) { |
215 | - // TODO validate no more than one page stack etc. |
216 | - // d.querySelectorAll("[data-role='pagestack']") |
217 | - |
218 | - // FIXME: support multiple page stack & complex docs? |
219 | - var pagestacks = d.querySelectorAll("[data-role='pagestack']"); |
220 | - if (pagestacks.length == 0) |
221 | - return; |
222 | - var pagestack = pagestacks[0]; |
223 | - |
224 | - this._pageStack = new Pagestack(pagestack); |
225 | - |
226 | - var pages = pagestack.querySelectorAll("[data-role='page']"); |
227 | - if (pages.length > 0) { |
228 | - this._pageStack.push(pages[0].getAttribute('id')); |
229 | - } |
230 | + __setupPageStack: function(d) { |
231 | |
232 | var header = d.querySelector("[data-role='header']"); |
233 | |
234 | @@ -122,13 +108,31 @@ |
235 | header.insertBefore(backBtn, header.firstChild); |
236 | |
237 | var self = this; |
238 | - backBtn.onclick = function (e) { |
239 | - if (self._pageStack.depth() > 1){ |
240 | + backBtn.onclick = function(e) { |
241 | + if (self._pageStack.depth() > 1) { |
242 | self._pageStack.pop(); |
243 | } |
244 | e.preventDefault(); |
245 | }; |
246 | |
247 | + this._content = document.querySelector('[data-role="content"]'); |
248 | + this._overlay = document.createElement('div'); |
249 | + this._overlay.setAttribute('data-role', 'overlay'); |
250 | + this._content.appendChild(this._overlay); |
251 | + |
252 | + // FIXME: support multiple page stack & complex docs? |
253 | + var pagestacks = d.querySelectorAll("[data-role='pagestack']"); |
254 | + if (pagestacks.length == 0) |
255 | + return; |
256 | + var pagestack = pagestacks[0]; |
257 | + |
258 | + this._pageStack = new Pagestack(pagestack); |
259 | + |
260 | + var pages = pagestack.querySelectorAll("[data-role='page']"); |
261 | + if (pages.length > 0) { |
262 | + this._pageStack.push(pages[0].getAttribute('id')); |
263 | + } |
264 | + |
265 | this._pageActions = d.createElement('div'); |
266 | this._pageActions.setAttribute('data-role', 'actions'); |
267 | |
268 | @@ -145,7 +149,7 @@ |
269 | s.webkitTransform = s.transform = 'translate3d(0, ' + y + 'px, 0)'; |
270 | }, |
271 | |
272 | - __setupPage: function (document) { |
273 | + __setupPage: function(document) { |
274 | if (this._pageStack != null) |
275 | return; |
276 | if (__hasPageStack(document)) { |
277 | @@ -163,7 +167,7 @@ |
278 | var footers = apptabsElements[idx].querySelectorAll("[data-role='footer']"); |
279 | if (footers.length >= 0) { |
280 | // TODO: validate footer count: should be 1 footer |
281 | - actionBar = new ActionBar(this._tabs, footers[0], apptabsElements[idx]); |
282 | + actionBar = this.__setupTabAction(footers[0], apptabsElements[idx]); |
283 | if (footers[0] != null) footers[0].remove(); |
284 | } |
285 | } |
286 | @@ -175,14 +179,14 @@ |
287 | var footers = apppagesElements[idx].querySelectorAll("[data-role='footer']"); |
288 | if (footers.length >= 0) { |
289 | // TODO: validate footer count: should be 1 footer |
290 | - actionBar = new ActionBar(this._tabs, footers[0], apppagesElements[idx]); |
291 | + actionBar = this.__setupPageAction(footers[0], apppagesElements[idx]); |
292 | if (footers[0] != null) footers[0].remove(); |
293 | } |
294 | } |
295 | } |
296 | }, |
297 | |
298 | - __setupTabs: function (document) { |
299 | + __setupTabs: function(document) { |
300 | if (this._tabs != null) |
301 | return; |
302 | if (__hasTabs(document)) { |
303 | @@ -191,7 +195,7 @@ |
304 | if (apptabsElements.length == 0) |
305 | return; |
306 | this._tabs = new Tabs(apptabsElements[0]); |
307 | - this._tabs.onTabChanged(function (e) { |
308 | + this._tabs.onTabChanged(function(e) { |
309 | if (!e || !e.infos) |
310 | return; |
311 | if (e.infos.tabId) { |
312 | @@ -199,14 +203,229 @@ |
313 | } |
314 | }.bind(this)); |
315 | } |
316 | - } |
317 | + } |
318 | + }, |
319 | + |
320 | + |
321 | + __setupTabAction: function(oldFooter, parent) { |
322 | + this._oldFooter = oldFooter; |
323 | + this._oldFooterParent = parent; |
324 | + |
325 | + this._overlay = document.querySelector('[data-role="overlay"]'); |
326 | + |
327 | + var newActionsBar = document.querySelector('[data-role="actions"]'); |
328 | + |
329 | + if (!this._oldFooter) |
330 | + return; |
331 | + |
332 | + var actionBar = this._oldFooter, |
333 | + actions = actionBar.querySelector('ul'), |
334 | + actionButtons = actionBar.querySelectorAll('ul li'), |
335 | + i = actionButtons.length; |
336 | + newActionsBarWrapper = document.createElement('div'); |
337 | + newActionsBarWrapper.setAttribute("data-role", "actions-wrapper"); |
338 | + newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id); |
339 | + |
340 | + if (actionButtons.length > 2) { |
341 | + // Maintain the first item then replace the rest with an action overflow |
342 | + var firstAction = actionButtons[0], |
343 | + overflowList = document.createElement('ul'), |
344 | + /* Action Button */ |
345 | + firstButton = document.createElement('button'), |
346 | + overflowButton = document.createElement('button'), |
347 | + /* Icon */ |
348 | + firstIcon = firstAction.querySelector('img').getAttribute('src'), |
349 | + /* ID*/ |
350 | + firstId = firstAction.querySelector('a').getAttribute('id'), |
351 | + k = 1; |
352 | + |
353 | + if (this._tabs != 'undefined' && this._tabs) { |
354 | + if (this._tabs._tabsItems.length == 1) { |
355 | + k = 2; |
356 | + this._tabs._tabTitle.style.width = "calc(100% - 155px)"; |
357 | + |
358 | + // Maintain the second item |
359 | + var secondAction = actionButtons[1], |
360 | + /* Action Button */ |
361 | + secondButton = document.createElement('button'), |
362 | + /* Icon */ |
363 | + secondIcon = secondAction.querySelector('img').getAttribute('src'), |
364 | + /* ID*/ |
365 | + secondId = secondAction.querySelector('a').getAttribute('id'); |
366 | + } |
367 | + } |
368 | + |
369 | + overflowList.setAttribute('data-role', 'actions-overflow-list'); |
370 | + |
371 | + // Hide the overflow |
372 | + for (var x = k; x < i; x++) { |
373 | + var li = document.createElement('li'), |
374 | + a_id = actionButtons[x].querySelector('a').getAttribute('id'), |
375 | + lbl = actionButtons[x].querySelector('span').innerHTML, |
376 | + icon = actionButtons[x].querySelector('img').getAttribute('src'); |
377 | + |
378 | + li.innerHTML = lbl; |
379 | + li.setAttribute('id', a_id); |
380 | + |
381 | + li.style.backgroundImage = 'url( ' + icon + ' )'; |
382 | + overflowList.appendChild(li); |
383 | + |
384 | + li.onclick = function(e) { |
385 | + overflowList.classList.toggle('opened'); |
386 | + self._overlay.classList.toggle('active'); |
387 | + e.preventDefault(); |
388 | + }; |
389 | + } |
390 | + |
391 | + // Add the action overflow button |
392 | + overflowButton.setAttribute('data-role', 'actions-overflow-icon'); |
393 | + |
394 | + //firstButton.style.backgroundImage = 'url( ' + firstIcon + ' )'; |
395 | + firstButton.setAttribute('id', firstId); |
396 | + document.styleSheets[0].addRule('#' + firstId + ':after', 'background-image: url("' + firstIcon + '");'); |
397 | + |
398 | + newActionsBarWrapper.appendChild(firstButton); |
399 | + if (this._tabs != 'undefined' && this._tabs) { |
400 | + if (this._tabs._tabsItems.length == 1) { |
401 | + secondButton.setAttribute('id', secondId); |
402 | + document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");'); |
403 | + newActionsBarWrapper.appendChild(secondButton); |
404 | + } |
405 | + } |
406 | + newActionsBarWrapper.appendChild(overflowButton); |
407 | + newActionsBarWrapper.appendChild(overflowList); |
408 | + |
409 | + self = this; |
410 | + overflowButton.onclick = function(e) { |
411 | + overflowList.classList.toggle('opened'); |
412 | + self._overlay.classList.toggle('active'); |
413 | + self._tabs._tabs.classList.remove('opened'); |
414 | + e.preventDefault(); |
415 | + }; |
416 | + } else { |
417 | + |
418 | + for (var y = 0; y < i; y++) { |
419 | + var actionButton = document.createElement('button'), |
420 | + actionButton_lbl = actionButtons[y].querySelector('span').innerHTML, |
421 | + actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'), |
422 | + actionButton_id = actionButtons[y].querySelector('a').getAttribute('id'); |
423 | + |
424 | + actionButton.setAttribute('id', actionButton_id); |
425 | + document.styleSheets[0].addRule('#' + actionButton_id + ':after', 'background-image: url("' + actionButton_icon + '");'); |
426 | + newActionsBarWrapper.appendChild(actionButton); |
427 | + } |
428 | + } |
429 | + |
430 | + newActionsBar.appendChild(newActionsBarWrapper); |
431 | + }, |
432 | + |
433 | + |
434 | + __setupPageAction: function(oldFooter, parent) { |
435 | + this._oldFooter = oldFooter; |
436 | + this._oldFooterParent = parent; |
437 | + this._overlay = document.querySelector('[data-role="overlay"]'); |
438 | + |
439 | + var newActionsBar = document.querySelector('[data-role="actions"]'); |
440 | + |
441 | + if (!this._oldFooter) |
442 | + return; |
443 | + |
444 | + var actionBar = this._oldFooter, |
445 | + actions = actionBar.querySelector('ul'), |
446 | + actionButtons = actionBar.querySelectorAll('ul li'), |
447 | + i = actionButtons.length; |
448 | + |
449 | + newActionsBarWrapper = document.createElement('div'); |
450 | + newActionsBarWrapper.setAttribute("data-role", "actions-wrapper"); |
451 | + newActionsBarWrapper.setAttribute("id", "actions_" + this._oldFooterParent.id); |
452 | + |
453 | + if (actionButtons.length > 2) { |
454 | + // Maintain the first then replace the rest with an action overflow |
455 | + var firstAction = actionButtons[0], |
456 | + overflowList = document.createElement('ul'), |
457 | + /* Actions Button */ |
458 | + firstButton = document.createElement('button'), |
459 | + overflowButton = document.createElement('button'), |
460 | + /* Icon */ |
461 | + firstIcon = firstAction.querySelector('img').getAttribute('src'), |
462 | + /* ID*/ |
463 | + firstId = firstAction.querySelector('a').getAttribute('id'), |
464 | + k = 2; |
465 | + |
466 | + this._tabTitle.style.width = "calc(100% - 155px)"; |
467 | + |
468 | + // Maintain the second item |
469 | + var secondAction = actionButtons[1], |
470 | + /* Action Button */ |
471 | + secondButton = document.createElement('button'), |
472 | + /* Icon */ |
473 | + secondIcon = secondAction.querySelector('img').getAttribute('src'), |
474 | + /* ID*/ |
475 | + secondId = secondAction.querySelector('a').getAttribute('id'); |
476 | + |
477 | + overflowList.setAttribute('data-role', 'actions-overflow-list'); |
478 | + |
479 | + // Hide the overflow |
480 | + for (var x = k; x < i; x++) { |
481 | + var li = document.createElement('li'), |
482 | + a_id = actionButtons[x].querySelector('a').getAttribute('id'), |
483 | + lbl = actionButtons[x].querySelector('span').innerHTML, |
484 | + icon = actionButtons[x].querySelector('img').getAttribute('src'); |
485 | + |
486 | + li.innerHTML = lbl; |
487 | + li.setAttribute('id', a_id); |
488 | + |
489 | + li.style.backgroundImage = 'url( ' + icon + ' )'; |
490 | + overflowList.appendChild(li); |
491 | + |
492 | + li.onclick = function(e) { |
493 | + overflowList.classList.toggle('opened'); |
494 | + self._overlay.classList.toggle('active'); |
495 | + e.preventDefault(); |
496 | + }; |
497 | + } |
498 | + |
499 | + // Add the action overflow button |
500 | + overflowButton.setAttribute('data-role', 'actions-overflow-icon'); |
501 | + |
502 | + firstButton.setAttribute('id', firstId); |
503 | + document.styleSheets[0].addRule('#' + firstId + ':after', 'background-image: url("' + firstIcon + '");'); |
504 | + |
505 | + newActionsBarWrapper.appendChild(firstButton); |
506 | + secondButton.setAttribute('id', secondId); |
507 | + document.styleSheets[0].addRule('#' + secondId + ':after', 'background-image: url("' + secondIcon + '");'); |
508 | + newActionsBarWrapper.appendChild(secondButton); |
509 | + newActionsBarWrapper.appendChild(overflowButton); |
510 | + newActionsBarWrapper.appendChild(overflowList); |
511 | + |
512 | + self = this; |
513 | + overflowButton.onclick = function(e) { |
514 | + overflowList.classList.toggle('opened'); |
515 | + self._overlay.classList.toggle('active'); |
516 | + e.preventDefault(); |
517 | + }; |
518 | + } else { |
519 | + |
520 | + for (var y = 0; y < i; y++) { |
521 | + var actionButton = document.createElement('button'), |
522 | + actionButton_lbl = actionButtons[y].querySelector('span').innerHTML, |
523 | + actionButton_icon = actionButtons[y].querySelector('img').getAttribute('src'), |
524 | + actionButton_id = actionButtons[y].querySelector('a').getAttribute('id'); |
525 | + |
526 | + actionButton.setAttribute('id', actionButton_id); |
527 | + document.styleSheets[0].addRule('#' + actionButton_id + ':after', 'background-image: url("' + actionButton_icon + '");'); |
528 | + newActionsBarWrapper.appendChild(actionButton); |
529 | + } |
530 | + } |
531 | + |
532 | + newActionsBar.appendChild(newActionsBarWrapper); |
533 | }, |
534 | |
535 | /** |
536 | * Required call that initializes the UbuntuUI object |
537 | * @method {} init |
538 | */ |
539 | - init: function () { |
540 | + init: function() { |
541 | this.__setupTabs(document); |
542 | this.__setupPage(document); |
543 | this.__setupActionsBar(document); |
544 | @@ -218,11 +437,10 @@ |
545 | * @param {ID} id - The element's id attribute |
546 | * @return {Page} - The Page with the specified id |
547 | */ |
548 | - page: function (id) { |
549 | - if (typeof Page != 'undefined' && Page ) { |
550 | + page: function(id) { |
551 | + if (typeof Page != 'undefined' && Page) { |
552 | return new Page(id); |
553 | - } |
554 | - else { |
555 | + } else { |
556 | console.error('Could not find the Page element. You might be missing the "page.js" Page definition script. Please add a <script> declaration to include it.'); |
557 | } |
558 | }, |
559 | @@ -233,11 +451,10 @@ |
560 | * @param {ID} id - The element's id attribute |
561 | * @return {Tab} - The Tab with the specified id |
562 | */ |
563 | - tab: function (id) { |
564 | - if (typeof Tab != 'undefined' && Tab ) { |
565 | + tab: function(id) { |
566 | + if (typeof Tab != 'undefined' && Tab) { |
567 | return new Tab(id); |
568 | - } |
569 | - else { |
570 | + } else { |
571 | console.error('Could not find the Tab element. You might be missing the "tab.js" Tab definition script. Please add a <script> declaration to include it.'); |
572 | } |
573 | }, |
574 | @@ -248,11 +465,10 @@ |
575 | * @param {ID} id - The element's id attribute |
576 | * @return {Shape} - The Shape with the specified id |
577 | */ |
578 | - shape: function (id) { |
579 | - if (typeof Shape != 'undefined' && Shape ) { |
580 | + shape: function(id) { |
581 | + if (typeof Shape != 'undefined' && Shape) { |
582 | return new Shape(id); |
583 | - } |
584 | - else { |
585 | + } else { |
586 | console.error('Could not find the Shape element. You might be missing the "shape.js" Shape definition script. Please add a <script> declaration to include it.'); |
587 | } |
588 | }, |
589 | @@ -263,11 +479,10 @@ |
590 | * @param {ID} id - The element's id attribute |
591 | * @return {Button} - The Button with the specified id |
592 | */ |
593 | - button: function (id) { |
594 | + button: function(id) { |
595 | if (typeof Button != 'undefined' && Button) { |
596 | return new Button(id); |
597 | - } |
598 | - else { |
599 | + } else { |
600 | console.error('Could not find the Button element. You might be missing the "button.js" Button definition script. Please add a <script> declaration to include it.'); |
601 | } |
602 | }, |
603 | @@ -278,7 +493,7 @@ |
604 | * @param {ID} id - The element's id attribute |
605 | * @return {Progress} - The Progress with the specified id |
606 | */ |
607 | - progress: function (id) { |
608 | + progress: function(id) { |
609 | if (typeof Progress != 'undefined' && Progress) { |
610 | return new Progress(id); |
611 | } |
612 | @@ -290,11 +505,10 @@ |
613 | * @param {ID} id - The element's id attribute |
614 | * @return {Dialog} - The Dialog with the specified id |
615 | */ |
616 | - dialog: function (id) { |
617 | + dialog: function(id) { |
618 | if (typeof Dialog != 'undefined' && Dialog) { |
619 | return new Dialog(id); |
620 | - } |
621 | - else { |
622 | + } else { |
623 | console.error('Could not find the Dialog element. You might be missing the "dialog.js" Dialog definition script. Please add a <script> declaration to include it.'); |
624 | } |
625 | }, |
626 | @@ -306,11 +520,10 @@ |
627 | * @param {ID} id - The element's id attribute |
628 | * @return {Popover} - The Popover with the specified id |
629 | */ |
630 | - popover: function (elem, id) { |
631 | + popover: function(elem, id) { |
632 | if (typeof Popover != 'undefined' && Popover) { |
633 | return new Popover(elem, id); |
634 | - } |
635 | - else { |
636 | + } else { |
637 | console.error('Could not find the Popover element. You might be missing the "popover.js" Popover definition script. Please add a <script> declaration to include it.'); |
638 | } |
639 | }, |
640 | @@ -321,11 +534,10 @@ |
641 | * @param {ID} id - The element's id attribute |
642 | * @return {Header} - The Header with the specified id |
643 | */ |
644 | - header: function (id) { |
645 | + header: function(id) { |
646 | if (typeof Header != 'undefined' && Header) { |
647 | return new Header(id); |
648 | - } |
649 | - else { |
650 | + } else { |
651 | console.error('Could not find the Header element. You might be missing the "header.js" Header definition script. Please add a <script> declaration to include it.'); |
652 | } |
653 | }, |
654 | @@ -336,11 +548,10 @@ |
655 | * @param {ID} id - The element's id attribute |
656 | * @return {Toolbar} - The Toolbar with the specified id |
657 | */ |
658 | - toolbar: function (id) { |
659 | + toolbar: function(id) { |
660 | if (typeof Toolbar != 'undefined' && Toolbar) { |
661 | return new Toolbar(id, this.__getTabInfosDelegate()); |
662 | - } |
663 | - else { |
664 | + } else { |
665 | console.error('Could not find the Toolbar element. You might be missing the "toolbar.js" Toolbar definition script. Please add a <script> declaration to include it.'); |
666 | } |
667 | }, |
668 | @@ -351,11 +562,10 @@ |
669 | * @param {Selector} selector - A selector that JavaScript querySelector method understands |
670 | * @return {List} |
671 | */ |
672 | - list: function (selector) { |
673 | + list: function(selector) { |
674 | if (typeof List != 'undefined' && List) { |
675 | return new List(selector); |
676 | - } |
677 | - else { |
678 | + } else { |
679 | console.error('Could not find the List element. You might be missing the "list.js" List definition script. Please add a <script> declaration to include it.'); |
680 | } |
681 | }, |
682 | @@ -368,11 +578,10 @@ |
683 | * @param {Boolean} multiSelection - If multiple choice selection is enabled the list is always expanded. |
684 | * @return {OptionSelector} |
685 | */ |
686 | - optionselector: function (id, expanded, multiSelection) { |
687 | + optionselector: function(id, expanded, multiSelection) { |
688 | if (typeof OptionSelector != 'undefined' && OptionSelector) { |
689 | return new OptionSelector(id, expanded, multiSelection); |
690 | - } |
691 | - else { |
692 | + } else { |
693 | console.error('Could not find the OptionSelector element. You might be missing the "option-selector.js" OptionSelector definition script. Please add a <script> declaration to include it.'); |
694 | } |
695 | }, |
696 | |
697 | === modified file '0.1/ambiance/js/page.js' |
698 | --- 0.1/ambiance/js/page.js 2014-05-25 22:08:39 +0000 |
699 | +++ 0.1/ambiance/js/page.js 2015-03-04 21:23:40 +0000 |
700 | @@ -58,9 +58,7 @@ |
701 | this.onActivatedCallbacks = []; |
702 | |
703 | this._header = document.querySelector('div[data-role="mainview"] header'); |
704 | - this._tabtitle = this._header.querySelector('[data-role="tabtitle"]'); |
705 | - this._backbtn = this._header.querySelector('[data-role="back-btn"]'); |
706 | - |
707 | + this._tabTitle = this._header.querySelector('[data-role="tabtitle"]'); |
708 | this.__setup(); |
709 | }; |
710 | Page.PAGE_ACTIVATED_EVENT = 'ubuntu-html5-on-page-activated'; |
711 | @@ -178,7 +176,7 @@ |
712 | } catch (e) {} |
713 | |
714 | title = title || DEFAULT_TITLE; |
715 | - this._tabtitle.textContent= title; |
716 | + this._tabTitle.textContent= title; |
717 | }, |
718 | |
719 | /** |
720 | @@ -192,14 +190,6 @@ |
721 | element.getAttribute('data-role') === 'page'; |
722 | }, |
723 | |
724 | - |
725 | - /** |
726 | - * @private |
727 | - */ |
728 | - isFirst_Page: function (element) { |
729 | - return element.parentNode.querySelector(':first-child') == element; |
730 | - }, |
731 | - |
732 | /** |
733 | * @private |
734 | */ |
735 | @@ -210,8 +200,6 @@ |
736 | if (!this.isPage(page)) { |
737 | return; |
738 | } |
739 | - |
740 | - this._backbtn.disabled = this.isFirst_Page(page); |
741 | page.style.display = displayStyle; |
742 | }, |
743 | |
744 | |
745 | === modified file '0.1/ambiance/js/pagestacks.js' |
746 | --- 0.1/ambiance/js/pagestacks.js 2014-09-17 17:44:50 +0000 |
747 | +++ 0.1/ambiance/js/pagestacks.js 2015-03-04 21:23:40 +0000 |
748 | @@ -86,9 +86,10 @@ |
749 | } |
750 | }; |
751 | |
752 | - function Pagestack(pagestack) { |
753 | + function Pagestack(pageStack) { |
754 | this._pages = []; |
755 | - this._pagestack = pagestack; |
756 | + this._pageStack = pageStack; |
757 | + this._backBtn = document.querySelector('[data-role="back-btn"]'); |
758 | }; |
759 | |
760 | Pagestack.prototype = { |
761 | @@ -161,7 +162,7 @@ |
762 | }, |
763 | |
764 | onPageChanged : function(callback){ |
765 | - this._pagestack.addEventListener("pagechanged", callback); |
766 | + this._pageStack.addEventListener("pagechanged", callback); |
767 | }, |
768 | |
769 | /** |
770 | @@ -170,15 +171,11 @@ |
771 | __setAllPagesVisibility: function (visible) { |
772 | var visibility = visible ? "block" : "none"; |
773 | |
774 | - var children = [].slice.call(this._pagestack.children); |
775 | + var children = [].slice.call(this._pageStack.children); |
776 | children.forEach(function(element) { |
777 | var pageHelper = new Page(); |
778 | if (pageHelper.isPage(element)) { |
779 | - el.style.display = visibility; |
780 | - // treat footers separately |
781 | - var footer = el.querySelector('footer'); |
782 | - if (footer) |
783 | - footer.style.display = visibility; |
784 | + element.style.display = visibility; |
785 | } |
786 | }); |
787 | }, |
788 | @@ -194,10 +191,21 @@ |
789 | * @private |
790 | */ |
791 | __dispatchPageChanged: function (page) { |
792 | + this._backBtn.disabled = (this.depth() == 1); |
793 | + |
794 | + [].forEach.call( document.querySelectorAll('[data-role="actions-wrapper"]'), function(el) { |
795 | + el.style.display = 'none'; |
796 | + }); |
797 | + |
798 | + var pageActions = document.getElementById("actions_" + page); |
799 | + if (pageActions !== null) { |
800 | + pageActions.style.display = 'block'; |
801 | + } |
802 | + |
803 | var event = document.createEvent('Event'); |
804 | event.initEvent('pagechanged',true,true); |
805 | event.page = page; |
806 | - this._pagestack.dispatchEvent(event); |
807 | + this._pageStack.dispatchEvent(event); |
808 | }, |
809 | }; |
810 | |
811 | |
812 | === modified file '0.1/ambiance/js/tabs.js' |
813 | --- 0.1/ambiance/js/tabs.js 2015-01-15 22:02:35 +0000 |
814 | +++ 0.1/ambiance/js/tabs.js 2015-03-04 21:23:40 +0000 |
815 | @@ -167,7 +167,7 @@ |
816 | var backbtn = document.createElement('button'); |
817 | backbtn.setAttribute('data-role', 'back-btn'); |
818 | backbtn.setAttribute('id', PAGESTACK_BACK_ID + '-' + Math.floor(Math.random())); |
819 | - backbtn.style.display = 'none'; |
820 | + backbtn.disabled = true; |
821 | |
822 | if(this._tabs.childElementCount > 1) { |
823 | this._tabsbtn = document.createElement('button'); |
824 | @@ -245,6 +245,7 @@ |
825 | * @private |
826 | */ |
827 | __dispatchTabChangedEvent: function (tabId) { |
828 | + |
829 | this._evt = document.createEvent('Event'); |
830 | this._evt.initEvent('tabchanged', true, true); |
831 | this._evt.infos = { |
832 | |
833 | === modified file 'examples/html5-theme/widgets/Pagestack.html' |
834 | --- examples/html5-theme/widgets/Pagestack.html 2014-05-25 23:29:28 +0000 |
835 | +++ examples/html5-theme/widgets/Pagestack.html 2015-03-04 21:23:40 +0000 |
836 | @@ -48,11 +48,9 @@ |
837 | <script src="../../../0.1/ambiance/js/popovers.js"></script> |
838 | <script src="../../../0.1/ambiance/js/list.js"></script> |
839 | <script src="../../../0.1/ambiance/js/toolbars.js"></script> |
840 | - <script src="../../../0.1/ambiance/js/actionsbar.js"></script> |
841 | <script src="../../../0.1/ambiance/js/tab.js"></script> |
842 | <script src="../../../0.1/ambiance/js/tabs.js"></script> |
843 | |
844 | - <script src="../apps/rss-reader/app.js"></script> |
845 | </head> |
846 | |
847 | <body> |
848 | @@ -138,9 +136,8 @@ |
849 | |
850 | </div> |
851 | |
852 | - <script type="text/javascript"> |
853 | - var UI = new UbuntuUI(); |
854 | - </script> |
855 | + <script src="../apps/rss-reader/app.js"></script> |
856 | + |
857 | </body> |
858 | </html> |
859 | |
860 | |
861 | === modified file 'examples/html5-theme/widgets/Tabs.html' |
862 | --- examples/html5-theme/widgets/Tabs.html 2014-08-30 20:10:18 +0000 |
863 | +++ examples/html5-theme/widgets/Tabs.html 2015-03-04 21:23:40 +0000 |
864 | @@ -35,7 +35,6 @@ |
865 | <!-- Ubuntu UI javascript imports - Ambiance theme --> |
866 | <script src="../../../0.1/ambiance/js/fast-buttons.js"></script> |
867 | <script src="../../../0.1/ambiance/js/core.js"></script> |
868 | - <script src="../../../0.1/ambiance/js/actionsbar.js"></script> |
869 | <script src="../../../0.1/ambiance/js/tab.js"></script> |
870 | <script src="../../../0.1/ambiance/js/tabs.js"></script> |
871 | </head> |