Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(273)

Side by Side Diff: chrome/browser/resources/md_bookmarks/list.js

Issue 2885723002: [MD Bookmarks] Add keyboard navigation and selection to bookmark list. (Closed)
Patch Set: Created 3 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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-list', 6 is: 'bookmarks-list',
7 7
8 behaviors: [ 8 behaviors: [
9 bookmarks.StoreClient, 9 bookmarks.StoreClient,
10 ], 10 ],
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 var list = /** @type {IronListElement} */ (this.$.bookmarksCard); 43 var list = /** @type {IronListElement} */ (this.$.bookmarksCard);
44 list.scrollTarget = this; 44 list.scrollTarget = this;
45 45
46 this.watch('displayedIds_', function(state) { 46 this.watch('displayedIds_', function(state) {
47 return bookmarks.util.getDisplayedList(state); 47 return bookmarks.util.getDisplayedList(state);
48 }); 48 });
49 this.watch('searchTerm_', function(state) { 49 this.watch('searchTerm_', function(state) {
50 return state.search.term; 50 return state.search.term;
51 }); 51 });
52 this.updateFromStore(); 52 this.updateFromStore();
53
54 this.$.bookmarksCard.addEventListener(
55 'keydown', this.onItemKeydown_.bind(this), true);
53 }, 56 },
54 57
55 /** @return {HTMLElement} */ 58 /** @return {HTMLElement} */
56 getDropTarget: function() { 59 getDropTarget: function() {
57 return this.$.message; 60 return this.$.message;
58 }, 61 },
59 62
60 /** 63 /**
61 * Updates `displayedList_` using splices to be equivalent to `newValue`. This 64 * Updates `displayedList_` using splices to be equivalent to `newValue`. This
62 * allows the iron-list to delete sublists of items which preserves scroll and 65 * allows the iron-list to delete sublists of items which preserves scroll and
(...skipping 30 matching lines...) Expand all
93 96
94 /** @private */ 97 /** @private */
95 isEmptyList_: function() { 98 isEmptyList_: function() {
96 return this.displayedList_.length == 0; 99 return this.displayedList_.length == 0;
97 }, 100 },
98 101
99 /** @private */ 102 /** @private */
100 deselectItems_: function() { 103 deselectItems_: function() {
101 this.dispatch(bookmarks.actions.deselectItems()); 104 this.dispatch(bookmarks.actions.deselectItems());
102 }, 105 },
106
107 /** @private */
108 selectAllItems_: function() {
109 this.dispatch(
110 bookmarks.actions.selectAll(this.displayedIds_, this.getState()));
111 },
112
113 /**
114 * @param {KeyboardEvent} e
115 * @private
116 */
117 onItemKeydown_: function(e) {
118 var handled = true;
119 var list = this.$.bookmarksCard;
120 var focusMoved = false;
121 if (e.key == 'ArrowUp') {
122 list.focusPhysicalItem(list.getFocusedIndex() - 1);
123 focusMoved = true;
124 } else if (e.key == 'ArrowDown') {
125 list.focusPhysicalItem(list.getFocusedIndex() + 1);
126 focusMoved = true;
127 e.preventDefault();
128 } else if (e.key == 'Home') {
129 list.focusPhysicalItem(0);
130 focusMoved = true;
131 } else if (e.key == 'End') {
132 list.focusPhysicalItem(list.items.length - 1);
133 focusMoved = true;
134 } else if (e.key == ' ' && e.ctrlKey) {
135 this.dispatch(bookmarks.actions.selectItem(
136 list.getFocusedItem().itemId, this.getState(), {
137 clear: false,
138 range: false,
139 toggle: true,
140 }));
141 } else if (e.key == 'a' && e.ctrlKey) {
142 this.selectAllItems_();
143 } else if (e.key == 'Escape') {
144 this.deselectItems_();
145 } else {
146 handled = false;
147 }
148
149 if (focusMoved) {
150 if (e.ctrlKey && !e.shiftKey) {
151 this.dispatch(
152 bookmarks.actions.updateAnchor(list.getFocusedItem().itemId));
153 } else {
154 // If the focus moved from something other than a Ctrl + move event,
155 // update the selection.
156 var config = {
157 clear: !e.ctrlKey,
158 range: e.shiftKey,
159 toggle: false,
160 };
161
162 this.dispatch(bookmarks.actions.selectItem(
163 list.getFocusedItem().itemId, this.getState(), config));
164 }
165 }
166
167 if (handled)
168 e.stopPropagation();
169 },
103 }); 170 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698