Suggested case list:

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

identify firefox or not in server side

1TonyQ198.203.175.1751nv2qreDec 10, 2011 4:25:04 AMlink

ZK addThis integration

1TonyQ198.203.175.1751apl96jNov 5, 2011 4:12:50 AMlink

Latest 10 Fiddles :

Listbox-inplaceedit

1almaC181.174.125.214khgdrpAug 22, 2018 12:21:06 AMlink

custom form validator

16guest177.209.11.442fnhdnpAug 21, 2018 8:20:18 PMlink

custom form validator

15guest177.209.11.442fnhdnpAug 21, 2018 8:19:07 PMlink

custom form validator

14guest177.209.11.442fnhdnpAug 21, 2018 8:16:21 PMlink

custom form validator

13guest177.209.11.442fnhdnpAug 21, 2018 8:14:26 PMlink

custom form validator

12guest177.209.11.442fnhdnpAug 21, 2018 8:13:40 PMlink

custom form validator

11guest177.209.11.442fnhdnpAug 21, 2018 8:12:46 PMlink

custom form validator

10guest177.209.11.442fnhdnpAug 21, 2018 8:12:14 PMlink

custom form validator

9guest177.209.11.442fnhdnpAug 21, 2018 8:09:36 PMlink

custom form validator

8guest177.209.11.442fnhdnpAug 21, 2018 8:08:45 PMlink

Another new ZK fiddle

17guest14.142.138.1253arppreAug 10, 2018 6:12:58 AMlink

resources

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>'); } } });