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