1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
// Displays children in a two-dimensional grid and supports focusing children
// with arrow keys.
export class CrGridElement extends PolymerElement {
static get is() {
return 'cr-grid';
}
static get template() {
return html`{__html_template__}`;
}
static get properties() {
return {
/** @type {number} */
columns: {
type: Number,
value: 1,
observer: 'onColumnsChange_',
},
};
}
/** @private */
onColumnsChange_() {
this.updateStyles({'--cr-grid-columns': this.columns});
}
/**
* @param {!Event} e
* @private
*/
onKeyDown_(e) {
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
e.preventDefault();
const items = this.$.items.assignedElements().filter(
(el) =>
(!!(el.offsetWidth || el.offsetHeight ||
el.getClientRects().length)));
const currentIndex = items.indexOf(e.target);
const isRtl = window.getComputedStyle(this)['direction'] === 'rtl';
const bottomRowColumns = items.length % this.columns;
const direction = ['ArrowRight', 'ArrowDown'].includes(e.key) ? 1 : -1;
const inEdgeRow = direction === 1 ?
currentIndex >= items.length - bottomRowColumns :
currentIndex < this.columns;
let delta = 0;
switch (e.key) {
case 'ArrowLeft':
case 'ArrowRight':
delta = direction * (isRtl ? -1 : 1);
break;
case 'ArrowUp':
case 'ArrowDown':
delta = direction * (inEdgeRow ? bottomRowColumns : this.columns);
break;
}
// Handle cases where we move to an empty space in a non-full bottom row
// and have to jump to the next row.
if (e.key === 'ArrowUp' && inEdgeRow &&
currentIndex >= bottomRowColumns) {
delta -= this.columns;
} else if (
e.key === 'ArrowDown' && !inEdgeRow &&
currentIndex + delta >= items.length) {
delta += bottomRowColumns;
}
const mod = function(m, n) {
return ((m % n) + n) % n;
};
const newIndex = mod(currentIndex + delta, items.length);
items[newIndex].focus();
}
if (['Enter', ' '].includes(e.key)) {
e.preventDefault();
e.stopPropagation();
e.target.click();
}
}
}
customElements.define(CrGridElement.is, CrGridElement);
|
