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: Suggest now uses HTML "custom elements" Reduce usage of jQuery
Date Fri, 09 Aug 2019 15:49:42 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 908fd15  Suggest now uses HTML "custom elements" Reduce usage of jQuery
908fd15 is described below

commit 908fd157b7db9d9c6f5005c09044d41fddcb8578
Author: Udo Schnurpfeil <lofwyr@apache.org>
AuthorDate: Fri Aug 9 16:58:06 2019 +0200

    Suggest now uses HTML "custom elements"
    Reduce usage of jQuery
    
    issue: TOBAGO-1633: TS refactoring
---
 .../myfaces/tobago/component/Attributes.java       |   1 +
 .../org/apache/myfaces/tobago/context/Markup.java  |   2 -
 .../internal/component/AbstractUISuggest.java      |   2 +
 .../renderkit/renderer/SuggestRenderer.java        |  29 +--
 .../taglib/component/InTagDeclaration.java         |   7 -
 .../taglib/component/SuggestTagDeclaration.java    |   9 +
 .../myfaces/tobago/renderkit/css/TobagoClass.java  |   1 -
 .../tobago/renderkit/html/CustomAttributes.java    |  43 ++++
 .../tobago/renderkit/html/DataAttributes.java      |  14 --
 .../tobago/renderkit/html/HtmlElements.java        |   3 +-
 tobago-core/src/main/resources/scss/_tobago.scss   |   4 +-
 .../50-migration/95-migration/4.0_to_5.0.xhtml     |   9 +
 .../010-input/20-suggest/Suggest.test.js           |   2 +-
 .../010-input/20-suggest/Suggest.xhtml             |   6 +-
 .../15-suggest-method/Suggest_Method.test.js       |   2 +-
 .../1020-suggest-quotMark/Suggest_QuotMark.test.js |   2 +-
 .../src/main/npm/ts/tobago-suggest.ts              | 266 +++++++++++++--------
 17 files changed, 250 insertions(+), 152 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
