LArea.min.js
6.26 KB
/*
* LArea城市选择控件
*
* 作者：黄磊
*
* 项目地址：https://github.com/xfhxbb/LArea
*
* 报告漏洞，意见或建议, 请联系邮箱：xfhxbb@yeah.net
*
* 创建于：2016年2月8日
*
* Copyright 2016
*
* 获得使用本类库的许可, 您必须保留著作权声明信息。
*/
window.LArea=function(){var a=function(){this.gearArea,this.data,this.index=0,this.value=[0,0,0]};return a.prototype={init:function(a){switch(this.params=a,this.trigger=document.querySelector(a.trigger),a.valueTo&&(this.valueTo=document.querySelector(a.valueTo)),this.keys=a.keys,this.type=a.type||1,this.type){case 1:case 2:break;default:throw new Error("错误提示: 没有这种数据源类型")}this.bindEvent()},getData:function(a){var b=this;if("object"==typeof b.params.data)b.data=b.params.data,a();else{var c=new XMLHttpRequest;c.open("get",b.params.data),c.onload=function(d){if(c.status>=200&&c.status<300||0===c.status){var e=JSON.parse(c.responseText);b.data=e.data,a&&a()}},c.send()}},bindEvent:function(){function a(a){h.gearArea=document.createElement("div"),h.gearArea.className="gearArea",h.gearArea.innerHTML='<div class="area_ctrl slideInUp"><div class="area_btn_box"><div class="area_btn larea_cancel">取消</div><div class="area_btn larea_finish">确定</div></div><div class="area_roll_mask"><div class="area_roll"><div><div class="gear area_province" data-areatype="area_province"></div><div class="area_grid"></div></div><div><div class="gear area_city" data-areatype="area_city"></div><div class="area_grid"></div></div><div><div class="gear area_county" data-areatype="area_county"></div><div class="area_grid"></div></div></div></div></div>',document.body.appendChild(h.gearArea),b();var f=h.gearArea.querySelector(".larea_cancel");f.addEventListener("touchstart",function(a){h.close(a)});var g=h.gearArea.querySelector(".larea_finish");g.addEventListener("touchstart",function(a){h.finish(a)});var i=h.gearArea.querySelector(".area_province"),j=h.gearArea.querySelector(".area_city"),k=h.gearArea.querySelector(".area_county");i.addEventListener("touchstart",c),j.addEventListener("touchstart",c),k.addEventListener("touchstart",c),i.addEventListener("touchmove",d),j.addEventListener("touchmove",d),k.addEventListener("touchmove",d),i.addEventListener("touchend",e),j.addEventListener("touchend",e),k.addEventListener("touchend",e)}function b(){switch(h.gearArea.querySelector(".area_province").setAttribute("val",h.value[0]),h.gearArea.querySelector(".area_city").setAttribute("val",h.value[1]),h.gearArea.querySelector(".area_county").setAttribute("val",h.value[2]),h.type){case 1:h.setGearTooth(h.data);break;case 2:h.setGearTooth(h.data[0])}}function c(a){a.preventDefault();for(var b=a.target;;){if(b.classList.contains("gear"))break;b=b.parentElement}clearInterval(b["int_"+b.id]),b["old_"+b.id]=a.targetTouches[0].screenY,b["o_t_"+b.id]=(new Date).getTime();var c=b.getAttribute("top");c?b["o_d_"+b.id]=parseFloat(c.replace(/em/g,"")):b["o_d_"+b.id]=0,b.style.webkitTransitionDuration=b.style.transitionDuration="0ms"}function d(a){a.preventDefault();for(var b=a.target;;){if(b.classList.contains("gear"))break;b=b.parentElement}b["new_"+b.id]=a.targetTouches[0].screenY,b["n_t_"+b.id]=(new Date).getTime();var c=9*(b["new_"+b.id]-b["old_"+b.id])/window.innerHeight;b["pos_"+b.id]=b["o_d_"+b.id]+c,b.style["-webkit-transform"]="translate3d(0,"+b["pos_"+b.id]+"em,0)",b.setAttribute("top",b["pos_"+b.id]+"em"),a.targetTouches[0].screenY<1&&e(a)}function e(a){a.preventDefault();for(var b=a.target;;){if(b.classList.contains("gear"))break;b=b.parentElement}var c=(b["new_"+b.id]-b["old_"+b.id])/(b["n_t_"+b.id]-b["o_t_"+b.id]);Math.abs(c)<=.2?b["spd_"+b.id]=0>c?-.08:.08:Math.abs(c)<=.5?b["spd_"+b.id]=0>c?-.16:.16:b["spd_"+b.id]=c/2,b["pos_"+b.id]||(b["pos_"+b.id]=0),f(b)}function f(a){function b(){a.style.webkitTransitionDuration=a.style.transitionDuration="200ms",d=!0}var c=0,d=!1;clearInterval(a["int_"+a.id]),a["int_"+a.id]=setInterval(function(){var e=a["pos_"+a.id],f=a["spd_"+a.id]*Math.exp(-.03*c);if(e+=f,Math.abs(f)>.1);else{var h=2*Math.round(e/2);e=h,b()}e>0&&(e=0,b());var i=2*-(a.dataset.len-1);if(i>e&&(e=i,b()),d){var j=Math.abs(e)/2;g(a,j),clearInterval(a["int_"+a.id])}a["pos_"+a.id]=e,a.style["-webkit-transform"]="translate3d(0,"+e+"em,0)",a.setAttribute("top",e+"em"),c++},30)}function g(a,b){switch(b=Math.round(b),a.setAttribute("val",b),h.type){case 1:h.setGearTooth(h.data);break;case 2:switch(a.dataset.areatype){case"area_province":h.setGearTooth(h.data[0]);break;case"area_city":var c=a.childNodes[b].getAttribute("ref"),d=[],e=h.data[2];for(var f in e)if(f==c){d=e[f];break}h.index=2,h.setGearTooth(d)}}}var h=this;h.getData(function(){h.trigger.addEventListener("click",a)})},setGearTooth:function(a){var b=this,c=a||[],d=c.length,e=b.gearArea.querySelectorAll(".gear"),f=e[b.index].getAttribute("val"),g=d-1;if(f>g&&(f=g),e[b.index].setAttribute("data-len",d),d>0){var h,i=c[f][this.keys.id];switch(b.type){case 1:h=c[f].child;break;case 2:var j=b.data[b.index+1];for(var k in j)if(k==i){h=j[k];break}}for(var l="",k=0;d>k;k++)l+="<div class='tooth' ref='"+c[k][this.keys.id]+"'>"+c[k][this.keys.name]+"</div>";if(e[b.index].innerHTML=l,e[b.index].style["-webkit-transform"]="translate3d(0,"+2*-f+"em,0)",e[b.index].setAttribute("top",2*-f+"em"),e[b.index].setAttribute("val",f),b.index++,b.index>2)return void(b.index=0);b.setGearTooth(h)}else e[b.index].innerHTML="<div class='tooth'></div>",e[b.index].setAttribute("val",0),1==b.index&&(e[2].innerHTML="<div class='tooth'></div>",e[2].setAttribute("val",0)),b.index=0},finish:function(a){var b=this,c=b.gearArea.querySelector(".area_province"),d=b.gearArea.querySelector(".area_city"),e=b.gearArea.querySelector(".area_county"),f=parseInt(c.getAttribute("val")),g=c.childNodes[f].textContent,h=c.childNodes[f].getAttribute("ref"),i=parseInt(d.getAttribute("val")),j=d.childNodes[i].textContent,k=d.childNodes[i].getAttribute("ref"),l=parseInt(e.getAttribute("val")),m=e.childNodes[l].textContent,n=e.childNodes[l].getAttribute("ref");b.trigger.value=g+(j?","+j:"")+(m?","+m:""),b.value=[f,i,l],this.valueTo&&(this.valueTo.value=h+(k?","+k:"")+(n?","+n:"")),b.close(a)},close:function(a){a.preventDefault();var b=this,c=new CustomEvent("input");b.trigger.dispatchEvent(c),document.body.removeChild(b.gearArea)}},a}();
/*! 最后修改于： 2016-04-26 04:26:36 */