myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From lof...@apache.org
Subject [myfaces-tobago] branch master updated: replace jQuery with ES6
Date Wed, 07 Aug 2019 17:59:21 GMT
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


The following commit(s) were added to refs/heads/master by this push:
     new d053425  replace jQuery with ES6
d053425 is described below

commit d053425619c74a168c187941acee60d24fe2854a
Author: Udo Schnurpfeil <lofwyr@apache.org>
AuthorDate: Wed Aug 7 19:59:06 2019 +0200

    replace jQuery with ES6
    
    issue: TOBAGO-1633: TS refactoring
---
 .../main/npm/ts/tobago-select-boolean-checkbox.ts  | 17 ++--
 .../main/npm/ts/tobago-select-boolean-toggle.ts    | 17 ++--
 .../src/main/npm/ts/tobago-select-many-checkbox.ts | 17 ++--
 .../src/main/npm/ts/tobago-select-many-shuttle.ts  | 92 ++++++++++++----------
 .../src/main/npm/ts/tobago-select-one-listbox.ts   | 36 ++++-----
 .../src/main/npm/ts/tobago-select-one-radio.ts     | 67 ++++++++--------
 6 files changed, 119 insertions(+), 127 deletions(-)

diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
index ae105e9..da659d8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-checkbox.ts
@@ -16,20 +16,17 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
 
 class SelectBooleanCheckbox {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var checkboxes = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectBooleanCheckbox
input[readonly]");
-    checkboxes.each(function () {
-      // Save the initial state to restore it, when the user tries to manipulate it.
-      var initial = jQuery(this).is(":checked");
-      jQuery(this).click(function () {
-        jQuery(this).prop("checked", initial);
+  static init = function (element: HTMLElement) {
+    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox
input[readonly]")) {
+      checkbox.addEventListener("click", (event: Event) => {
+        // in the "readonly" case, prevent the default, which is changing the "checked" state
+        event.preventDefault();
       });
-    });
+    }
   };
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
index 2330270..1a6cab2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-boolean-toggle.ts
@@ -16,20 +16,17 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
 
 class SelectBooleanToggle {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var toggles = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectBooleanToggle input[readonly]");
-    toggles.each(function () {
-      // Save the initial state to restore it, when the user tries to manipulate it.
-      var initial = jQuery(this).is(":checked");
-      jQuery(this).click(function () {
-        jQuery(this).prop("checked", initial);
+  static init = function (element: HTMLElement) {
+    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectBooleanCheckbox
input[readonly]")) {
+      checkbox.addEventListener("click", (event: Event) => {
+        // in the "readonly" case, prevent the default, which is changing the "checked" state
+        event.preventDefault();
       });
-    });
+    }
   };
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
index 7a584cc..57000b6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
@@ -16,20 +16,17 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
 
 class SelectManyCheckbox {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var checkboxes = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectManyCheckbox
input[readonly]");
-    checkboxes.each(function () {
-      // Save the initial state to restore it, when the user tries to manipulate it.
-      var initial = jQuery(this).is(":checked");
-      jQuery(this).click(function () {
-        jQuery(this).prop("checked", initial);
+  static init = function (element: HTMLElement) {
+    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectManyCheckbox
input[readonly]")) {
+      checkbox.addEventListener("click", (event: Event) => {
+        // in the "readonly" case, prevent the default, which is changing the "checked" state
+        event.preventDefault();
       });
-    });
+    }
   };
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
index 2ed8781..efa9b35 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-shuttle.ts
@@ -16,60 +16,68 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils} from "./tobago-utils";
 
 class SelectManyShuttle {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var shuttles = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)");
+  static init = function (element: HTMLElement) {
+    for (const shuttle of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectManyShuttle:not(.tobago-selectManyShuttle-disabled)"))
{
 
-    shuttles.find(".tobago-selectManyShuttle-unselected").dblclick(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
true, false);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-unselected").addEventListener(
+          "dblclick", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, true, false);
+          });
 
-    shuttles.find(".tobago-selectManyShuttle-selected").dblclick(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
false, false);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-selected").addEventListener(
+          "dblclick", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, false, false);
+          });
 
-    shuttles.find(".tobago-selectManyShuttle-addAll").click(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
true, true);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-addAll").addEventListener(
+          "click", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, true, true);
+          });
 
