OLD | NEW |
---|---|
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 Polymer({ | 5 Polymer({ |
6 is: 'bookmarks-folder-node', | 6 is: 'bookmarks-folder-node', |
7 | 7 |
8 behaviors: [ | 8 behaviors: [ |
9 bookmarks.MouseFocusBehavior, | 9 bookmarks.MouseFocusBehavior, |
10 bookmarks.StoreClient, | 10 bookmarks.StoreClient, |
(...skipping 22 matching lines...) Expand all Loading... | |
33 /** @private */ | 33 /** @private */ |
34 searchActive_: Boolean, | 34 searchActive_: Boolean, |
35 | 35 |
36 /** @private */ | 36 /** @private */ |
37 isSelectedFolder_: { | 37 isSelectedFolder_: { |
38 type: Boolean, | 38 type: Boolean, |
39 value: false, | 39 value: false, |
40 reflectToAttribute: true, | 40 reflectToAttribute: true, |
41 computed: 'computeIsSelected_(itemId, selectedFolder_, searchActive_)' | 41 computed: 'computeIsSelected_(itemId, selectedFolder_, searchActive_)' |
42 }, | 42 }, |
43 | |
44 hasChildFolder_: { | |
calamity
2017/06/30 06:05:18
/** @private */
tsergeant
2017/07/03 04:07:19
Done.
| |
45 type: Boolean, | |
46 computed: 'computeHasChildFolder_(item_.children)', | |
47 }, | |
43 }, | 48 }, |
44 | 49 |
45 listeners: { | 50 listeners: { |
46 'keydown': 'onKeydown_', | 51 'keydown': 'onKeydown_', |
47 }, | 52 }, |
48 | 53 |
54 observers: [ | |
55 'updateAriaExpanded_(hasChildFolder_, isClosed_)', | |
56 ], | |
57 | |
49 /** @override */ | 58 /** @override */ |
50 attached: function() { | 59 attached: function() { |
51 this.watch('item_', function(state) { | 60 this.watch('item_', function(state) { |
52 return state.nodes[this.itemId]; | 61 return state.nodes[this.itemId]; |
53 }.bind(this)); | 62 }.bind(this)); |
54 this.watch('isClosed_', function(state) { | 63 this.watch('isClosed_', function(state) { |
55 return state.closedFolders.has(this.itemId); | 64 return state.closedFolders.has(this.itemId); |
56 }.bind(this)); | 65 }.bind(this)); |
57 this.watch('selectedFolder_', function(state) { | 66 this.watch('selectedFolder_', function(state) { |
58 return state.selectedFolder; | 67 return state.selectedFolder; |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
128 * @param {!HTMLElement} currentFocus | 137 * @param {!HTMLElement} currentFocus |
129 */ | 138 */ |
130 changeKeyboardSelection_: function(xDirection, yDirection, currentFocus) { | 139 changeKeyboardSelection_: function(xDirection, yDirection, currentFocus) { |
131 var newFocusFolderNode = null; | 140 var newFocusFolderNode = null; |
132 var isChildFolderNodeFocused = | 141 var isChildFolderNodeFocused = |
133 currentFocus.tagName == 'BOOKMARKS-FOLDER-NODE'; | 142 currentFocus.tagName == 'BOOKMARKS-FOLDER-NODE'; |
134 | 143 |
135 if (xDirection == 1) { | 144 if (xDirection == 1) { |
136 // The right arrow opens a folder if closed and goes to the first child | 145 // The right arrow opens a folder if closed and goes to the first child |
137 // otherwise. | 146 // otherwise. |
138 if (this.hasChildFolder_()) { | 147 if (this.hasChildFolder_) { |
139 if (this.isClosed_) { | 148 if (this.isClosed_) { |
140 this.dispatch( | 149 this.dispatch( |
141 bookmarks.actions.changeFolderOpen(this.item_.id, true)); | 150 bookmarks.actions.changeFolderOpen(this.item_.id, true)); |
142 } else { | 151 } else { |
143 yDirection = 1; | 152 yDirection = 1; |
144 } | 153 } |
145 } | 154 } |
146 } else if (xDirection == -1) { | 155 } else if (xDirection == -1) { |
147 // The left arrow closes a folder if open and goes to the parent | 156 // The left arrow closes a folder if open and goes to the parent |
148 // otherwise. | 157 // otherwise. |
149 if (this.hasChildFolder_() && !this.isClosed_) { | 158 if (this.hasChildFolder_ && !this.isClosed_) { |
150 this.dispatch(bookmarks.actions.changeFolderOpen(this.item_.id, false)); | 159 this.dispatch(bookmarks.actions.changeFolderOpen(this.item_.id, false)); |
151 } else { | 160 } else { |
152 var parentFolderNode = this.getParentFolderNode_(); | 161 var parentFolderNode = this.getParentFolderNode_(); |
153 if (parentFolderNode.itemId != ROOT_NODE_ID) { | 162 if (parentFolderNode.itemId != ROOT_NODE_ID) { |
154 parentFolderNode.selectFolder_(); | 163 parentFolderNode.selectFolder_(); |
155 parentFolderNode.getFocusTarget().focus(); | 164 parentFolderNode.getFocusTarget().focus(); |
156 } | 165 } |
157 } | 166 } |
158 } | 167 } |
159 | 168 |
(...skipping 150 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
310 * @return {boolean} | 319 * @return {boolean} |
311 */ | 320 */ |
312 computeIsSelected_: function(itemId, selectedFolder, searchActive) { | 321 computeIsSelected_: function(itemId, selectedFolder, searchActive) { |
313 return itemId == selectedFolder && !searchActive; | 322 return itemId == selectedFolder && !searchActive; |
314 }, | 323 }, |
315 | 324 |
316 /** | 325 /** |
317 * @private | 326 * @private |
318 * @return {boolean} | 327 * @return {boolean} |
319 */ | 328 */ |
320 hasChildFolder_: function() { | 329 computeHasChildFolder_: function() { |
321 return bookmarks.util.hasChildFolders(this.itemId, this.getState().nodes); | 330 return bookmarks.util.hasChildFolders(this.itemId, this.getState().nodes); |
322 }, | 331 }, |
323 | 332 |
324 /** @private */ | 333 /** @private */ |
325 depthChanged_: function() { | 334 depthChanged_: function() { |
326 this.style.setProperty('--node-depth', String(this.depth)); | 335 this.style.setProperty('--node-depth', String(this.depth)); |
336 if (this.depth == -1) | |
337 this.$.descendants.removeAttribute('role'); | |
327 }, | 338 }, |
328 | 339 |
329 /** | 340 /** |
330 * @private | 341 * @private |
331 * @return {number} | 342 * @return {number} |
332 */ | 343 */ |
333 getChildDepth_: function() { | 344 getChildDepth_: function() { |
334 return this.depth + 1; | 345 return this.depth + 1; |
335 }, | 346 }, |
336 | 347 |
(...skipping 14 matching lines...) Expand all Loading... | |
351 return this.itemId == ROOT_NODE_ID; | 362 return this.itemId == ROOT_NODE_ID; |
352 }, | 363 }, |
353 | 364 |
354 /** | 365 /** |
355 * @private | 366 * @private |
356 * @return {string} | 367 * @return {string} |
357 */ | 368 */ |
358 getTabIndex_: function() { | 369 getTabIndex_: function() { |
359 return this.isSelectedFolder_ ? '0' : '-1'; | 370 return this.isSelectedFolder_ ? '0' : '-1'; |
360 }, | 371 }, |
372 | |
373 /** | |
374 * Sets the 'aria-expanded' accessibility on nodes which need it. Note that | |
375 * aria-expanded="false" is different to having the attribute be undefined. | |
376 * @param {boolean} hasChildFolder | |
377 * @param {boolean} isClosed | |
378 * @private | |
379 */ | |
380 updateAriaExpanded_: function(hasChildFolder, isClosed) { | |
381 if (hasChildFolder) | |
382 this.getFocusTarget().setAttribute('aria-expanded', String(!isClosed)); | |
383 else | |
384 this.getFocusTarget().removeAttribute('aria-expanded'); | |
385 }, | |
361 }); | 386 }); |
OLD | NEW |