card/other/js/mobileSelect.min.js

/*!
 * mobileSelect.js
 * (c) 2017-present onlyhom
 * Released under the MIT License.
 */
(function(){function getClass(dom,string){return dom.getElementsByClassName(string)}function MobileSelect(config){this.mobileSelect;this.wheelsData=config.wheels;this.jsonType=false;this.cascadeJsonData=[];this.displayJson=[];this.curValue=null;this.curIndexArr=[];this.cascade=false;this.startY;this.moveEndY;this.moveY;this.oldMoveY;this.offset=0;this.offsetSum=0;this.oversizeBorder;this.curDistance=[];this.clickStatus=false;this.isPC=true;this.init(config)}MobileSelect.prototype={constructor:MobileSelect,init:function(config){var _this=this;_this.keyMap=config.keyMap?config.keyMap:{id:"id",value:"value",childs:"childs"};_this.checkDataType();_this.renderWheels(_this.wheelsData,config.cancelBtnText,config.ensureBtnText);_this.trigger=document.querySelector(config.trigger);if(!_this.trigger){console.error("mobileSelect has been successfully installed, but no trigger found on your page.");return false}_this.wheel=getClass(_this.mobileSelect,"wheel");_this.slider=getClass(_this.mobileSelect,"selectContainer");_this.wheels=_this.mobileSelect.querySelector(".wheels");_this.liHeight=_this.mobileSelect.querySelector("li").offsetHeight;_this.ensureBtn=_this.mobileSelect.querySelector(".ensure");_this.cancelBtn=_this.mobileSelect.querySelector(".cancel");_this.grayLayer=_this.mobileSelect.querySelector(".grayLayer");_this.popUp=_this.mobileSelect.querySelector(".content");_this.callback=config.callback||function(){};_this.transitionEnd=config.transitionEnd||function(){};_this.onShow=config.onShow||function(){};_this.onHide=config.onHide||function(){};_this.initPosition=config.position||[];_this.titleText=config.title||"";_this.connector=config.connector||" ";_this.triggerDisplayData=!(typeof(config.triggerDisplayData)=="undefined")?config.triggerDisplayData:true;_this.trigger.style.cursor="pointer";_this.setStyle(config);_this.setTitle(_this.titleText);_this.checkIsPC();_this.checkCascade();_this.addListenerAll();if(_this.cascade){_this.initCascade()}if(_this.initPosition.length<_this.slider.length){var diff=_this.slider.length-_this.initPosition.length;for(var i=0;i<diff;i++){_this.initPosition.push(0)}}_this.setCurDistance(_this.initPosition);_this.cancelBtn.addEventListener("click",function(){_this.hide()});_this.ensureBtn.addEventListener("click",function(){_this.hide();if(!_this.liHeight){_this.liHeight=_this.mobileSelect.querySelector("li").offsetHeight}var tempValue="";for(var i=0;i<_this.wheel.length;i++){i==_this.wheel.length-1?tempValue+=_this.getInnerHtml(i):tempValue+=_this.getInnerHtml(i)+_this.connector}if(_this.triggerDisplayData){_this.trigger.innerHTML=tempValue}_this.curIndexArr=_this.getIndexArr();_this.curValue=_this.getCurValue();_this.callback(_this.curIndexArr,_this.curValue)});_this.trigger.addEventListener("click",function(){_this.show()});_this.grayLayer.addEventListener("click",function(){_this.hide()});_this.popUp.addEventListener("click",function(){event.stopPropagation()});_this.fixRowStyle()},setTitle:function(string){var _this=this;_this.titleText=string;_this.mobileSelect.querySelector(".title").innerHTML=_this.titleText},setStyle:function(config){var _this=this;if(config.ensureBtnColor){_this.ensureBtn.style.color=config.ensureBtnColor}if(config.cancelBtnColor){_this.cancelBtn.style.color=config.cancelBtnColor}if(config.titleColor){_this.title=_this.mobileSelect.querySelector(".title");_this.title.style.color=config.titleColor}if(config.textColor){_this.panel=_this.mobileSelect.querySelector(".panel");_this.panel.style.color=config.textColor}if(config.titleBgColor){_this.btnBar=_this.mobileSelect.querySelector(".btnBar");_this.btnBar.style.backgroundColor=config.titleBgColor}if(config.bgColor){_this.panel=_this.mobileSelect.querySelector(".panel");_this.shadowMask=_this.mobileSelect.querySelector(".shadowMask");_this.panel.style.backgroundColor=config.bgColor;_this.shadowMask.style.background="linear-gradient(to bottom, "+config.bgColor+", rgba(255, 255, 255, 0), "+config.bgColor+")"}if(!isNaN(config.maskOpacity)){_this.grayMask=_this.mobileSelect.querySelector(".grayLayer");_this.grayMask.style.background="rgba(0, 0, 0, "+config.maskOpacity+")"}},checkIsPC:function(){var _this=this;var sUserAgent=navigator.userAgent.toLowerCase();var bIsIpad=sUserAgent.match(/ipad/i)=="ipad";var bIsIphoneOs=sUserAgent.match(/iphone os/i)=="iphone os";var bIsMidp=sUserAgent.match(/midp/i)=="midp";var bIsUc7=sUserAgent.match(/rv:1.2.3.4/i)=="rv:1.2.3.4";var bIsUc=sUserAgent.match(/ucweb/i)=="ucweb";var bIsAndroid=sUserAgent.match(/android/i)=="android";var bIsCE=sUserAgent.match(/windows ce/i)=="windows ce";var bIsWM=sUserAgent.match(/windows mobile/i)=="windows mobile";if((bIsIpad||bIsIphoneOs||bIsMidp||bIsUc7||bIsUc||bIsAndroid||bIsCE||bIsWM)){_this.isPC=false}},show:function(){this.mobileSelect.classList.add("mobileSelect-show");if(typeof this.onShow==="function"){this.onShow(this)}},hide:function(){this.mobileSelect.classList.remove("mobileSelect-show");
if(typeof this.onHide==="function"){this.onHide(this)}},renderWheels:function(wheelsData,cancelBtnText,ensureBtnText){var _this=this;var cancelText=cancelBtnText?cancelBtnText:"取消";var ensureText=ensureBtnText?ensureBtnText:"确认";_this.mobileSelect=document.createElement("div");_this.mobileSelect.className="mobileSelect";_this.mobileSelect.innerHTML='<div class="grayLayer"></div>'+'<div class="content">'+'<div class="btnBar">'+'<div class="fixWidth">'+'<div class="cancel">'+cancelText+"</div>"+'<div class="title"></div>'+'<div class="ensure">'+ensureText+"</div>"+"</div>"+"</div>"+'<div class="panel">'+'<div class="fixWidth">'+'<div class="wheels">'+"</div>"+'<div class="selectLine"></div>'+'<div class="shadowMask"></div>'+"</div>"+"</div>"+"</div>";document.body.appendChild(_this.mobileSelect);var tempHTML="";for(var i=0;i<wheelsData.length;i++){tempHTML+='<div class="wheel"><ul class="selectContainer">';if(_this.jsonType){for(var j=0;j<wheelsData[i].data.length;j++){tempHTML+='<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+"</li>"}}else{for(var j=0;j<wheelsData[i].data.length;j++){tempHTML+="<li>"+wheelsData[i].data[j]+"</li>"}}tempHTML+="</ul></div>"}_this.mobileSelect.querySelector(".wheels").innerHTML=tempHTML},addListenerAll:function(){var _this=this;for(var i=0;i<_this.slider.length;i++){(function(i){_this.addListenerWheel(_this.wheel[i],i)})(i)}},addListenerWheel:function(theWheel,index){var _this=this;theWheel.addEventListener("touchstart",function(){_this.touch(event,this.firstChild,index)},false);theWheel.addEventListener("touchend",function(){_this.touch(event,this.firstChild,index)},false);theWheel.addEventListener("touchmove",function(){_this.touch(event,this.firstChild,index)},false);if(_this.isPC){theWheel.addEventListener("mousedown",function(){_this.dragClick(event,this.firstChild,index)},false);theWheel.addEventListener("mousemove",function(){_this.dragClick(event,this.firstChild,index)},false);theWheel.addEventListener("mouseup",function(){_this.dragClick(event,this.firstChild,index)},true)}},checkDataType:function(){var _this=this;if(typeof(_this.wheelsData[0].data[0])=="object"){_this.jsonType=true}},checkCascade:function(){var _this=this;if(_this.jsonType){var node=_this.wheelsData[0].data;for(var i=0;i<node.length;i++){if(_this.keyMap.childs in node[i]&&node[i][_this.keyMap.childs].length>0){_this.cascade=true;_this.cascadeJsonData=_this.wheelsData[0].data;break}}}else{_this.cascade=false}},generateArrData:function(targetArr){var tempArr=[];var keyMap_id=this.keyMap.id;var keyMap_value=this.keyMap.value;for(var i=0;i<targetArr.length;i++){var tempObj={};tempObj[keyMap_id]=targetArr[i][this.keyMap.id];tempObj[keyMap_value]=targetArr[i][this.keyMap.value];tempArr.push(tempObj)}return tempArr},initCascade:function(){var _this=this;_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));if(_this.initPosition.length>0){_this.initDeepCount=0;_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]])}else{_this.checkArrDeep(_this.cascadeJsonData[0])}_this.reRenderWheels()},initCheckArrDeep:function(parent){var _this=this;if(parent){if(_this.keyMap.childs in parent&&parent[_this.keyMap.childs].length>0){_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));_this.initDeepCount++;var nextNode=parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];if(nextNode){_this.initCheckArrDeep(nextNode)}else{_this.checkArrDeep(parent[_this.keyMap.childs][0])}}}},checkArrDeep:function(parent){var _this=this;if(parent){if(_this.keyMap.childs in parent&&parent[_this.keyMap.childs].length>0){_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));_this.checkArrDeep(parent[_this.keyMap.childs][0])}}},checkRange:function(index,posIndexArr){var _this=this;var deleteNum=_this.displayJson.length-1-index;for(var i=0;i<deleteNum;i++){_this.displayJson.pop()}var resultNode;for(var i=0;i<=index;i++){if(i==0){resultNode=_this.cascadeJsonData[posIndexArr[0]]}else{resultNode=resultNode[_this.keyMap.childs][posIndexArr[i]]}}_this.checkArrDeep(resultNode);_this.reRenderWheels();_this.fixRowStyle();_this.setCurDistance(_this.resetPosition(index,posIndexArr))},resetPosition:function(index,posIndexArr){var _this=this;var tempPosArr=posIndexArr;var tempCount;if(_this.slider.length>posIndexArr.length){tempCount=_this.slider.length-posIndexArr.length;for(var i=0;i<tempCount;i++){tempPosArr.push(0)}}else{if(_this.slider.length<posIndexArr.length){tempCount=posIndexArr.length-_this.slider.length;for(var i=0;i<tempCount;i++){tempPosArr.pop()}}}for(var i=index+1;i<tempPosArr.length;i++){tempPosArr[i]=0}return tempPosArr},reRenderWheels:function(){var _this=this;if(_this.wheel.length>_this.displayJson.length){var count=_this.wheel.length-_this.displayJson.length;for(var i=0;i<count;i++){_this.wheels.removeChild(_this.wheel[_this.wheel.length-1])}}for(var i=0;i<_this.displayJson.length;i++){(function(i){var tempHTML="";
if(_this.wheel[i]){for(var j=0;j<_this.displayJson[i].length;j++){tempHTML+='<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+"</li>"}_this.slider[i].innerHTML=tempHTML}else{var tempWheel=document.createElement("div");tempWheel.className="wheel";tempHTML='<ul class="selectContainer">';for(var j=0;j<_this.displayJson[i].length;j++){tempHTML+='<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+"</li>"}tempHTML+="</ul>";tempWheel.innerHTML=tempHTML;_this.addListenerWheel(tempWheel,i);_this.wheels.appendChild(tempWheel)}})(i)}},updateWheels:function(data){var _this=this;if(_this.cascade){_this.cascadeJsonData=data;_this.displayJson=[];_this.initCascade();if(_this.initPosition.length<_this.slider.length){var diff=_this.slider.length-_this.initPosition.length;for(var i=0;i<diff;i++){_this.initPosition.push(0)}}_this.setCurDistance(_this.initPosition);_this.fixRowStyle()}},updateWheel:function(sliderIndex,data){var _this=this;var tempHTML="";if(_this.cascade){console.error("级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源");return false}else{if(_this.jsonType){for(var j=0;j<data.length;j++){tempHTML+='<li data-id="'+data[j][_this.keyMap.id]+'">'+data[j][_this.keyMap.value]+"</li>"}_this.wheelsData[sliderIndex]={data:data}}else{for(var j=0;j<data.length;j++){tempHTML+="<li>"+data[j]+"</li>"}_this.wheelsData[sliderIndex]=data}}_this.slider[sliderIndex].innerHTML=tempHTML},fixRowStyle:function(){var _this=this;var width=(100/_this.wheel.length).toFixed(2);for(var i=0;i<_this.wheel.length;i++){_this.wheel[i].style.width=width+"%"}},getIndex:function(distance){return Math.round((2*this.liHeight-distance)/this.liHeight)},getIndexArr:function(){var _this=this;var temp=[];for(var i=0;i<_this.curDistance.length;i++){temp.push(_this.getIndex(_this.curDistance[i]))}return temp},getCurValue:function(){var _this=this;var temp=[];var positionArr=_this.getIndexArr();if(_this.cascade){for(var i=0;i<_this.wheel.length;i++){temp.push(_this.displayJson[i][positionArr[i]])}}else{if(_this.jsonType){for(var i=0;i<_this.curDistance.length;i++){temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])])}}else{for(var i=0;i<_this.curDistance.length;i++){temp.push(_this.getInnerHtml(i))}}}return temp},getValue:function(){return this.curValue},calcDistance:function(index){return 2*this.liHeight-index*this.liHeight},setCurDistance:function(indexArr){var _this=this;var temp=[];for(var i=0;i<_this.slider.length;i++){temp.push(_this.calcDistance(indexArr[i]));_this.movePosition(_this.slider[i],temp[i])}_this.curDistance=temp},fixPosition:function(distance){return -(this.getIndex(distance)-2)*this.liHeight},movePosition:function(theSlider,distance){theSlider.style.webkitTransform="translate3d(0,"+distance+"px, 0)";theSlider.style.transform="translate3d(0,"+distance+"px, 0)"},locatePosition:function(index,posIndex){var _this=this;this.curDistance[index]=this.calcDistance(posIndex);this.movePosition(this.slider[index],this.curDistance[index]);if(_this.cascade){_this.checkRange(index,_this.getIndexArr())}},updateCurDistance:function(theSlider,index){if(theSlider.style.transform){this.curDistance[index]=parseInt(theSlider.style.transform.split(",")[1])}else{this.curDistance[index]=parseInt(theSlider.style.webkitTransform.split(",")[1])}},getDistance:function(theSlider){if(theSlider.style.transform){return parseInt(theSlider.style.transform.split(",")[1])}else{return parseInt(theSlider.style.webkitTransform.split(",")[1])}},getInnerHtml:function(sliderIndex){var _this=this;var index=_this.getIndex(_this.curDistance[sliderIndex]);return _this.slider[sliderIndex].getElementsByTagName("li")[index].innerHTML},touch:function(event,theSlider,index){var _this=this;event=event||window.event;switch(event.type){case"touchstart":_this.startY=event.touches[0].clientY;_this.startY=parseInt(_this.startY);_this.oldMoveY=_this.startY;break;case"touchend":_this.moveEndY=parseInt(event.changedTouches[0].clientY);_this.offsetSum=_this.moveEndY-_this.startY;_this.oversizeBorder=-(theSlider.getElementsByTagName("li").length-3)*_this.liHeight;if(_this.offsetSum==0){var clickOffetNum=parseInt((document.documentElement.clientHeight-_this.moveEndY)/40);if(clickOffetNum!=2){var offset=clickOffetNum-2;var newDistance=_this.curDistance[index]+(offset*_this.liHeight);if((newDistance<=2*_this.liHeight)&&(newDistance>=_this.oversizeBorder)){_this.curDistance[index]=newDistance;_this.movePosition(theSlider,_this.curDistance[index]);_this.transitionEnd(_this.getIndexArr(),_this.getCurValue())}}}else{_this.updateCurDistance(theSlider,index);_this.curDistance[index]=_this.fixPosition(_this.curDistance[index]);_this.movePosition(theSlider,_this.curDistance[index]);if(_this.curDistance[index]+_this.offsetSum>2*_this.liHeight){_this.curDistance[index]=2*_this.liHeight;setTimeout(function(){_this.movePosition(theSlider,_this.curDistance[index])},100)}else{if(_this.curDistance[index]+_this.offsetSum<_this.oversizeBorder){_this.curDistance[index]=_this.oversizeBorder;
setTimeout(function(){_this.movePosition(theSlider,_this.curDistance[index])},100)}}_this.transitionEnd(_this.getIndexArr(),_this.getCurValue())}if(_this.cascade){_this.checkRange(index,_this.getIndexArr())}break;case"touchmove":event.preventDefault();_this.moveY=event.touches[0].clientY;_this.offset=_this.moveY-_this.oldMoveY;_this.updateCurDistance(theSlider,index);_this.curDistance[index]=_this.curDistance[index]+_this.offset;_this.movePosition(theSlider,_this.curDistance[index]);_this.oldMoveY=_this.moveY;break}},dragClick:function(event,theSlider,index){var _this=this;event=event||window.event;switch(event.type){case"mousedown":_this.startY=event.clientY;_this.oldMoveY=_this.startY;_this.clickStatus=true;break;case"mouseup":_this.moveEndY=event.clientY;_this.offsetSum=_this.moveEndY-_this.startY;_this.oversizeBorder=-(theSlider.getElementsByTagName("li").length-3)*_this.liHeight;if(_this.offsetSum==0){var clickOffetNum=parseInt((document.documentElement.clientHeight-_this.moveEndY)/40);if(clickOffetNum!=2){var offset=clickOffetNum-2;var newDistance=_this.curDistance[index]+(offset*_this.liHeight);if((newDistance<=2*_this.liHeight)&&(newDistance>=_this.oversizeBorder)){_this.curDistance[index]=newDistance;_this.movePosition(theSlider,_this.curDistance[index]);_this.transitionEnd(_this.getIndexArr(),_this.getCurValue())}}}else{_this.updateCurDistance(theSlider,index);_this.curDistance[index]=_this.fixPosition(_this.curDistance[index]);_this.movePosition(theSlider,_this.curDistance[index]);if(_this.curDistance[index]+_this.offsetSum>2*_this.liHeight){_this.curDistance[index]=2*_this.liHeight;setTimeout(function(){_this.movePosition(theSlider,_this.curDistance[index])},100)}else{if(_this.curDistance[index]+_this.offsetSum<_this.oversizeBorder){_this.curDistance[index]=_this.oversizeBorder;setTimeout(function(){_this.movePosition(theSlider,_this.curDistance[index])},100)}}_this.transitionEnd(_this.getIndexArr(),_this.getCurValue())}_this.clickStatus=false;if(_this.cascade){_this.checkRange(index,_this.getIndexArr())}break;case"mousemove":event.preventDefault();if(_this.clickStatus){_this.moveY=event.clientY;_this.offset=_this.moveY-_this.oldMoveY;_this.updateCurDistance(theSlider,index);_this.curDistance[index]=_this.curDistance[index]+_this.offset;_this.movePosition(theSlider,_this.curDistance[index]);_this.oldMoveY=_this.moveY}break}}};if(typeof exports=="object"){module.exports=MobileSelect}else{if(typeof define=="function"&&define.amd){define([],function(){return MobileSelect})}else{window.MobileSelect=MobileSelect}}})();