settings language autocomplete

zanata · Dec 6, 2013 · 81467d3 · 81467d3
1 parent b08ba75
commit 81467d3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 66 deletions.
diff --git a/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java b/zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
@@ -38,7 +38,6 @@
 import org.jboss.seam.international.StatusMessage;
 import org.jboss.seam.security.management.JpaIdentityStore;
 import org.zanata.common.EntityStatus;
-import org.zanata.common.LocaleId;
 import org.zanata.dao.PersonDAO;
 import org.zanata.dao.ProjectIterationDAO;
 import org.zanata.model.HAccount;
@@ -101,13 +100,9 @@ public class VersionGroupHome extends SlugHome<HIterationGroup> {
 
     @Getter
     @Setter
-    // localeId of new language
+    //localeId of language
     private String newLanguage;
 
-    @Getter
-    @Setter
-    private String languageQuery;
-
     @Getter
     @Setter
     // Slug of project [space] version
@@ -166,23 +161,23 @@ public void setStatus(char initial) {
         getInstance().setStatus(EntityStatus.valueOf(initial));
     }
 
-    public List<HLocale> suggestLocales() {
+    public List<HLocale> suggestLocales(final String query) {
         List<HLocale> localeList = localeServiceImpl.getSupportedLocales();
 
         Collection<HLocale> filtered =
                 Collections2.filter(localeList, new Predicate<HLocale>() {
                     @Override
                     public boolean apply(@Nullable HLocale input) {
-                        if (StringUtils.isEmpty(languageQuery)) {
+                        if (StringUtils.isEmpty(query)) {
                             return !getInstance().getActiveLocales().contains(
                                     input);
                         }
                         return !getInstance().getActiveLocales()
                                 .contains(input)
                                 && (input.getLocaleId().getId()
-                                        .startsWith(languageQuery) || input
+                                        .startsWith(query) || input
                                         .retrieveDisplayName().toLowerCase()
-                                        .contains(languageQuery.toLowerCase()));
+                                        .contains(query.toLowerCase()));
                     }
                 });
 

diff --git a/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml b/zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
@@ -8,47 +8,43 @@
 
 <script type="text/javascript">
   jQuery(document).ready(function () {
-    jQuery("#settings-languages_tab").click(function () {
-      focusLanguageInput();
-    });
-
-    jQuery("#settings-projects_tab").click(function () {
-      focusVersionInput();
-    });
-
-    jQuery("#settings-maintainers_tab").click(function () {
-      focusMaintainerInput();
+    jQuery('[id ^=settings-][id $=_tab]').click(function () {
+      var id = this.id.replace("_tab", "");
+      focusInput(jQuery('#' + id).find('.autocomplete__input'));
     });
   });
 
   function focusLanguageInput() {
-    setTimeout(function () {
-      jQuery("[id='#{rich:clientId('new--language')}Input']").value = "";
-      jQuery("[id='#{rich:clientId('new--language')}Input']").focus();
-    }, 50);
+    focusInput(jQuery("[id='#{rich:clientId('new--language')}Input']"));
   }
 
   function focusVersionInput() {
-    setTimeout(function () {
-      jQuery("[id='#{rich:clientId('new--version')}Input']").value = "";
-      jQuery("[id='#{rich:clientId('new--version')}Input']").focus();
-    }, 50);
+    focusInput(jQuery("[id='#{rich:clientId('new--version')}Input']"));
   }
 
   function focusMaintainerInput() {
+    focusInput(jQuery("[id='#{rich:clientId('new--maintainer')}Input']"));
+  }
+
+  function focusInput(field) {
     setTimeout(function () {
-      jQuery("[id='#{rich:clientId('new--maintainer')}Input']").value = "";
-      jQuery("[id='#{rich:clientId('new--maintainer')}Input']").focus();
+      jQuery(field).value = "";
+      jQuery(field).focus();
     }, 50);
   }
 
-  function addLanguage(selectedItem, event) {
-    if (event.type == "click") {
-      addNewLanguage(selectedItem.children[0].value);
-    }
-    else if (event.type == "keyup") {
+  function updateLanguageResultClickEvent() {
+    jQuery("[id='#{rich:clientId('new--language')}List']").find(".rf-au-lst-scrl").css("width",
+      document.getElementById("#{rich:clientId('new--language')}Input").clientWidth);
 
-    }
+    var fieldSelector = "[id='#{rich:clientId('new--language')}Items']";
+    updateResultClickEvent(fieldSelector, addNewLanguage);
+  }
+
+  function updateResultClickEvent(fieldSelector, clickFn) {
+    jQuery(fieldSelector).find('.rf-au-itm').click(function () {
+      clickFn(this.children[0].value);
+    });
   }
 </script>
 
@@ -58,10 +54,6 @@
   <a4j:param name="val" assignTo="#{versionGroupHome.newLanguage}"/>
 </a4j:jsFunction>
 
-<a4j:jsFunction name="assignLanguageQuery" render="suggest-language-list">
-  <a4j:param name="val" assignTo="#{versionGroupHome.languageQuery}"/>
-</a4j:jsFunction>
-
 <h1>#{messages['Settings']}</h1>
 
 <div class="tabs--vertical js-tabs">
@@ -170,9 +162,11 @@
 
         <rich:autocomplete mode="cachedAjax" var="suggestLocale"
           styleClass="auto-complete" id="new--language"
+          inputClass="autocomplete__input"
+          onselectitem="addNewLanguage(this.value);"
           autocompleteMethod="#{versionGroupHome.suggestLocales}"
-          layout="list"
-          fetchValue="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"
+          layout="list" oncomplete="updateLanguageResultClickEvent()"
+          fetchValue="#{suggestLocale.localeId}"
           popupClass="auto-complete-list" minChars="0">
           <rich:placeholder value="#{messages['jsf.AddALanguage']}"
             styleClass="form__placeholder"/>
@@ -182,30 +176,6 @@
           class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
         </rich:autocomplete>
       </li>
-      <li>
-        <div class="autocomplete">
-          <h:inputText onkeyup="assignLanguageQuery(this.value)"
-            styleClass="l--push-v-0 autocomplete__input">
-            <rich:placeholder value="#{messages['jsf.AddALanguage']}"
-              styleClass="form__placeholder"/>
-          </h:inputText>
-          <a4j:outputPanel id="suggest-language-list">
-            <ul
-              class="list--no-bullets bg--pop-highest l--push-v-0 autocomplete__results">
-              <ui:repeat value="#{versionGroupHome.suggestLocales()}"
-                var="suggestLocale">
-                <li class="l--pad-all-quarter autocomplete__result"
-                  onclick="addLanguage(this, event)"
-                  onkeyup="addLanguage(this, event)">
-                  <h:inputHidden value="#{suggestLocale.localeId}"/>
-                  #{suggestLocale.retrieveDisplayName()}<span
-                  class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
-                </li>
-              </ui:repeat>
-            </ul>
-          </a4j:outputPanel>
-        </div>
-      </li>
     </ul>
   </h:form>
 </li>