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/01/06 14:57:05 UTC
[myfaces-tobago] 01/02: fix(footer): margin-bottom on body
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit d396ef6a75f87fa44d938b5e6074b635c297fa3b
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Jan 6 13:57:52 2023 +0100
fix(footer): margin-bottom on body
* fix: 'margin-bottom' CSS value on body element
* add test
Issue: TOBAGO-2186
---
.../4100-footer/FixedFooter_height.test.js | 33 +++++++++++++++++
.../900-test/4100-footer/FixedFooter_height.xhtml | 41 ++++++++++++++++++++++
.../src/main/ts/tobago-footer.ts | 35 ++++++++++++------
3 files changed, 98 insertions(+), 11 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.test.js
new file mode 100644
index 0000000000..fa469c3c55
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.test.js
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+import {elementByIdFn, querySelectorFn} from "/script/tobago-test.js";
+
+it("Body margin-bottom equals fixed footer height", function (done) {
+ const nonFixedFooterFn = elementByIdFn("page:mainForm:nonfixedFooter");
+ const fixedFooterFn = elementByIdFn("page:mainForm:fixedFooter");
+
+ const test = new JasmineTestTool(done);
+ test.do(() => expect(fixedFooterFn().offsetHeight).toBeLessThan(nonFixedFooterFn().offsetHeight));
+ test.do(() => expect(fixedFooterFn().offsetHeight).toBe(bodyMarginBottom()));
+ test.start();
+});
+
+function bodyMarginBottom() {
+ return Number.parseInt(querySelectorFn("body")().style.marginBottom);
+}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.xhtml
new file mode 100644
index 0000000000..205b76cba7
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/4100-footer/FixedFooter_height.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/main.xhtml"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+ <tc:footer id="fixedFooter" fixed="true">
+ This is a fixed footer. Some input fields are added to increase the height.
+ <tc:in/>
+ <tc:in/>
+ <tc:in/>
+ </tc:footer>
+
+ <tc:footer id="nonfixedFooter">
+ This is a non-fixed footer. Some input fields are added to increase the height.
+ <tc:in/>
+ <tc:in/>
+ <tc:in/>
+ <tc:in/>
+ <tc:in/>
+ </tc:footer>
+
+</ui:composition>
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 3ce9172931..fa7342c36a 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
@@ -23,26 +23,39 @@ class Footer extends HTMLElement {
super();
}
+ get fixed(): boolean {
+ return this.classList.contains("fixed-bottom");
+ }
+
+ get height(): number {
+ const style: CSSStyleDeclaration = getComputedStyle(this);
+ return this.offsetHeight + Number.parseInt(style.marginTop) + Number.parseInt(style.marginBottom);
+ }
+
connectedCallback(): void {
- if (this.isFixed) {
- // call now
+ if (this.fixed) {
this.adjustMargin();
- // and after resize
window.addEventListener("resize", this.adjustMargin.bind(this));
}
}
- private adjustMargin(event?: MouseEvent): void {
- const style: CSSStyleDeclaration = window.getComputedStyle(this);
- const maxFooterHeight = this.offsetHeight + Number.parseInt(style.marginTop) + Number.parseInt(style.marginBottom);
- if (maxFooterHeight !== this.lastMaxFooterHeight) {
- this.lastMaxFooterHeight = maxFooterHeight;
- this.closest("body").style.marginBottom = `${maxFooterHeight}px`;
+ private adjustMargin(event?: Event): void {
+ if (this.hasBiggestFixedFooterHeight()) {
+ const root = this.getRootNode() as ShadowRoot | Document;
+ const body = root.querySelector<HTMLBodyElement>("body");
+ body.style.marginBottom = `${this.height}px`;
}
}
- private isFixed(): boolean {
- return this.classList.contains("fixed-bottom");
+ private hasBiggestFixedFooterHeight(): boolean {
+ const root = this.getRootNode() as ShadowRoot | Document;
+ const footers = root.querySelectorAll<Footer>("tobago-footer");
+ for (const footer of footers) {
+ if (footer.fixed && footer.height > this.height) {
+ return false;
+ }
+ }
+ return true;
}
}