You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8 lines
4.5 KiB
Plaintext
8 lines
4.5 KiB
Plaintext
(function($,window,document){var classSelector=function(name){return'.'+$.className(name);}
|
|
var IndexedList=$.IndexedList=$.Class.extend({init:function(holder,options){var self=this;self.options=options||{};self.box=holder;if(!self.box){throw"实例 IndexedList 时需要指定 element";}
|
|
self.createDom();self.findElements();self.caleLayout();self.bindEvent();},createDom:function(){var self=this;self.el=self.el||{};self.el.styleForSearch=document.createElement('style');(document.head||document.body).appendChild(self.el.styleForSearch);},findElements:function(){var self=this;self.el=self.el||{};self.el.search=self.box.querySelector(classSelector('indexed-list-search'));self.el.searchInput=self.box.querySelector(classSelector('indexed-list-search-input'));self.el.searchClear=self.box.querySelector(classSelector('indexed-list-search')+' '+classSelector('icon-clear'));self.el.inner=self.box.querySelector(classSelector('indexed-list-inner'));self.el.items=[].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));self.el.liArray=[].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner')+' li'));self.el.alert=self.box.querySelector(classSelector('indexed-list-alert'));},caleLayout:function(){var self=this;var withoutSearchHeight=(self.box.offsetHeight-self.el.search.offsetHeight)+'px';},scrollTo:function(group){var self=this;var groupElement=self.el.inner.querySelector('[data-group="'+group+'"]');if(!groupElement||(self.hiddenGroups&&self.hiddenGroups.indexOf(groupElement)>-1)){return;}
|
|
self.el.inner.scrollTop=groupElement.offsetTop;},bindBarEvent:function(){var self=this;var pointElement=null;var findStart=function(event){if(pointElement){pointElement.classList.remove('active');pointElement=null;}
|
|
self.el.bar.classList.add('active');var point=event.changedTouches?event.changedTouches[0]:event;pointElement=document.elementFromPoint(point.pageX,point.pageY);if(pointElement){var group=pointElement.innerText;if(group&&group.length==1){pointElement.classList.add('active');self.el.alert.innerText=group;self.el.alert.classList.add('active');self.scrollTo(group);}}
|
|
event.preventDefault();};var findEnd=function(event){self.el.alert.classList.remove('active');self.el.bar.classList.remove('active');if(pointElement){pointElement.classList.remove('active');pointElement=null;}};self.el.bar.addEventListener($.EVENT_MOVE,function(event){findStart(event);},false);self.el.bar.addEventListener($.EVENT_START,function(event){findStart(event);},false);document.body.addEventListener($.EVENT_END,function(event){findEnd(event);},false);document.body.addEventListener($.EVENT_CANCEL,function(event){findEnd(event);},false);},search:function(keyword){var self=this;keyword=(keyword||'').toLowerCase();var selectorBuffer=[];var groupIndex=-1;var itemCount=0;var liArray=self.el.liArray;var itemTotal=liArray.length;self.hiddenGroups=[];var checkGroup=function(currentIndex,last){if(itemCount>=currentIndex-groupIndex-(last?0:1)){selectorBuffer.push(classSelector('indexed-list-inner li')+':nth-child('+(groupIndex+1)+')');self.hiddenGroups.push(liArray[groupIndex]);};groupIndex=currentIndex;itemCount=0;}
|
|
liArray.forEach(function(item){var currentIndex=liArray.indexOf(item);if(item.classList.contains($.className('indexed-list-group'))){checkGroup(currentIndex,false);}else{var text=(item.innerText||'').toLowerCase();var value=(item.getAttribute('data-value')||'').toLowerCase();var tags=(item.getAttribute('data-tags')||'').toLowerCase();if(keyword&&text.indexOf(keyword)<0&&value.indexOf(keyword)<0&&tags.indexOf(keyword)<0){selectorBuffer.push(classSelector('indexed-list-inner li')+':nth-child('+(currentIndex+1)+')');itemCount++;}
|
|
if(currentIndex>=itemTotal-1){checkGroup(currentIndex,true);}}});if(selectorBuffer.length>=itemTotal){self.el.inner.classList.add('empty');}else if(selectorBuffer.length>0){self.el.inner.classList.remove('empty');self.el.styleForSearch.innerText=selectorBuffer.join(', ')+"{display:none;}";}else{self.el.inner.classList.remove('empty');self.el.styleForSearch.innerText="";}},bindSearchEvent:function(){var self=this;self.el.searchInput.addEventListener('input',function(){var keyword=this.value;self.search(keyword);},false);$(self.el.search).on('tap',classSelector('icon-clear'),function(){self.search('');},false);},bindEvent:function(){var self=this;}});$.fn.indexedList=function(options){this.each(function(i,element){if(element.indexedList)return;element.indexedList=new IndexedList(element,options);});return this[0]?this[0].indexedList:null;};})(mui,window,document); |