Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
WIP: autocomplete
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Eng committed Dec 17, 2013
1 parent b90e07a commit 2fb4580
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 140 deletions.
61 changes: 32 additions & 29 deletions zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
View file
Expand Up @@ -97,10 +97,12 @@ public class VersionGroupHome extends SlugHome<HIterationGroup> {

private List<SelectItem> statusList;

@Getter
@Setter
// string format: #{hlocale.retrieveDisplayName()} [#{hlocale.localeId}]
private String newLanguage;
private String languageQuery;

@Setter
// localeId
private String selectedLocale;

@Setter
private String versionQuery;
Expand Down Expand Up @@ -164,23 +166,23 @@ public void setStatus(char initial) {
getInstance().setStatus(EntityStatus.valueOf(initial));
}

public List<HLocale> suggestLocales(final String query) {
public List<HLocale> suggestLocales() {
List<HLocale> localeList = localeServiceImpl.getSupportedLocales();

Collection<HLocale> filtered =
Collections2.filter(localeList, new Predicate<HLocale>() {
@Override
public boolean apply(@Nullable HLocale input) {
if (StringUtils.isEmpty(query)) {
if (StringUtils.isEmpty(languageQuery)) {
return !getInstance().getActiveLocales().contains(
input);
}
return !getInstance().getActiveLocales()
.contains(input)
&& (input.getLocaleId().getId()
.startsWith(query) || input
.startsWith(languageQuery) || input
.retrieveDisplayName().toLowerCase()
.contains(query.toLowerCase()));
.contains(languageQuery.toLowerCase()));
}
});

Expand Down Expand Up @@ -221,26 +223,6 @@ public boolean apply(@Nullable HPerson input) {
return Lists.newArrayList(filtered);
}

// Chinese (Traditional Han) [zh-Hant]
@Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
public void addLanguage() {
if (StringUtils.isEmpty(newLanguage)) {
return;
}
String localeId = newLanguage.split("\\[")[1].replace("]", "");

HLocale locale = localeServiceImpl.getByLocaleId(localeId);

getInstance().getActiveLocales().add(locale);
super.update();
newLanguage = "";

addMessage(
StatusMessage.Severity.INFO,
zanataMessages.getMessage("jsf.LanguageAddedToGroup",
locale.retrieveDisplayName()));
}

/**
* Use FlashScopeBean to store message in page. Multiple ajax requests for
* re-rendering statistics after updating will clear FacesMessages.
Expand All @@ -260,6 +242,25 @@ private void clearMessage() {
flashScope.getAndClearAttribute("message");
}

@Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
public void addLanguage() {
if (StringUtils.isEmpty(selectedLocale)) {
return;
}

HLocale locale = localeServiceImpl.getByLocaleId(selectedLocale);

getInstance().getActiveLocales().add(locale);
super.update();
selectedLocale = "";
languageQuery = "";

addMessage(
StatusMessage.Severity.INFO,
zanataMessages.getMessage("jsf.LanguageAddedToGroup",
locale.retrieveDisplayName()));
}

@Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
public void addVersion() {
if (StringUtils.isEmpty(selectedVersion)) {
Expand All @@ -270,7 +271,8 @@ public void addVersion() {
projectIterationDAO.findById(new Long(selectedVersion));
getInstance().getProjectIterations().add(version);
super.update();
this.selectedVersion = "";
selectedVersion = "";
versionQuery = "";

addMessage(
StatusMessage.Severity.INFO,
Expand All @@ -287,7 +289,8 @@ public void addMaintainer() {
HPerson maintainer = personDAO.findByUsername(selectedMaintainer);
getInstance().getMaintainers().add(maintainer);
super.update();
this.selectedMaintainer = "";
selectedMaintainer = "";
maintainerQuery = "";

addMessage(StatusMessage.Severity.INFO, zanataMessages.getMessage(
"jsf.MaintainerAddedToGroup", maintainer.getName()));
Expand Down
2 changes: 2 additions & 0 deletions zanata-war/src/main/resources/messages.properties
View file
Expand Up @@ -438,6 +438,8 @@ jsf.Missing=missing
jsf.GroupId=Group ID
jsf.General=General
jsf.Maintainers=Maintainers
jsf.SearchLanguages=Search Languages
jsf.SearchUsers=Search Users



Expand Down
59 changes: 23 additions & 36 deletions zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
View file
Expand Up @@ -60,18 +60,6 @@
}
</script>

<a4j:jsFunction name="addNewLanguage" render="settings-languages-form"
oncomplete="refreshStatistics();focusCurrentActiveInput()"
action="#{versionGroupHome.addLanguage()}">
<a4j:param name="val" assignTo="#{versionGroupHome.newLanguage}"/>
</a4j:jsFunction>

<a4j:jsFunction name="addNewVersion" render="settings-projects-form"
oncomplete="refreshStatistics();focusCurrentActiveInput()"
action="#{versionGroupHome.addVersion()}">
<a4j:param name="val" assignTo="#{versionGroupHome.newVersion}"/>
</a4j:jsFunction>

<h1>#{messages['Settings']}</h1>

<div class="tabs--vertical js-tabs">
Expand Down Expand Up @@ -174,27 +162,26 @@
</li>
</ui:repeat>
<li class="list--highlight__item--none">
<label for="#{rich:clientId('new--language')}Input">
<label
for="#{rich:clientId('languageAutocomplete')}-autocomplete__input">
#{messages['jsf.AddALanguage']}
</label>

<rich:autocomplete mode="cachedAjax" var="suggestLocale"
styleClass="auto-complete" id="new--language"
inputClass="autocomplete__input js-tabs-nav-focus-input"
onselectitem="addNewLanguage(this.value);"
autocompleteMethod="#{versionGroupHome.suggestLocales}"
layout="list"
oncomplete="updateResultClickEvent(newLanguageItems, addNewLanguage)"
fetchValue="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"
popupClass="auto-complete-list" minChars="0">
<rich:placeholder value="#{messages['jsf.AddALanguage']}"
styleClass="form__placeholder"/>
<zanata:autocomplete
selectedField="#{versionGroupHome.selectedLocale}"
getResultAction="#{versionGroupHome.suggestLocales()}"
onselectItem="#{versionGroupHome.addLanguage()}"
maxlength="80" minlength="1" id="languageAutocomplete"
queryField="#{versionGroupHome.languageQuery}"
displayValue="#{result.retrieveDisplayName()} [#{result.localeId}]"
fetchValue="#{result.localeId}" render="settings-languages-form"
oncomplete="refreshStatistics();focusCurrentActiveInput()"
placeholder="#{messages['jsf.SearchLanguages']}">

#{result.retrieveDisplayName()}<span
class="txt--understated l--push-left-quarter">[#{result.localeId}]</span>
</zanata:autocomplete>

<h:inputHidden
value="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"/>
#{suggestLocale.retrieveDisplayName()}<span
class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
</rich:autocomplete>
</li>
</ul>
</h:form>
Expand All @@ -204,7 +191,7 @@
#{messages['jsf.Projects']}
</h2>
<h:form id="settings-projects-form" styleClass="l--push-bottom-0">
<ul class="list--slat l--push-top-half">
<ul class="list--slat list--highlight l--push-top-half">
<ui:repeat
value="#{versionGroupHome.getSortedInstanceProjectIterations()}"
var="version">
Expand All @@ -226,7 +213,7 @@
</ui:repeat>
<li class="list--highlight__item--none">
<label
for="#{rich:clientId('version-autocomplete')}:autocomplete__input">
for="#{rich:clientId('versionAutocomplete')}-autocomplete__input">
#{messages['jsf.AddAProject']}
</label>

Expand All @@ -240,7 +227,7 @@
fetchValue="#{result.id}"
render="settings-projects-form"
oncomplete="refreshStatistics();focusCurrentActiveInput();"
placeholder="#{messages['jsf.AddAProject']}">
placeholder="#{messages['jsf.SearchProjects']}">

#{result.project.slug} <i class="i i--version"></i> #{result.slug}
</zanata:autocomplete>
Expand All @@ -253,7 +240,7 @@
#{messages['jsf.Maintainers']}
</h2>
<h:form id="settings-maintainers-form" styleClass="l--push-bottom-0">
<ul class="list--slat l--push-top-half">
<ul class="list--slat list--highlight l--push-top-half">
<ui:repeat value="#{versionGroupHome.getInstanceMaintainers()}"
var="maintainer">
<li class="reveal--list-item">
Expand All @@ -274,21 +261,21 @@

<li class="list--highlight__item--none">
<label
for="#{rich:clientId('maintainer-autocomplete')}:autocomplete__input">
for="#{rich:clientId('maintainerAutocomplete')}-autocomplete__input">
#{messages['jsf.AddAMaintainer']}
</label>

<zanata:autocomplete
selectedField="#{versionGroupHome.selectedMaintainer}"
getResultAction="#{versionGroupHome.suggestMaintainers()}"
onselectItem="#{versionGroupHome.addMaintainer()}"
maxlength="80" minlength="0" id="maintainerAutocomplete"
maxlength="80" minlength="3" id="maintainerAutocomplete"
queryField="#{versionGroupHome.maintainerQuery}"
displayValue="#{result.name} @#{result.account.username}"
fetchValue="#{result.account.username}"
render="settings-maintainers-form,pageMessages"
oncomplete="focusCurrentActiveInput()"
placeholder="#{messages['jsf.AddAMaintainer']}">
placeholder="#{messages['jsf.SearchUsers']}">

<span class="w--r-1 bx--round l--push-right-quarter">
<img
Expand Down
128 changes: 65 additions & 63 deletions zanata-war/src/main/webapp/resources/script/component-autocomplete.js
View file
Expand Up @@ -20,61 +20,59 @@
* * site: http://www.fsf.org.
*/

jQuery(document).ready(
function() {
jQuery(this).click(function(event) {
if (jQuery(event.target).attr("class") != 'autocomplete__results') {
jQuery('.autocomplete__results').remove();
}
});
jQuery(document).ready(function() {
jQuery(this).click(function(event) {
if (jQuery(event.target).attr("class") != 'autocomplete__results') {
jQuery('.autocomplete__results').remove();
}
});

jQuery('.autocomplete__input').keyup(function(event) {
if (isEnterKey(event)) {
event.preventDefault();
}
});
//prevent form submit when enter key pressed in the input field.
jQuery('.autocomplete__input').keydown(function(event) {
if (isEnterKey(event)) {
event.preventDefault();
}
});
});

jQuery(".autocomplete").keydown(
function(event) {
var currentSelected = jQuery(this).find('.autocomplete__results')
.children('.is-selected');
function onResultKeyPressed(autocomplete, event, submitFormFunction) {
var currentSelected = jQuery(autocomplete).find('.autocomplete__results')
.children('.is-selected');

if (isEnterKey(event)) {
event.preventDefault();
if (currentSelected.length != 0) {
onselectRow(currentSelected);
}
} else if (event.keyCode == 40) {
// key: down
if (currentSelected.length == 0
|| jQuery(currentSelected).next().length == 0) {
selectRow(this, jQuery(this).find('.autocomplete__results')
.children('li').first());
} else {
deselectRow(currentSelected);
selectRow(this, jQuery(currentSelected).next("li"));
}
} else if (event.keyCode == 38) {
// key: up
if (currentSelected.length == 0) {
selectRow(this, jQuery(this).find('.autocomplete__results')
.children('li').last());
} else {
deselectRow(currentSelected);
selectRow(this, jQuery(currentSelected).prev("li"));
}
}
});
});
if (isEnterKey(event)) {
event.preventDefault();
if (currentSelected.length != 0) {
onSubmitForm(currentSelected, submitFormFunction);
}
} else if (event.keyCode == 40) {
// key: down
if (currentSelected.length == 0
|| jQuery(currentSelected).next().length == 0) {
selectRow(jQuery(autocomplete).find('.autocomplete__results').children(
'li').first());
} else {
deselectRow(currentSelected);
selectRow(jQuery(currentSelected).next("li"));
}
} else if (event.keyCode == 38) {
// key: up
if (currentSelected.length == 0) {
selectRow(jQuery(autocomplete).find('.autocomplete__results').children(
'li').last());
} else {
deselectRow(currentSelected);
selectRow(jQuery(currentSelected).prev("li"));
}
}
}

function onselectRow(row) {
submitSelected(jQuery(row).children("input").first().val());
function onSubmitForm(row, submitFormFunction) {
submitFormFunction(jQuery(row).children("input").first().val());
jQuery(row).parent().remove();
}

function selectRow(autocomplete, row) {
function selectRow(row) {
jQuery(row).addClass("is-selected");
jQuery(autocomplete).children('.autocomplete__input').val(
jQuery(row).children("input").eq(1).val());
}

function deselectRow(row) {
Expand All @@ -98,21 +96,25 @@ function onValueChange(inputField, event, renderResultFn) {
}
}

function registerMouseEvent(autocompleteId) {
var autocompleteComponent = jQuery("[id='" + autocompleteId + "']");
autocompleteComponent.find('.autocomplete__results').children(
'.autocomplete__result').each(function() {
jQuery(this).mouseover(function() {
selectRow(autocompleteComponent, this);
});
function registerMouseEvent(autocompleteId, submitFormFunction) {
jQuery("[id='" + autocompleteId + "']").find('.autocomplete__results')
.children('.autocomplete__result').each(function() {
jQuery(this).mouseover(function() {
selectRow(this);
});

jQuery(this).mouseout(function() {
deselectRow(this);
});
jQuery(this).mouseout(function() {
deselectRow(this);
});

jQuery(this).click(function() {
onselectRow(this);
jQuery(this).parent().remove();
});
});
jQuery(this).click(function() {
onSubmitForm(this, submitFormFunction);
});
});

var firstResult = jQuery("[id='" + autocompleteId + "']").find(
'.autocomplete__results').children('.autocomplete__result').first();
if (firstResult.length != 0) {
selectRow(firstResult);
}
}

0 comments on commit 2fb4580

Please sign in to comment.