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 2022/11/29 14:33:19 UTC
[myfaces-tobago] 01/02: fix: transition overlay scrollbar
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 e9a82860af920df038cbaa644e459bad43d66006
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Nov 28 20:44:21 2022 +0100
fix: transition overlay scrollbar
* remove scrollbar if transition overlay is shown.
* refactoring
* other components use the Overlay.htmlText() method to create an overlay
Issue: TOBAGO-2174
---
tobago-theme/src/main/scss/_tobago.scss | 46 ++++++++--------------
.../src/main/ts/tobago-behavior.ts | 5 ++-
.../src/main/ts/tobago-file.ts | 6 ++-
.../src/main/ts/tobago-overlay-type.ts | 22 +++++++++++
.../src/main/ts/tobago-overlay.ts | 39 ++++++++++++++++--
.../src/main/ts/tobago-page.ts | 6 ++-
6 files changed, 87 insertions(+), 37 deletions(-)
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 939066b768..e75b2f42ea 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -32,15 +32,15 @@ $icon-sort: "\F127";
$icon-sort-ascending: "\f57a";
$icon-sort-descending: "\f574";
$circles: (
- 1: "\f797",
- 2: "\f79d",
- 3: "\f7a3",
- 4: "\f7a9",
- 5: "\f7af",
- 6: "\f7b5",
- 7: "\f7bb",
- 8: "\f7c1",
- 9: "\f7c7"
+ 1: "\f797",
+ 2: "\f79d",
+ 3: "\f7a3",
+ 4: "\f7a9",
+ 5: "\f7af",
+ 6: "\f7b5",
+ 7: "\f7bb",
+ 8: "\f7c1",
+ 9: "\f7c7"
);
/* non-bootstrap variables --------------------------------------- */
@@ -823,30 +823,16 @@ span.tobago-out:empty:before {
// was in bs4: color: $table-dark-color;
}
-/* overlay ----------------------------------------------------------- */
-
tobago-overlay {
- display: table;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
height: 100%;
- /* TODO: better z-index strategy */
- z-index: 500; /* less than the bootstrap navbar */
- //transition-delay: 1s;
- //transition-duration: 250ms;
- //transition-property: opacity;
- opacity: 0.8;
- > div {
- background-color: #8884;
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- width: 100%;
- /* TODO: better z-index strategy */
- z-index: 500; /* less than the bootstrap navbar */
+ &.modal-backdrop.show {
+ --#{$prefix}backdrop-zindex: #{$zindex-sticky - 1}; //less than the bootstrap navbar
+ --#{$prefix}backdrop-bg: rgba(#{red($gray-400)}, #{green($gray-400)}, #{blue($gray-400)}, #{$modal-backdrop-opacity});
+ opacity: 1;
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
index 21a5fbf923..69c909d220 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
@@ -19,6 +19,8 @@ import {Collapse} from "./tobago-popup";
import {Page} from "./tobago-page";
import {CollapseOperation} from "./tobago-collapsible-operation";
import {BehaviorMode} from "./tobago-behavior-mode";
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
class Behavior extends HTMLElement {
@@ -78,7 +80,8 @@ class Behavior extends HTMLElement {
} else {
id = partialElement.id;
}
- partialElement.insertAdjacentHTML("beforeend", `<tobago-overlay for='${id}'></tobago-overlay>`);
+ partialElement.insertAdjacentHTML("beforeend",
+ Overlay.htmlText(id, OverlayType.wait, Page.page(this).waitOverlayDelayAjax));
} else {
console.warn("No element found by id='%s' for overlay!", partialId);
}
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 9154d24a1f..4f9dfeb682 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
@@ -15,6 +15,9 @@
* limitations under the License.
*/
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
+
export class File extends HTMLElement {
constructor() {
@@ -67,8 +70,7 @@ export class File extends HTMLElement {
if (dropZone) {
if (dropZone.querySelector("tobago-overlay") == null) {
console.info("DRAGOVER", event.dataTransfer.items);
- dropZone.insertAdjacentHTML(
- "beforeend", `<tobago-overlay for='${dropZone.id}' delay="0" type="drop-zone"></tobago-overlay>`);
+ dropZone.insertAdjacentHTML("beforeend", Overlay.htmlText(dropZone.id, OverlayType.dropZone, 0));
}
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts
new file mode 100644
index 0000000000..50afbb7d26
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 OverlayType {
+ dropZone = "drop-zone",
+ error = "error",
+ wait = "wait"
+}
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 45b3861264..f3c6e5d540 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
@@ -20,6 +20,7 @@
*/
import {Page} from "./tobago-page";
+import {OverlayType} from "./tobago-overlay-type";
// 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
@@ -27,6 +28,14 @@ import {Page} from "./tobago-page";
// 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>`;
+ }
constructor() {
super();
@@ -40,11 +49,13 @@ export class Overlay extends HTMLElement {
console.log("disconnected from the DOM");
const forElement = document.getElementById(this.for);
if (forElement) {
- forElement.classList.remove("position-relative");
+ forElement.classList.remove(this.CssClass.POSITION_RELATIVE);
}
+ this.showScrollbar();
}
render(): void {
+ this.classList.add(this.CssClass.SHOW);
let icon;
switch (this.type) {
case "error":
@@ -60,14 +71,36 @@ export class Overlay extends HTMLElement {
icon = "";
}
- this.insertAdjacentHTML("afterbegin", `<div>${icon}</div>`);
+ this.insertAdjacentHTML("afterbegin", icon);
const forElement = document.getElementById(this.for);
if (forElement) {
- forElement.classList.add("position-relative");
+ forElement.classList.add(this.CssClass.POSITION_RELATIVE);
+ if (forElement.tagName === "TOBAGO-PAGE") {
+ this.hideScrollbar();
+ } else {
+ this.style.position = "absolute";
+ const boundingClientRect = forElement.getBoundingClientRect();
+ this.style.width = `${boundingClientRect.width}px`;
+ this.style.height = `${boundingClientRect.height}px`;
+ }
}
}
+ private hideScrollbar() {
+ document.body.style.overflow = "hidden";
+ document.body.style.paddingRight = `${this.scrollbarWidth}px`;
+ }
+
+ private showScrollbar() {
+ document.body.style.overflow = null;
+ document.body.style.paddingRight = null;
+ }
+
+ get scrollbarWidth(): number {
+ return window.innerWidth - document.documentElement.clientWidth;
+ }
+
get for(): string {
return this.getAttribute("for");
}
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 2d167530b5..d1857e6893 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
@@ -15,6 +15,9 @@
* limitations under the License.
*/
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
+
export class Page extends HTMLElement {
submitActive = false;
@@ -111,7 +114,8 @@ export class Page extends HTMLElement {
beforeSubmit(event: Event, decoupled = false): void {
this.submitActive = true;
if (!decoupled) {
- this.body.insertAdjacentHTML("beforeend", `<tobago-overlay for='${this.id}'></tobago-overlay>`);
+ this.body.insertAdjacentHTML("beforeend",
+ Overlay.htmlText(this.id, OverlayType.wait, this.waitOverlayDelayFull));
}
console.debug(this.body.querySelector("tobago-overlay"));
}