var Event=function(){'use strict';this.attach=function(evtName,element,listener,capture){var evt='',useCapture=(capture===undefined)?true:capture,handler=null;if(window.addEventListener===undefined){evt='on'+evtName;handler=function(evt,listener){element.attachEvent(evt,listener);return listener;};}else{evt=evtName;handler=function(evt,listener,useCapture){element.addEventListener(evt,listener,useCapture);return listener;};}return handler.apply(element,[evt,function(ev){var e=ev||event,src=e.srcElement||e.target;listener(e,src);},useCapture]);};this.detach=function(evtName,element,listener,capture){var evt='',useCapture=(capture===undefined)?true:capture;if(window.removeEventListener===undefined){evt='on'+evtName;element.detachEvent(evt,listener);}else{evt=evtName;element.removeEventListener(evt,listener,useCapture);}};this.stop=function(evt){evt.cancelBubble=true;if(evt.stopPropagation){evt.stopPropagation();}};this.prevent=function(evt){if(evt.preventDefault){evt.preventDefault();}else{evt.returnValue=false;}};};var Dragdrop=function(evt){'use strict';var elem=null,started=0,self=this,moveHandler=null,gWidth=(document.body.scrollWidth>document.documentElement.clientWidth)?document.body.scrollWidth:document.documentElement.clientWidth,gHeight=(document.body.scrollHeight>document.documentElement.clientHeight)?document.body.scrollHeight:document.documentElement.clientHeight,move=function(e){var xDiff=e.clientX-elem.posX,yDiff=e.clientY-elem.posY,x=xDiff-(xDiff%elem.snap)+'px',y=yDiff-(yDiff%elem.snap)+'px';if(started===1){switch(elem.mode){case 0:elem.style.top=y;elem.style.left=x;break;case 1:elem.style.left=x;break;case 2:elem.style.top=y;break;}if(elem.mode!==2){if(xDiff<=elem.minX){elem.style.left=elem.minX+'px';}if(elem.offsetLeft+elem.offsetWidth>=elem.maxX){elem.style.left=(elem.maxX-elem.offsetWidth)+'px';}}if(elem.mode!==1){if(yDiff<=elem.minY){elem.style.top=elem.minY+'px';}if(elem.offsetTop+elem.offsetHeight>=elem.maxY){elem.style.top=(elem.maxY-elem.offsetHeight)+'px';}}elem.onMove(elem);}},start=function(e,src){if(src.className.indexOf('draggable')!==-1){evt.prevent(e);moveHandler=evt.attach('mousemove',document,move,true);started=1;elem=src;elem.posX=e.clientX-elem.offsetLeft;elem.posY=e.clientY-elem.offsetTop;if(elem.mode===undefined){self.set(elem);}elem.onStart(elem);if(elem.setCapture){elem.setCapture();}}},stop=function(){if(started===1){started=0;elem.onStop(elem);evt.detach('mousemove',document,moveHandler);if(elem.releaseCapture){elem.releaseCapture();}}};evt.attach('mousedown',document,start,false);evt.attach('mouseup',document,stop,false);this.set=function(element,elemOptions){var options=elemOptions||{};elem=(typeof element==='string')?document.getElementById(element):element;elem.mode=options.mode||0;elem.minX=options.minX||0;elem.maxX=options.maxX||gWidth;elem.minY=options.minY||0;elem.maxY=options.maxY||gHeight;elem.snap=options.snap||1;elem.onStart=options.onstart||function(){};elem.onMove=options.onmove||function(){};elem.onStop=options.onstop||function(){};elem.style.left=elem.offsetLeft+'px';elem.style.top=elem.offsetTop+'px';elem.unselectable='on';};};var Measurer=function(evt,dragdrop){'use strict';this.enabled=0;var tools=[],i=0,measurer=null,doc=(document.body&&(document.body.scrollLeft||document.body.scrollTop))?document.body:document.documentElement,Tool=function(e,src){var tool=null,info=null,started=0,startX=0,startY=0,resizeHndl=null,x=0,y=0,w=0,h=0,updateInfo=function(x,y,w,h){info.innerHTML='X: '+x+'<br>Y: '+y+'<br>W: '+(w+2)+'<br>H: '+(h+2);},move=function(elem){var x=parseInt(elem.style.left,10),y=parseInt(elem.style.top,10);updateInfo(x,y,w,h);},resize=function(e){if(started===1){w=e.clientX-startX+doc.scrollLeft;h=e.clientY-startY+doc.scrollTop;if(w<=0){w=-w;x=e.clientX+doc.scrollLeft;tool.style.left=x+'px';}if(h<=0){h=-h;y=e.clientY+doc.scrollTop;tool.style.top=y+'px';}tool.style.width=w+'px';tool.style.height=h+'px';updateInfo(x,y,w,h);}},init=function(){if(src.id==='measurer-area'){x=startX=e.clientX+doc.scrollLeft;y=startY=e.clientY+doc.scrollTop;tool=document.createElement('div');tool.style.cssText='position:absolute;top:'+startY+'px;left:'+startX+'px;cursor:crosshair;z-index:9999;background-color:transparent;border:dotted 1px #000;visibility:visible;width:0;height:0';tool.className='draggable';info=document.createElement('div');info.style.cssText='font:12px Arial;padding:3px;position:absolute;top:100%;left:100%;background-color:#C4ECFF;width:55px;height:auto;border: solid 1px #aaa;cursor:crosshair';info.appendChild(document.createTextNode('\xA0'));tool.appendChild(info);document.body.appendChild(tool);evt.prevent(e);updateInfo(x,y,0,0);started=1;resizeHndl=evt.attach('mousemove',document,resize,true);dragdrop.set(tool,{onmove:move});}},stop=function(){if(started===1){started=0;evt.detach('mousemove',document,resizeHndl,true);tool.style.cursor='move';}};this.destroy=function(){if(tool!==null){document.body.removeChild(tool);tool=null;}};init();evt.attach('mouseup',document,stop,false);},render=function(){measurer=document.createElement('div');measurer.id='measurer-area';measurer.style.cssText='position:absolute;top:0;left:0;cursor:crosshair;z-index:9998;background-color:transparent;opacity:0.1;width:'+doc.scrollWidth+'px;height:'+doc.scrollHeight+'px;display:none';document.body.appendChild(measurer);};render();this.enable=function(){measurer.style.display='block';this.enabled=1;};this.disable=function(){measurer.style.display='none';for(i=0;i<tools.length;i+=1){tools[i].destroy();delete tools[i];}tools=[];this.enabled=0;};evt.attach('mousedown',document,function(e,src){if(src.id==='measurer-area'){if(e.shiftKey===false){for(i=0;i<tools.length;i+=1){tools[i].destroy();delete tools[i];}tools=[];}tools.push(new Tool(e,src));}},false);};var evt=new Event(),dragdrop=new Dragdrop(evt);if(window.measurer===undefined){window.measurer=new Measurer(evt,dragdrop);};if(window.measurer.enabled===0){window.measurer.enable();}else{window.measurer.disable();};evt.attach('keydown',document,function(e){if(e.ctrlKey===true&&e.keyCode===77){if(window.measurer.enabled===0){window.measurer.enable();}else{window.measurer.disable();}}else if(e.keyCode===27){window.measurer.disable();}});
|
Download