index 61cdce6..1317934 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
@@ -150,6 +150,7 @@ public enum Attributes {
   level,
   lang,
   link,
+  localMenu,
   /** @deprecated since 2.0.0 */
   @Deprecated
   margin,
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
index 4b870df..801b7df 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
@@ -100,7 +100,6 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final Markup LARGE = valueOf("large");
   public static final Markup LEFT = valueOf("left");
   public static final Markup LIGHT = valueOf("light");
-  public static final Markup LOCAL_MENU = valueOf("localMenu");
   public static final Markup MARKED = valueOf("marked");
   public static final Markup MEDIUM = valueOf("medium");
   public static final Markup MIDDLE = valueOf("middle");
@@ -185,7 +184,6 @@ public final class Markup implements Serializable, Iterable<String>
{
   public static final String STRING_LARGE = "large";
   public static final String STRING_LEFT = "left";
   public static final String STRING_LIGHT = "light";
-  public static final String STRING_LOCAL_MENU = "localMenu";
   public static final String STRING_MARKED = "marked";
   public static final String STRING_MEDIUM = "medium";
   public static final String STRING_MIDDLE = "middle";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISuggest.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISuggest.java
index 507eb4c..e6846eb 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISuggest.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISuggest.java
@@ -94,4 +94,6 @@ public abstract class AbstractUISuggest
   public abstract Integer getTotalCount();
 
   public abstract Integer getMaximumItems();
+
+  public abstract boolean isLocalMenu();
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
index 3b8e4b6..95bf01d 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
@@ -26,11 +26,9 @@ import org.apache.myfaces.tobago.internal.util.SelectItemUtils;
 import org.apache.myfaces.tobago.model.AutoSuggestItem;
 import org.apache.myfaces.tobago.model.AutoSuggestItems;
 import org.apache.myfaces.tobago.renderkit.RendererBase;
-import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
-import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
 import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
-import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
 import org.apache.myfaces.tobago.util.ComponentUtils;
 import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
 import org.slf4j.Logger;
@@ -108,29 +106,28 @@ public class SuggestRenderer extends RendererBase {
 
     final TobagoResponseWriter writer = getResponseWriter(facesContext);
 
-    writer.startElement(HtmlElements.INPUT);
-    writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.HIDDEN);
-    writer.writeClassAttribute(TobagoClass.SUGGEST);
+    writer.startElement(HtmlElements.TOBAGO_SUGGEST);
     final String clientId = suggest.getClientId(facesContext);
     writer.writeIdAttribute(clientId);
-    writer.writeNameAttribute(clientId);
     if (input != null) {
-      writer.writeAttribute(DataAttributes.SUGGEST_FOR, input.getFieldId(facesContext), false);
+      writer.writeAttribute(HtmlAttributes.FOR, input.getFieldId(facesContext), false);
     } else {
       LOG.error("No ancestor with type AbstractUIInput found for suggest id={}", clientId);
     }
-    writer.writeAttribute(DataAttributes.SUGGEST_MIN_CHARS, suggest.getMinimumCharacters());
-    writer.writeAttribute(DataAttributes.SUGGEST_DELAY, suggest.getDelay());
-    writer.writeAttribute(DataAttributes.SUGGEST_MAX_ITEMS, suggest.getMaximumItems());
-    writer.writeAttribute(DataAttributes.SUGGEST_UPDATE, suggest.isUpdate());
-    writer.writeAttribute(DataAttributes.SUGGEST_TOTAL_COUNT, totalCount);
-    writer.writeAttribute(DataAttributes.SUGGEST_DATA, JsonUtils.encode(array), true);
+
+    writer.writeAttribute(CustomAttributes.MIN_CHARS, suggest.getMinimumCharacters());
+    writer.writeAttribute(CustomAttributes.DELAY, suggest.getDelay());
+    writer.writeAttribute(CustomAttributes.MAX_ITEMS, suggest.getMaximumItems());
+    writer.writeAttribute(CustomAttributes.UPDATE, suggest.isUpdate());
+    writer.writeAttribute(CustomAttributes.TOTAL_COUNT, totalCount);
+    writer.writeAttribute(CustomAttributes.LOCAL_MENU, suggest.isLocalMenu());
+    writer.writeAttribute(CustomAttributes.DATA, JsonUtils.encode(array), true);
 
     if (LOG.isDebugEnabled()) {
-      LOG.debug("suggest list: " + JsonUtils.encode(array));
+      LOG.debug("suggest list: {}", JsonUtils.encode(array));
     }
 
-    writer.endElement(HtmlElements.INPUT);
+    writer.endElement(HtmlElements.TOBAGO_SUGGEST);
   }
 
   private AutoSuggestItems createAutoSuggestItems(final Object object) {
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/InTagDeclaration.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/InTagDeclaration.java
index 7d69be6..5c53a30 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/InTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/InTagDeclaration.java
@@ -22,7 +22,6 @@ package org.apache.myfaces.tobago.internal.taglib.component;
 import org.apache.myfaces.tobago.apt.annotation.Behavior;
 import org.apache.myfaces.tobago.apt.annotation.BodyContentDescription;
 import org.apache.myfaces.tobago.apt.annotation.Facet;
-import org.apache.myfaces.tobago.apt.annotation.Markup;
 import org.apache.myfaces.tobago.apt.annotation.Tag;
 import org.apache.myfaces.tobago.apt.annotation.UIComponentTag;
 import org.apache.myfaces.tobago.component.ClientBehaviors;
@@ -86,12 +85,6 @@ import javax.faces.component.UIInput;
             name = ClientBehaviors.FOCUS),
         @Behavior(
             name = ClientBehaviors.BLUR)
-    },
-    markups = {
-        @Markup(name = org.apache.myfaces.tobago.context.Markup.STRING_LOCAL_MENU,
-            description = "If a suggest menu is available, it will be rendered on the component,
"
-                + "not in the '.tobago-page-menuStore'."
-        )
     })
 public interface InTagDeclaration
     extends HasIdBindingAndRendered, HasConverter, IsReadonly, IsDisabled, IsRequired, HasHelp,
