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:57 UTC
[myfaces-tobago] 02/02: refactor(cleanup): separate CSS class
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);