[myfaces-tobago] 03/04: TOBAGO-1633: Use TypeScript instead of JavaScript

[lo...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit 666b633d8385123c6a6d24c13abe950a7a127a0d
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Thu May 9 14:44:43 2019 +0200

    TOBAGO-1633: Use TypeScript instead of JavaScript
    
    * refactor jQuery to Vanilla JS
---
 .../src/main/npm/ts/tobago-header-footer.ts        | 38 ++++++++++------------
 .../src/main/npm/ts/tobago-utils.ts                | 14 ++++++++
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
index 731841e..6824788 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-header-footer.ts
@@ -23,15 +23,16 @@ namespace Tobago {
 
       // fixing fixed header/footer: content should not scroll behind the footer
 
-      const body: JQuery<NodeListOf<Element>> = Tobago4.Utils.selectWithJQuery(jQuery(element), "body");
-      const headers: JQuery<NodeListOf<Element>> = Tobago4.Utils.selectWithJQuery(jQuery(element), ".fixed-top");
-      const footers: JQuery<NodeListOf<Element>> = Tobago4.Utils.selectWithJQuery(jQuery(element), ".fixed-bottom");
+      const body = element.tobagoSelfOrQuerySelectorAll("body")[0];
+      const headers = element.tobagoSelfOrQuerySelectorAll(".fixed-top");
+      const footers = element.tobagoSelfOrQuerySelectorAll(".fixed-bottom");
 
       setMargins(body, headers, footers);
 
       let lastMaxHeaderHeight = 0;
       let lastMaxFooterHeight = 0;
-      jQuery(window).on("resize", function (): void {
+
+      window.addEventListener("resize", function (): void {
         const maxHeaderHeight: number = HeaderFooter.getMaxHeaderHeight(headers);
         const maxFooterHeight: number = HeaderFooter.getMaxFooterHeight(footers);
 
@@ -44,26 +45,23 @@ namespace Tobago {
         }
       });
 
-      function setMargins(
-          body: JQuery<NodeListOf<Element>>,
-          headers: JQuery<NodeListOf<Element>>,
-          footers: JQuery<NodeListOf<Element>>): void {
-        const maxHeaderHeight: number = HeaderFooter.getMaxHeaderHeight(headers);
-        const maxFooterHeight: number = HeaderFooter.getMaxFooterHeight(footers);
+      function setMargins(body: HTMLElement, headers: HTMLElement[], footers: HTMLElement[]): void {
+        const maxHeaderHeight = HeaderFooter.getMaxHeaderHeight(headers);
+        const maxFooterHeight = HeaderFooter.getMaxFooterHeight(footers);
 
         if (maxHeaderHeight > 0) {
-          body.css("margin-top", maxHeaderHeight + "px");
+          body.style.marginTop = maxHeaderHeight + "px";
         }
         if (maxFooterHeight > 0) {
-          body.css("margin-bottom", maxFooterHeight + "px");
+          body.style.marginBottom = maxFooterHeight + "px";
         }
       }
     };
 
-    static getMaxHeaderHeight = function (headers: JQuery<NodeListOf<Element>>): number {
-      let maxHeaderHeight: number = 0;
-      headers.each(function (): void {
-        const height: number = jQuery(this).outerHeight(true);
+    static getMaxHeaderHeight = function (headers: HTMLElement[]): number {
+      let maxHeaderHeight = 0;
+      headers.forEach(function (element: HTMLElement): void {
+        const height = element.outerHeightWithMargin();
         if (height > maxHeaderHeight) {
           maxHeaderHeight = height;
         }
@@ -71,10 +69,10 @@ namespace Tobago {
       return maxHeaderHeight;
     };
 
-    static getMaxFooterHeight = function (footers: JQuery<NodeListOf<Element>>): number {
-      let maxFooterHeight: number = 0;
-      footers.each(function (): void {
-        const height: number = jQuery(this).outerHeight(true);
+    static getMaxFooterHeight = function (footers: HTMLElement[]): number {
+      let maxFooterHeight = 0;
+      footers.forEach(function (element: HTMLElement): void {
+        const height = element.outerHeightWithMargin();
         if (height > maxFooterHeight) {
           maxFooterHeight = height;
         }
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
index 88ab419..1b33e4f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
@@ -23,6 +23,10 @@ interface HTMLElement {
   tobagoPreviousElementSibling(): HTMLElement;
 
   tobagoNextElementSibling(): HTMLElement;
+
+  outerWidthWithMargin(): number;
+  outerHeightWithMargin(): number;
+
 }
 
 interface Document {
@@ -88,6 +92,16 @@ HTMLElement.prototype.tobagoNextElementSibling = function (): HTMLElement {
   return null;
 };
 
+HTMLElement.prototype.outerWidthWithMargin = function () {
+  const style = window.getComputedStyle(this);
+  return this.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
+};
+
+HTMLElement.prototype.outerHeightWithMargin = function () {
+  const style = window.getComputedStyle(this);
+  return this.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom);
+};
+
 Document.prototype.tobagoPage = function (): HTMLElement {
   const pages = this.getElementsByClassName("tobago-page");
   if (pages.length > 0) {