OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @fileoverview | |
7 * 'cr-settings-main' displays the selected settings page. | |
8 * | |
9 * Example: | |
10 * | |
11 * <cr-settings-main pages="{{pages}}" currentPageIndex="{{index}}"> | |
12 * </cr-settings-main> | |
13 * | |
14 * See cr-settings-drawer for example of use in 'core-panel'. | |
15 * | |
16 * @group Chrome Settings Elements | |
17 * @element cr-settings-main | |
18 */ | |
19 Polymer('cr-settings-main', { | |
20 publish: { | |
21 /** | |
22 * Pages that may be shown. | |
23 * | |
24 * @attribute pages | |
25 * @type Array<!Obect> | |
Oren Blasberg
2015/03/09 21:34:00
!Object
michaelpg
2015/03/12 01:41:40
Done.
| |
26 * @default [] | |
27 */ | |
28 pages: [], | |
29 | |
30 /** | |
31 * Index of the currently selected page. | |
32 * | |
33 * @attribute selectedIndex | |
34 * @type number | |
35 * default 0 | |
36 */ | |
37 currentPageIndex: 0, | |
38 }, | |
39 | |
40 /** @override */ | |
41 ready: function() { | |
42 this.processPages_(); | |
43 }, | |
44 | |
45 /** | |
46 * Polymer pages changed method. Ensures the pages container contains the | |
47 * pages in the right order. | |
48 * | |
49 * @param {*} value The old value if the property value has changed, or the | |
Oren Blasberg
2015/03/09 21:34:00
In the first case, what type would the old value h
michaelpg
2015/03/12 01:41:40
Removed.
| |
50 * array of splices if the existing array has been changed. | |
51 */ | |
52 pagesChanged: function(value) { | |
53 // If value is an array of plain objects, it represents splices from an | |
54 // ArrayObserver. | |
55 if (value instanceof Array && value.length && | |
56 Object.prototype.isPrototypeOf(value[0])) { | |
57 this.applyPageSplices_(value); | |
58 } else { | |
59 this.updatePages_(this.pages); | |
Oren Blasberg
2015/03/09 21:34:00
updatePages_ doesn't take args -- can you remove t
michaelpg
2015/03/12 01:41:40
Removed.
| |
60 } | |
61 }, | |
62 | |
63 /** | |
64 * Adds each page to the page list and prepare the core-animated-pages. | |
65 * | |
66 * @private | |
67 */ | |
68 processPages_: function() { | |
Kyle Horimoto
2015/03/09 20:59:32
I don't understand why this is necessary. We decla
michaelpg
2015/03/09 22:24:11
Some annoying rule about containers for pages not
Kyle Horimoto
2015/03/09 22:32:03
Just use the "cross-fade-all" transition instead o
michaelpg
2015/03/12 01:41:40
Done-ish (cross-fade-all is too janky)
| |
69 // Generate the list of pages from the DOM. | |
70 var pages = []; | |
71 var children = [].slice.call(this.$.pages.children); | |
Jeremy Klein
2015/03/09 21:17:14
Why not just use this.$.pages.items?
Oren Blasberg
2015/03/09 21:34:00
How come we need to call slice in this unusual way
michaelpg
2015/03/09 22:24:11
Oops, this was from when I was updating the pages
| |
72 for (var i = 0; i < children.length; i++) { | |
73 // Ignore <template>s. | |
74 if (children[i].tagName != 'TEMPLATE') | |
Jeremy Klein
2015/03/09 21:17:14
You can ignore this with an excludedLocalNames att
michaelpg
2015/03/09 22:24:11
See response to khorimito above.
| |
75 pages.push(children[i]); | |
76 } | |
77 // Set the list of pages so each page is placed in a <section> within | |
Kyle Horimoto
2015/03/09 20:59:32
Why a <section>?
Jeremy Klein
2015/03/09 21:17:14
Why does it need to be inside a section?
michaelpg
2015/03/09 22:24:11
Requirement of core-animated-pages, provides a con
Jeremy Klein
2015/03/09 22:35:05
Section isn't a requirement of core-animated-pages
michaelpg
2015/03/12 01:41:40
Done. Thanks for the tips Jeremy & Kyle!
| |
78 // core-animated-pages. | |
79 this.pages = pages; | |
80 }, | |
81 | |
82 /** | |
83 * Sets the list of pages shown in the 'core-animated-pages'. Rebuilds the DOM | |
84 * for 'core-animated-pages', so this should be called sparingly. | |
85 * | |
86 * @private | |
87 */ | |
88 updatePages_: function() { | |
89 this.$.pages.innerHTML = ''; | |
90 if (!this.pages.length) | |
91 return; | |
92 | |
93 if (this.currentPageIndex >= this.pages.length) | |
94 this.currentPageIndex = 0; | |
95 | |
96 for (var i = 0; i < this.pages.length; i++) | |
97 this.$.pages.appendChild(this.createSection_(this.pages[i])); | |
98 }, | |
99 | |
100 /** | |
101 * Applies the splices for the list of pages to the sections in the DOM. | |
102 * | |
103 * TODO(michaelpg): core-animated-pages throws when all pages are removed. | |
104 * | |
105 * @param {!Array<!Object>} splices The changes made to 'pages'. | |
106 * @private | |
107 */ | |
108 applyPageSplices_: function(splices) { | |
Jeremy Klein
2015/03/09 21:17:14
I don't really understand why any of this stuff is
michaelpg
2015/03/09 22:24:11
Hmm, I'll take a look at MutationObserver. I agree
michaelpg
2015/03/12 01:41:40
Done.
| |
109 var numRemoved = 0; | |
110 splices.forEach(function(splice) { | |
111 // Remove the sections to be removed before inserting new children. | |
112 for (var i = 0; i < splice.removed.length; i++) | |
113 this.$.pages.removeChild(splice.removed[i].parentNode); | |
114 numRemoved += splice.removed.length; | |
115 | |
116 if (!splice.addedCount) | |
117 return; | |
118 | |
119 // Find the node to insert before, unless splice.index indicates the end | |
120 // of the array. | |
121 var sectionAfter = null; | |
122 if (splice.index < this.$.pages.children.length) | |
123 sectionAfter = this.$.pages.children[splice.index]; | |
124 | |
125 for (var i = 0; i < splice.addedCount; i++) { | |
126 var section = this.createSection_(this.pages[splice.index + i]); | |
127 this.$.pages.insertBefore(section, sectionAfter); | |
128 } | |
129 }.bind(this)); | |
130 | |
131 if (this.currentPageIndex >= this.pages.length) | |
132 this.currentPageIndex = 0; | |
133 }, | |
134 | |
135 /** Creates a section for 'core-animated-pages' for the given element. | |
Kyle Horimoto
2015/03/09 20:59:32
nit: Next line.
| |
136 * | |
137 * @param {HTMLElement} element Element to add to 'core-animated-pages'. | |
138 * @private | |
139 */ | |
140 createSection_: function(element) { | |
141 element.setAttribute('cross-fade', ''); | |
Kyle Horimoto
2015/03/09 20:59:32
What's this doing?
Dan Beam
2015/03/09 21:23:30
before: <element>
after: <element cross-fade>
Kyle Horimoto
2015/03/09 21:28:56
Well yeah - I know that, but I meant to ask why it
michaelpg
2015/03/09 22:24:11
It tells core-animated-pages that this page should
Jeremy Klein
2015/03/09 22:35:05
See note above about cross-fade-all.
michaelpg
2015/03/12 01:41:40
Done.
| |
142 var section = document.createElement('section'); | |
143 section.appendChild(element); | |
144 return section; | |
145 }, | |
146 }); | |
OLD | NEW |