update home and readme with Mac instructions

README.md

@@ -13,12 +13,12 @@ Addons for those browsers will follow, stay tuned.
 Usage:
 ------
 
-- Add/Remove an hovering finger ( ⬤ ): Shift+Click
+- Add/Remove an hovering finger ( ⬤ ): `Shift+Click`
 - Drag a particular ⬤ to simulate swiping with a single finger
-- Activate Swipe ( red ⬤ ) and Rotate/Pinch ( green ⬤ ) handles: ↓Ctrl
+- Activate Swipe ( red ⬤ ) and Rotate/Pinch ( green ⬤ ) handles: `↓Ctrl` or `↓Cmd`
 - Drag the red ⬤ to simulate swiping with all fingers
 - Drag the green ⬤ to simulate rotate/pinch with all fingers
-- Remove everything: Shift+Escape
+- Remove everything: `Shift+Escape`
 
 Credits
 -------

index.html

@@ -87,15 +87,15 @@ <h2>Usage:</h2>
 <ul>
 	<li>Add/Remove an <i>hovering finger</i> ( <span class="circle blue"></span> ): <kbd><kbd>Shift</kbd>+<kbd>Click</kbd></kbd></li>
 	<li>Drag a particular <span class="circle blue"></span> to simulate swiping with a single finger</li>
-	<li>Activate Swipe ( <span class="circle red"></span> ) and Rotate/Pinch ( <span class="circle green"></span> ) handles: <kbd>↓<kbd>Ctrl</kbd></kbd></li>
+	<li>Activate Swipe ( <span class="circle red"></span> ) and Rotate/Pinch ( <span class="circle green"></span> ) handles: <kbd>↓<kbd>Ctrl</kbd></kbd> or <kbd>↓<kbd>Cmd</kbd></kbd></li>
 	<li>Drag <span class="circle red"></span> to simulate swiping with all fingers</li>
 	<li>Drag <span class="circle green"></span> to simulate rotate/pinch with all fingers</li>
 	<li>Remove everything: <kbd><kbd>Shift</kbd>+<kbd>Escape</kbd></kbd></li>
 </ul>
 
 <br/>
 
