diff --git a/ui/webui/resources/BUILD.gn b/ui/webui/resources/BUILD.gn index a0438a7ead39ba..9f8f17ae4d00be 100644 --- a/ui/webui/resources/BUILD.gn +++ b/ui/webui/resources/BUILD.gn @@ -158,7 +158,6 @@ checked_in_dts_files = [ "cr_elements/cr_drawer/cr_drawer.d.ts", "cr_elements/cr_expand_button/cr_expand_button.m.d.ts", "cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts", - "cr_elements/cr_grid/cr_grid.d.ts", "cr_elements/cr_icon_button/cr_icon_button.m.d.ts", "cr_elements/cr_input/cr_input.m.d.ts", "cr_elements/cr_lazy_render/cr_lazy_render.m.d.ts", @@ -262,6 +261,7 @@ ts_library("library") { "cr_components/iph_bubble/iph_bubble.ts", "cr_components/managed_footnote/managed_footnote.ts", "cr_components/managed_dialog/managed_dialog.ts", + "cr_elements/cr_grid/cr_grid.ts", "cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts", "cr_elements/cr_container_shadow_mixin.ts", "cr_elements/cr_nav_menu_item_style.ts", diff --git a/ui/webui/resources/cr_elements/BUILD.gn b/ui/webui/resources/cr_elements/BUILD.gn index df318f7603cf11..ce5cfa5bc490e8 100644 --- a/ui/webui/resources/cr_elements/BUILD.gn +++ b/ui/webui/resources/cr_elements/BUILD.gn @@ -157,7 +157,6 @@ preprocess_if_expr("preprocess_generated") { "cr_expand_button/cr_expand_button.m.js", "cr_fingerprint/cr_fingerprint_icon.m.js", "cr_fingerprint/cr_fingerprint_progress_arc.m.js", - "cr_grid/cr_grid.js", "cr_icon_button/cr_icon_button.m.js", "cr_icons_css.m.js", "cr_input/cr_input.m.js", @@ -216,6 +215,7 @@ preprocess_if_expr("preprocess_generated_ts") { out_folder = preprocess_folder in_files = [ "cr_a11y_announcer/cr_a11y_announcer.ts", + "cr_grid/cr_grid.ts", "cr_slider/cr_slider.ts", "cr_tabs/cr_tabs.ts", "cr_toolbar/cr_toolbar_selection_overlay.ts", @@ -237,7 +237,6 @@ group("closure_compile") { "cr_dialog:closure_compile", "cr_expand_button:closure_compile", "cr_fingerprint:closure_compile", - "cr_grid:closure_compile", "cr_icon_button:closure_compile", "cr_input:closure_compile", "cr_lottie:closure_compile", diff --git a/ui/webui/resources/cr_elements/cr_grid/BUILD.gn b/ui/webui/resources/cr_elements/cr_grid/BUILD.gn index 161ddd82153036..329a08c9bc12d6 100644 --- a/ui/webui/resources/cr_elements/cr_grid/BUILD.gn +++ b/ui/webui/resources/cr_elements/cr_grid/BUILD.gn @@ -2,20 +2,8 @@ # Use of this source code is governed by a BSD-style license that can be # found in the LICENSE file. -import("//third_party/closure_compiler/compile_js.gni") import("//tools/polymer/html_to_js.gni") html_to_js("web_components") { - js_files = [ "cr_grid.js" ] -} - -js_type_check("closure_compile") { - is_polymer3 = true - deps = [ ":cr_grid" ] -} - -js_library("cr_grid") { - deps = [ - "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled", - ] + js_files = [ "cr_grid.ts" ] } diff --git a/ui/webui/resources/cr_elements/cr_grid/cr_grid.d.ts b/ui/webui/resources/cr_elements/cr_grid/cr_grid.d.ts deleted file mode 100644 index 7769e9fc98df73..00000000000000 --- a/ui/webui/resources/cr_elements/cr_grid/cr_grid.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright 2021 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 {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; - -interface CrGridElement extends PolymerElement { - columns: number; -} - -export {CrGridElement}; - -declare global { - interface HTMLElementTagNameMap { - 'cr-grid': CrGridElement; - } -} diff --git a/ui/webui/resources/cr_elements/cr_grid/cr_grid.js b/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts similarity index 74% rename from ui/webui/resources/cr_elements/cr_grid/cr_grid.js rename to ui/webui/resources/cr_elements/cr_grid/cr_grid.ts index 21963e4a923e71..435e5dbddd29d6 100644 --- a/ui/webui/resources/cr_elements/cr_grid/cr_grid.js +++ b/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts @@ -6,6 +6,13 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly // Displays children in a two-dimensional grid and supports focusing children // with arrow keys. + +export interface CrGridElement { + $: { + items: HTMLSlotElement, + }; +} + export class CrGridElement extends PolymerElement { static get is() { return 'cr-grid'; @@ -24,30 +31,22 @@ export class CrGridElement extends PolymerElement { }; } - constructor() { - super(); - - /** @type {number} */ - this.columns = 1; - } + columns: number = 1; - /** @private */ - onColumnsChange_() { + private onColumnsChange_() { this.updateStyles({'--cr-grid-columns': this.columns}); } - /** - * @param {!Event} e - * @private - */ - onKeyDown_(e) { + private onKeyDown_(e: KeyboardEvent) { 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 items = + (this.$.items.assignedElements() as HTMLElement[]).filter(el => { + return !!( + el.offsetWidth || el.offsetHeight || + el.getClientRects().length); + }); + const currentIndex = items.indexOf(e.target as HTMLElement); const isRtl = window.getComputedStyle(this)['direction'] === 'rtl'; const bottomRowColumns = items.length % this.columns; const direction = ['ArrowRight', 'ArrowDown'].includes(e.key) ? 1 : -1; @@ -75,19 +74,23 @@ export class CrGridElement extends PolymerElement { 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(); + + const newIndex = (items.length + currentIndex + delta) % items.length; + items[newIndex]!.focus(); } if (['Enter', ' '].includes(e.key)) { e.preventDefault(); e.stopPropagation(); - e.target.click(); + (e.target as HTMLElement).click(); } } } +declare global { + interface HTMLElementTagNameMap { + 'cr-grid': CrGridElement; + } +} + customElements.define(CrGridElement.is, CrGridElement);