HasTip, IsPassword,
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SuggestTagDeclaration.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SuggestTagDeclaration.java
index cd503e1..14821b9 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SuggestTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SuggestTagDeclaration.java
@@ -156,6 +156,15 @@ public interface SuggestTagDeclaration extends HasIdBindingAndRendered
{
   void setUpdate(String update);
 
   /**
+   * <p>
+   * If a suggest menu is available, it will be rendered on the component, not in the '.tobago-page-menuStore'.
+   * </p>
+   */
+  @TagAttribute
+  @UIComponentTagAttribute(type = "boolean", defaultValue = "false")
+  void setLocalMenu(String localMenu);
+
+  /**
    * The query is the string typed by the user.
    */
   @TagAttribute
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 4fb8868..0419b9f 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -211,7 +211,6 @@ public enum TobagoClass implements CssItem {
   STARS__SLIDER("tobago-stars-slider"),
   STARS__TOOLTIP("tobago-stars-tooltip"),
   STARS__UNSELECTED("tobago-stars-unselected"),
-  SUGGEST("tobago-suggest"),
   TAB("tobago-tab"),
   TAB__BAR_FACET("tobago-tab-barFacet"),
   TAB__CONTENT("tobago-tab-content"),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
new file mode 100644
index 0000000..abb5266
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+package org.apache.myfaces.tobago.renderkit.html;
+
+public enum CustomAttributes implements MarkupLanguageAttributes {
+
+  MIN_CHARS("min-chars"),
+  DELAY("delay"),
+  MAX_ITEMS("max-items"),
+  UPDATE("update"),
+  TOTAL_COUNT("total-count"),
+  LOCAL_MENU("local-menu"),
+  DATA("data");
+
+  private final String value;
+
+  CustomAttributes(final String value) {
+    this.value = value;
+  }
+
+  @Override
+  public String getValue() {
+    return value;
+  }
+
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
index 7825257..1c0973f 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
@@ -174,20 +174,6 @@ public enum DataAttributes implements MarkupLanguageAttributes {
 
   SCROLL_POSITION("data-tobago-scroll-position"),
 
-  SUGGEST_DATA("data-tobago-suggest-data"),
-
-  SUGGEST_DELAY("data-tobago-suggest-delay"),
-
-  SUGGEST_FOR("data-tobago-suggest-for"),
-
-  SUGGEST_MAX_ITEMS("data-tobago-suggest-max-items"),
-
-  SUGGEST_MIN_CHARS("data-tobago-suggest-min-chars"),
-
-  SUGGEST_TOTAL_COUNT("data-tobago-suggest-total-count"),
-
-  SUGGEST_UPDATE("data-tobago-suggest-update"),
-
   /**
    * The mode of the tab switch: client, reloadTab, reloadPage.
    */
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index 0b239a9..fae900c 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -133,7 +133,8 @@ public enum HtmlElements {
   VIDEO("video"),
   WBR("wbr", Qualifier.VOID),
 
-  TOBAGO_STARS("tobago-stars");
+  TOBAGO_STARS("tobago-stars"),
+  TOBAGO_SUGGEST("tobago-suggest");
 
   private final String value;
   private final boolean voidElement;
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index eeb9999..cf909d9 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1335,7 +1335,7 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
 
 /* suggest ---------------------------------------------------------------------- */
 
-.tobago-suggest {
+tobago-suggest {
   display: none;
 }
 
@@ -1372,7 +1372,7 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
 }
 
 .twitter-typeahead .tt-open {
-  /* for markup 'localMenu' - if suggest menu rendered directly on component - not in .tobago-page-menuStore
*/
+  /* for 'localMenu' - if suggest menu rendered directly on component - not in .tobago-page-menuStore
*/
   min-width: 100%;
 }
 
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/95-migration/4.0_to_5.0.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/95-migration/4.0_to_5.0.xhtml
index 9080b79..a6d813f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/95-migration/4.0_to_5.0.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/95-migration/4.0_to_5.0.xhtml
@@ -52,6 +52,15 @@
 
     </tc:section>
 
+    <tc:section id="components" label="UI Components">
+
+      <tc:section id="suggest" label="Suggest">
+        For local menu for the suggest box use localMenu="true" in tc:suggest instead of
markup="localMenu" in the
+        tc:in.
+      </tc:section>
+
+    </tc:section>
+
   </tc:section>
 
 </ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.test.js
b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.test.js
index 6989b7c..c14da03 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.test.js
@@ -154,5 +154,5 @@ function escapeClientId(clientId) {
 
 function getSuggestions(id) {
   return jQueryFrameFn(escapeClientId(
-      jQueryFrame(id + " .tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
+      jQueryFrame(id + " tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
index 3eddf3c..549d76b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
@@ -90,9 +90,9 @@
       and positioned relative to the page. The suggest menu will be scrolled with the page.</p>
     <p>Sometimes this behavior causes problems. For example if tc:suggest is used in
a fixed header.
       In this case the suggest menu must not scroll with the page. Instead it should stick
on the input component.</p>
-    <p>To render a suggest menu local on the component, markup <code>localMenu</code>
can be used.</p>
-    <tc:in id="inLocalMenu" markup="localMenu">
-      <tc:suggest totalCount="10" query="#{suggestController.query}">
+    <p>To render a suggest menu local on the component, the attribute <code>localMenu</code>
can be used.</p>
+    <tc:in id="inLocalMenu">
+      <tc:suggest totalCount="10" query="#{suggestController.query}" localMenu="true">
         <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
       </tc:suggest>
     </tc:in>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/15-suggest-method/Suggest_Method.test.js
b/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/15-suggest-method/Suggest_Method.test.js
index 08676b0..f1dd79d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/15-suggest-method/Suggest_Method.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/35-deprecated/15-suggest-method/Suggest_Method.test.js
@@ -66,5 +66,5 @@ function escapeClientId(clientId) {
 
 function getSuggestions(id) {
   return jQueryFrameFn(escapeClientId(
-      jQueryFrame(id + " .tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
+      jQueryFrame(id + " tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1020-suggest-quotMark/Suggest_QuotMark.test.js
b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1020-suggest-quotMark/Suggest_QuotMark.test.js
index 428ed24..96bc2c1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1020-suggest-quotMark/Suggest_QuotMark.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1020-suggest-quotMark/Suggest_QuotMark.test.js
@@ -70,5 +70,5 @@ function escapeClientId(clientId) {
 
 function getSuggestions(id) {
   return jQueryFrameFn(escapeClientId(
-      jQueryFrame(id + " .tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
+      jQueryFrame(id + " tobago-suggest").attr("id") + "::popup") + " .tt-suggestion");
 }
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
index cb60505..06dab90 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
@@ -15,32 +15,34 @@
  * limitations under the License.
  */
 
-import {Listener, Order, Phase} from "./tobago-listener";
 import {DomUtils} from "./tobago-utils";
-import {Tobago4Utils} from "./tobago-utils";
 
-class Suggest {
+class Suggest extends HTMLElement {
+
+  static asyncResults: (data: string[]) => void;
+
+  hiddenInput: HTMLInputElement;
 
   static loadFromServer = function (input: HTMLInputElement) {
 
-    var timeout;
+    let timeout;
 
     return function findMatches(query, syncResults, asyncResults) {
 
-      var suggest = document.getElementById(input.dataset["tobagoSuggestFor"]) as HTMLInputElement;
+      let suggest = document.getElementById(input.dataset["tobagoSuggestFor"]) as Suggest;
 
-      if (suggest.value !== query) {
+      // todo: suggest.hiddenInput.value should contain the last query value
+      if (suggest.hiddenInput.value !== query) {
 
         if (timeout) {
           clearTimeout(timeout);
         }
 
-        const delay = parseInt(suggest.dataset["tobagoSuggestDelay"]);
+        const delay = suggest.delay;
 
         timeout = setTimeout(function () {
-          suggest.value = query;
-          // suggest.dataset["tobagoSuggestCallback"] = asyncResults;
-          jQuery(suggest).data("tobago-suggest-callback", asyncResults); // tbd: evtl. to
fix!!!
+          suggest.hiddenInput.value = query;
+          Suggest.asyncResults = asyncResults;
           delete suggest.dataset["tobagoSuggestData"];
           console.info("query: '" + query + "'");
 
@@ -70,103 +72,161 @@ class Suggest {
     };
   };
 
-  static init = function (element: HTMLElement) {
-
-    for (const suggest of DomUtils.selfOrQuerySelectorAll(element, ".tobago-suggest")) {
-      var $suggest = jQuery(suggest);
-      var input = document.getElementById(suggest.dataset["tobagoSuggestFor"]) as HTMLInputElement;
-      var $input = jQuery(input);
-
-      var minChars = parseInt(suggest.dataset["tobagoSuggestMinChars"]);
-      var maxItems = parseInt(suggest.dataset["tobagoSuggestMaxItems"]);
-
-      var update = suggest.dataset["tobagoSuggestUpdate"] !== null;
-      var totalCount = parseInt(suggest.dataset["tobagoSuggestTotalCount"]); // todo
-
-      // todo!
-      // var localMenu = false;
-      // var dataTobagoMarkup = jQuery(DomUtils.escapeClientId($input.attr("name"))).attr("data-tobago-markup");
-      // if (dataTobagoMarkup !== undefined) {
-      //   var markups = jQuery.parseJSON(jQuery(DomUtils.escapeClientId($input.attr("name"))).attr("data-tobago-markup"));
-      //   markups.forEach(function (markup) {
-      //     if (markup === "localMenu") {
-      //       localMenu = true;
-      //     }
-      //   });
-      // }
-
-      if (update && input.classList.contains("tt-input")) { // already initialized:
so only update data
-        var asyncResults = $suggest.data("tobago-suggest-callback"); // comes from "findMatches()"
-        if (asyncResults) {
-          const data1 = JSON.parse(suggest.dataset["tobagoSuggestData"]);
-          asyncResults(data1);
-        }
-      } else { // new
-        input.dataset["tobagoSuggestFor"] = suggest.id;
-        $input.attr("autocomplete", "off");
-
-        var source;
-        if (update) {
-          source = Suggest.loadFromServer(input);
-        } else {
-          var data2 = JSON.parse(suggest.dataset["tobagoSuggestData"]);
-          source = Suggest.fromClient(data2);
-        }
+  constructor() {
+    super();
+    this.hiddenInput = document.createElement("input");
+    this.hiddenInput.setAttribute("type", "hidden");
+    this.hiddenInput.setAttribute("name", this.id);
+    this.appendChild(this.hiddenInput);
+  }
+
+  get for(): string {
+    return this.getAttribute("for");
+  }
+
+  set for(forValue: string) {
+    this.setAttribute("for", forValue);
+  }
+
+  get minChars(): number {
+    return parseInt(this.getAttribute("min-chars"));
+  }
+
+  set minChars(minChars: number) {
+    this.setAttribute("min-chars", String(minChars));
+  }
+
+  get delay(): number {
+    return parseInt(this.getAttribute("delay"));
+  }
+
+  set delay(delay: number) {
+    this.setAttribute("delay", String(delay));
+  }
+
+  get maxItems(): number {
+    return parseInt(this.getAttribute("max-items"));
+  }
+
+  set maxItems(maxItems: number) {
+    this.setAttribute("max-items", String(maxItems));
+  }
+
+  get update(): boolean {
+    return this.hasAttribute("update");
+  }
+
+  set update(update: boolean) {
+    if (update) {
+      this.setAttribute("update", "");
+    } else {
+      this.removeAttribute("update");
+    }
+  }
 
-        let $suggestPopup = jQuery(document.getElementById(suggest.id + "::popup"));
-        if ($suggestPopup.length > 0) {
-          $suggestPopup.remove();
-        }
+  get totalCount(): number {
+    return parseInt(this.getAttribute("total-count"));
+  }
+
+  set totalCount(totalCount: number) {
+    this.setAttribute("total-count", String(totalCount));
+  }
+
+  get data(): string[] {
+    return JSON.parse(this.getAttribute("data"));
+  }
+
+  set data(data: string[]) {
+    this.setAttribute("data", JSON.stringify(data));
+  }
 
-        jQuery(".tobago-page-menuStore")
-            .append("<div id='" + suggest.id + "::popup" + "' class='tt-menu tt-empty'/>");
-        $suggestPopup = jQuery(document.getElementById(suggest.id + "::popup"));
-
-        $input.typeahead({
-          menu: /* todo localMenu ? null :*/ $suggestPopup,
-          minLength: minChars,
-          hint: true,// todo
-          highlight: true // todo
-        }, {
-          //name: 'test',// todo
-          limit: maxItems,
-          source: source
-        });
-        // old with jQuery:
-        $input.on('typeahead:change', function (event: JQuery.Event) {
-            const input = this;
-            input.dispatchEvent(new Event("change"));
-        });
-        // new without jQuery:
-        // input.addEventListener("typeahead:change", (event: Event) => {
-        //   const input = event.currentTarget as HTMLInputElement;
-        //   input.dispatchEvent(new Event("change"));
-        // });
-
-        // old with jQuery:
-        $input.on('typeahead:open', function (event: Event) {
-          const input = this;
-          const suggestPopup = document.getElementById(input.dataset["tobagoSuggestFor"]
+ "::popup");
-          suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
-          suggestPopup.style.left = DomUtils.offset(input).left + "px";
-          suggestPopup.style.minWidth = input.offsetWidth + "px";
-        });
-
-        // new without jQuery:
-        // input.addEventListener("typeahead:open", (event: Event) => {
-        //   const input = event.currentTarget as HTMLInputElement;
-        //   const suggestPopup = document.getElementById(input.dataset["tobagoSuggestFor"]
+ "::popup");
-        //   suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
-        //   suggestPopup.style.left = DomUtils.offset(input).left + "px";
-        //   suggestPopup.style.minWidth = input.offsetWidth + "px";
-        // });
+  get localMenu(): boolean {
+    return this.hasAttribute("local-menu");
+  }
 
+  set localMenu(update: boolean) {
+    if (update) {
+      this.setAttribute("local-menu", "");
+    } else {
+      this.removeAttribute("local-menu");
+    }
+  }
+
+  connectedCallback() {
+    const input = document.getElementById(this.for) as HTMLInputElement;
+    const $input = jQuery(input);
+
+    if (this.update && input.classList.contains("tt-input")) { // already initialized:
so only update data
+      if (Suggest.asyncResults) {
+        Suggest.asyncResults(this.data);
+        Suggest.asyncResults = null;
+      }
+    } else { // new
+      input.dataset["tobagoSuggestFor"] = this.id;
+      input.autocomplete = "off";
+
+      var source;
+      if (this.update) {
+        source = Suggest.loadFromServer(input);
+      } else {
+        var data2 = this.data;
+        source = Suggest.fromClient(data2);
       }
+
+      let suggestPopup = document.getElementById(this.id + "::popup");
+      if (suggestPopup) {
+        suggestPopup.parentElement.removeChild(suggestPopup);
+      }
+      suggestPopup = document.createElement("div");
+      suggestPopup.id = this.id + "::popup";
+      suggestPopup.classList.add("tt-menu", "tt-empty");
+      document.querySelector(".tobago-page-menuStore").appendChild(suggestPopup);
+
+      const menu = this.localMenu ? null : suggestPopup;
+
+      $input.typeahead({
+        menu: menu,
+        minLength: this.minChars,
+        hint: true,// todo
+        highlight: true // todo
+      }, {
+        //name: 'test',// todo
+        limit: this.maxItems,
+        source: source
+      });
+      // old with jQuery:
+      $input.on('typeahead:change', function (event: JQuery.Event) {
+        const input = this;
+        input.dispatchEvent(new Event("change"));
+      });
+      // new without jQuery:
+      // input.addEventListener("typeahead:change", (event: Event) => {
+      //   const input = event.currentTarget as HTMLInputElement;
+      //   input.dispatchEvent(new Event("change"));
+      // });
+
+      // old with jQuery:
+      $input.on('typeahead:open', function (event: JQuery.Event) {
+        const input = this;
+        const suggestPopup = document.getElementById(input.dataset["tobagoSuggestFor"] +
"::popup");
+        suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
+        suggestPopup.style.left = DomUtils.offset(input).left + "px";
+        suggestPopup.style.minWidth = input.offsetWidth + "px";
+      });
+
+      // new without jQuery:
+      // input.addEventListener("typeahead:open", (event: Event) => {
+      //   const input = event.currentTarget as HTMLInputElement;
+      //   const suggestPopup = document.getElementById(input.dataset["tobagoSuggestFor"]
+ "::popup");
+      //   suggestPopup.style.top = DomUtils.offset(input).top + input.offsetHeight + "px";
+      //   suggestPopup.style.left = DomUtils.offset(input).left + "px";
+      //   suggestPopup.style.minWidth = input.offsetWidth + "px";
+      // });
+
     }
-  };
+  }
 }
 
-// using "EARLY", because it must be called before Tobago.Layout.init
-// this is because the suggest puts a span around the input field and doesn't copy the style.
-Listener.register(Suggest.init, Phase.DOCUMENT_READY, Order.EARLY);
-Listener.register(Suggest.init, Phase.AFTER_UPDATE, Order.EARLY);
+document.addEventListener("DOMContentLoaded", function (event) {
+  window.customElements.define("tobago-suggest", Suggest);
+});


Mime
View raw message