Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
open new url in same tab
16guest172.71.134.14923nk51gApr 23, 2024 3:42:54 PMlinkDedalus Concerto CONC-5938
71guest188.114.102.11417kiilApr 23, 2024 1:10:17 PMlinkDedalus Concerto CONC-XXXX
70guest172.71.246.317kiilApr 23, 2024 10:43:35 AMlinkDedalus Concerto CONC-XXXX
69guest172.71.246.217kiilApr 23, 2024 10:42:44 AMlinkDedalus Concerto CONC-XXXX
68guest172.71.246.4917kiilApr 23, 2024 10:40:09 AMlinkScrapbook Concerto CONC-XXXX
67guest172.71.246.4817kiilApr 23, 2024 10:39:49 AMlinkScrapbook Concerto CONC-XXXX
66guest172.71.246.4917kiilApr 23, 2024 10:39:35 AMlinkScrapbook Concerto CONC-XXXX
65guest172.71.246.4917kiilApr 23, 2024 10:38:52 AMlinkScrapbook Concerto CONC-XXXX
64guest172.71.246.4917kiilApr 23, 2024 10:38:47 AMlinkScrapbook Concerto CONC-XXXX
63Giacomo Taormina172.71.114.2417kiilApr 23, 2024 10:19:11 AMlinkAnother new ZK fiddle
17guest14.142.138.1253arppreAug 10, 2018 6:12:58 AMlinkresources
index.zulzul<zk>
<portallayout onDrop="@command('dff')"
viewModel="@id('vm') @init('PropertyAdvanceSearchViewModel')">
<portalchildren style="padding: 25px;" width="50%">
<panel border="normal" style="margin-bottom:10px;"
width="100%">
<panelchildren>
<amandaSelectBox instant="true"
id="property_advanceSearch_StreetName_component"
model="@load(vm.propStreetList)"
>
</amandaSelectBox>
</panelchildren>
</panel>
</portalchildren>
</zk>
PropertyAdvanceSearchViewModel.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
public class PropertyAdvanceSearchViewModel{
private List<String> propStreetList;
@AfterCompose
public void afterCompose(){
propStreetList= new ArrayList<>();
propStreetList.add("test1");
}
public List<String> getPropStreetList() {
return propStreetList;
}
public void setPropStreetList(List<String> propStreetList) {
this.propStreetList = propStreetList;
}
}
AmandaSelectBox.javajava
import java.lang.reflect.InvocationTargetException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Iterator;
import java.util.LinkedHashSet;
import java.util.List;
import java.util.Objects;
import java.util.Set;
;
import org.zkoss.json.JSONArray;
import org.zkoss.json.JSONObject;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.sys.ContentRenderer;
import org.zkoss.zul.Textbox;
/**
* Implementation of org.zkoss.zul.Textbox, creates JsonObject from stage and sends it to amandaselectbox framework to render data in drop down
* format. Widget class zul.selectbox.Amandaselectbox.
*/
public class AmandaSelectBox extends Textbox {
private static final long serialVersionUID = 2969910247216973979L;
private List<?> _model;
private Object _selectedItem;
private boolean _open;
private String _style;
private boolean _choosenMode;
private Set<Object> _selectedItems;
private Set<Integer> _selectedIndices;
private boolean _creatable;
private String _createMessage;
private String _emptyMessage;
private boolean _descriptionMode;
private boolean _buttonVisible=true;
private String _parentContainer;
/**
* Method is called to render all properties that will be sent to the client for creating a selectbox widget.
*/
protected void renderProperties(ContentRenderer renderer) throws java.io.IOException {
super.renderProperties(renderer);
render(renderer, "selectedIndices", getIndicesAsJsonArry());
render(renderer, "style", _style);
render(renderer, "choosenMode", _choosenMode);
render(renderer, "descriptionMode", _descriptionMode);
render(renderer, "buttonVisible", _buttonVisible);
render(renderer, "parentContainer", _parentContainer);
render(renderer, "model", getRow());
if(_choosenMode){
render(renderer, "createMessage", _createMessage);
render(renderer, "creatable", _creatable);
render(renderer,"emptyMessage", _emptyMessage);
}
addEventListner();
}
/**
* Creating Array of JsonObject from Model. Responsible for creating row, shown in dropdown
*/
private JSONArray getRow() {
JSONArray jsonArray = new JSONArray();
if (_model != null && _model.size() > 0) {
if (_model.get(0) instanceof String) {
for (Object object : _model) {
if (object != null) {
jsonArray.add(object);
}
}
} else {
List<AmandaSelectItem> itemList = generateAsItemList(_model);
for (AmandaSelectItem item : itemList) {
if (item != null) {
if (_descriptionMode) {
JSONObject obj = new JSONObject();
obj.put("label", item.getDescription());
obj.put("description", item.getLabel());
jsonArray.add(obj);
} else {
jsonArray.add(item.getLabel());
}
}
}
}
}
return jsonArray;
}
/**
* Method can be used to add custom event listeners to amandaselectbox.
*/
private void addEventListner() {
this.addEventListener("onClickOfItem", new EventListener<Event>() {
@Override
public void onEvent(Event event) throws Exception {
JSONObject job = (JSONObject) event.getData();
Integer index = Integer.valueOf(job.get("index").toString());
if(_model==null || _model.isEmpty() || index >= _model.size()){
return;
}
Object obj = index!=-1 ? _model.get(index):null;
setSelectedItem(obj);
if (isChoosenMode()) {
if (job.get("op") != null && job.get("op").equals("remove")) {
getSelectedItems().remove(obj);
_selectedIndices.remove(index);
} else {
getSelectedItems().add(obj);
_selectedIndices.add(index);
}
} else {
_selectedIndices.clear();
_selectedIndices.add(index);
if (_model != null && _model.size() > 0) {
if (obj instanceof String) {
setValue(String.valueOf(obj));
} else {
List<AmandaSelectItem> item = generateAsItemList(Arrays.asList(_selectedItem));
if (item.size() > 0) {
String value = item.get(0).getLabel();
setValue(value);
} else {
setValue(null);
}
}
}
}
smartUpdate("selectedIndices", getIndicesAsJsonArry());
}
});
this.addEventListener("onClose", new EventListener<Event>() {
@Override
public void onEvent(Event arg0) throws Exception {
_open = false;
}
});
}
/**
* Creates list of AmandaSelectItem, if Model is List of Object other than String.
*/
private List<AmandaSelectItem> generateAsItemList(List<?> objectList) {
List<AmandaSelectItem> list = new ArrayList<>();
try {
for (Object data : objectList) {
if (data != null) {
try {
AmandaSelectItem item = new AmandaSelectItem();
item.setLabel(String.valueOf(PropertyUtils.getProperty(data, "label")));
item.setDescription(String.valueOf(propertyUtils.getProperty(data, "value")));
list.add(item);
} catch (NoSuchMethodException e) {
}
}
}
} catch (IllegalAccessException | InvocationTargetException e) {
}
return list;
}
public List<?> getModel() {
return _model;
}
public void setModel(List<?> _model) {
this._model = _model;
getSelectedIndices().clear();
Set<Integer> indices = new LinkedHashSet<Integer>();
if (isChoosenMode()) {
for (Object item : getSelectedItems()) {
indices.add(_model.indexOf(item));
}
} else {
if(_model.indexOf(getSelectedItem())!=-1){
indices.add(_model.indexOf(getSelectedItem()));
}
}
setSelectedIndices(indices);
smartUpdate("model", getRow());
}
public Object getSelectedItem() {
return _selectedItem;
}
public void setSelectedItem(Object _selectedItem) {
this._selectedItem = _selectedItem;
Set<Integer> indices =new LinkedHashSet<Integer>();
if (_model != null) {
for (int i = 0; i < getModel().size(); i++) {
if (Objects.equals(getModel().get(i), _selectedItem)) {
this._selectedItem = getModel().get(i);
indices.add(i);
break;
}
}
if(indices.isEmpty() && (CsdcStringUtils.isBlank(getValue()))){
setValue(null);
}
setSelectedIndices(indices);
}
}
public boolean isOpen() {
return _open;
}
public void setOpen(boolean _open) {
this._open = _open;
smartUpdate("open", _open);
}
public String getStyle() {
return _style;
}
public void setStyle(String _style) {
this._style = _style;
smartUpdate("style", _style);
}
public boolean isChoosenMode() {
return _choosenMode;
}
public void setChoosenMode(boolean _choosenMode) {
this._choosenMode = _choosenMode;
}
public Set<Object> getSelectedItems() {
if (_selectedItems == null) {
_selectedItems = new LinkedHashSet<>();
}
return _selectedItems;
}
public void setSelectedItems(Set<Object> _selectedItems) {
this._selectedItems = _selectedItems;
if (getModel() != null) {
this._selectedItems = new LinkedHashSet<>();
if (_selectedItems != null) {
Iterator<Object> it = _selectedItems.iterator();
Set<Integer> indices = new LinkedHashSet<Integer>();
while (it.hasNext()) {
Object obj = it.next();
for (int i = 0; i < getModel().size(); i++) {
if (Objects.equals(getModel().get(i), obj)) {
this._selectedItems.add(getModel().get(i));
indices.add(i);
break;
}
}
}
setSelectedIndices(indices);
}else{
setSelectedIndices(null);
}
}
}
public Set<Integer> getSelectedIndices() {
if (_selectedIndices == null) {
_selectedIndices = new LinkedHashSet<Integer>();
}
return _selectedIndices;
}
public void setSelectedIndices(Set<Integer> _selectedIndices) {
this._selectedIndices = _selectedIndices;
smartUpdate("selectedIndices", getIndicesAsJsonArry());
}
public boolean isCreatable() {
return _creatable;
}
public void setCreatable(boolean _creatable) {
this._creatable = _creatable;
smartUpdate("creatable", _creatable);
}
public String getCreateMessage() {
return _createMessage;
}
public void setCreateMessage(String _createMessage) {
this._createMessage = _createMessage;
smartUpdate("createMessage", _createMessage);
}
public String getEmptyMessage() {
return _emptyMessage;
}
public void setEmptyMessage(String _emptyMessage) {
this._emptyMessage = _emptyMessage;
smartUpdate("emptyMessage", _emptyMessage);
}
private JSONArray getIndicesAsJsonArry() {
JSONArray array = new JSONArray();
for (Integer i : getSelectedIndices()) {
array.add(i);
}
return array;
}
public void setId(String id) {
if (StringUtils.isNotBlank(id) && Services.pageCustomizationService().getCustomizationPermission()) {
this.setWidgetAttribute("aid", id);
}
super.setId(id);
}
public boolean isDescriptionMode() {
return _descriptionMode;
}
public void setDescriptionMode(boolean _descriptionMode) {
this._descriptionMode = _descriptionMode;
smartUpdate("descriptionMode", _descriptionMode);
}
public boolean isButtonVisible() {
return _buttonVisible;
}
public void setButtonVisible(boolean _buttonVisible) {
this._buttonVisible = _buttonVisible;
smartUpdate("buttonVisible", _buttonVisible);
}
public String getParentContainer() {
return _parentContainer;
}
/**
* parentContainer used as to set width of container in which items will be shown.
*/
public void setParentContainer(String _parentContainer) {
this._parentContainer = _parentContainer;
smartUpdate("parentContainer", _parentContainer);
}
private class AmandaSelectItem {
private String label;
private String description;
private String iconClass;
private String group;
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
@SuppressWarnings("unused")
public String getIconClass() {
return iconClass;
}
@SuppressWarnings("unused")
public void setIconClass(String iconClass) {
this.iconClass = iconClass;
}
@SuppressWarnings("unused")
public String getGroup() {
return group;
}
@SuppressWarnings("unused")
public void setGroup(String group) {
this.group = group;
}
}
}
Amandaselectbox.jsjavascriptzul.selectbox.Amandaselectbox = zk.$extends(zul.inp.Textbox, {
_open : null,
_model : [],
_containerHeight:325,
_itemHeight:25,
_totalRows:null,
_style:null,
_defaultWidth:'90%',
_choosenMode:null,
_selectedIndices:[],
_subModel:[],
_creatable:'',
_createMessage:'',
_createSelectedObjects:false,
_chgSel:'',
_emptyMessage: null,
_descriptionMode:false,
_buttonVisible:null,
_parentContainer:null,
_placeholder: null,
getPlaceholder:function() {
return this._placeholder;
},
setPlaceholder:function(_placeholder) {
this._placeholder=_placeholder;
if(this.$input){
this.$input.attr('placeholder', this._placeholder);
}
},
getParentContainer:function() {
return this._parentContainer;
},
setParentContainer:function(_parentContainer) {
this._parentContainer=_parentContainer;
},
isButtonVisible:function() {
return this._buttonVisible;
},
setButtonVisible:function(_buttonVisible) {
this._buttonVisible=_buttonVisible;
},
isDescriptionMode:function() {
return this._descriptionMode;
},
setDescriptionMode:function(_descriptionMode) {
this._descriptionMode=_descriptionMode;
},
getEmptyMessage:function() {
return this._emptyMessage;
},
setEmptyMessage:function(_emptyMessage) {
this._emptyMessage=_emptyMessage;
},
getCreateMessage:function() {
return this._createMessage;
},
setCreateMessage:function(_createMessage) {
this._createMessage=_createMessage;
},
isCreatable:function() {
return this._creatable;
},
setCreatable:function(_creatable) {
this._creatable=_creatable;
if(_creatable){
this.creatableDiv = document.createElement('div');
this.creatableDiv.className='z-chosenbox-empty z-chosenbox-empty-creatable z-chosenbox-option';
this.creatableDiv.innerHTML='<i class="z-chosenbox-icon z-chosenbox-create z-icon-plus-square"></i><span>"'+this._createMessage+'"</span>';
}
},
getSelectedIndices:function() {
return this._selectedIndices;
},
setSelectedIndices:function(_indices) {
this._selectedIndices=_indices;
if(this._choosenMode){
if(this._selectedIndices .length > 0 && this.$ul.length>0){
this.$ul.find('.select-search-choice').remove();
this.createChoosenContentOnRender();
}else{
this._clearSelection();
}
}
},
getModel : function() {
return this._model;
},
isChoosenMode: function() {
return this._choosenMode;
},
setChoosenMode : function(_choosenMode) {
this._choosenMode = _choosenMode;
},
setModel : function(_model) {
this._model = _model;
this._totalRows=_model.length;
if(this._choosenMode){
this._subModel=[];
this._subModel.push.apply(this._subModel, _model);
}
if(this._open){
if(!this._choosenMode){
this._selectedIndices.length = 0;
}
if(this._model.length>0){
this.setOpen(false);
this.setOpen(true)
} else{
this.setOpen(false);
this.$input.blur().focus()
}
}
},
isOpen : function() {
return this._open;
},
setStyle:function(_style) {
this._style = _style;
},
setOpen : function(_open) {
this._open = _open;
if(_open===true){
this._choosenMode ? this.init() : this._totalRows > 0 ? this.init() : this.destroy(); this.$input.blur().focus();
}else{
this.destroy();
}
},
init: function () {
this.initContainer();
this.initScroller();
this.initBody();
},
initContainer:function(){
if(this._descriptionMode){
this._itemHeight=50;
}
var position=$('#'+this.uuid)[0].getBoundingClientRect();
this.$container = document.createElement("ul");
$(this.$container).addClass('amandaSelectBoxContainer');
this.$container.setAttribute('role', 'combobox');
$(this.$container).css('max-height', this._containerHeight);
$(this.$container).css('height', (this._itemHeight * this._totalRows) + 5);
$(this.$container).css('width', this._parentContainer ? $('#'+this._parentContainer)[0].getBoundingClientRect().width : position.width);
$(this.$container).css('padding', '0px');
$(this.$container).css('left',position.left);
var height = this._itemHeight * this._totalRows > this._containerHeight ? this._containerHeight: this._itemHeight * this._totalRows;
if(!this._choosenMode && !this._descriptionMode && document.body.clientHeight < position.top+height){
$(this.$container).css('top', $('#'+this.uuid).offset().top- height); // Pop Up in Upward Direction
}else{
$(this.$container).css('top', $('#'+this.uuid).offset().top+position.height+1);// Pop Up in downward Direction
}
document.body.appendChild(this.$container);
},
initScroller:function(){
var scroller = document.createElement('div');
scroller.style.opacity = 0;
scroller.style.position = 'absolute';
scroller.style.top = 0;
scroller.style.left = 0;
scroller.style.width = '1px';
scroller.style.height = this._itemHeight* this._totalRows + 'px';
this.$container.appendChild(scroller);
},
initBody:function(){
var screenItemsLen = Math.ceil(this._containerHeight / this._itemHeight);
// Cache 4 times the number of items that fit in the container viewport
this.cachedItemsLen = screenItemsLen * 3;
this._renderChunk(this.$container, 0);
/* #52461 Issue Fix. As the container height covers elements with in Viewport */
if(this.$container.scrollHeight > this.$container.clientHeight && this._totalRows > 0){
$(this.$container).css('height',$(this.$container).height()+20);
}
this.lastFocusedElem=null;
var self = this;
var lastRepaintY;
var maxBuffer = screenItemsLen * this._itemHeight;
var lastScrolled = 0;
this.tempFunction= function (e) {
e.preventDefault();
};
this.rmNodeInterval = setInterval(function() {
if (Date.now() - lastScrolled > 100) {
var badNodes = document.querySelectorAll('[data-rm="1"]');
$(badNodes).remove();
var width= Math.max.apply(Math, $(self.$container.children).map(function(){ return this.scrollWidth; }).get());
$(self.$container.children).css('width',width);
}
}, 50);
var lastScrollTop = 0;
function onScroll(e) {
$(document).on( 'keydown', self.tempFunction);
e = e || window.event; //ie
var te = e.target || e.srcElement; //ie
var scrollTop = te.scrollTop; // Triggers reflow
if ((!lastRepaintY || Math.abs(scrollTop - lastRepaintY) > maxBuffer) && (lastScrollTop!=scrollTop) ) {
lastScrollTop=scrollTop;
var first = parseInt(scrollTop / self._itemHeight) - screenItemsLen;
self._renderChunk(self.$container, first < 0 ? 0 : first);
lastRepaintY = scrollTop;
}
lastScrolled = Date.now();
setTimeout(function() {
$(document).off( 'keydown' , self.tempFunction);
}, 50);
}
$(this.$container).off('scroll');
this.$container.addEventListener('scroll', onScroll);
this.bodyOnClick= function (ev){
if (!$('#'+self.uuid).is(ev.target) && $('#'+self.uuid).has(ev.target).length === 0){
self.setOpen(false);
}
}
$(document.body).off('click', this.bodyOnClick);
$(document.body).on('click', this.bodyOnClick);
if(this._selectedIndices.length>0 && !this._choosenMode){
this.$container.scrollTop = (this._selectedIndices[0] + 1 - 10)* this._itemHeight;
setTimeout(function() {
var node=document.querySelectorAll('[data-index="'+self._selectedIndices[0]+'"]');
$(node).focus();
}, 100);
}else{
this.$input.focus();
/* if(this.$container && this.$container.children[1]){
$(this.$container.children[1]).focus();
this.$container.scrollTop = 0;
}*/
}
},
_clearSelection:function(){
this.$ul.find('.select-search-choice').remove();
this._model=[];
this._model.push.apply(this._model, this._subModel);
this._fixEmptyMessage();
},
_renderChunk:function(node, from){
var finalItem = from + this.cachedItemsLen;
if (finalItem > this._totalRows)
finalItem = this._totalRows;
var fragment = document.createDocumentFragment();
for (var i = from; i < finalItem; i++) {
fragment.appendChild(this.createRow(i));
}
for (var j = 1, l = node.childNodes.length; j < l; j++) {
node.childNodes[j].style.display = 'none';
node.childNodes[j].setAttribute('data-rm', '1');
}
node.appendChild(fragment);
var that=this;
setTimeout(function() {
if (that.lastFocusedElem) {
var node=document.querySelectorAll('[data-index="'+that.lastFocusedElem+'"]');
$(node).focus();
}
}, 5);
},
createRow:function (i) {
var item =this.rowGenerator(i);
item.classname='vrow';
item.style.position = 'absolute';
item.style.top = (i * this._itemHeight) + 'px';
return item;
},
rowGenerator:function (row) {
var el = document.createElement("li");
if(this._descriptionMode){
el.innerHTML = '<div class=selectbox_option_text>' + this._model[row].label + '</div><div class=selectbox_option_inner_text>' + this._model[row].description + '</div>';
el.title=this._model[row].label;
}else{
el.innerHTML = '<div class=selectbox_option_text>' + this._model[row] + '</div>';
el.title=this._model[row];
}
if(this._selectedIndices!=undefined && this._selectedIndicesContains(row) && !this._choosenMode){
el.className=this._descriptionMode?'selectbox_option selectbox_option_selected selectbox_option_description':'selectbox_option selectbox_option_selected';
el.setAttribute('aria-selected', true);
}else{
el.className=this._descriptionMode?'selectbox_option selectbox_option_description':'selectbox_option';
el.setAttribute('aria-selected', false);
}
el.setAttribute('data-index', row);
// el.setAttribute('role', 'listitem');
el.setAttribute('aria-setsize', this._totalRows);
el.setAttribute('aria-posinset', row+1);
el.setAttribute('tabindex', '0');
this.attachEventListner(el);
return el;
},
_selectedIndicesContains: function (index) {
var length = this._selectedIndices.length;
for (var i=0;i<length;i++) {
if (this._selectedIndices[i] !=null && this._selectedIndices[i] === index) {
return true;
}
}
return false;
},
createChoosenContent : function (text,_index) {
var tempAria=text +'. Selected';
if(this.$ul.find('.select-search-choice').length==0){
tempAria= this._emptyMessage +'multiple items chosen box. '+tempAria;
}
var li=document.createElement("li");
li.innerHTML = '<div tabindex ="0" aria-label="'+tempAria+'" data-index="'+_index+'">'+text+'</div><a role ="button" aria-label="remove" href="javascript:void(0)" class="select-search-choice-close"></a>';
li.className='select-search-choice';
/* li.setAttribute('tabindex', '0');
li.setAttribute('aria-label', tempAria);*/
var that=this;
var anchor=$(li).find('a');
anchor.off('click').on("click", function(ev) {
zAu.send(new zk.Event(zk.Widget.$(that), 'onClickOfItem', {index:_index, op:"remove"},{toServer:true}));
zAu.send(new zk.Event(zk.Widget.$(that), 'onSelect', {},{toServer:true}));
$(this.offsetParent).find('*').off();
$(this.offsetParent).hide().remove();
if(that._open){
that.setOpen(false);
}
setTimeout(function() {
that.$input.focus();
}, 800);
});
anchor.off('keydown').on("keydown", function(ev) {
if(ev.keyCode==8){
ev.preventDefault();
}
if(ev.keyCode==13 || ev.keyCode==32 || ev.keyCode==8){
$(this).trigger('click');
}
});
this.$ul.find('.select-search-field').before(li);
},
attachEventListner : function(el) {
var that=this;
$(el).off('click').on("click", function(ev) {
var _index=$(this).attr('data-index');
if(that._choosenMode){
var _selIndex=that._subModel.indexOf(that._model[_index]);
zAu.send(new zk.Event(zk.Widget.$(that), 'onClickOfItem', {index:_selIndex},{toServer:true}));
}else{
zAu.send(new zk.Event(zk.Widget.$(that), 'onClickOfItem', {index:_index},{toServer:true}));
}
zAu.send(new zk.Event(zk.Widget.$(that), 'onSelect', {index:_index},{toServer:true}));
that.setOpen(false);
setTimeout(function() {
that.$input.focus();
}, 150);
});
$(el).off('mouseover').on("mouseover", function(ev) {
that.lastFocusedElem=null;
$(this).addClass("selectbox_option_hover");
});
$(el).off('mouseout').on("mouseout", function(ev) {
$(this).removeClass("selectbox_option_hover");
});
$(el).off('focus').on("focus", function(ev) {
that.lastFocusedElem=$(this).attr('data-index');
$(this).addClass("selectbox_option_hover");
});
$(el).off('focusout').on("focusout", function(ev) {
$(this).removeClass("selectbox_option_hover");
});
$(el).off('keydown').on('keydown', function(ev) {
var el=this;
switch(ev.which || ev.keyCode){
case 13:
$(this).trigger('click');
break;
case 38:
if($(el).attr('data-index')!='0'){
ev.preventDefault();
if($(el).hasClass('selectbox_option_selected')){
$(el).removeClass('selectbox_option_selected');
}
$(el).prev().focus();
setTimeout(function() {
that.$container.scrollTop=($(el).attr('data-index')-1) * that._itemHeight;
}, 5);
}else{
$(el).removeClass("selectbox_option_hover selectbox_option_selected");
that.$input.focus();
}
break;
case 40:
ev.preventDefault();
$(el).next().focus();
if($(el).hasClass('selectbox_option_selected')){
$(el).removeClass('selectbox_option_selected');
}
setTimeout(function() {
that.$container.scrollTop=($(el).attr('data-index')-1) * that._itemHeight;
}, 5);
break;
case 9:
ev.preventDefault();
that.setOpen(false);
that.$input.focus();
break;
default:
that.$input.focus();
break;
}
});
},
_attachCoreListner:function(){
var self=this;
$('body').on('keydown', '#'+this.uuid+'-real', function(e) {
if (e.which == 9) {
setTimeout(function() {
if(self._open){
self.setOpen(false);
}
}, 5);
}
});
if(!self._choosenMode && !self._descriptionMode){
this.$input.on("change", function() {
if($(this).val().length == 0) {
zAu.send(new zk.Event(zk.Widget.$(self), 'onClickOfItem', {index:-1},{toServer:true}));
zAu.send(new zk.Event(zk.Widget.$(self), 'onChange', {},{toServer:true}));
zAu.send(new zk.Event(zk.Widget.$(self), 'onSelect', {index:-1},{toServer:true}));
if(self._open){
$(self.$container.children).removeClass('selectbox_option_selected');
}
}
});
}
/* Itrack #53959 */
if(checkIE() && this._descriptionMode){
this.$input.bind("mouseup", function(e){
event.stopPropagation()
var that=this;
setTimeout(function() {
if(that.value=='')
{
if(self._open){
self.setOpen(false);
}
}
}, 50);
});
}
this.$input.keyup(function(ev) {
switch(ev.which || ev.keyCode){
case 9:
setTimeout(function() {
if(self._open){
self.setOpen(false);
}
}, 5);
break;
case 16:
break;
case 13:
setTimeout(function() {
if(self._open){
self.setOpen(false);
}
}, 5);
break;
case 38:
break;
case 46:
break;
case 40:
if(!self._open){
if(self._choosenMode){
var length = self._subModel.length;
self._model=[];
var k=0;
for (var i = 0; i < length; i++) {
if (self._selectedIndices.indexOf(i)==-1) {
var val=self._subModel[i];
self._model[k++]=val;
}
}
self._totalRows=k;
}
self.setOpen(true);
}
else{
if(self.$container!=undefined && self.$container.children.length>1){
$(self.$container.children[1]).focus();
self.$container.scrollTop = 0;
}
}
break;
default:
clearTimeout($.data(self, self.uuid+'TextTypeTimer'));
var that=this;
$.data(self, self.uuid+'TextTypeTimer', setTimeout(function() {
var searchData = that.value;
var length =null;
var data=[];
if(!self._choosenMode && !self._descriptionMode){
if(!self._open){
self.setOpen(true);
}
$(self.$container.children).removeClass('selectbox_option_selected selectbox_option_hover');
if(!zk.Widget.$(self.$input)._instant){
var found=false;
var index=null;
length = self._totalRows;
for (var i = 0; i < length; i++) {
if (searchData.length!=0 && self._model[i].toLowerCase().startsWith(
searchData.toLowerCase())) {
index=i;
self.lastFocusedElem=index;
self.$container.scrollTop = (i + 1 - 10)* self._itemHeight;
found=true;
break;
}
}
if(!found){
$(self.$input).focus();
$(self.$container.children).removeClass('selectbox_option_hover');
}else{
var node=document.querySelectorAll('[data-index="'+index+'"]');
$(node).focus();
}
}
}else{
if(self._descriptionMode){
if(!self._open){
self.setOpen(true);
}else{
if(!searchData)
{
zk.Widget.$(that).fire('onChange');
}
}
}else{
length = self._subModel.length;
self._model=[];
var k=0;
for (var i = 0; i < length; i++) {
if (self._subModel[i].toLowerCase().startsWith(
searchData.toLowerCase()) && self._selectedIndices.indexOf(i)==-1) {
var val=self._subModel[i];
self._model[k++]=val;
}
}
self._totalRows=self._model.length;
$(self.$container).remove();
window.clearInterval(self.rmNodeInterval);
self.rmNodeInterval=null;
$(document.body).off('click', self.bodyOnClick);
self.bodyOnClick=null;
self.setOpen(true);
that.value=searchData;
if(self._totalRows==0 && self._subModel.indexOf(searchData)==-1 && self.creatableDiv){
$(self.$container).append(self.creatableDiv);
$(self.$container).css('height', self.creatableDiv.clientHeight);
$(self.creatableDiv).off('click').on('click', function(ev) {
zAu.send(new zk.Event(zk.Widget.$(self), 'onSearch', {},{toServer:true}));
self._createSelectedObjects=true;
});
}else{
$(self.creatableDiv).remove();
}
var newWidth = that.scrollWidth + 10;
if( that.scrollWidth >= that.clientWidth )
newWidth += 10;
that.style.width = newWidth + 'px';
}
}
}, 500));
break;
} });
},
destroy:function () {
$(this.$container).remove();
window.clearInterval(this.rmNodeInterval);
this.rmNodeInterval=null;
if(this._choosenMode){
this._fixEmptyMessage();
}
if(this.tempFunction !=undefined){
$(document).off( 'keydown' , this.tempFunction);
this.tempFunction=null;
}
$(document.body).off('click', this.bodyOnClick);
this.bodyOnClick=null;
zAu.send(new zk.Event(zk.Widget.$(this), 'onClose', {},{toServer:true}));
},
unbind_: function () {
$('#'+this.uuid+'-btn').off('keydown');
this.$ul.off('click');
this.$input.unbind();
this.$input.off();
this.destroy();
$(document.body).off('click', this.bodyOnClick);
this.bodyOnClick=null;
this.domUnlisten_(this.$input[0], 'onFocus', 'doFocus').domUnlisten_(this.$input[0], 'onBlur', 'doBlur');
this.$supers(zul.selectbox.Amandaselectbox, 'unbind_', arguments);
this._subModel=null;
this._model=null;
$(this.creatableDiv).remove();
for(var key in this) {
if(this[key] instanceof Element){
$(this[key]).remove();
}
this[key]=null;
delete this[key];
}
delete this;
},
createChoosenContentOnRender: function () {
var length= this._selectedIndices.length;
for (var i = 0; i < length; i++) {
this.createChoosenContent(this._subModel[this._selectedIndices[i]],this._selectedIndices[i]);
}
var length= this._selectedIndices.length;
var dataArray = [ length ];
for (var i = 0; i < length; i++) {
dataArray[i] = this._subModel[this._selectedIndices[i]];
}
for ( var i = 0; i < length; i++) {
var index = this._model.indexOf(dataArray[i]);
if(index!=-1){
this._model.splice(index, 1);
this._totalRows--;
}
}
this._fixEmptyMessage();
},
doFocus: function (evt) {
if (!this.isDisabled()) {
jq(this.$n()).addClass(this.$s('focus'));
var inp = this.$input[0];
if (inp && inp.value == this._emptyMessage) {
inp.value = '';
}
this.domUnlisten_(this.$input[0], 'onBlur', 'doBlur').domListen_( this.$input[0], 'onBlur', 'doBlur');
}
return this.$supers('doFocus_', arguments);
},
_fixEmptyMessage: function () {
var inp=this.$input[0];
inp.value = this._selectedIndices.length == 0? zUtl.encodeXML(this.getEmptyMessage()) : '';
this._fixInputWidth();
},
// calculate the width for input field
_fixInputWidth: function () {
var n = this.$n(),
inp = this.$input[0],
txcnt = $('#'+this.uuid+'-txtcont')[0],
width,
max = parseInt($('#'+this.uuid)[0].getBoundingClientRect().width) - 10;
// copy value to hidden txcnt
if(txcnt !=undefined){
txcnt.innerHTML = inp.value;
// get width from hidden txcnt
width = jq(txcnt).width() + 30;
}
if (width > max)
inp.style.width = max + 'px';
else
inp.style.width = width + 'px';
},
doBlur: function (evt) {
jq(this.$n()).removeClass(this.$s('focus'));
var self = this;
setTimeout(function () {
if (self.desktop && zk.currentFocus != self && (document.activeElement && document.activeElement.parentElement != self.$container)) {
self._fixEmptyMessage();
}
}, 200);
return this.$supers('doBlur_', arguments);
},
bind_: function (desktop, skipper, after) {
this.$supers('bind_', arguments);
this.$input= $('#'+this.uuid+'-real');
this.$ul=$('#'+this.uuid+'-choices');
var self = this;
if(this._choosenMode){
this.domListen_( this.$input[0], 'onFocus', 'doFocus') .domListen_( this.$input[0], 'onBlur', 'doBlur');
$('#'+this.uuid).on('click', function (ev) {
$('#'+self.uuid+'-real').focus();
if(self._open){
self.setOpen(false);
}else{
if(!(ev.target instanceof HTMLAnchorElement)){
var length = self._subModel.length;
self._model=[];
var k=0;
for (var i = 0; i < length; i++) {
if (self._selectedIndices.indexOf(i)==-1) {
var val=self._subModel[i];
self._model[k++]=val;
}
}
self._totalRows=k;
self.setOpen(true);
}
}
});
$('#'+this.uuid).on('keydown', function (ev) {
if(ev.keyCode==13){
if(self._choosenMode && self.creatableDiv){
$(self.creatableDiv).trigger('click');
}
$(this).trigger('click');
}
if(ev.keyCode==9 && self._open){
self.destroy();
}
});
this.createChoosenContentOnRender();
this.$input.css('max-width',$('#'+this.uuid)[0].getBoundingClientRect().width);
}else{
$('#'+this.uuid+'-btn').on('click', function (ev) {
clearTimeout($.data(self, self.uuid+'clickTimer'));
if($('#'+self.uuid).parents('.z-idspace').css('display') !='none'){
$.data(self, self.uuid+'clickTimer', setTimeout(function() {
if(self._open){
self.setOpen(false);
}else{
self.setOpen(true);
}
}, 100));
}
});
}
this._attachCoreListner();
},
_getAriaLabel: function(){
var arialabel='';
var section = $(this.domExtraAttrs).attr('section-text');
var type= this._choosenMode ? 'multiple items chosen box' : 'combobox';
var content=this._choosenMode ? this._emptyMessage: this._placeholder;
if(this._readonly){
if (section != undefined && section !="") {
arialabel = section +' ' + content + ' readonly '+type+' with '+ this._totalRows +' item . Use down arrow key to open '+ type +' and navigate through items';
} else {
arialabel = content + ' readonly '+type+' with '+ this._totalRows +' item . Use down arrow key to open '+ type +' and navigate through items';
}
} else {
if (section != undefined && section !="") {
arialabel = section +' ' + content + ' '+type+' with '+ this._totalRows +' item. Use down arrow key to open '+ type +' and navigate through items';
} else {
arialabel = content + ' '+type+' with '+ this._totalRows +' item. Use down arrow key to open '+ type +' and navigate through items';
}
}
return arialabel;
},
redraw: function (out) {
var uuid = this.uuid;
var ariaLabel=this._getAriaLabel();
if(this._choosenMode){
out.push('<div style="'+this._style+'" role="application"', this.domAttrs_({text: true}), '><ul role="combobox" id="',uuid, '-choices" style ="'+this._style+'" class="select-choices"><li class="select-search-field"><input aria-label="'+ariaLabel+'" class="select-input" style="width:20px" id="',uuid, '-real');
out.push('" autocomplete="off"', this.textAttrs_(), '/><div style="display: none;white-space: nowrap;" id="',uuid, '-txtcont" ></div></li></ul>');
out.push('<button tabindex="-1" id="', uuid, '-btn" class="', this.$s('button'));
out.push('"><i class="z-combobox-icon z-icon-caret-down"></i></button></div>');
}else{
out.push('<span', this.domAttrs_({text: true}), '><input aria-label="'+ariaLabel+'" id="',uuid, '-real" style="'+this._style+'"" class="', this.$s('input'));
out.push('" autocomplete="off"', this.textAttrs_(), '/>');
if(this._buttonVisible){
out.push('<button tabindex="-1" id="', uuid, '-btn" class="', this.$s('button'), '"><i class="z-combobox-icon z-icon-caret-down"></i></button>');
}
out.push('</span>');
}
}
});