PicTring.min.js

(function(){var ow=document.documentElement.clientWidth;var oh=document.documentElement.clientHeight;var ease="cubic-bezier(0.1, 0.57, 0.1, 1)";var prefix="",vendors={Webkit:"webkit",Moz:"",O:"o"},transform,transitionProperty,transitionDuration,transitionTiming,wrapper,transitionEnd;var testEl=document.createElement("div"),supportedTransforms=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,upfilesTestNumber=/^[0-9]+$/;if(testEl.style.transform===undefined){for(var i in vendors){if(testEl.style[vendors[i]+"TransitionProperty"]!==undefined){prefix="-"+vendors[i].toLowerCase()+"-";wrapper=vendors;break}}}var cssReset={};transform=prefix+"transform";transitionEnd=wrapper?wrapper+"TransitionEnd":"transitionend";cssReset[transitionProperty=prefix+"transition-property"]=cssReset[transitionDuration=prefix+"transition-duration"]=cssReset[transitionTiming=prefix+"transition-timing-function"]="";function addEvt(element,type,callback){element.addEventListener(type,callback,false)}function reEvt(element,type,callback){element.removeEventListener(type,callback)}function empty(element){if(element.hasChildNodes()){if(element.childNodes[0].nodeName=="figure"||element.childNodes[0].nodeName=="FIGURE"){element.removeChild(element.childNodes[0]);empty(element)}}}function removeArray(obj,val){for(var i=0;i<obj.length;i++){if(obj[i]==val){obj.splice(i,1);return}}}function toFormData(base){var arr=base.split(","),mime=arr[0].match(/:(.*?);/)[1],bstr=atob(arr[1]),n=bstr.length,u8arr=new Uint8Array(n);while(n--){u8arr[n]=bstr.charCodeAt(n)}var obj=new Blob([u8arr],{type:mime});var fd=new FormData();fd.append("upfile",obj,"image.png");return fd}function domCenter(pic){var x,y;if(pic.offsetWidth<pic.offsetHeight){pic.className="pic-add-h";pic.style.marginTop=-pic.offsetHeight/2+"px"}else{pic.className="pic-add-w";pic.style.marginLeft=-pic.offsetWidth/2+"px"}}function figPostion(fig){fig.$left=fig.getBoundingClientRect().left;fig.$top=fig.getBoundingClientRect().top}function touchCenter(fig,x,y){if(!x&&!y){return}fig.centerx=fig.getBoundingClientRect().left+fig.offsetWidth/2-x;fig.centery=fig.getBoundingClientRect().top+fig.offsetHeight/2-y}var PicTring=function(options){this.element=typeof options.up==="string"?document.querySelector(options.up)[0]:options.up;this.imgType=options.imgType||"base";this.type=options.type||"file";this.max=options.max||9;this.boxSize=options.boxSize||80;this.compress=options.compress||0.93;this.empty=this._empty.bind(this);this.maxSize=options.maxSize||500;this.drag=options.drag||false;this.$picUp=this.create("span","add-pictures");this.$scroller=this.create("div","pic-view-scroll");this.$nav=this.create("div","pic-view-revise");this.canvas=document.createElement("canvas");this.upfiles=this._upfiles.bind(this);this.index=0;this.tree={length:0};this.slide={range:0,_range:0,isMove:false};this.addwx=this._add.bind(this);this.init=this._init.bind(this);this.tap=this._tap.bind(this);this.retap=this._reTap.bind(this);this.compressImg=this._compressImg.bind(this);this.positions={};this.longPre=void 0;this.flex=this.flexPositions.bind(this);this.pushPic=this._pushPic.bind(this);this.showPic=this._showPic.bind(this);this.$flexBg=this.create("i","pic-animate-bg");this.reviseUp=this._reviseUp.bind(this);this.reviseDown=this._reviseDown.bind(this);this.longPress=this._longPress.bind(this);this.operArry();this.init()};PicTring.prototype={_init:function(){var that=this;var div=this.create("div","pic-view-load"),back=this.create("span","pic-view-back"),delet=this.create("span","pic-view-delet");back.$append(document.createTextNode("返回"));this.element.className+=" pic-this";this.empty();isNaN(this.boxSize)?this.element.style.width=this.element.style.fontSize=this.boxSize:this.element.style.width=this.element.style.fontSize=(ow/100)*this.boxSize+"px";Object.defineProperty(this.slide,"range",{get:function(){return this["_range"]},set:function(x){this["_range"]=x;that.$scroller.style[transform]=prefix+"translate3d("+x+"px,0,0)"}});if(this.type=="file"){var input=document.createElement("input");input.type="file";input.setAttribute("multiple","multiple");this.$picUp.appendChild(input);this.tap(this.$picUp,function(obj,e){this.firstChild.click();e.stopPropagation()});this.chosePic();input=null}else{this.tap(this.$picUp,this.addwx)}this.$nav.$append(back,delet);div.$append(this.$nav,this.$scroller);div.style.height=oh+"px";document.body.appendChild(div);this.element.appendChild(this.$picUp);this.element.appendChild(this.$flexBg);this.scrollMove.call(this.$scroller,this);this.$nav.$showIn=true;this.tap(back,this.close);this.tap(delet,this.delet);this.tap(this.$scroller,this.reviseUp);div=back=delet=null;this.resize()},_add:function(){},resize:function(){var that=this;window.onresize=function(){ow=document.documentElement.clientWidth;oh=document.documentElement.clientHeight;if(!isNaN(that.boxSize)){that.element.style.width=that.element.style.fontSize=(ow/100)*that.boxSize+"px"}document.querySelector(".pic-view-load").style.height=oh+"px";
[].forEach.call(that.tree,function(o,i){domCenter(o.litte.firstChild);figPostion(o.litte)})}},chosePic:function(){var _this=this;addEvt(this.$picUp.firstChild,"change",function(){var files=[].slice.call(this.files);files.forEach(function(file,i){var rander=new FileReader();rander.onload=function(){if((file.size>(1024*_this.maxSize))&&this.compress!="no"){_this.compressImg(this.result)}else{var upUrl=_this.imgType=="img"?toFormData(this.result):this.result;_this.tree.push(upUrl,this.result)}};rander.readAsDataURL(file)});this.value=""})},_upfiles:function(o){var i=[],_this=this;if(o){if(upfilesTestNumber.test(o)){return _this.tree[o-1].upUrl}o.forEach(function(a,f){i.push(_this.tree[a-1].upUrl)})}else{for(var j=0;j<_this.tree.length;j++){i.push(_this.tree[j].upUrl)}}return i},create:function(n,c){var i=document.createElement(n);c&&(i.className=c);i.$append=function(){if(arguments.length>0){for(var n=0;n<arguments.length;n++){i.appendChild(arguments[n])}}else{i.appendChild(arguments[0])}};return i},_empty:function(){empty(this.element);empty(this.$scroller);this.tree.empty();this.index=0},_pushPic:function(e){var img=new Image();var that=this;var figure=this.create("figure");var views;img.onload=function(){views=figure.cloneNode(true);views.className=(ow/img.width)*img.height>oh?"pic-view-h":"pic-view-w";that.element.appendChild(figure);that.$scroller.appendChild(views);that.tap(figure,that.preview);that.tree[e].litte=figure;that.tree[e].view=views;(e===that.max-1)?that.element.removeChild(that.$picUp):that.element.appendChild(that.$picUp);that.element.appendChild(that.$flexBg);domCenter(img);if(!that.drag){figPostion(figure),that.longPress(figure)}};figure.appendChild(img);figure.$picNum=e;img.src=this.tree[e].url},operArry:function(){var _this=this;this.tree.push=function(upUrl,url){if(this.length==_this.max){return}var value={};var index=this.length;value.index=index;value.url=url;value.upUrl=upUrl;[].push.call(this,value);_this.$scroller.style.width=this.length*(ow+16)+"px";_this.pushPic.call(_this,index)};this.tree.drop=function(index){_this.$scroller.removeChild(this[index].view);_this.element.removeChild(this[index].litte);[].splice.call(this,index,1)};this.tree.empty=function(){[].splice.call(this,0,this.length)};this.tree.move=function(index,tindex){if(index>tindex){[].splice.call(_this.tree,tindex,0,_this.tree[index]);[].splice.call(_this.tree,index+1,1)}else{[].splice.call(_this.tree,tindex+1,0,_this.tree[index]);[].splice.call(_this.tree,index,1)}}},_reviseUp:function(){var that=this;if(this.$nav.$showIn||!this.slide.isMove){return}this.$tr(this.$nav).css({transform:prefix+"translate3d(0,-100%,0",opacity:0}).to({translate3d:"0,0,0",opacity:1},300,ease,function(){that.$nav.$showIn=true})},_reviseDown:function(){if(!this.$nav.$showIn){return}var _this=this;this.$nav.style[transform]=prefix+"translate3d(0,0,0)";this.$nav.style.opacity=1;setTimeout(function(){_this.$tr(_this.$nav).to({translate3d:"0,-100%,0",opacity:0},300,"ease-in")},140);this.$nav.$showIn=false},flexPositions:function(ele){var offsX=ow/2-ele.firstChild.offsetWidth/2-ele.firstChild.getBoundingClientRect().left;var offsY=oh/2-ele.firstChild.offsetHeight/2-ele.firstChild.getBoundingClientRect().top;var positions={x:offsX,y:offsY,w:ele.firstChild.offsetWidth,h:ele.firstChild.offsetHeight,n:((ow/ele.firstChild.offsetWidth)*ele.firstChild.offsetHeight)>oh?oh/ele.firstChild.offsetHeight:ow/ele.firstChild.offsetWidth};offsX=offsY=null;return positions},_showPic:function(){var conn=this.tree[this.index].litte;var img=conn.firstChild;var that=this;var positions=this.flex(conn);this.timeOut=true;this.slide.range=-this.index*(ow+16);this.$tr(conn).css({"z-index":"720",overflow:"visible"}).to({translate3d:positions.x+"px,"+positions.y+"px,0"},300,ease);this.$tr(img).to({scale:positions.n},300,ease,function(){document.querySelector(".pic-view-load").style.display="block";that.reviseDown();conn.style="";that.$flexBg.style.opacity=0;img.style[transform]="";img=that=positions=that.timeOut=null});this.$tr(that.$flexBg).css({display:"block",opacity:0}).to({opacity:1},300,ease)},preview:function(obj,e){if(obj.timeOut){return}obj.index=this.$picNum;obj.showPic();e.stopPropagation()},close:function(obj,e){if(obj.timeOut){return}var eq=obj.index,that=obj.tree[eq].litte;var positions=obj.flex(that);document.querySelector(".pic-view-load").style.display="none";obj.$tr(that).css({transform:prefix+"translate3d("+positions.x+"px,"+positions.y+"px,0)","z-index":"720","overflow":"visible"});obj.$tr(that.firstChild).css(transform,prefix+"scale("+positions.n+")");obj.$tr(obj.$flexBg).css({opacity:1,display:"block"});obj.timeOut=setTimeout(function(){that.firstChild.to({scale:1},300,ease,function(){that.style="";obj.$flexBg.style="";eq=that=positions=obj.timeOut=null});that.to({translate3d:"0,0,0"},300,ease);obj.$flexBg.to({opacity:0},300,ease)},34);e.stopPropagation()},delet:function(obj,e){if(obj.tree.length==1){document.querySelector(".pic-view-load").style.display="none"
}else{if(obj.index==obj.tree.length-1){obj.slide.range=-(ow+16)*(obj.index-1)}}obj.tree.drop(obj.index);[].forEach.call(obj.tree,function(i,o){i.litte.$picNum=o;figPostion(i.litte)});(obj.index==obj.tree.length)&&obj.index--;obj.element.appendChild(obj.$picUp);obj.element.appendChild(obj.$flexBg)},_tap:function(element,fn){if(element.$tap_objs){element.$tap_objs.push(fn)}else{element.$tap_objs=[fn];this.onTap(element,this)}},addClass:function(){var that=this;[].forEach.call(this.tree,function(o,i){if(that.onTouch!=i){o.litte.className="pic-onTouch"}})},removeClass:function(){[].forEach.call(this.tree,function(o,i){o.litte.className=""})},onTap:function(element,obj){var starTime,endTime,startX,startY,endX,endY;function bindTap(evet){event.preventDefault();if(event.type=="touchstart"){var touch=evet.touches[0];starTime=new Date().getTime();startX=touch.pageX;startY=touch.pageY}if(event.type=="touchend"){endTime=new Date().getTime();if(endTime-starTime<300){var touch=evet.changedTouches[0];endX=touch.pageX;endY=touch.pageY;if(Math.abs(endX-startX)<30&&Math.abs(endY-startY)<30){element.$tap_objs.forEach(function(t,i){t.call(element,obj,evet)})}}}}element.addEventListener("touchstart",bindTap);element.addEventListener("touchend",bindTap)},_reTap:function(element,fn){arguments.length==1?element.$tap_objs=[]:removeArray(element.$tap_objs,fn)},$tr:function(ele){if(!ele.to){ele.to=this.animate.bind(ele)}if(!ele.css){ele.css=this.css.bind(ele)}return ele},animate:function(type,time,ease,callback){var cssValues={},transforms="",cssProperties=[];for(var key in type){if(supportedTransforms.test(key)){transforms+=prefix+key+"("+type[key]+") "}else{cssValues[key]=type[key],cssProperties.push(key)}}if(transforms){cssValues[transform]=transforms;cssProperties.push(transform)}cssValues[transitionDuration]=time+"ms";cssValues[transitionTiming]=(ease||"linear");cssValues[transitionProperty]=cssProperties.join(", ");for(var n in cssValues){this.style[n]=cssValues[n]}this.$endFn=callback||function(){};if(!this.$trans){addEvt(this,transitionEnd,function(){for(var i in cssReset){this.style[i]=""}this.$endFn.call(this);this.$trans=true;this.$endFn=function(){}})}return this},css:function(){if(arguments.length==1){for(var i in arguments[0]){this.style[i]=arguments[0][i]}}else{this.style[arguments[0]]=arguments[1]}return this},scrollMove:function(obj){var startx,_startx,move,movex,time,endx,startTime,endTime;function touchs(event){event.preventDefault();event.stopPropagation();if(event.type=="touchstart"){startTime=new Date().getTime();startx=Math.floor(event.touches[0].pageX);_startx=Math.floor(event.touches[0].pageX)-obj.slide.range;obj.slide.max=-(obj.tree.length-1)*(ow+16);obj.slide.isMove=true}else{if(event.type=="touchmove"){move=Math.floor(event.touches[0].pageX);if(move!=startx){obj.slide.isMove=false,obj.reviseDown()}movex=move-_startx;obj.$scroller.style[transitionDuration]="0ms";if(obj.slide.range>=0){obj.slide.range=(movex+1)*0.3}else{if(movex<=obj.slide.max){obj.slide.range=obj.slide.max-(Math.abs(move-startx))*0.3}else{obj.slide.range=movex}}}else{if(event.type=="touchend"||event.type=="touchcancel"){endx=Math.floor(event.changedTouches[0].pageX);move=endx-startx;endTime=new Date().getTime();if(((endTime-startTime)<300&&Math.abs(move)>30)||Math.abs(move)>ow*0.6){if(move<0){obj.index==obj.tree.length-1?obj.index:obj.index++}else{if(move>0){obj.index==0?obj.index:obj.index--}}}obj.$scroller.style[transitionDuration]="300ms";obj.slide.range=-obj.index*(ow+16)}}}}this.addEventListener("touchstart",touchs,false);this.addEventListener("touchmove",touchs,false);this.addEventListener("touchend",touchs,false)},_compressImg:function(rander){var img=new Image();var _this=this;var context=this.canvas.getContext("2d");img.onload=function(){var imgWidth=1080,imgHeight=(this.height/this.width)*1080,upUrl;_this.canvas.width=1080;_this.canvas.height=imgHeight;context.clearRect(0,0,imgWidth,imgHeight);context.drawImage(img,0,0,imgWidth,imgHeight);upUrl=_this.canvas.toDataURL("image/jpeg",_this.compress);if(_this.imgType=="img"){upUrl=toFormData(upUrl)}_this.tree.push(upUrl,rander);img=_this=context=null};img.src=rander},_longPress:function(dom){var that=this;var press=false;var ready=false;var startx,starty,porx,pory,movex,movey,changeTransl;function onPress(event){event.preventDefault();if(event.type=="touchstart"){var _this=this;startx=Math.floor(event.touches[0].pageX);starty=Math.floor(event.touches[0].pageY);that.longPre=setTimeout(function(){ready=true;press=true;that.$tr(_this).css({"z-index":"720"}).to({scale:1.15,opacity:"0.7"},200,ease,function(){that.onTouch=_this.$picNum;that.addClass();touchCenter(_this,startx,starty);press=false})},301);that.changePic=void 0}else{if(event.type=="touchmove"){if(!ready){return}movex=Math.floor(event.touches[0].pageX);movey=Math.floor(event.touches[0].pageY);if(press){if(movex-this.$left<0||movex-this.$left>this.offsetWidth||movey-this.$top<0||movey-this.$top>this.offsetHeight){clearTimeout(that.longPre);
ready=false;press=false;this.style="";return}}else{porx=movex-startx;pory=movey-starty;that.restFix(movex+this.centerx,movey+this.centery);this.style[transform]=prefix+"translate3d("+porx+"px,"+pory+"px,0) "+prefix+"scale(1.15)";event.stopPropagation()}}else{if(event.type=="touchend"||event.type=="touchcancel"){clearTimeout(that.longPre);changeTransl=that.changePic>-1?(that.tree[that.changePic].litte.$left-this.$left)+"px,"+(that.tree[that.changePic].litte.$top-this.$top)+"px,0":"0,0,0";ready&&that.$tr(this).to({scale:1,opacity:1,translate3d:changeTransl},300,ease,function(){if(!press&&(that.changePic>-1)){that.restLitte(this)}ready=false}).css({"z-index":"700"})}}}}addEvt(dom,"touchstart",onPress);addEvt(dom,"touchmove",onPress);addEvt(dom,"touchend",onPress)},isZoon:function(x,y){return(x-this.$left)>0&&(x-this.$left)<this.offsetWidth&&(y-this.$top)>0&&(y-this.$top)<this.offsetHeight},restLitte:function(fig){for(var i=0;i<this.tree.length;i++){this.tree[i].litte.style=""}var that=this;var index=this.changePic>this.onTouch?this.changePic+1:this.changePic;this.element.insertBefore(this.tree[this.onTouch].litte,this.element.childNodes[index]);this.$scroller.insertBefore(this.tree[this.onTouch].view,this.$scroller.childNodes[index]);this.tree.move(this.onTouch,this.changePic);this.removeClass();this.figPostion()},figPostion:function(){for(var i=0;i<this.tree.length;i++){this.tree[i].litte.$picNum=i;figPostion(this.tree[i].litte)}},restPicRight:function(i){for(var n=0;n<this.tree.length;n++){if(n!=this.onTouch){if(n>this.onTouch&&n<=i){this.tree[n].litte.style[transform]="translate3d("+(this.tree[n-1].litte.$left-this.tree[n].litte.$left)+"px,"+(this.tree[n-1].litte.$top-this.tree[n].litte.$top)+"px,0)"}else{this.tree[n].litte.style=""}}}},restPicLeft:function(i){for(var n=0;n<this.tree.length;n++){if(n!=this.onTouch){if(n<this.onTouch&&n>=i){this.tree[n].litte.style[transform]="translate3d("+(this.tree[n+1].litte.$left-this.tree[n].litte.$left)+"px,"+(this.tree[n+1].litte.$top-this.tree[n].litte.$top)+"px,0)"}else{this.tree[n].litte.style=""}}}},restFix:function(x,y){var that=this;[].forEach.call(this.tree,function(o,i){if(that.isZoon.call(o.litte,x,y)&&that.changePic!=i){if(that.onTouch!=i){if(i>that.onTouch){that.restPicRight(i);return that.changePic=i}if(i<that.onTouch){that.restPicLeft(i);return that.changePic=i}}else{for(var n=0;n<that.tree.length;n++){if(n!=that.onTouch){that.tree[n].litte.style=""}}return that.changePic=i}}})}};if(typeof module!=="undefined"&&typeof exports==="object"){module.exports=PicTring}else{window.PicTring=PicTring}})();