Skip to content
Permalink
Browse files

Suggest now uses HTML "custom elements"

Reduce usage of jQuery

issue: TOBAGO-1633: TS refactoring
  • Loading branch information...
lofwyr14 committed Aug 9, 2019
1 parent 7799265 commit 908fd157b7db9d9c6f5005c09044d41fddcb8578
Showing with 250 additions and 152 deletions.
  1. +1 −0 tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
  2. +0 −2 tobago-core/src/main/java/org/apache/myfaces/tobago/context/Markup.java
  3. +2 −0 tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISuggest.java
  4. +13 −16 tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SuggestRenderer.java
  5. +0 −7 tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/InTagDeclaration.java
  6. +9 −0 ...core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SuggestTagDeclaration.java
  7. +0 −1 tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
  8. +43 −0 tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
  9. +0 −14 tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
  10. +2 −1 tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
  11. +2 −2 tobago-core/src/main/resources/scss/_tobago.scss
  12. +9 −0 ...e/tobago-example-demo/src/main/webapp/content/10-intro/50-migration/95-migration/4.0_to_5.0.xhtml
  13. +1 −1 ...ple/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.test.js
  14. +3 −3 ...ample/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/Suggest.xhtml
  15. +1 −1 ...obago-example-demo/src/main/webapp/content/35-deprecated/15-suggest-method/Suggest_Method.test.js
  16. +1 −1 ...obago-example-demo/src/main/webapp/content/40-test/1020-suggest-quotMark/Suggest_QuotMark.test.js
  17. +163 −103 tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-suggest.ts
@@ -150,6 +150,7 @@
level,
lang,
link,
localMenu,
/** @deprecated since 2.0.0 */
@Deprecated
margin,
@@ -100,7 +100,6 @@
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 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";
@@ -94,4 +94,6 @@ public void setQuery(final String query) {
public abstract Integer getTotalCount();

public abstract Integer getMaximumItems();

public abstract boolean isLocalMenu();
}
@@ -26,11 +26,9 @@
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 void encodeBegin(final FacesContext facesContext, final UIComponent compo

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) {
@@ -22,7 +22,6 @@
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 @@
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,
@@ -155,6 +155,15 @@
@UIComponentTagAttribute(type = "boolean", defaultValue = "true")
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.
*/
@@ -211,7 +211,6 @@
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"),
@@ -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;
}

}
@@ -174,20 +174,6 @@

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.
*/
@@ -133,7 +133,8 @@
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;
@@ -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%;
}

@@ -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>
@@ -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");
}
@@ -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>
@@ -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");
}
@@ -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");
}

0 comments on commit 908fd15

Please sign in to comment.
You can’t perform that action at this time.