-
Notifications
You must be signed in to change notification settings - Fork 5
/
Measurer.html
57 lines (51 loc) · 8.87 KB
/
Measurer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Measurer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="Measurer.css">
</head>
<body>
<h1>Measurer.js</h1>
<p>Measurer.js is a Javascript package allowing to measure dimensions of the objects on html page</p>
<ul>
<li>Click the button (or press <strong>Ctrl + M</strong>) to start measuring</li>
<li>Click anywhere on the screen and drag to measure</li>
<li>You can move the measurement area by clicking and dragging inside it</li>
<li>Press <strong>Ctrl + M</strong> once again or <strong>Esc</strong> to finish Measurer</li>
<li>Click and drag with the pressed <strong>Shift</strong> key to measure several objects</li>
<li>Measurer is available as a <strong>bookmarklet</strong>, just bookmark the button, click bookmark to start measuring, and click again to finish (hotkeys are working too)</li>
</ul>
<p style="margin-top: 70px">
<a href="javascript:(function(){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();}});})()" class="btn">Click here</a>
<a href="javascript:(function(){if(window.measurer===undefined){document.body.appendChild(document.createElement('script')).src='https://raw.github.com/mark-rolich/Measurer.js/master/bookmarklet.js';}else{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();}});}})()" class="btn">Click here IE users</a>
</p>
<div class="footer">
<div style="float: left">
<p><span>Developed by</span><a href="https://github.com/mark-rolich/">Mark Rolich</a> © 2013</p>
</div>
<p style="float: right; text-align: right; margin-right: 20px">Source files at <a href="https://github.com/mark-rolich/Measurer.js">Github</a></p>
</div>
<a href="https://github.com/mark-rolich"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<script type="text/javascript" src="../Event.js/Event.js"></script>
<script type="text/javascript" src="../Dragdrop.js/Dragdrop.js"></script>
<script type="text/javascript" src="Measurer.js"></script>
<script type="text/javascript">
var evt = new Event(),
dragdrop = new Dragdrop(evt),
measurer = new Measurer(evt, dragdrop);
evt.attach('keydown', document, function (e) {
if (e.ctrlKey === true && e.keyCode === 77) {
if (measurer.enabled === 0) {
measurer.enable();
} else {
measurer.disable();
}
} else if (e.keyCode === 27) {
measurer.disable();
}
});
</script>
</body>
</html>