lazyPicker-1.2.0.min.js

/**

 @Name : lazyPicker v1.2.0 移动日期控件
 @Author: TG
 @Date: 2016-12-05
 @Site：https://github.com/IronPans/LazyPicker/blob/master/lazyPicker-1.2.0.js

 */
(function(){'use strict';var LazyPicker=function(container,params){if(!(this instanceof LazyPicker)){return new LazyPicker(params)}var p=this;var currentslide=null;var moveY=[];var activeMoveY=0;var startY=0;var index=0;var years=[];var months=[];var days=[];var defaults={type:'1',theme:'green',itemHeight:40,minDate:1950};p.defaultMove=[];params=params||{};var originalParams={};for(var param in params){if(typeof params[param]==='object'&&params[param]!==null){originalParams[param]={};for(var deepParam in params[param]){originalParams[param][deepParam]=params[param][deepParam]}}else{originalParams[param]=params[param]}};for(var def in defaults){if(typeof params[def]==='undefined'){params[def]=defaults[def]}else if(typeof params[def]==='object'){for(var deepDef in defaults[def]){if(typeof params[def][deepDef]==='undefined'){params[def][deepDef]=defaults[def][deepDef]}}}};p.picker=typeof container==='string'?document.querySelectorAll(container):container;if(p.picker.length==0){return}if(p.picker.length>1){var pickers=[];for(var i=0;i<p.picker.length;i+=1){pickers.push(new LazyPicker(p.picker[i],params))};return pickers};p.picker=p.picker.length?p.picker[0]:p.picker;p.picker.readOnly=true;p.params=params;p.originalParams=originalParams;p.currentDateInput=null;p.initValue=[];p.defaultValue=[];p.selectValue=[];p.currentSelected=[];p.defaultSelected=[];if(!p.params.data){(function setInitDate(p){var curDate=new Date();p.initValue=[curDate.getFullYear(),curDate.getMonth()+1,curDate.getDate()];if(typeof p.params.initValue==='string'){p.initValue=p.params.initValue.split(/\/|-/gm)};var arr=p.initValue.map(function(v){return format(v)});p.initValue=arr;p.initValue[p.initValue.length]=0;p.params.maxDate=p.params.maxDate?p.params.maxDate:parseInt(p.initValue[0])+20;p.initValue[0]=parseInt(p.initValue[0])>p.params.maxDate?p.params.maxDate:p.initValue[0];p.params.initValue=p.initValue[p.initValue.length-1]=p.initValue[0]+'-'+p.initValue[1]+'-'+p.initValue[2]})(p)};function format(d){d=parseInt(d)>=10?d:'0'+parseInt(d);return d};p.getCountDays=function(d){var curDate=new Date();var curMonth=curDate.getMonth();curDate.setMonth(curMonth+1);if(typeof d!=='undefined'){curDate=new Date(d);curMonth=curDate.getMonth();curDate.setMonth(curMonth)};curDate.setDate(32);return 32-curDate.getDate()};p.openModalOverlap=function(){p.overlap=document.createElement('div');p.overlap.className='picker-modal-overlap';p.overlap.style.width=window.innerWidth+'px';p.overlap.style.height=window.innerHeight+'px';document.body.appendChild(p.overlap);p.overlap.addEventListener('click',p.closeModal);setTimeout(function(){document.body.classList.add('modal-open')},100)};p.closeModal=function(){document.body.classList.remove('modal-open');setTimeout(function(){document.body.removeChild(p.overlap);p.container&&document.body.removeChild(p.container);for(var i=0;i<moveY.length;i+=1){moveY[i]=p.defaultMove[i];p.initValue[i]=p.defaultValue[i];p.params.data?p.currentSelected[i]=p.defaultSelected[i]:''}},260)};p.drawDate=function(){var yearList="";for(var i=p.params.minDate;i<p.params.maxDate+1;i+=1){years.push(i);yearList+='<div class="item" data-val="'+i+'">'+i+'</div>'};var monthList="";for(var i=1;i<13;i+=1){months.push(i);monthList+='<div class="item" data-val="'+i+'">'+format(i)+'</div>'};var num=p.getCountDays();var dayList="";for(var i=1;i<num+1;i+=1){days.push(i);dayList+='<div class="item" data-val="'+i+'">'+format(i)+'</div>'};return{yearList:{"name":"年","list":yearList},monthList:{"name":"月","list":monthList},dayList:{"name":"日","list":dayList}}};p.confirm=function(){if(p.params.clickInput){return}var selector=document.querySelector('.picker-selector').innerHTML;if(p.params.data){p.initValue=[];var data=p.params.data.item;var child=data[p.currentSelected[0]];for(var i=0;i<p.currentSelected.length;i+=1){p.initValue[i]=child?(child.name?[child.name,child.id]:''):'';child=child?(child.child?child.child[p.currentSelected[i+1]]:''):''};selector=p.initValue;p.currentDateInput.value=selector.map(function(v){return v[0]}).join('-');p.initValue[p.initValue.length]=p.currentDateInput.value}else{p.currentDateInput.value=selector;p.initValue[p.initValue.length-1]=p.currentDateInput.value};for(var i=0;i<moveY.length;i+=1){p.defaultMove[i]=moveY[i];p.defaultValue[i]=p.initValue[i];p.params.data?p.defaultSelected[i]=p.currentSelected[i]:''};p.params.onChange&&p.params.onChange.call(p,p.initValue);document.body.classList.remove('modal-open');setTimeout(function(){document.body.removeChild(p.overlap);p.container&&document.body.removeChild(p.container)},260)};p.drawItem=function(){var num=p.getCountDays(p.initValue[0]+"/"+p.initValue[1]+"/1");var dayList="";var p3=document.querySelector('.p3');for(var i=1;i<num+1;i+=1){days.push(i);dayList+='<div class="item" data-val="'+i+'" style="height:'+p.params.itemHeight+'px;line-height:'+p.params.itemHeight+'px">'+(i>=10?i:("0"+i))+'</div>'};p3.innerHTML=dayList;var dist=(num-2)*p.params.itemHeight;p.initValue[2]=Math.floor((Math.abs(moveY[2])>dist?num:p.initValue[2]));moveY[2]=Math.abs(moveY[2])>dist? -dist:moveY[2];setTransform(p3,"translate(0px,"+moveY[2]+"px)")};p.drawPicker=function(){var list=[];var picker=null;var overlay=null;var itemIndex=0;p.container=document.createElement("div");p.container.className="picker-container";var btn='<div class="picker-tool">';btn+='<div class="picker-button"><span class="picker-cancel">取消</span></div>';btn+='<div class="picker-button"><span class="picker-confirm">确认</span></div></div>';if(!p.params.data||typeof p.params.data==='string'){list=p.drawDate();picker='<div class="picker-selector">'+p.initValue[p.initValue.length-1];picker+='</div><div class="picker-wrapper">';var s=1;for(var v in list){picker+='<div class="picker-slide"> <div class = "picker-title">'+list[v].name;picker+=' </div><div class="item-box">';picker+='<div class="item-list p'+s+'"> '+list[v].list+'</div>';picker+='<div class="picker-overlay"></div>';p.params.type==1?picker+='<div class="picker-line"></div>':'';picker+='</div></div>';s+=1};picker+='</div>';picker+=btn;p.container.innerHTML=picker;p.params.type==2?p.container.classList.add('picker-type2'):'';document.body.appendChild(p.container);p.container.classList.add('theme-'+p.params.theme);overlay=document.querySelectorAll(".picker-overlay");if(document.querySelector(".item-list .item")){var items=document.querySelectorAll(".item-list .item");for(var i=0;i<items.length;i+=1){items[i].style.height=p.params.itemHeight+"px";items[i].style.lineHeight=p.params.itemHeight+"px"};for(var i=0;i<overlay.length;i+=1){overlay[i].addEventListener("touchstart",p.touchstart);overlay[i].setAttribute("data-index",i);overlay[i].parentNode.style.height=p.params.itemHeight*3+"px"};var years=p.params.minDate>parseInt(p.initValue[0])?0:(parseInt(p.initValue[0])-p.params.minDate-1);moveY[0]= -years*p.params.itemHeight;moveY[1]= -(parseInt(p.initValue[1])-2)*p.params.itemHeight;moveY[2]= -(parseInt(p.initValue[2])-2)*p.params.itemHeight;for(var i=0;i<moveY.length;i+=1){p.defaultMove[i]=moveY[i];p.defaultValue[i]=p.initValue[i]};setTransform(document.querySelector(".p1"),"translate(0px,"+moveY[0]+"px)");setTransform(document.querySelector(".p2"),"translate(0px,"+moveY[1]+"px)");setTransform(document.querySelector(".p3"),"translate(0px,"+moveY[2]+"px)")}}else{var data=p.params.data;picker='<div class="picker-selector"></div><div class="picker-wrapper">';if(p.currentSelected.length!=0){for(var i=0;i<p.currentSelected.length;i+=1){moveY[i]=p.defaultSelected[i]}};picker+=drawItem(data.item);picker+='</div>';picker+=btn;p.container.innerHTML=picker;document.body.appendChild(p.container);p.params.type==2?p.container.classList.add('picker-type2'):'';p.container.classList.add('theme-'+p.params.theme);p.slides=p.container.querySelectorAll('.picker-slide');var width=p.container.offsetWidth/p.slides.length;for(var i=0;i<p.slides.length;i+=1){p.slides[i].style.width=width+'px';p.slides[i].setAttribute('data-index',i)};overlay=document.querySelectorAll(".picker-overlay");if(document.querySelector(".item-list .item")){var items=document.querySelectorAll(".item-list .item");for(var i=0;i<items.length;i+=1){items[i].style.height=p.params.itemHeight+"px";items[i].style.lineHeight=p.params.itemHeight+"px"};var itemName=data.itemName?data.itemName.split('-'):'';for(var i=0;i<overlay.length;i+=1){overlay[i].addEventListener("touchstart",p.touchstart);overlay[i].setAttribute("data-index",i);p.currentSelected[i]=moveY[i];p.defaultSelected[i]=moveY[i];itemName&&(overlay[i].parentNode.previousElementSibling.innerHTML=itemName[i]);overlay[i].parentNode.style.height=p.params.itemHeight*3+"px";moveY[i]=(moveY[i]==0)?p.params.itemHeight:(1-moveY[i])*p.params.itemHeight;setTransform(overlay[i].previousElementSibling,"translate(0px,"+moveY[i]+"px)")}}};function drawItem(data){var picker='';if(p.currentSelected.length==0){moveY.push(0)};var itemList='';for(var i=0;i<data.length;i+=1){itemList+='<div class="item" data-id="'+(data[i].id?data[i].id:'');itemList+='" data-val="'+data[i].name+'">'+data[i].name+'</div>';(typeof data[i].selected!=='undefined'&&p.currentSelected.length==0)?(moveY[itemIndex]=i):''};picker+='<div class="picker-slide"><div class = "picker-title"></div>';picker+='<div class="item-box"><div class="item-list"> '+itemList+'</div>';picker+='<div class="picker-overlay"></div>';p.params.type==1?picker+='<div class="picker-line"></div>':'';picker+='</div></div>';var child=data[moveY[itemIndex]]?data[moveY[itemIndex]].child:'';itemIndex+=1;if(child&&Array.isArray(child)&&child.length>0){picker+=drawItem(child)}return picker}var confirm=document.querySelector('.picker-confirm');confirm&&addEvent(confirm,'click',p.confirm,false);var cancel=document.querySelector('.picker-cancel');cancel&&addEvent(cancel,'click',p.closeModal,false);p.openPicker();p.openModalOverlap()};p.init=function(){addEvent(p.picker,'click',function(){p.currentDateInput=this;p.drawPicker()},false);document.body.addEventListener('touchmove',function(e){if(document.body.classList.contains('modal-open')){e.preventDefault()}})};p.openPicker=function(e){setTimeout(function(){document.body.classList.add('modal-open')},100)};p.touchstart=function(e){currentslide=this.previousElementSibling;if(currentslide.querySelectorAll('.item').length==0){return}var e=e||window.event;var touch=e.touches[0];index=this.getAttribute("data-index");startY=touch.pageY;activeMoveY=moveY[index];document.addEventListener("touchmove",p.touchmove);document.addEventListener("touchend",p.touchend)};p.touchmove=function(e){if(currentslide.querySelectorAll('.item').length==0){return}var e=e||window.event;var touch=e.touches[0];var eY=touch.pageY;activeMoveY+=eY-startY;startY=eY;setTransform(currentslide,"translate(0px,"+activeMoveY+"px)")};p.touchend=function(e){if(currentslide.querySelectorAll('.item').length==0){return}var pHeight=currentslide.offsetHeight;if(activeMoveY>=p.params.itemHeight&&activeMoveY>0){activeMoveY=p.params.itemHeight}else if(activeMoveY<0&&Math.abs(activeMoveY)>(pHeight-2*p.params.itemHeight)){activeMoveY=(2*p.params.itemHeight-pHeight)}else{var mY=Math.abs(activeMoveY);var itemHeight=p.params.itemHeight;var leave=mY%itemHeight;var produce=Math.floor(mY/itemHeight);leave!=0?activeMoveY=(-produce*itemHeight):""};setTransform(currentslide,"translate(0px,"+activeMoveY+"px)");if(activeMoveY<=0){var items=currentslide.getElementsByTagName("div");for(var i=0;i<items.length;i+=1){var top=items[i].offsetTop;if(top==Math.abs(activeMoveY)&&activeMoveY<=0){}}};moveY[index]=activeMoveY;if(!p.params.data){switch(parseInt(index)){case 0:p.initValue[0]=activeMoveY>0?p.params.minDate:p.params.minDate+Math.abs(activeMoveY)/p.params.itemHeight+1;p.drawItem();break;case 1:p.initValue[1]=activeMoveY>0?"1":(Math.abs(activeMoveY)/p.params.itemHeight+2);p.drawItem();break;case 2:p.initValue[2]=activeMoveY>0?"1":(Math.abs(activeMoveY)/p.params.itemHeight+2);break};document.querySelector(".picker-selector").innerHTML=p.initValue[0]+"-"+format(p.initValue[1])+"-"+format(p.initValue[2])}else{var items=currentslide.children;var i=activeMoveY>0?0:Math.floor(Math.abs(activeMoveY)/p.params.itemHeight)+1;currentslide.setAttribute('data-value',items[i].textContent);p.currentSelected[index]=Math.abs(p.params.itemHeight-activeMoveY)/p.params.itemHeight;var data=p.params.data.item;for(var i=0;i<p.slides.length;i+=1){var cs=data[p.currentSelected[i]];(i>index)?drawItem(data,p.currentSelected[i],i):'';cs=data[p.currentSelected[i]];data=cs?(cs.child?cs.child:[]):[]};var data=p.params.data.item;var child=data[p.currentSelected[0]];for(var i=0;i<p.currentSelected.length;i+=1){p.initValue[i]=child?(child.name?child.name:''):'';child=child?(child.child?child.child[p.currentSelected[i+1]]:''):''}};function drawItem(data,index,id){var itemList='';for(var i=0;i<data.length;i+=1){itemList+='<div class="item" data-id="'+(data[i].id?data[i].id:'');itemList+='" data-val="'+data[i].name+'">'+data[i].name+'</div>'};p.slides[id].querySelector('.item-list').innerHTML=itemList;moveY[id]=p.params.itemHeight;p.currentSelected[id]=0;setTransform(p.slides[id].querySelector('.item-list'),'translate(0px, '+moveY[id]+'px)')};currentslide=null;startY=0;document.removeEventListener("touchmove",p.touchmove);document.removeEventListener("touchend",p.touchend);return};p.init();return p};var setTransform=function(element,animation){element.style.webkitTransform=animation;element.style.mozTransform=animation;element.style.oTransform=animation;element.style.msTransform=animation;element.style.transform=animation};var transitionEnd=function(elem,handler){elem.addEventListener('transitionend',handler,false);elem.addEventListener('webkitTransitionEnd',handler,false);elem.addEventListener('mozTransitionEnd',handler,false);elem.addEventListener('oTransitionEnd',handler,false)};var deleteTransitionEnd=function(elem,handler){elem.removeEventListener('transitionend',handler,false);elem.removeEventListener('webkitTransitionEnd',handler,false);elem.removeEventListener('mozTransitionEnd',handler,false);elem.removeEventListener('oTransitionEnd',handler,false)};var animationEnd=function(elem,handler){elem.addEventListener('animationend',handler,false);elem.addEventListener('webkitAnimationEnd',handler,false);elem.addEventListener('mozAnimationEnd',handler,false);elem.addEventListener('OAnimationEnd',handler,false)};var deleteAnimationEnd=function(elem,handler){elem.removeEventListener('animationend',handler,false);elem.removeEventListener('webkitAnimationEnd',handler,false);elem.removeEventListener('mozAnimationEnd',handler,false);elem.removeEventListener('OAnimationEnd',handler,false)};var addEvent=function(dom,type,handle,capture){if(dom.addEventListener){dom.addEventListener(type,handle,capture)}else if(dom.attachEvent){dom.attachEvent("on"+type,handle)}};var deleteEvent=function(dom,type,handle){if(dom.removeEventListener){dom.removeEventListener(type,handle)}else if(dom.detachEvent){dom.detachEvent('on'+type,handle)}};window.LazyPicker=LazyPicker})();if(typeof(module)!=='undefined'){module.exports=window.LazyPicker}else if(typeof define==='function'&&define.amd){define([],function(){'use strict';return window.LazyPicker})}