-<p><a class="bookmarklet inverted" href='javascript:(function(u,d,h,n){function v(){this.list={}}function w(a,b){var e=f.cloneNode();this.centerX=a.pageX;this.centerY=a.pageY;e.style.left=this.centerX-11+"px";e.style.top=this.centerY-11+"px";e.style.pointerEvents="none";e.className="tchPoint";this.id=e.id=b;this[0]=d.body.appendChild(e)}function x(a){var b=f.cloneNode(),e=f.cloneNode();b.style.background="#300";e.style.background="#030";b.style.width=b.style.height=e.style.width=e.style.height="16px";e.className=b.className="tchHandle";b.id="tchSwipe"; e.id="tchPR";this[0]=d.body.appendChild(b);this[1]=d.body.appendChild(e);this.move(a);this.off()}for(var o=d.createElement("div").style,q=["O","ms","Webkit","Moz",""],r=q.length,l,m,s,c,g,k,i,t,y,p,f;r--;)if(m=q[r]+(q[r]?"Transition":"transition"),m in o){l=m;break}y=d.createTouch||d.createTouch?function(){return d.createTouch.apply(d,arguments)}:function(a,b,e,j,z,c,d,f,h){return{identifier:e,target:b,screenX:c,screenY:d,clientX:f,clientY:h,pageX:j,pageY:z}};p=d.createTouchList?function(a){return d.createTouchList(a)}: function(a){a.identifiedTouch=function(a,e){for(e=this.length;e--;)if(this[e].identifier==a)return this[e]};return a};try{m=d.createEvent("touchevent"),m.initTouchEvent,t=function(a,b,e,j){var c=d.createEvent("touchevent");c.initTouchEvent(a,!0,!0,u,0,b.ctrlKey,b.altKey,b.shiftKey,b.metaKey,e,j,e);return c}}catch(A){t=function(a,b,e,j){var c=d.createEvent("HTMLEvents");c.initEvent(a,!0,!0);c.eventName=a;c.touches=e;c.targetTouches=j;c.changedTouches=e;c.altKey=b.altKey;c.metaKey=b.metaKey;c.ctrlKey= b.ctrlKey;c.shiftKey=b.shiftKey;return c}}f=d.createElement("div");f.style.position="absolute";f.style.display="block";f.style.visibility="visible";f.style.zIndex=999;f.style.margin=f.style.padding=0;f.style.width=f.style.height="20px";f.style.borderRadius="10px";f.style.boxShadow="1px 1px 3px #333";f.style.background="#003";f.style.opacity=0.3;o={click:function(a){var b;a.shiftKey&&(c.length()&&(b=c.get(a.pageX,a.pageY))?c.remove(b.id):c.add(a))},keypress:function(a){0==a.charCode&&a.shiftKey&&(c.remove(), a.preventDefault())},mousedown:function(a){var b,e=a.target.className;!a.shiftKey&&!a.ctrlKey&&(b=c.get(a.pageX,a.pageY))?(g=b.down(),g.triggerTouch("touchstart",a),c.handles&&c.handles.hide(),a.preventDefault()):a.ctrlKey&&"tchHandle"==e&&(i="tchSwipe"==a.target.id?[a.pageX,a.pageY]:[0,1],k=a.target.id,c.down(),c.triggerTouchs("touchstart",a),a.preventDefault())},mouseup:function(a){g?(g.up(),g.triggerTouch("touchend",a),g=n,c.handles&&(c.handles.move(c.center()),c.handles.show())):k&&(c.up(),c.triggerTouchs("touchend", a),a.ctrlKey||c.handles.off(),k=n,c.handles.move(c.handles.centerX,c.handles.centerY));a.preventDefault()},mousemove:function(a){var b,e,j;g?(g.move(a.pageX,a.pageY),g.triggerTouch("touchmove",a),a.preventDefault()):k&&("tchSwipe"==k?(b=a.pageX-i[0],e=a.pageY-i[1],c.moveBy(b,e),c.handles.move(a.pageX,a.pageY),i=[a.pageX,a.pageY]):(c.handles.moveRP(a.pageX,a.pageY),b=a.pageX-c.handles.centerX,e=a.pageY-c.handles.centerY,j=h.sqrt(b*b+e*e)/100,b=-h.atan2(b,e)+h.PI/2,c.rp(b-i[0],(j-i[1])/i[1]),i=[b,j]), c.triggerTouchs("touchmove",a))},keydown:function(a){if(17==a.keyCode&&c.handles)c.handles.on()},keyup:function(a){17==a.keyCode&&c.handles&&!k&&c.handles.off()},selectstart:function(a){a.preventDefault()}};v.prototype={add:function(a){var b="tch"+h.round(1E6*h.random());this.list[b]=new w(a,b);a=this.length();2==a&&(this.handles=new x(this.center()));2<a&&this.handles.move(this.center())},remove:function(a){var a=a?{a:this.get(a)}:this.list,b;for(b in a)a[b].remove(),delete this.list[a[b].id];length= this.length();2>length&&(this.handles.remove(),this.handles=n);1<length&&this.handles.move(this.center())},get:function(a,b){if(b){var e,c;for(e in this.list)if(c=this.list[e],a<c.centerX+11&&a>c.centerX-11&&b<c.centerY+11&&b>c.centerY-11)return c}else return this.list[a.target&&a.target.id||a]},length:function(){return Object.keys(this.list).length},center:function(){var a=1E5,b=0,e=1E5,c=0,d,f;for(d in this.list)f=this.list[d],f.centerX>b&&(b=f.centerX),f.centerX<e&&(e=f.centerX),f.centerY>c&&(c= f.centerY),f.centerY<a&&(a=f.centerY);return[e+(b-e)/2,a+(c-a)/2]},down:function(){for(var a in this.list)this.list[a].down()},up:function(){for(var a in this.list)this.list[a].up()},moveBy:function(a,b){var e,c;for(e in this.list)c=this.list[e],c.move(c.centerX+a,c.centerY+b)},rp:function(a,b){var c,f,d,g,i;for(c in this.list)f=this.list[c],d=f.centerX-this.handles.centerX,g=f.centerY-this.handles.centerY,i=-h.atan2(d,g)+h.PI/2+a,d=h.sqrt(d*d+g*g),d+=d*b,f.move(h.cos(i)*d+this.handles.centerX,h.sin(i)* d+this.handles.centerY)},touchList:function(a,b){var c=[],d,f=0;for(d in this.list)c.push(this.list[d].touch(a,b,f++));return p(c)},triggerTouchs:function(a,b){var c=this.touchList(a,b),d;for(d in this.list)this.list[d].triggerTouch(a,b,c)}};w.prototype={remove:function(){d.body.removeChild(this[0])},down:function(){this[0].style.left=this.centerX-10+"px";this[0].style.top=this.centerY-10+"px";this[0].style.boxShadow="none";this[0].style.opacity=0.5;this[0].style.zIndex=1E3;return this},up:function(){this[0].style.left= this.centerX-11+"px";this[0].style.top=this.centerY-11+"px";this[0].style.boxShadow="1px 1px 3px #300";this[0].style.opacity=0.3;this[0].style.zIndex=999},move:function(a,b){this.centerX=a;this.centerY=b;this[0].style.left=a-10+"px";this[0].style.top=b-10+"px"},touch:function(a,b,c){"touchstart"==a&&(this.target=d.elementFromPoint(this.centerX-scrollX,this.centerY-scrollY));return y(u,this.target,c||0,this.centerX,this.centerY,this.centerX+b.screenX-b.pageX,this.centerY+b.screenY-b.pageY,this.centerX+ b.clientX-b.pageX,this.centerY+b.clientY-b.pageY)},touchList:function(a,b){return p([this.touch(a,b)])},triggerTouch:function(a,b,c){c||(c=this.touchList(a,b));for(var d=[],f=c.length,g=-1;++g<f;)c[g].target==this.target&&d.push(c[g]);d=p(d);this.target.dispatchEvent(t(a,b,c,d));"touchend"==a&&(this.target=n)}};x.prototype={remove:function(){d.body.removeChild(this[0]);d.body.removeChild(this[1])},hide:function(){this[0].style.display=this[1].style.display="none"},show:function(){this[0].style.display= this[1].style.display="block"},move:function(a,b){a.length&&(b=a[1],a=a[0]);this.centerX=a;this.centerY=b;this[0].style.left=this.centerX-11+"px";this[0].style.top=this.centerY-11+"px";this[1].style.left=this.centerX+89+"px";this[1].style.top=this.centerY-11+"px"},moveRP:function(a,b){this[1].style.left=a-11+"px";this[1].style.top=b-11+"px"},on:function(){this[0].style.zIndex=this[1].style.zIndex=1E3;this[0].style.opacity=this[1].style.opacity=0.5;this[0].style[l]=this[1].style[l]="none"},off:function(){this[0].style.zIndex= this[1].style.zIndex=998;this[0].style.opacity=this[1].style.opacity=0.15;this[0].style[l]=this[1].style[l]="top .8s, left .8s"}};c=new v;for(s in o)d.addEventListener(s,o[s],!1)})(window,document,Math);'>Touch Bookmarklet</a></p>
+<p><a class="bookmarklet inverted" href='javascript:(function(u,d,h,n){function v(){this.list={}}function w(a,b){var e=f.cloneNode(!1);this.centerX=a.pageX;this.centerY=a.pageY;e.style.left=this.centerX-11+"px";e.style.top=this.centerY-11+"px";e.style.pointerEvents="none";e.className="tchPoint";this.id=e.id=b;this[0]=d.body.appendChild(e)}function x(a){var b=f.cloneNode(!1),e=f.cloneNode(!1);b.style.background="#300";e.style.background="#030";b.style.width=b.style.height=e.style.width=e.style.height="16px";e.className=b.className="tchHandle";b.id= "tchSwipe";e.id="tchPR";this[0]=d.body.appendChild(b);this[1]=d.body.appendChild(e);this.move(a);this.off()}for(var o=d.createElement("div").style,q=["O","ms","Webkit","Moz",""],r=q.length,l,m,s,c,g,k,i,t,y,p,f;r--;)if(m=q[r]+(q[r]?"Transition":"transition"),m in o){l=m;break}y=d.createTouch||d.createTouch?function(){return d.createTouch.apply(d,arguments)}:function(a,b,e,j,z,c,d,f,h){return{identifier:e,target:b,screenX:c,screenY:d,clientX:f,clientY:h,pageX:j,pageY:z}};p=d.createTouchList?function(a){return d.createTouchList(a)}: function(a){a.identifiedTouch=function(a,e){for(e=this.length;e--;)if(this[e].identifier==a)return this[e]};return a};try{m=d.createEvent("touchevent"),m.initTouchEvent,t=function(a,b,e,j){var c=d.createEvent("touchevent");c.initTouchEvent(a,!0,!0,u,0,b.ctrlKey,b.altKey,b.shiftKey,b.metaKey,e,j,e);return c}}catch(A){t=function(a,b,e,j){var c=d.createEvent("HTMLEvents");c.initEvent(a,!0,!0);c.eventName=a;c.touches=e;c.targetTouches=j;c.changedTouches=e;c.altKey=b.altKey;c.metaKey=b.metaKey;c.ctrlKey= b.ctrlKey;c.shiftKey=b.shiftKey;return c}}f=d.createElement("div");f.style.position="absolute";f.style.display="block";f.style.visibility="visible";f.style.zIndex=999;f.style.margin=f.style.padding=0;f.style.width=f.style.height="20px";f.style.borderRadius="10px";f.style.boxShadow="1px 1px 3px #333";f.style.background="#003";f.style.opacity=0.3;o={click:function(a){var b;a.shiftKey&&(c.length()&&(b=c.get(a.pageX,a.pageY))?c.remove(b.id):c.add(a))},mousedown:function(a){var b,e=a.target.className; if(!a.shiftKey&&!a.ctrlKey&&!a.metaKey&&(b=c.get(a.pageX,a.pageY)))g=b.down(),g.triggerTouch("touchstart",a),c.handles&&c.handles.hide(),a.preventDefault();else if((a.ctrlKey||a.metaKey)&&"tchHandle"==e)i="tchSwipe"==a.target.id?[a.pageX,a.pageY]:[0,1],k=a.target.id,c.down(),c.triggerTouchs("touchstart",a),a.preventDefault()},mouseup:function(a){g?(g.up(),g.triggerTouch("touchend",a),g=n,c.handles&&(c.handles.move(c.center()),c.handles.show())):k&&(c.up(),c.triggerTouchs("touchend",a),a.ctrlKey|| a.metaKey||c.handles.off(),k=n,c.handles.move(c.handles.centerX,c.handles.centerY));a.preventDefault()},mousemove:function(a){var b,e,j;g?(g.move(a.pageX,a.pageY),g.triggerTouch("touchmove",a),a.preventDefault()):k&&("tchSwipe"==k?(b=a.pageX-i[0],e=a.pageY-i[1],c.moveBy(b,e),c.handles.move(a.pageX,a.pageY),i=[a.pageX,a.pageY]):(c.handles.moveRP(a.pageX,a.pageY),b=a.pageX-c.handles.centerX,e=a.pageY-c.handles.centerY,j=h.sqrt(b*b+e*e)/100,b=-h.atan2(b,e)+h.PI/2,c.rp(b-i[0],(j-i[1])/i[1]),i=[b,j]), c.triggerTouchs("touchmove",a))},keypress:function(a){0==a.charCode&&a.shiftKey&&(c.remove(),a.preventDefault())},keydown:function(a){if((17==a.keyCode||224==a.keyCode)&&c.handles)c.handles.on()},keyup:function(a){(17==a.keyCode||224==a.keyCode)&&c.handles&&!k&&c.handles.off()},selectstart:function(a){a.preventDefault()}};v.prototype={add:function(a){var b="tch"+h.round(1E6*h.random());this.list[b]=new w(a,b);a=this.length();2==a&&(this.handles=new x(this.center()));2<a&&this.handles.move(this.center())}, remove:function(a){var a=a?{a:this.get(a)}:this.list,b;for(b in a)a[b].remove(),delete this.list[a[b].id];length=this.length();2>length&&(this.handles.remove(),this.handles=n);1<length&&this.handles.move(this.center())},get:function(a,b){if(b){var e,c;for(e in this.list)if(c=this.list[e],a<c.centerX+11&&a>c.centerX-11&&b<c.centerY+11&&b>c.centerY-11)return c}else return this.list[a.target&&a.target.id||a]},length:function(){return Object.keys(this.list).length},center:function(){var a=1E5,b=0,e=1E5, c=0,d,f;for(d in this.list)f=this.list[d],f.centerX>b&&(b=f.centerX),f.centerX<e&&(e=f.centerX),f.centerY>c&&(c=f.centerY),f.centerY<a&&(a=f.centerY);return[e+(b-e)/2,a+(c-a)/2]},down:function(){for(var a in this.list)this.list[a].down()},up:function(){for(var a in this.list)this.list[a].up()},moveBy:function(a,b){var e,c;for(e in this.list)c=this.list[e],c.move(c.centerX+a,c.centerY+b)},rp:function(a,b){var c,f,d,g,i;for(c in this.list)f=this.list[c],d=f.centerX-this.handles.centerX,g=f.centerY- this.handles.centerY,i=-h.atan2(d,g)+h.PI/2+a,d=h.sqrt(d*d+g*g),d+=d*b,f.move(h.cos(i)*d+this.handles.centerX,h.sin(i)*d+this.handles.centerY)},touchList:function(a,b){var c=[],d,f=0;for(d in this.list)c.push(this.list[d].touch(a,b,f++));return p(c)},triggerTouchs:function(a,b){var c=this.touchList(a,b),d;for(d in this.list)this.list[d].triggerTouch(a,b,c)}};w.prototype={remove:function(){d.body.removeChild(this[0])},down:function(){this[0].style.left=this.centerX-10+"px";this[0].style.top=this.centerY- 10+"px";this[0].style.boxShadow="none";this[0].style.opacity=0.5;this[0].style.zIndex=1E3;return this},up:function(){this[0].style.left=this.centerX-11+"px";this[0].style.top=this.centerY-11+"px";this[0].style.boxShadow="1px 1px 3px #300";this[0].style.opacity=0.3;this[0].style.zIndex=999},move:function(a,b){this.centerX=a;this.centerY=b;this[0].style.left=a-10+"px";this[0].style.top=b-10+"px"},touch:function(a,b,c){"touchstart"==a&&(this.target=d.elementFromPoint(this.centerX-scrollX,this.centerY- scrollY));return y(u,this.target,c||0,this.centerX,this.centerY,this.centerX+b.screenX-b.pageX,this.centerY+b.screenY-b.pageY,this.centerX+b.clientX-b.pageX,this.centerY+b.clientY-b.pageY)},touchList:function(a,b){return p([this.touch(a,b)])},triggerTouch:function(a,b,c){c||(c=this.touchList(a,b));for(var d=[],f=c.length,g=-1;++g<f;)c[g].target==this.target&&d.push(c[g]);d=p(d);this.target.dispatchEvent(t(a,b,c,d));"touchend"==a&&(this.target=n)}};x.prototype={remove:function(){d.body.removeChild(this[0]); d.body.removeChild(this[1])},hide:function(){this[0].style.display=this[1].style.display="none"},show:function(){this[0].style.display=this[1].style.display="block"},move:function(a,b){a.length&&(b=a[1],a=a[0]);this.centerX=a;this.centerY=b;this[0].style.left=this.centerX-11+"px";this[0].style.top=this.centerY-11+"px";this[1].style.left=this.centerX+89+"px";this[1].style.top=this.centerY-11+"px"},moveRP:function(a,b){this[1].style.left=a-11+"px";this[1].style.top=b-11+"px"},on:function(){this[0].style.zIndex= this[1].style.zIndex=1E3;this[0].style.opacity=this[1].style.opacity=0.5;this[0].style[l]=this[1].style[l]="none"},off:function(){this[0].style.zIndex=this[1].style.zIndex=998;this[0].style.opacity=this[1].style.opacity=0.15;this[0].style[l]=this[1].style[l]="top .8s, left .8s"}};c=new v;for(s in o)d.addEventListener(s,o[s],!1)})(window,document,Math);'>Touch Bookmarklet</a></p>
 
 <br/>