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

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: address comments 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{HTMLElement} el
115 * @private
116 */
117 getIndexForItemElement_: function(el) {
118 return this.$.bookmarksCard.modelForElement(el).index;
119 },
120
121 /**
122 * @param {KeyboardEvent} e
123 * @private
124 */
125 onItemKeydown_: function(e) {
126 var handled = true;
127 var list = this.$.bookmarksCard;
128 var focusMoved = false;
129 var focusedIndex =
130 this.getIndexForItemElement_(/** @type {HTMLElement} */ (e.target));
131 if (e.key == 'ArrowUp') {
132 focusedIndex--;
133 focusMoved = true;
134 } else if (e.key == 'ArrowDown') {
135 focusedIndex++;
136 focusMoved = true;
137 e.preventDefault();
138 } else if (e.key == 'Home') {
139 focusedIndex = 0;
140 focusMoved = true;
141 } else if (e.key == 'End') {
142 focusedIndex = list.items.length - 1;
143 focusMoved = true;
144 } else if (e.key == ' ' && e.ctrlKey) {
145 this.dispatch(bookmarks.actions.selectItem(
146 this.displayedIds_[focusedIndex], this.getState(), {
147 clear: false,
148 range: false,
149 toggle: true,
150 }));
151 } else if (e.key == 'a' && e.ctrlKey) {
152 this.selectAllItems_();
153 } else if (e.key == 'Escape') {
154 this.deselectItems_();
155 } else {
156 handled = false;
157 }
158
159 if (focusMoved) {
160 focusedIndex = Math.min(list.items.length - 1, Math.max(0, focusedIndex));
161 list.focusItem(focusedIndex);
162
163 if (e.ctrlKey && !e.shiftKey) {
164 this.dispatch(
165 bookmarks.actions.updateAnchor(this.displayedIds_[focusedIndex]));
166 } else {
167 // If the focus moved from something other than a Ctrl + move event,
168 // update the selection.
169 var config = {
170 clear: !e.ctrlKey,
171 range: e.shiftKey,
172 toggle: false,
173 };
174
175 this.dispatch(bookmarks.actions.selectItem(
176 this.displayedIds_[focusedIndex], this.getState(), config));
177 }
178 }
179
180 if (handled)
181 e.stopPropagation();
182 },
103 }); 183 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_bookmarks/item.js ('k') | chrome/browser/resources/md_bookmarks/reducers.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698