-    shuttles.find(".tobago-selectManyShuttle-add").click(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
true, false);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-add").addEventListener(
+          "click", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, true, false);
+          });
 
-    shuttles.find(".tobago-selectManyShuttle-removeAll").click(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
false, true);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-removeAll").addEventListener(
+          "click", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, false, true);
+          });
 
-    shuttles.find(".tobago-selectManyShuttle-remove").click(function () {
-      SelectManyShuttle.moveSelectedItems(jQuery(this).parents(".tobago-selectManyShuttle"),
false, false);
-    });
+      shuttle.querySelector(".tobago-selectManyShuttle-remove").addEventListener(
+          "click", (event: Event) => {
+            SelectManyShuttle.moveSelectedItems(event, false, false);
+          });
+    }
   };
 
-  static moveSelectedItems = function ($shuttle, direction, all) {
-    var $unselected = $shuttle.find(".tobago-selectManyShuttle-unselected");
-    var $selected = $shuttle.find(".tobago-selectManyShuttle-selected");
-    var count = $selected.children().length;
-    var $source = direction ? $unselected : $selected;
-    var $target = direction ? $selected : $unselected;
-    var $shifted = $source.find(all ? "option:not(:disabled)" : "option:selected").remove().appendTo($target);
-
-    // synchronize the hidden select
-    var $hidden = $shuttle.find(".tobago-selectManyShuttle-hidden");
-    var $hiddenOptions = $hidden.find("option");
-    // todo: may be optimized: put values in a hash map?
-    $shifted.each(function () {
-      var $option = jQuery(this);
-      $hiddenOptions.filter("[value='" + $option.val() + "']").prop("selected", direction);
-    });
+  static moveSelectedItems = function (event: Event, direction: boolean, all: boolean) {
+    const currentTarget = event.currentTarget as HTMLElement;
+    const shuttle = currentTarget.closest(".tobago-selectManyShuttle");
+    const unselected = shuttle.querySelector(".tobago-selectManyShuttle-unselected");
+    const selected = shuttle.querySelector(".tobago-selectManyShuttle-selected");
+    var oldCount = selected.childElementCount;
+    const source = direction ? unselected : selected;
+    const target = direction ? selected : unselected;
+    const options = source.querySelectorAll(all ? "option:not(:disabled)" : "option:checked");
+    var hidden = shuttle.querySelector(".tobago-selectManyShuttle-hidden");
+    var hiddenOptions = hidden.querySelectorAll("option");
+    for (const option of options as NodeListOf<HTMLOptionElement>) {
+      source.removeChild(option);
+      target.appendChild(option);
+      for (const hiddenOption of hiddenOptions) {
+        if (hiddenOption.value === option.value) {
+          hiddenOption.selected = direction;
+        }
+      }
+    }
 
-    if (count !== $selected.children().length) {
-      var e = jQuery.Event("change");
-      // trigger an change event for command facets
-      $hidden.trigger(e);
+    if (oldCount !== selected.childElementCount) {
+      hidden.dispatchEvent(new Event("change"));
     }
   };
 }
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
index c211860..8ac9294 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
@@ -16,28 +16,26 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
 
 class SelectOneListbox {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var selects = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectOneListbox");
-    var notRequired = selects.not(".tobago-selectOneListbox-markup-required");
-    notRequired
-        .change(function () {
-          var element = jQuery(this);
-          if (element.data("tobago-old-value") == undefined) {
-            element.data("tobago-old-value", -1);
-          }
-        }).click(function () {
-      var element = jQuery(this);
-      if (element.data("tobago-old-value") == undefined
-          || element.data("tobago-old-value") == element.prop("selectedIndex")) {
-        element.prop("selectedIndex", -1);
-      }
-      element.data("tobago-old-value", element.prop("selectedIndex"));
-    });
+  static init = function (element: HTMLElement) {
+    for (const listbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneListbox:not(:required)"))
{
+      listbox.addEventListener("change", (event: Event) => {
+        const target = event.currentTarget as HTMLSelectElement;
+        if (!target.dataset["tobagoOldValue"]) {
+          target.dataset["tobagoOldValue"] = "-1";
+        }
+      });
+      listbox.addEventListener("click", (event: Event) => {
+        const target = event.currentTarget as HTMLSelectElement;
+        if (!target.dataset["tobagoOldValue"] || parseInt(target.dataset["tobagoOldValue"])
=== target.selectedIndex) {
+          target.selectedIndex = -1;
+        }
+        target.dataset["tobagoOldValue"] = String(target.selectedIndex);
+      });
+    }
   };
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
index abd8358..d0bc7f8 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
@@ -16,47 +16,42 @@
  */
 
 import {Listener, Phase} from "./tobago-listener";
-import {Tobago4Utils} from "./tobago-utils";
+import {DomUtils, Tobago4Utils} from "./tobago-utils";
 
 class SelectOneRadio {
 
-  static init = function (elements) {
-    elements = elements.jQuery ? elements : jQuery(elements); // fixme jQuery -> ES5
-    var selectOneRadios = Tobago4Utils.selectWithJQuery(elements, ".tobago-selectOneRadio");
-    selectOneRadios.each(function () {
-      var ul = jQuery(this);
-      var id = ul.closest("[id]").attr("id");
-      var radios = jQuery('input[name="' + id.replace(/([:\.])/g, '\\$1') + '"]');
-      radios.each(function () {
-        var selectOneRadio = jQuery(this);
-        selectOneRadio.data("tobago-old-value", selectOneRadio.prop("checked"));
-      });
-      radios.click(function () {
-        var selectOneRadio = jQuery(this);
-        var readonly = selectOneRadio.prop("readonly");
-        var required = selectOneRadio.prop("required");
-        if (!required && !readonly) {
-          if (selectOneRadio.data("tobago-old-value") == selectOneRadio.prop("checked"))
{
-            selectOneRadio.prop("checked", false);
+  static init = function (element: HTMLElement) {
+    for (const radio of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneRadio"))
{
+      const id = radio.closest("[id]").id;
+      const quotedId = id.replace(/([:.])/g, '\\$1');
+      const allConnected = document.querySelectorAll("input[name=" + quotedId + "]") as NodeListOf<HTMLInputElement>;
+      for (const connectedRadio of allConnected) {
+        connectedRadio.dataset["tobagoOldValue"] = String(connectedRadio.checked);
+        connectedRadio.addEventListener("click", (event: Event) => {
+          const target = event.currentTarget as HTMLInputElement;
+          const readOnly = target.readOnly;
+          const required = target.required;
+          if (!required && !readOnly) {
+            if (target.dataset["tobagoOldValue"] === String(target.checked)) {
+              target.checked = false;
+            }
+            target.dataset["tobagoOldValue"] = String(target.checked);
           }
-          selectOneRadio.data("tobago-old-value", selectOneRadio.prop("checked"));
-        }
-        if (readonly) {
-          radios.each(function () {
-            var radio = jQuery(this);
-            radio.prop("checked", radio.data("tobago-old-value"));
-          });
-        } else {
-          radios.each(function () {
-            if (this.id != selectOneRadio.get(0).id) {
-              var radio = jQuery(this);
-              radio.prop("checked", false);
-              radio.data("tobago-old-value", radio.prop("checked"));
+          if (readOnly) {
+            for (const connectedRadio of allConnected) {
+              connectedRadio.checked = connectedRadio.dataset["tobagoOldValue"] === "true";
+            }
+          } else {
+            for (const connectedRadio of allConnected) {
+              if (target.id != connectedRadio.id) {
+                connectedRadio.checked = false;
+                connectedRadio.dataset["tobagoOldValue"] = String(connectedRadio.checked);
+              }
             }
-          });
-        }
-      });
-    });
+          }
+        });
+      }
+    }
   };
 }
 


Mime
View raw message