You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2023/02/10 21:48:55 UTC
[myfaces-tobago] branch tobago-5.x updated (7d93bb41af -> bdfb19ac25)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from 7d93bb41af build(theme): rebuild after impl tc:selectOneMany
new 9402f8cb55 refactor(cleanup): separate key class
new bdfb19ac25 refactor(cleanup): separate CSS class
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/main/ts/tobago-bar.ts | 29 +++---
.../src/main/ts/tobago-css.ts | 48 +++++++++
.../src/main/ts/tobago-dropdown.ts | 3 +-
.../src/main/ts/tobago-file-alternative.ts | 110 ++++++++++-----------
.../src/main/ts/tobago-file.ts | 3 +-
.../src/main/ts/tobago-footer.ts | 4 +-
.../src/main/ts/tobago-key.ts | 15 +--
.../src/main/ts/tobago-overlay.ts | 12 +--
.../src/main/ts/tobago-page.ts | 7 +-
.../src/main/ts/tobago-popup.ts | 5 +-
.../src/main/ts/tobago-range.ts | 8 +-
.../src/main/ts/tobago-select-list-base.ts | 63 ++++--------
.../src/main/ts/tobago-select-many-list.ts | 24 ++---
.../src/main/ts/tobago-select-one-list.ts | 24 ++---
.../src/main/ts/tobago-select-one-radio.ts | 8 +-
.../src/main/ts/tobago-sheet.ts | 44 +++++----
.../src/main/ts/tobago-split-layout.ts | 7 +-
.../src/main/ts/tobago-stars.ts | 27 ++---
.../src/main/ts/tobago-suggest.ts | 9 +-
.../src/main/ts/tobago-tab.ts | 12 ++-
.../src/main/ts/tobago-tree-listbox.ts | 6 +-
.../src/main/ts/tobago-tree-node.ts | 13 +--
22 files changed, 257 insertions(+), 224 deletions(-)
create mode 100644 tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
copy tobago-core/src/main/java/org/apache/myfaces/tobago/component/SupportsAccessKey.java => tobago-theme/tobago-theme-standard/src/main/ts/tobago-key.ts (83%)
[myfaces-tobago] 02/02: refactor(cleanup): separate CSS class
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit bdfb19ac253907cc32f7ec4c5438277a3adbc80f
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Feb 10 21:53:52 2023 +0100
refactor(cleanup): separate CSS class
---
.../src/main/ts/tobago-bar.ts | 29 +++---
.../src/main/ts/tobago-css.ts | 48 +++++++++
.../src/main/ts/tobago-dropdown.ts | 3 +-
.../src/main/ts/tobago-file-alternative.ts | 110 ++++++++++-----------
.../src/main/ts/tobago-file.ts | 3 +-
.../src/main/ts/tobago-footer.ts | 4 +-
.../src/main/ts/tobago-overlay.ts | 12 +--
.../src/main/ts/tobago-popup.ts | 5 +-
.../src/main/ts/tobago-range.ts | 8 +-
.../src/main/ts/tobago-select-list-base.ts | 53 ++++------
.../src/main/ts/tobago-select-many-list.ts | 11 ++-
.../src/main/ts/tobago-select-one-list.ts | 11 ++-
.../src/main/ts/tobago-sheet.ts | 11 ++-
.../src/main/ts/tobago-split-layout.ts | 7 +-
.../src/main/ts/tobago-stars.ts | 27 ++---
.../src/main/ts/tobago-suggest.ts | 9 +-
.../src/main/ts/tobago-tab.ts | 12 ++-
.../src/main/ts/tobago-tree-listbox.ts | 6 +-
.../src/main/ts/tobago-tree-node.ts | 13 +--
19 files changed, 214 insertions(+), 168 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-bar.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-bar.ts
index ebc3f4c9b0..07c026ccb9 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-bar.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-bar.ts
@@ -15,14 +15,9 @@
* limitations under the License.
*/
-class Bar extends HTMLElement {
-
- private readonly CssClass = {
- SHOW: "show",
- COLLAPSE: "collapse",
- COLLAPSING: "collapsing"
- };
+import {Css} from "./tobago-css";
+class Bar extends HTMLElement {
private timeout: number;
private expanded: boolean;
@@ -42,26 +37,26 @@ class Bar extends HTMLElement {
this.expanded = false;
this.navbarContent.style.height = `${this.navbarContent.scrollHeight}px`;
this.navbarContent.offsetHeight; //force reflow, to make sure height is set
- this.navbarContent.classList.add(this.CssClass.COLLAPSING);
- this.navbarContent.classList.remove(this.CssClass.COLLAPSE);
- this.navbarContent.classList.remove(this.CssClass.SHOW);
+ this.navbarContent.classList.add(Css.COLLAPSING);
+ this.navbarContent.classList.remove(Css.COLLAPSE);
+ this.navbarContent.classList.remove(Css.SHOW);
this.navbarContent.style.height = null;
this.timeout = window.setTimeout(() => {
- this.navbarContent.classList.remove(this.CssClass.COLLAPSING);
- this.navbarContent.classList.add(this.CssClass.COLLAPSE);
+ this.navbarContent.classList.remove(Css.COLLAPSING);
+ this.navbarContent.classList.add(Css.COLLAPSE);
this.toggleButton.ariaExpanded = "false";
}, this.evaluateTransitionTime());
} else {
this.expanded = true;
- this.navbarContent.classList.remove(this.CssClass.COLLAPSE);
- this.navbarContent.classList.add(this.CssClass.COLLAPSING);
+ this.navbarContent.classList.remove(Css.COLLAPSE);
+ this.navbarContent.classList.add(Css.COLLAPSING);
this.navbarContent.style.height = `${this.navbarContent.scrollHeight}px`;
this.timeout = window.setTimeout(() => {
- this.navbarContent.classList.remove(this.CssClass.COLLAPSING);
- this.navbarContent.classList.add(this.CssClass.COLLAPSE);
- this.navbarContent.classList.add(this.CssClass.SHOW);
+ this.navbarContent.classList.remove(Css.COLLAPSING);
+ this.navbarContent.classList.add(Css.COLLAPSE);
+ this.navbarContent.classList.add(Css.SHOW);
this.navbarContent.style.height = null;
this.toggleButton.ariaExpanded = "true";
}, this.evaluateTransitionTime());
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
new file mode 100644
index 0000000000..1a60284c5e
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-css.ts
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export enum Css {
+ ACTIVE = "active",
+ AUTOCOMPLETE = "autocomplete",
+ AUTOCOMPLETE_INPUT = "autocomplete-input",
+ COLLAPSE = "collapse",
+ COLLAPSING = "collapsing",
+ D_NONE = "d-none",
+ DISABLED = "disabled",
+ DROPDOWN_MENU = "dropdown-menu",
+ FIXED_BOTTOM = "fixed-bottom",
+ INPUT_GROUP = "input-group",
+ POSITION_RELATIVE = "position-relative",
+ SHOW = "show",
+ TABLE_ACTIVE = "table-active",
+ TABLE_INFO = "table-info",
+ TABLE_PRIMARY = "table-primary",
+ TOBAGO_COLLAPSED = "tobago-collapsed",
+ TOBAGO_DISABLED = "tobago-disabled",
+ TOBAGO_DROP_ZONE = "tobago-drop-zone",
+ TOBAGO_DROPDOWN_SUBMENU = "tobago-dropdown-submenu",
+ TOBAGO_EXPANDED = "tobago-expanded",
+ TOBAGO_FOCUS = "tobago-focus",
+ TOBAGO_OPTIONS = "tobago-options",
+ TOBAGO_PLACEHOLDER = "tobago-placeholder",
+ TOBAGO_PRESELECT = "tobago-preselect",
+ TOBAGO_SELECTED = "tobago-selected",
+ TOBAGO_SPLITLAYOUT_HORIZONTAL = "tobago-splitLayout-horizontal",
+ TRASH = "trash"
+}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
index edcfbd2194..a07e6d7842 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
@@ -16,6 +16,7 @@
*/
import {MenuStore} from "./tobago-menu-store";
+import {Css} from "./tobago-css";
const TobagoDropdownEvent = {
HIDE: "tobago.dropdown.hide",
@@ -32,7 +33,7 @@ class Dropdown extends HTMLElement {
constructor() {
super();
- if (!this.classList.contains("tobago-dropdown-submenu")) { // ignore submenus
+ if (!this.classList.contains(Css.TOBAGO_DROPDOWN_SUBMENU)) { // ignore submenus
this.addEventListener("shown.bs.dropdown", this.openDropdown.bind(this));
this.addEventListener("hidden.bs.dropdown", this.closeDropdown.bind(this));
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file-alternative.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file-alternative.ts
index 8ede50289d..c3a5af2c11 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file-alternative.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file-alternative.ts
@@ -15,8 +15,7 @@
* limitations under the License.
*/
-import {Page} from "./tobago-page";
-import {Overlay} from "./tobago-overlay";
+import {Css} from "./tobago-css";
class File2 extends HTMLElement {
@@ -35,7 +34,7 @@ class File2 extends HTMLElement {
const rootNode = this.getRootNode() as ShadowRoot | Document;
const element = rootNode.getElementById(id);
const dropZone = element ? element : this;
- dropZone.classList.add("tobago-drop-zone");
+ dropZone.classList.add(Css.TOBAGO_DROP_ZONE);
return dropZone;
}
@@ -62,7 +61,7 @@ class File2 extends HTMLElement {
if (dropZone.querySelector("tobago-overlay") == null) {
console.info("DRAGOVER", event.dataTransfer.items);
dropZone.insertAdjacentHTML(
- "beforeend", `<tobago-overlay for='${dropZone.id}' delay="0"></tobago-overlay>`);
+ "beforeend", `<tobago-overlay for='${dropZone.id}' delay="0"></tobago-overlay>`);
}
}
@@ -101,8 +100,8 @@ class File2 extends HTMLElement {
}
}
-static pageDrop(event: DragEvent): void {
- console.info("*** PAGE DROP *** ");
+ static pageDrop(event: DragEvent): void {
+ console.info("*** PAGE DROP *** ");
if (File2.isTypeFile(event)) {
event.stopPropagation();
event.preventDefault();
@@ -120,8 +119,8 @@ static pageDrop(event: DragEvent): void {
console.info("*** PAGE DROP *************** found ", found.tagName);
const foundFile = found.tagName === "TOBAGO-FILE"
- ? found
- : found.querySelector("tobago-file");
+ ? found
+ : found.querySelector("tobago-file");
console.info("*** PAGE DROP *************** looking ", foundFile);
console.info("*** PAGE DROP *************** looking ", file);
@@ -161,67 +160,68 @@ static pageDrop(event: DragEvent): void {
// this.dropZone.addEventListener("dragleave", this.fileDragLeave.bind(this));
// this.dropZone.addEventListener("drop", this.fileDrop.bind(this));
}
-/*
- fileDragOver(event: DragEvent): void {
- console.info("DROPZONE OVER target", event.target);
- console.info("DROPZONE OVER current", event.currentTarget);
- console.info("DROPZONE OVER data", event.dataTransfer);
- console.info("DROPZONE OVER related", event.relatedTarget);
- if (File2.isTypeFile(event)) {
- event.stopPropagation();
- event.preventDefault();
- event.dataTransfer.dropEffect = "copy";
- const dropZone = this.dropZone;
- const overlay = dropZone.querySelector("tobago-overlay") as Overlay;
- if (overlay) {
- overlay.setAttribute("active", "");
- overlay.style.backgroundColor = "#0f0";
+ /*
+ fileDragOver(event: DragEvent): void {
+ console.info("DROPZONE OVER target", event.target);
+ console.info("DROPZONE OVER current", event.currentTarget);
+ console.info("DROPZONE OVER data", event.dataTransfer);
+ console.info("DROPZONE OVER related", event.relatedTarget);
+ if (File2.isTypeFile(event)) {
+ event.stopPropagation();
+ event.preventDefault();
+ event.dataTransfer.dropEffect = "copy";
+
+ const dropZone = this.dropZone;
+ const overlay = dropZone.querySelector("tobago-overlay") as Overlay;
+ if (overlay) {
+ overlay.setAttribute("active", "");
+ overlay.style.backgroundColor = "#0f0";
+ }
}
}
- }
- fileDragLeave(event: DragEvent): void {
- console.info("DROPZONE LEAVE");
- if (File2.isTypeFile(event)) {
- event.stopPropagation();
- event.preventDefault();
+ fileDragLeave(event: DragEvent): void {
+ console.info("DROPZONE LEAVE");
+ if (File2.isTypeFile(event)) {
+ event.stopPropagation();
+ event.preventDefault();
- const dropZone = this.dropZone;
- const overlay = dropZone.querySelector("tobago-overlay") as Overlay;
- if (overlay) {
- console.info("DROPZONE LEAVE -> remove active and background");
+ const dropZone = this.dropZone;
+ const overlay = dropZone.querySelector("tobago-overlay") as Overlay;
+ if (overlay) {
+ console.info("DROPZONE LEAVE -> remove active and background");
- overlay.removeAttribute("active");
- overlay.style.removeProperty("background-color");
+ overlay.removeAttribute("active");
+ overlay.style.removeProperty("background-color");
+ }
}
}
- }
-*/
-
-/*
- fileDrop(event: DragEvent): void {
- console.info("###########################################################");
- if (File2.isTypeFile(event)) {
- event.stopPropagation();
- event.preventDefault();
+ */
+ /*
+ fileDrop(event: DragEvent): void {
console.info("###########################################################");
- const target = event.target as HTMLElement;
+ if (File2.isTypeFile(event)) {
+ event.stopPropagation();
+ event.preventDefault();
- // matching
- if (this.dropZone.contains(target)) {
- console.info("DROP", event.dataTransfer.files);
+ console.info("###########################################################");
+ const target = event.target as HTMLElement;
- this.input.files = event.dataTransfer.files;
- this.input.dispatchEvent(new Event("change"));
- }
+ // matching
+ if (this.dropZone.contains(target)) {
+ console.info("DROP", event.dataTransfer.files);
- // cleanup
-// Page.page(this).dispatchEvent(new Event("dragleave"));
+ this.input.files = event.dataTransfer.files;
+ this.input.dispatchEvent(new Event("change"));
+ }
+
+ // cleanup
+ // Page.page(this).dispatchEvent(new Event("dragleave"));
+ }
}
- }
-*/
+ */
}
/* todo: feature? show list of dropped files
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
index 4f9dfeb682..203782cdbb 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
@@ -17,6 +17,7 @@
import {Overlay} from "./tobago-overlay";
import {OverlayType} from "./tobago-overlay-type";
+import {Css} from "./tobago-css";
export class File extends HTMLElement {
@@ -33,7 +34,7 @@ export class File extends HTMLElement {
const rootNode = this.getRootNode() as ShadowRoot | Document;
const element = rootNode.getElementById(id);
const dropZone = element ? element : this;
- dropZone.classList.add("tobago-drop-zone");
+ dropZone.classList.add(Css.TOBAGO_DROP_ZONE);
return dropZone;
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-footer.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-footer.ts
index fa7342c36a..c17645ed64 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-footer.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-footer.ts
@@ -15,6 +15,8 @@
* limitations under the License.
*/
+import {Css} from "./tobago-css";
+
class Footer extends HTMLElement {
private lastMaxFooterHeight: number;
@@ -24,7 +26,7 @@ class Footer extends HTMLElement {
}
get fixed(): boolean {
- return this.classList.contains("fixed-bottom");
+ return this.classList.contains(Css.FIXED_BOTTOM);
}
get height(): number {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
index f3c6e5d540..a3edd28c11 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
@@ -21,6 +21,7 @@
import {Page} from "./tobago-page";
import {OverlayType} from "./tobago-overlay-type";
+import {Css} from "./tobago-css";
// XXX issue: if a ajax call is scheduled on the same element, the animation arrow will stacking and not desapearing.
// XXX issue: "error" is not implemented correctly
@@ -28,11 +29,6 @@ import {OverlayType} from "./tobago-overlay-type";
// XXX todo: check full page transitions
export class Overlay extends HTMLElement {
- private readonly CssClass = {
- SHOW: "show",
- POSITION_RELATIVE: "position-relative"
- };
-
static htmlText(id: string, type: OverlayType, delay: number): string {
return `<tobago-overlay type='${type}' for='${id}' delay='${delay}' class='modal-backdrop fade'></tobago-overlay>`;
}
@@ -49,13 +45,13 @@ export class Overlay extends HTMLElement {
console.log("disconnected from the DOM");
const forElement = document.getElementById(this.for);
if (forElement) {
- forElement.classList.remove(this.CssClass.POSITION_RELATIVE);
+ forElement.classList.remove(Css.POSITION_RELATIVE);
}
this.showScrollbar();
}
render(): void {
- this.classList.add(this.CssClass.SHOW);
+ this.classList.add(Css.SHOW);
let icon;
switch (this.type) {
case "error":
@@ -75,7 +71,7 @@ export class Overlay extends HTMLElement {
const forElement = document.getElementById(this.for);
if (forElement) {
- forElement.classList.add(this.CssClass.POSITION_RELATIVE);
+ forElement.classList.add(Css.POSITION_RELATIVE);
if (forElement.tagName === "TOBAGO-PAGE") {
this.hideScrollbar();
} else {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-popup.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-popup.ts
index 15842a9ea7..6a1631726f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-popup.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-popup.ts
@@ -18,6 +18,7 @@
import {Modal} from "bootstrap";
import {BehaviorMode} from "./tobago-behavior-mode";
import {CollapseOperation} from "./tobago-collapsible-operation";
+import {Css} from "./tobago-css";
export class Popup extends HTMLElement {
@@ -94,13 +95,13 @@ export class Collapse {
if (target instanceof Popup) {
target.clientBehaviorHide(behaviorMode);
} else {
- target.classList.add("tobago-collapsed");
+ target.classList.add(Css.TOBAGO_COLLAPSED);
}
} else {
if (target instanceof Popup) {
target.clientBehaviorShow(behaviorMode);
} else {
- target.classList.remove("tobago-collapsed");
+ target.classList.remove(Css.TOBAGO_COLLAPSED);
}
}
hidden.value = newCollapsed;
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-range.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-range.ts
index dff2bf8139..65fa63626b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-range.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-range.ts
@@ -15,6 +15,8 @@
* limitations under the License.
*/
+import {Css} from "./tobago-css";
+
class TobagoRange extends HTMLElement {
private timer: ReturnType<typeof setTimeout>;
@@ -41,12 +43,12 @@ class TobagoRange extends HTMLElement {
this.tooltip.style.top = String(this.range.offsetTop - this.tooltip.offsetHeight) + "px";
this.tooltip.style.left = String(this.range.offsetLeft + this.range.offsetWidth / 2
- - this.tooltip.offsetWidth / 2) + "px";
- this.tooltip.classList.add("show");
+ - this.tooltip.offsetWidth / 2) + "px";
+ this.tooltip.classList.add(Css.SHOW);
clearTimeout(this.timer);
this.timer = setTimeout(() => {
- this.tooltip.classList.remove("show");
+ this.tooltip.classList.remove(Css.SHOW);
}, 1000);
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
index 4d30cb5283..21ca1bdfc8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
@@ -16,24 +16,13 @@
*/
import {createPopper, Instance} from "@popperjs/core";
+import {Css} from "./tobago-css";
export class SelectListBase extends HTMLElement {
- protected readonly CssClass = {
- D_NONE: "d-none",
- DROPDOWN_MENU: "dropdown-menu",
- SHOW: "show",
- TABLE_ACTIVE: "table-active",
- TABLE_PRIMARY: "table-primary",
- TOBAGO_DISABLED: "tobago-disabled",
- TOBAGO_FOCUS: "tobago-focus",
- TOBAGO_PRESELECT: "tobago-preselect",
- TOBAGO_OPTIONS: "tobago-options"
- };
-
private popper: Instance;
get disabled(): boolean {
- return this.classList.contains(this.CssClass.TOBAGO_DISABLED);
+ return this.classList.contains(Css.TOBAGO_DISABLED);
}
get hiddenSelect(): HTMLSelectElement {
@@ -80,11 +69,11 @@ export class SelectListBase extends HTMLElement {
}
get enabledRows(): NodeListOf<HTMLTableRowElement> {
- return this.tbody.querySelectorAll<HTMLTableRowElement>("tr:not(." + this.CssClass.D_NONE + ")");
+ return this.tbody.querySelectorAll<HTMLTableRowElement>("tr:not(." + Css.D_NONE + ")");
}
get preselectedRow(): HTMLTableRowElement {
- return this.tbody.querySelector<HTMLTableRowElement>("." + this.CssClass.TOBAGO_PRESELECT);
+ return this.tbody.querySelector<HTMLTableRowElement>("." + Css.TOBAGO_PRESELECT);
}
connectedCallback(): void {
@@ -96,7 +85,7 @@ export class SelectListBase extends HTMLElement {
protected focusEvent(): void {
if (!this.hiddenSelect.disabled) {
- if (!this.classList.contains(this.CssClass.TOBAGO_FOCUS)) {
+ if (!this.classList.contains(Css.TOBAGO_FOCUS)) {
this.setFocus(true);
}
}
@@ -104,9 +93,9 @@ export class SelectListBase extends HTMLElement {
protected setFocus(focus: boolean): void {
if (focus) {
- this.classList.add(this.CssClass.TOBAGO_FOCUS);
+ this.classList.add(Css.TOBAGO_FOCUS);
} else {
- this.classList.remove(this.CssClass.TOBAGO_FOCUS);
+ this.classList.remove(Css.TOBAGO_FOCUS);
}
}
@@ -115,10 +104,10 @@ export class SelectListBase extends HTMLElement {
const index = this.preselectIndex(rows);
if (index >= 0) {
if (index + 1 < rows.length) {
- rows.item(index).classList.remove(this.CssClass.TOBAGO_PRESELECT);
+ rows.item(index).classList.remove(Css.TOBAGO_PRESELECT);
this.preselect(rows.item(index + 1));
} else {
- rows.item(rows.length - 1).classList.remove(this.CssClass.TOBAGO_PRESELECT);
+ rows.item(rows.length - 1).classList.remove(Css.TOBAGO_PRESELECT);
this.preselect(rows.item(0));
}
} else if (rows.length > 0) {
@@ -131,10 +120,10 @@ export class SelectListBase extends HTMLElement {
const index = this.preselectIndex(rows);
if (index >= 0) {
if ((index - 1) >= 0) {
- rows.item(index).classList.remove(this.CssClass.TOBAGO_PRESELECT);
+ rows.item(index).classList.remove(Css.TOBAGO_PRESELECT);
this.preselect(rows.item(index - 1));
} else {
- rows.item(0).classList.remove(this.CssClass.TOBAGO_PRESELECT);
+ rows.item(0).classList.remove(Css.TOBAGO_PRESELECT);
this.preselect(rows.item(rows.length - 1));
}
} else if (rows.length > 0) {
@@ -143,7 +132,7 @@ export class SelectListBase extends HTMLElement {
}
protected removePreselection(): void {
- this.preselectedRow?.classList.remove(this.CssClass.TOBAGO_PRESELECT);
+ this.preselectedRow?.classList.remove(Css.TOBAGO_PRESELECT);
}
protected isPartOfSelectField(element: Element): boolean {
@@ -160,7 +149,7 @@ export class SelectListBase extends HTMLElement {
protected isPartOfTobagoOptions(element: Element): boolean {
if (element) {
- if (element.classList.contains(this.CssClass.TOBAGO_OPTIONS)
+ if (element.classList.contains(Css.TOBAGO_OPTIONS)
&& this.id === element.getAttribute("name")) {
return true;
} else {
@@ -172,25 +161,25 @@ export class SelectListBase extends HTMLElement {
}
protected showDropdown(): void {
- if (this.dropdownMenu && !this.dropdownMenu.classList.contains(this.CssClass.SHOW)) {
- this.selectField.classList.add(this.CssClass.SHOW);
+ if (this.dropdownMenu && !this.dropdownMenu.classList.contains(Css.SHOW)) {
+ this.selectField.classList.add(Css.SHOW);
this.selectField.ariaExpanded = "true";
- this.dropdownMenu.classList.add(this.CssClass.SHOW);
+ this.dropdownMenu.classList.add(Css.SHOW);
this.updateDropdownMenuWidth();
this.popper.update();
}
}
protected hideDropdown(): void {
- if (this.dropdownMenu?.classList.contains(this.CssClass.SHOW)) {
- this.selectField.classList.remove(this.CssClass.SHOW);
+ if (this.dropdownMenu?.classList.contains(Css.SHOW)) {
+ this.selectField.classList.remove(Css.SHOW);
this.selectField.ariaExpanded = "false";
- this.dropdownMenu.classList.remove(this.CssClass.SHOW);
+ this.dropdownMenu.classList.remove(Css.SHOW);
}
}
private preselect(row: HTMLTableRowElement): void {
- row.classList.add(this.CssClass.TOBAGO_PRESELECT);
+ row.classList.add(Css.TOBAGO_PRESELECT);
if (!this.dropdownMenu) {
row.scrollIntoView({block: "center"});
}
@@ -201,7 +190,7 @@ export class SelectListBase extends HTMLElement {
private preselectIndex(rows: NodeListOf<HTMLTableRowElement>): number {
for (let i = 0; i < rows.length; i++) {
- if (rows.item(i).classList.contains(this.CssClass.TOBAGO_PRESELECT)) {
+ if (rows.item(i).classList.contains(Css.TOBAGO_PRESELECT)) {
return i;
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
index 42858adc2f..bcb47798d5 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
@@ -18,6 +18,7 @@
import {TobagoFilterRegistry} from "./tobago-filter-registry";
import {SelectListBase} from "./tobago-select-list-base";
import {Key} from "./tobago-key";
+import {Css} from "./tobago-css";
class SelectManyList extends SelectListBase {
constructor() {
@@ -94,7 +95,7 @@ class SelectManyList extends SelectListBase {
closeButton?.addEventListener("blur", this.blurEvent.bind(this));
// highlight list row
- row.classList.add(this.CssClass.TABLE_PRIMARY);
+ row.classList.add(Css.TABLE_PRIMARY);
} else {
// remove badge
const badge = this.selectField.querySelector(`[data-tobago-value="${itemValue}"]`);
@@ -111,7 +112,7 @@ class SelectManyList extends SelectListBase {
}
// remove highlight list row
- row.classList.remove(this.CssClass.TABLE_PRIMARY);
+ row.classList.remove(Css.TABLE_PRIMARY);
}
if (!this.disabled && !this.filter) {
@@ -147,9 +148,9 @@ class SelectManyList extends SelectListBase {
this.querySelectorAll("tr").forEach(row => {
const itemValue = row.dataset.tobagoValue;
if (filterFunction(itemValue, searchString)) {
- row.classList.remove(this.CssClass.D_NONE);
+ row.classList.remove(Css.D_NONE);
} else {
- row.classList.add(this.CssClass.D_NONE);
+ row.classList.add(Css.D_NONE);
}
});
}
@@ -195,7 +196,7 @@ class SelectManyList extends SelectListBase {
case Key.SPACE:
if (this.preselectedRow) {
event.preventDefault();
- const row = this.tbody.querySelector<HTMLTableRowElement>("." + this.CssClass.TOBAGO_PRESELECT);
+ const row = this.tbody.querySelector<HTMLTableRowElement>("." + Css.TOBAGO_PRESELECT);
this.selectRow(row);
this.filterInput.disabled = false;
this.filterInput.focus({preventScroll: true});
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
index 392f5f70e7..22b83d50ff 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
@@ -18,6 +18,7 @@
import {TobagoFilterRegistry} from "./tobago-filter-registry";
import {SelectListBase} from "./tobago-select-list-base";
import {Key} from "./tobago-key";
+import {Css} from "./tobago-css";
class SelectOneList extends SelectListBase {
constructor() {
@@ -70,9 +71,9 @@ class SelectOneList extends SelectListBase {
this.rows.forEach((row) => {
if (row.dataset.tobagoValue === this.hiddenSelect.value) {
this.spanText = this.hiddenSelect.value;
- row.classList.add(this.CssClass.TABLE_PRIMARY); // highlight list row
+ row.classList.add(Css.TABLE_PRIMARY); // highlight list row
} else {
- row.classList.remove(this.CssClass.TABLE_PRIMARY); // remove highlight list row
+ row.classList.remove(Css.TABLE_PRIMARY); // remove highlight list row
}
});
}
@@ -90,9 +91,9 @@ class SelectOneList extends SelectListBase {
this.querySelectorAll("tr").forEach(row => {
const itemValue = row.dataset.tobagoValue;
if (filterFunction(itemValue, searchString)) {
- row.classList.remove(this.CssClass.D_NONE);
+ row.classList.remove(Css.D_NONE);
} else {
- row.classList.add(this.CssClass.D_NONE);
+ row.classList.add(Css.D_NONE);
}
});
}
@@ -137,7 +138,7 @@ class SelectOneList extends SelectListBase {
case Key.SPACE:
if (this.preselectedRow) {
event.preventDefault();
- const row = this.tbody.querySelector<HTMLTableRowElement>("." + this.CssClass.TOBAGO_PRESELECT);
+ const row = this.tbody.querySelector<HTMLTableRowElement>("." + Css.TOBAGO_PRESELECT);
this.selectRow(row);
} else if (document.activeElement.id === this.filterInput.id) {
this.showDropdown();
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index 86486f93fc..5d116b8f16 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -17,6 +17,7 @@
import {Page} from "./tobago-page";
import {Key} from "./tobago-key";
+import {Css} from "./tobago-css";
interface MousemoveData {
columnIndex: number;
@@ -620,7 +621,7 @@ Type: ${data.type}`);
clickOnRow(event: MouseEvent): void {
const row = event.currentTarget as HTMLTableRowElement;
- if (row.classList.contains("tobago-selected") || !Sheet.isInputElement(row)) {
+ if (row.classList.contains(Css.TOBAGO_SELECTED) || !Sheet.isInputElement(row)) {
if (this.mousedownOnRowData) { // integration test: mousedownOnRowData may be 'null'
if (Math.abs(this.mousedownOnRowData.x - event.clientX)
@@ -815,8 +816,8 @@ Type: ${data.type}`);
selectRow(
selectedSet: Set<number>, rowIndex: number, row: HTMLTableRowElement, checkbox?: HTMLInputElement): void {
selectedSet.add(rowIndex);
- row.classList.add("tobago-selected");
- row.classList.add("table-info");
+ row.classList.add(Css.TOBAGO_SELECTED);
+ row.classList.add(Css.TABLE_INFO);
if (checkbox) {
checkbox.checked = true;
setTimeout(function (): void {
@@ -834,8 +835,8 @@ Type: ${data.type}`);
deselectRow(
selectedSet: Set<number>, rowIndex: number, row: HTMLTableRowElement, checkbox?: HTMLInputElement): void {
selectedSet.delete(rowIndex);
- row.classList.remove("tobago-selected");
- row.classList.remove("table-info");
+ row.classList.remove(Css.TOBAGO_SELECTED);
+ row.classList.remove(Css.TABLE_INFO);
if (checkbox) {
checkbox.checked = false;
// XXX check if this is still needed... Async because of TOBAGO-1312
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-split-layout.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-split-layout.ts
index f75cb4e5c4..76bae872f0 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-split-layout.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-split-layout.ts
@@ -16,6 +16,7 @@
*/
import {Page} from "./tobago-page";
+import {Css} from "./tobago-css";
class SplitLayout extends HTMLElement {
@@ -132,7 +133,7 @@ class SplitLayoutMousedown {
}
static save(event: MouseEvent, splitter: HTMLElement): SplitLayoutMousedown {
- const horizontal = splitter.classList.contains("tobago-splitLayout-horizontal");
+ const horizontal = splitter.classList.contains(Css.TOBAGO_SPLITLAYOUT_HORIZONTAL);
const previous = SplitLayout.previousElementSibling(splitter);
const data: SplitLayoutMousedownData = {
splitLayoutId: splitter.parentElement.id,
@@ -144,12 +145,12 @@ class SplitLayoutMousedown {
}
static load(): SplitLayoutMousedown {
- const element : HTMLElement = document.documentElement; // XXX this might be the wrong element in case of shadow dom
+ const element: HTMLElement = document.documentElement; // XXX this might be the wrong element in case of shadow dom
return new SplitLayoutMousedown(Page.page(element).dataset.SplitLayoutMousedownData);
}
static remove(): void {
- const element : HTMLElement = document.documentElement; // XXX this might be the wrong element in case of shadow dom
+ const element: HTMLElement = document.documentElement; // XXX this might be the wrong element in case of shadow dom
Page.page(element).dataset.SplitLayoutMousedownData = null;
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-stars.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-stars.ts
index 6e825c25ae..ae6fb36a3e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-stars.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-stars.ts
@@ -15,13 +15,14 @@
* limitations under the License.
*/
+import {Css} from "./tobago-css";
+
class Stars extends HTMLElement {
constructor() {
super();
}
-
private static leftOffset(element: HTMLElement): number {
let left = 0;
@@ -62,7 +63,7 @@ class Stars extends HTMLElement {
unselected.style["left"] = `${percentValue}%`;
unselected.style["width"] = `${100 - percentValue}%`;
} else if (placeholder) {
- selected.classList.add("tobago-placeholder");
+ selected.classList.add(Css.TOBAGO_PLACEHOLDER);
const placeholderValue = 100 * placeholder / max;
selected.style["width"] = `${placeholderValue}%`;
unselected.style["left"] = `${placeholderValue}%`;
@@ -117,33 +118,33 @@ class Stars extends HTMLElement {
}
function preselectStars(): void {
- tooltip.classList.add("show");
+ tooltip.classList.add(Css.SHOW);
if (parseInt(slider.value) > 0) {
- tooltip.classList.remove("trash");
+ tooltip.classList.remove(Css.TRASH);
tooltip.textContent = (5 * (parseInt(slider.value)) / max).toFixed(2);
- preselected.classList.add("show");
+ preselected.classList.add(Css.SHOW);
preselected.style["width"] = `${100 * parseInt(slider.value) / max}%`;
} else {
tooltip.textContent = "";
- tooltip.classList.add("trash");
+ tooltip.classList.add(Css.TRASH);
if (placeholder) {
- preselected.classList.add("show");
+ preselected.classList.add(Css.SHOW);
preselected.style["width"] = `${100 * placeholder / max}%`;
} else {
- preselected.classList.remove("show");
+ preselected.classList.remove(Css.SHOW);
}
}
}
function selectStars(): void {
- tooltip.classList.remove("show");
- preselected.classList.remove("show");
+ tooltip.classList.remove(Css.SHOW);
+ preselected.classList.remove(Css.SHOW);
if (parseInt(slider.value) > 0) {
- selected.classList.remove("tobago-placeholder");
+ selected.classList.remove(Css.TOBAGO_PLACEHOLDER);
const percentValue = 100 * parseInt(slider.value) / max;
selected.style["width"] = `${percentValue}%`;
@@ -153,13 +154,13 @@ class Stars extends HTMLElement {
hiddenInput.value = slider.value;
} else {
if (placeholder) {
- selected.classList.add("tobago-placeholder");
+ selected.classList.add(Css.TOBAGO_PLACEHOLDER);
const placeholderValue = 100 * placeholder / max;
selected.style["width"] = `${placeholderValue}%`;
unselected.style["left"] = `${placeholderValue}%`;
unselected.style["width"] = `${100 - placeholderValue}%`;
} else {
- selected.classList.remove("tobago-placeholder");
+ selected.classList.remove(Css.TOBAGO_PLACEHOLDER);
selected.style["width"] = "";
unselected.style["left"] = "";
unselected.style["width"] = "";
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-suggest.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-suggest.ts
index 7c6ae9a33f..a74cd705ec 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-suggest.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-suggest.ts
@@ -18,6 +18,7 @@
import Autocomplete from "@trevoreyre/autocomplete-js";
import {SuggestFilter} from "./tobago-suggest-filter";
import {MenuStore} from "./tobago-menu-store";
+import {Css} from "./tobago-css";
export class Suggest {
@@ -36,8 +37,8 @@ export class Suggest {
}
this.registerAjaxListener();
- this.base.classList.add("autocomplete");
- this.suggestInput.classList.add("autocomplete-input");
+ this.base.classList.add(Css.AUTOCOMPLETE);
+ this.suggestInput.classList.add(Css.AUTOCOMPLETE_INPUT);
if (this.isInputGroup && this.suggestInput.previousElementSibling === null) {
this.suggestInput.insertAdjacentHTML("afterend", "<div class=\"autocomplete-pseudo-container\"></div>");
@@ -146,7 +147,7 @@ export class Suggest {
this.resultList.style.left = `${suggestInputRect.left}px`;
if (this.resultListPosition === "below") {
this.resultList.style.marginTop =
- `${window.scrollY + suggestInputRect.top + suggestInputRect.height + space}px`;
+ `${window.scrollY + suggestInputRect.top + suggestInputRect.height + space}px`;
this.resultList.style.marginBottom = null;
} else if (this.resultListPosition === "above") {
this.resultList.style.marginTop = null;
@@ -227,6 +228,6 @@ export class Suggest {
}
private get isInputGroup(): boolean {
- return this.suggestInput.parentElement.classList.contains("input-group");
+ return this.suggestInput.parentElement.classList.contains(Css.INPUT_GROUP);
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tab.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tab.ts
index 4c20ee9a49..5615327330 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tab.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tab.ts
@@ -15,6 +15,8 @@
* limitations under the License.
*/
+import {Css} from "./tobago-css";
+
class TabGroup extends HTMLElement {
private hiddenInput: HTMLInputElement;
@@ -54,7 +56,7 @@ export class Tab extends HTMLElement {
connectedCallback(): void {
const navLink = this.navLink;
- if (!navLink.classList.contains("disabled")) {
+ if (!navLink.classList.contains(Css.DISABLED)) {
navLink.addEventListener("click", this.select.bind(this));
}
}
@@ -78,10 +80,10 @@ export class Tab extends HTMLElement {
switch (tabGroup.switchType) {
case "client":
- old.navLink.classList.remove("active");
- this.navLink.classList.add("active");
- old.content.classList.remove("active");
- this.content.classList.add("active");
+ old.navLink.classList.remove(Css.ACTIVE);
+ this.navLink.classList.add(Css.ACTIVE);
+ old.content.classList.remove(Css.ACTIVE);
+ this.content.classList.add(Css.ACTIVE);
break;
case "reloadTab":
// will be done by <tobago-behavior>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-listbox.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-listbox.ts
index fe727f3da0..a06f82ef33 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-listbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-listbox.ts
@@ -15,6 +15,8 @@
* limitations under the License.
*/
+import {Css} from "./tobago-css";
+
class TreeListbox extends HTMLElement {
constructor() {
@@ -100,7 +102,7 @@ class TreeListbox extends HTMLElement {
}
private show(select: HTMLSelectElement, check: number): void {
- select.classList.remove("d-none");
+ select.classList.remove(Css.D_NONE);
const checkedOption = select.querySelector<HTMLOptionElement>("option:checked");
if (checkedOption && checkedOption.index !== check) {
checkedOption.selected = false;
@@ -111,7 +113,7 @@ class TreeListbox extends HTMLElement {
}
private hide(select: HTMLSelectElement): void {
- select.classList.add("d-none");
+ select.classList.add(Css.D_NONE);
const checkedOption = select.querySelector<HTMLOptionElement>("option:checked");
if (checkedOption) {
checkedOption.selected = false;
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-node.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-node.ts
index 2f2139ff7c..177a2e8422 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-node.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-tree-node.ts
@@ -17,6 +17,7 @@
import {Sheet} from "./tobago-sheet";
import {Tree} from "./tobago-tree";
+import {Css} from "./tobago-css";
export class TreeNode extends HTMLElement {
@@ -45,7 +46,7 @@ export class TreeNode extends HTMLElement {
}
this.deleteExpandedNode(this.index);
- this.classList.remove("tobago-expanded");
+ this.classList.remove(Css.TOBAGO_EXPANDED);
this.hideNodes(this.treeChildNodes);
if (this.tree) {
@@ -65,7 +66,7 @@ export class TreeNode extends HTMLElement {
}
this.addExpandedNode(this.index);
- this.classList.add("tobago-expanded");
+ this.classList.add(Css.TOBAGO_EXPANDED);
this.showNodes(this.treeChildNodes);
if (this.tree) {
@@ -89,9 +90,9 @@ export class TreeNode extends HTMLElement {
for (const treeChildNode of treeChildNodes) {
if (treeChildNode.sheet) {
- treeChildNode.closest("tr").classList.add("d-none");
+ treeChildNode.closest("tr").classList.add(Css.D_NONE);
} else {
- treeChildNode.classList.add("d-none");
+ treeChildNode.classList.add(Css.D_NONE);
}
this.hideNodes(treeChildNode.treeChildNodes);
@@ -102,9 +103,9 @@ export class TreeNode extends HTMLElement {
for (const treeChildNode of treeChildNodes) {
if (treeChildNode.sheet) {
- treeChildNode.closest("tr").classList.remove("d-none");
+ treeChildNode.closest("tr").classList.remove(Css.D_NONE);
} else {
- treeChildNode.classList.remove("d-none");
+ treeChildNode.classList.remove(Css.D_NONE);
}
this.showNodes(treeChildNode.treeChildNodes);
[myfaces-tobago] 01/02: refactor(cleanup): separate key class
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 9402f8cb5516d5a7f81349488182184373f94e55
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Feb 10 21:48:54 2023 +0100
refactor(cleanup): separate key class
---
.../src/main/ts/tobago-key.ts | 28 ++++++++++++++++++
.../src/main/ts/tobago-page.ts | 7 ++---
.../src/main/ts/tobago-select-list-base.ts | 10 -------
.../src/main/ts/tobago-select-many-list.ts | 13 +++++----
.../src/main/ts/tobago-select-one-list.ts | 13 +++++----
.../src/main/ts/tobago-select-one-radio.ts | 8 ++----
.../src/main/ts/tobago-sheet.ts | 33 +++++++++++-----------
7 files changed, 63 insertions(+), 49 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-key.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-key.ts
new file mode 100644
index 0000000000..cdb99fbbf7
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-key.ts
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export enum Key {
+ ARROW_DOWN = "ArrowDown",
+ ARROW_UP = "ArrowUp",
+ BACKSPACE = "Backspace",
+ ENTER = "Enter",
+ ESCAPE = "Escape",
+ SPACE = " ",
+ TAB = "Tab"
+}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
index d1857e6893..8de1a5373e 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
@@ -17,6 +17,7 @@
import {Overlay} from "./tobago-overlay";
import {OverlayType} from "./tobago-overlay-type";
+import {Key} from "./tobago-key";
export class Page extends HTMLElement {
@@ -82,11 +83,7 @@ export class Page extends HTMLElement {
window.addEventListener("unload", this.beforeUnload.bind(this));
this.addEventListener("keypress", (event: KeyboardEvent): boolean => {
- let code = event.which; // XXX deprecated
- if (code === 0) {
- code = event.keyCode;
- }
- if (code === 13) {
+ if (event.key === Key.ENTER) {
const target = event.target as HTMLElement;
if (target.tagName === "A" || target.tagName === "BUTTON") {
return;
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
index 6059a0026f..4d30cb5283 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
@@ -30,16 +30,6 @@ export class SelectListBase extends HTMLElement {
TOBAGO_OPTIONS: "tobago-options"
};
- protected readonly Key = {
- ARROW_DOWN: "ArrowDown",
- ARROW_UP: "ArrowUp",
- BACKSPACE: "Backspace",
- ENTER: "Enter",
- ESCAPE: "Escape",
- SPACE: " ",
- TAB: "Tab"
- };
-
private popper: Instance;
get disabled(): boolean {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
index f92709d9ce..42858adc2f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
@@ -17,6 +17,7 @@
import {TobagoFilterRegistry} from "./tobago-filter-registry";
import {SelectListBase} from "./tobago-select-list-base";
+import {Key} from "./tobago-key";
class SelectManyList extends SelectListBase {
constructor() {
@@ -176,22 +177,22 @@ class SelectManyList extends SelectListBase {
private keydownEvent(event: KeyboardEvent) {
switch (event.key) {
- case this.Key.ESCAPE:
+ case Key.ESCAPE:
this.hideDropdown();
this.removePreselection();
break;
- case this.Key.ARROW_DOWN:
+ case Key.ARROW_DOWN:
event.preventDefault();
this.showDropdown();
this.preselectNextTableRow();
break;
- case this.Key.ARROW_UP:
+ case Key.ARROW_UP:
event.preventDefault();
this.showDropdown();
this.preselectPreviousTableRow();
break;
- case this.Key.ENTER:
- case this.Key.SPACE:
+ case Key.ENTER:
+ case Key.SPACE:
if (this.preselectedRow) {
event.preventDefault();
const row = this.tbody.querySelector<HTMLTableRowElement>("." + this.CssClass.TOBAGO_PRESELECT);
@@ -202,7 +203,7 @@ class SelectManyList extends SelectListBase {
this.showDropdown();
}
break;
- case this.Key.TAB:
+ case Key.TAB:
this.removePreselection();
break;
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
index 39a65efed2..392f5f70e7 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
@@ -17,6 +17,7 @@
import {TobagoFilterRegistry} from "./tobago-filter-registry";
import {SelectListBase} from "./tobago-select-list-base";
+import {Key} from "./tobago-key";
class SelectOneList extends SelectListBase {
constructor() {
@@ -112,28 +113,28 @@ class SelectOneList extends SelectListBase {
private keydownEvent(event: KeyboardEvent) {
switch (event.key) {
- case this.Key.ESCAPE:
+ case Key.ESCAPE:
this.hideDropdown();
this.removePreselection();
break;
- case this.Key.ARROW_DOWN:
+ case Key.ARROW_DOWN:
event.preventDefault();
this.showDropdown();
this.preselectNextTableRow();
break;
- case this.Key.ARROW_UP:
+ case Key.ARROW_UP:
event.preventDefault();
this.showDropdown();
this.preselectPreviousTableRow();
break;
- case this.Key.BACKSPACE:
+ case Key.BACKSPACE:
if (this.filterInput.value.length === 0) {
this.spanText = null;
this.filterInput.dispatchEvent(new Event("input"));
}
break;
- case this.Key.ENTER:
- case this.Key.SPACE:
+ case Key.ENTER:
+ case Key.SPACE:
if (this.preselectedRow) {
event.preventDefault();
const row = this.tbody.querySelector<HTMLTableRowElement>("." + this.CssClass.TOBAGO_PRESELECT);
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
index 621ce702ef..ed6d0a2953 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-radio.ts
@@ -16,13 +16,9 @@
*/
import {Focus} from "./tobago-focus";
+import {Key} from "./tobago-key";
class SelectOneRadio extends HTMLElement {
-
- private readonly Key = {
- SPACE: " "
- };
-
private oldCheckedId = "";
constructor() {
@@ -52,7 +48,7 @@ class SelectOneRadio extends HTMLElement {
}
private keySelection(event: KeyboardEvent): void {
- if (event.key === this.Key.SPACE) {
+ if (event.key === Key.SPACE) {
event.preventDefault();
}
const radio = event.currentTarget as HTMLInputElement;
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index 3ce48491ce..86486f93fc 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -16,6 +16,7 @@
*/
import {Page} from "./tobago-page";
+import {Key} from "./tobago-key";
interface MousemoveData {
columnIndex: number;
@@ -66,7 +67,7 @@ export class Sheet extends HTMLElement {
return ["INPUT", "TEXTAREA", "SELECT", "A", "BUTTON"].indexOf(element.tagName) > -1;
}
- private static getRowTemplate(columns: number, rowIndex: number) : string {
+ private static getRowTemplate(columns: number, rowIndex: number): string {
return `<tr row-index="${rowIndex}" dummy="dummy">
<td colspan="${columns}"> </td>
</tr>`;
@@ -101,9 +102,9 @@ export class Sheet extends HTMLElement {
const bodyTable = this.getBodyTable();
const bodyCols = this.getBodyCols();
const borderLeftWidth
- = Number(getComputedStyle(bodyTable.querySelector("td:first-child")).borderLeftWidth.slice(0, -2));
+ = Number(getComputedStyle(bodyTable.querySelector("td:first-child")).borderLeftWidth.slice(0, -2));
const borderRightWidth
- = Number(getComputedStyle(bodyTable.querySelector("td:last-child")).borderRightWidth.slice(0, -2));
+ = Number(getComputedStyle(bodyTable.querySelector("td:last-child")).borderRightWidth.slice(0, -2));
const tableWidth = bodyTable.offsetWidth - (borderLeftWidth + borderRightWidth) / 2;
console.assert(headerCols.length - 1 === bodyCols.length,
@@ -255,7 +256,7 @@ export class Sheet extends HTMLElement {
pagingInput.addEventListener("blur", this.blurPaging.bind(this));
pagingInput.addEventListener("keydown", function (event: KeyboardEvent): void {
- if (event.keyCode === 13) {
+ if (event.key === Key.ENTER) {
event.stopPropagation();
event.preventDefault();
event.currentTarget.dispatchEvent(new Event("blur"));
@@ -266,11 +267,11 @@ export class Sheet extends HTMLElement {
// attribute getter + setter ---------------------------------------------------------- //
- get lazyActive():boolean {
+ get lazyActive(): boolean {
return this.hasAttribute("lazy-active");
}
- set lazyActive(update:boolean) {
+ set lazyActive(update: boolean) {
if (update) {
this.setAttribute("lazy-active", "");
} else {
@@ -278,11 +279,11 @@ export class Sheet extends HTMLElement {
}
}
- get lazy():boolean {
+ get lazy(): boolean {
return this.hasAttribute("lazy");
}
- set lazy(update:boolean) {
+ set lazy(update: boolean) {
if (update) {
this.setAttribute("lazy", "");
} else {
@@ -290,15 +291,15 @@ export class Sheet extends HTMLElement {
}
}
- get lazyUpdate():boolean {
+ get lazyUpdate(): boolean {
return this.hasAttribute("lazy-update");
}
- get rows():number {
+ get rows(): number {
return parseInt(this.getAttribute("rows"));
}
- get rowCount():number {
+ get rowCount(): number {
return parseInt(this.getAttribute("row-count"));
}
@@ -623,7 +624,7 @@ Type: ${data.type}`);
if (this.mousedownOnRowData) { // integration test: mousedownOnRowData may be 'null'
if (Math.abs(this.mousedownOnRowData.x - event.clientX)
- + Math.abs(this.mousedownOnRowData.y - event.clientY) > 5) {
+ + Math.abs(this.mousedownOnRowData.y - event.clientY) > 5) {
// The user has moved the mouse. We assume, the user want to select some text inside the sheet,
// so we doesn't select the row.
return;
@@ -645,10 +646,10 @@ Type: ${data.type}`);
if (event.shiftKey && selectionMode === "multi" && lastClickedRowIndex > -1) {
if (lastClickedRowIndex <= row.sectionRowIndex) {
this.selectRange(
- selectedSet, rows, lastClickedRowIndex, row.sectionRowIndex, true, false);
+ selectedSet, rows, lastClickedRowIndex, row.sectionRowIndex, true, false);
} else {
this.selectRange(
- selectedSet, rows, row.sectionRowIndex, lastClickedRowIndex, true, false);
+ selectedSet, rows, row.sectionRowIndex, lastClickedRowIndex, true, false);
}
} else if (selectionMode !== "singleOrNone" || !this.isRowSelected(selectedSet, row)) {
this.toggleSelection(selectedSet, row, selector);
@@ -724,7 +725,7 @@ Type: ${data.type}`);
getHiddenSelected(): HTMLInputElement {
const rootNode = this.getRootNode() as ShadowRoot | Document;
- return rootNode.getElementById(this.id + "::selected") as HTMLInputElement;
+ return rootNode.getElementById(this.id + "::selected") as HTMLInputElement;
}
getHiddenScrollPosition(): HTMLInputElement {
@@ -756,7 +757,7 @@ Type: ${data.type}`);
return selectedSet.has(parseInt(row.dataset.tobagoRowIndex));
}
- resetSelected(selectedSet: Set<number>):void {
+ resetSelected(selectedSet: Set<number>): void {
selectedSet.clear();
}