Skip to content
Browse files

refacting directory structure

  • Loading branch information...
1 parent 085e58e commit c1182ed953c4598f3390569ec68fd8929322be3f @dotmaster committed Jan 13, 2011
View
6 Readme.md
@@ -1,14 +1,14 @@
# Touchable #
-Touchable is a very lightweight (3,12kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+Touchable is a very lightweight (1,96kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
The name Touchable therefore might be a bit confusing, cause we actually generate a generic "Touch" which involves also mouse events. For convenience they are all called "Touches".
Touchable really doesn't depend that much on jQuery, so it should work with other libraries like [Zepto][] too. Havent tested that though.
[Zepto]: http://zeptojs.com/
# Hoverable #
-Hoverable is built upon Touchable and is a very lightweight (1,7kB) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+Hoverable is built upon Touchable and is a very lightweight (1,57kB / 3,04together with Touchable) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
It introduces a new event called
* **newHover(2)**: following my [blog article][] about UI design and my postulate, that Long Tap is the new Hover. Fired when the user hovers with the mouse or longTaps an element. Hovever if you want to you can set it up to a touchmove event too, which will fire a genericHover2 event.
@@ -18,7 +18,7 @@ It introduces a new event called
right now I have tested Touchable on the following devices and browsers Chrome, Firefox, Safari, iPad Simulator, iPad, iPhone, Internet Explorer 7/8. But it should work quite everywhere. If you have any bug notes drop me a line.
##Demo##
-I have setup a demo site for Hoverable on the [github page][]
+I have setup a demo site for Hoverable on the [github page][]. View source to see how everything works.
[github page]: http://dotmaster.github.com/Touchable-jQuery-Plugin/demo/demo.html
## Usage ##
View
232 hoverable and touchable.js
@@ -4,14 +4,16 @@
* Simplified BSD License (@see License)
* @author Gregor Schwab
* @copyright (c) 2010 Gregor Schwab
- * Usage Command Line: $(elem).Touchable() (@see Readme.md)
+ * Usage: $(elem).Touchable() (@see Readme.md)
+ * @version 0.0.2
* @requires jQuery Touchable
*/
(function($) {
+ var Touchable=$.Touchable;
$.fn.Hoverable = function(conf) {
return this.each(function() {
- var t= $(this).data['Touchable']=new Hoverable(this, conf);
+ var t= $(this).data['Hoverable']=new Hoverable(this, conf);
return t;
});
}
@@ -30,24 +32,31 @@
*/
function Hoverable(elem, conf)
{
- if (typeof conf!=='undefined'){
- if(typeof conf.disableHover!=='undefined'){this.disableHover=conf.disableHover;}
- else{this.disableHover=false;}
- }
+
+ var self=this;
+ this.logging=false; //set to false to disabele logging default false gets overwritten by conf see below
+ var log=function(a){if(self.logging){console.log(arguments);}} ;//private logging function
+
+
this.elem=elem;
+ //test for touchable
+ if(!$(elem).Touchable) throw new Error('Hoverable depends on Touchable! Please be sure to include Touchable in your project.')
this.$elem=$(elem).Touchable();
- this.logging=true;
-
this.inHover=false;
this.target=null;
- var self=this;
+
+ if (typeof conf!=='undefined'){
+ if(typeof conf.disableHover!=='undefined'){this.disableHover=conf.disableHover;}
+ else{this.disableHover=false;}
+ if(typeof conf.logging!=='undefined'){this.logging=conf.logging;}
+ }
//longTap is the new Hover ;)
if (!this.disableHover){
- this.$elem.bind('mouseenter', genericHover);
+ this.$elem.mouseenter(genericHover);
this.$elem.bind('mouseleave', genericHover);
}
@@ -57,11 +66,11 @@
function genericHover(e, touch){
if(e.type==='touchableend' ||e.type==='mouseleave'){
- if(self.logging){console.log('Touchable newHoverOut');}
+ log('Touchable newHoverOut');
//this.$elem.unbind('touchend', genericHover);//don't have to unbind mouseleave .unbind('mouseleave', genericHover);
return self.$elem.trigger('newHoverOut', self);
}
- if(self.logging){console.log('Touchable newHoverIn');}
+ log('Touchable newHoverIn');
self.$elem.trigger('newHoverIn', self); //trigger a genericHover see Readme
}
@@ -82,14 +91,14 @@
//this.$elem.bind('touchend', genericHover2);
function genericHover2(e, touch){
if(e.type==='touchableend'||e.type==='touchend'){
- if(self.logging){console.log('Touchable newHoverOut2');}
+ log('Touchable newHoverOut2');
self.inHover=false;
return self.$elem.trigger('newHoverOut2', self);
}else if(e.type==='mouseenter'){
- if(self.logging){console.log('Touchable newHoverIn2');}
+ log('Touchable newHoverIn2');
return self.$elem.trigger('newHoverIn2', self);
}else if(e.type==='mouseleave'){
- if(self.logging){console.log('Touchable newHoverOut2');}
+ log('Touchable newHoverOut2');
return self.$elem.trigger('newHoverOut2', self);
}
if (e.type == 'touchablemove'){
@@ -102,9 +111,9 @@
}else{
var target = e.target;
}*/
- if(self.logging){console.log('Touchable target ID/node'+ ' hitTarget'+ ' ' +
+ log('Touchable target ID/node'+ ' hitTarget'+ ' ' +
hitTarget+'e.target'+e.target + ' e.currentTarget'+e.currentTarget+
- ' self in hover'+self.inHover);}
+ ' self in hover'+self.inHover);
//lets see if we can macth our element...still playing with the right settings here cause browsers seem to have differenes in what they pass as an event.target
var pass=false;
//not good cause it goes on paragraphs but can be used to test for being outside the view element
@@ -120,30 +129,34 @@
if (typeof e.currentTarget !== 'undefined' && e.currentTarget === self.$elem.get(0)){pass=true;}
if(pass&& !self.inHover){
self.inHover=true;
- if(self.logging){console.log('Touchable newHoverIn2');}
+ log('Touchable newHoverIn2');
self.$elem.trigger('newHoverIn2', self);
//e.stopPropagation();//we are talking about touchablemove event here
}
else if (pass===false && self.inHover){
self.inHover=false;
- if(self.logging){console.log('Touchable newHoverOut2');}
+ log('Touchable newHoverOut2');
self.$elem.trigger('newHoverOut2', self);
//e.stopPropagation(); //we are talking about touchablemove event here
}
}
}
}
}
+})(jQuery);//end closure
+/*
+ * jQuery Touchable
+ *
+ * Simplified BSD License (@see License)
+ * @author Gregor Schwab
+ * @copyright (c) 2010 Gregor Schwab
+ * Usage Command Line: $(elem).Touchable() (@see Readme.md)
+ * @version 0.0.2
+ * @requires jQuery
+ */
- /*
- * jQuery Touchable
- *
- * Simplified BSD License (@see License)
- * @author Gregor Schwab
- * @copyright (c) 2010 Gregor Schwab
- * Usage Command Line: $(elem).Touchable() (@see Readme.md)
- * @requires jQuery
- */
+
+(function($) {
$.fn.Touchable = function(conf) {
return this.each(function() {
@@ -161,21 +174,25 @@
$(this).bind('newHoverIn2', fn1).bind('newHoverOut2', fn2);
});
}
+
+ $.Touchable=Touchable;
+
/**
* @constructor
*/
+
function Touchable(elem, conf)
{
- if (typeof conf!=='undefined'){
- if(typeof conf.disableHover!=='undefined'){this.disableHover=conf.disableHover;}
- else{this.disableHover=false;}
- }
+
+ this.logging=false; //set to false to disabele logging gets overwritten by conf see below
+ var log=function(a){if(self.logging){console.log(arguments);}} ;//private logging function
+
this.elem=elem;
this.$elem=$(elem);
this.is_doubleTap=false;
this.is_currentlyTouching=false;
this.isOneFingerGesture = false;
- this.logging=true;
+
this.startTouch={x:0,y:0};
this.currentTouch={x:0,y:0};
this.previousTouch={x:0,y:0};
@@ -185,18 +202,25 @@
this.doubleTapTimer=null, this.longTapTimer=null;
var self=this;
+
+ if (typeof conf!=='undefined'){
+ if(typeof conf.logging!=='undefined'){this.logging=conf.logging;}
+ }
+ //make IE happy
+ var addEventListener=elem.addEventListener||elem.attachEvent
+ var removeEventListener = elem.removeEventListener||elem.detachEvent
//add touchstart eventlistener
- elem.addEventListener('touchstart', function(){self.$elem.trigger('touchstart')}, false);
- elem.addEventListener('touchend', function(){self.$elem.trigger('touchend')}, false);
- elem.addEventListener('touchmove', function(){self.$elem.trigger('touchmove')}, false);
+ addEventListener.call(elem, 'touchstart', function(){self.$elem.trigger('touchstart')}, false);
+ addEventListener.call(elem, 'touchend', function(){self.$elem.trigger('touchend')}, false);
+ addEventListener.call(elem, 'touchmove', function(){self.$elem.trigger('touchmove')}, false);
- elem.addEventListener('touchstart', touchstart, false);
- this.$elem.bind('mousedown', touchstart);
+ addEventListener.call(elem, 'touchstart', touchstart, false);
+ this.$elem.mousedown(touchstart);
function touchstart (e) {
if(typeof e.touches!== "undefined")
{
- if(self.logging){console.log('Touchable Touchstart touches length ' + e.touches.length);}
+ log('Touchable Touchstart touches length ' + e.touches.length);
//only handle 1 or 2 touches
if (e.touches.length !== 1 && e.touches.length !== 2) {
return false;
@@ -223,52 +247,52 @@
}
}
- document.addEventListener('touchmove', touchmove, false);
- document.addEventListener('touchend', touchend, false);
- }else{
- if(self.logging){console.log('Touchable Touchstart touches length ' + e.pageX + ' ' + e.pageY);}
+ addEventListener.call(document, 'touchmove', touchmove, false);
+ addEventListener.call(document, 'touchend', touchend, false);
+ }else{
+ log('Touchable Touchstart touches length ' + e.pageX + ' ' + e.pageY);
self.startTouch.x = self.previousTouch.x = e.pageX;
self.startTouch.y = self.previousTouch.y = e.pageY;
$(document).mousemove(touchmove);
$(document).mouseup(touchend);
- }
- e.preventDefault();
+ }
+ e.preventDefault();
- //setup double tapping
- if (!self.inDoubleTap) {
- self.inDoubleTap = true;
- //setup a timer
- self.doubleTapTimer = setTimeout(function() {
- self.inDoubleTap = false;
- }, 500);
- } else {//we are double tapping
- // call function to run if double-tap
- if(self.logging){console.log('Touchable doubleTap')};
- self.$elem.trigger('doubleTap', self); //trigger a doubleTap
- //reset doubleTap state
- clearTimeout(self.doubleTapTimer);
- self.inDoubleTap = false;
+ //setup double tapping
+ if (!self.inDoubleTap) {
+ self.inDoubleTap = true;
+ //setup a timer
+ self.doubleTapTimer = setTimeout(function() {
+ self.inDoubleTap = false;
+ }, 500);
+ } else {//we are double tapping
+ // call function to run if double-tap
+ log('Touchable doubleTap');
+ self.$elem.trigger('doubleTap', self); //trigger a doubleTap
+ //reset doubleTap state
+ clearTimeout(self.doubleTapTimer);
+ self.inDoubleTap = false;
}
- //setup long tapping and long mousedown
- //setup a timer
- self.longTapTimer = setTimeout(function() {
- if(self.logging){console.log('Touchable longTap')};
- $(self.elem).trigger('longTap', self); //trigger a longTap
- }, 1000);
+ //setup long tapping and long mousedown
+ //setup a timer
+ self.longTapTimer = setTimeout(function() {
+ log('Touchable longTap');
+ $(self.elem).trigger('longTap', self); //trigger a longTap
+ }, 1000);
- if(self.logging){console.log('Touchable Tap')};
- $(self.elem).trigger('tap', self); //trigger a tap
- $(self.elem).trigger('touchablestart', self); //trigger a tap
+ log('Touchable Tap');
+ $(self.elem).trigger('tap', self); //trigger a tap
+ $(self.elem).trigger('touchablestart', self); //trigger a tap
- }
+ }
- //called on iPad/iPhone when touches started and the finger is moved
- function touchmove(e) {
+ //called on iPad/iPhone when touches started and the finger is moved
+ function touchmove(e) {
- if (typeof e.touches !== 'undefined'){
- if(self.logging){console.log('Touchable Touchsmove touches length ' + e.touches.length);}
+ if (typeof e.touches !== 'undefined'){
+ log('Touchable Touchsmove touches length ' + e.touches.length);
if (e.touches.length !== 1 && e.touches.length !== 2) //use touches to track all fingers on the screen currently (also the ones not in the pane) if there are more than 2 its a gesture
return false;
@@ -286,53 +310,51 @@
self.currentTouch.y = e.touches[1].clientY;
}
}
- }else{
- self.currentTouch.x = e.pageX;
- self.currentTouch.y = e.pageY;
- }
- //if we are moving stop any css animations currently running
- $(self.elem).removeClass('webkitAnimate');
- //e.preventDefault();
+ }else{
+ self.currentTouch.x = e.pageX;
+ self.currentTouch.y = e.pageY;
+ }
+ //if we are moving stop any css animations currently running
+ $(self.elem).removeClass('webkitAnimate');
+ //e.preventDefault();
- self.currentDelta.x = (self.currentTouch.x - self.previousTouch.x);///s.currentScale;
- self.currentDelta.y = (self.currentTouch.y - self.previousTouch.y);///s.currentScale;
- self.currentStartDelta.x = (self.currentTouch.x - self.startTouch.x);///s.currentScale;
- self.currentStartDelta.y = (self.currentTouch.y - self.startTouch.y);///s.currentScale;
- //just for the records (accumulation)
- self.currentPosition.x = self.currentPosition.x + self.currentDelta.x;
- self.currentPosition.y = self.currentPosition.y + self.currentDelta.y;
- //reset the start position for the next delta
- self.previousTouch.x = self.currentTouch.x;
- self.previousTouch.y = self.currentTouch.y;
- if(self.logging){console.log('Touchable Touchablemove self e.target' + e.target + 'e.currentTarget '+ e.currentTarget +' x:'+ self.currentStartDelta.x);}
+ self.currentDelta.x = (self.currentTouch.x - self.previousTouch.x);///s.currentScale;
+ self.currentDelta.y = (self.currentTouch.y - self.previousTouch.y);///s.currentScale;
+ self.currentStartDelta.x = (self.currentTouch.x - self.startTouch.x);///s.currentScale;
+ self.currentStartDelta.y = (self.currentTouch.y - self.startTouch.y);///s.currentScale;
+ //just for the records (accumulation)
+ self.currentPosition.x = self.currentPosition.x + self.currentDelta.x;
+ self.currentPosition.y = self.currentPosition.y + self.currentDelta.y;
+ //reset the start position for the next delta
+ self.previousTouch.x = self.currentTouch.x;
+ self.previousTouch.y = self.currentTouch.y;
+ log('Touchable Touchablemove self e.target' + e.target + 'e.currentTarget '+ e.currentTarget +' x:'+ self.currentStartDelta.x);
self.target=e.target;//some browser loose the info here
self.currentTarget=e.currentTarget;//some browser loose the info here
$(self.elem).trigger('touchablemove', self);
- //clear the long tap timer on mousemove
+ //clear the long tap timer on mousemove
if (self.longTapTimer) clearTimeout(self.longTapTimer);
- }
+ }
function touchend(e) {
if (typeof e.touches !== 'undefined'){
if (e.targetTouches.length > 0)
return false;
- self.elem.removeEventListener('touchmove', touchmove, true);
- self.elem.removeEventListener('touchend', touchend, true);
- }else{
+ removeEventListener.call(self.elem, 'touchmove', touchmove, true);
+ removeEventListener.call(self.elem, 'touchend', touchend, true);
+ }else{
$(document).unbind('mousemove',touchmove);
$(document).unbind('mouseup',touchend);
- }
+ }
- e.preventDefault();
- self.isCurrentlyTouching = false;
- //clear the long tap timer on mouseup
+ //e.preventDefault();
+ self.isCurrentlyTouching = false;
+ //clear the long tap timer on mouseup
if (self.longTapTimer) clearTimeout(self.longTapTimer);
- if(self.logging){console.log('Touchable Touchend self ' + self.currentStartDelta.x);}
+ log('Touchable Touchend self ' + self.currentStartDelta.x);
$(self.elem).trigger('touchableend', self);
- if(self.logging){console.log('Touchable: touchableend')};
+ log('Touchable: touchableend');
- }
+ }
}
-
-
})(jQuery);//end closure
View
1 hoverable.js
@@ -5,6 +5,7 @@
* @author Gregor Schwab
* @copyright (c) 2010 Gregor Schwab
* Usage: $(elem).Touchable() (@see Readme.md)
+ * @version 0.0.2
* @requires jQuery Touchable
*/
View
11 hoverable_and_touchable.min.js
@@ -0,0 +1,11 @@
+var d=true,m=false;
+(function(c){function n(h,f){function i(){a.h&&console.log(arguments)}function k(e){if(e.type==="touchableend"||e.type==="mouseleave"){i("Touchable newHoverOut");return a.a.d("newHoverOut",a)}i("Touchable newHoverIn");a.a.d("newHoverIn",a)}function j(e,l){if(e.type==="touchableend"||e.type==="touchend"){i("Touchable newHoverOut2");a.i=m;return a.a.d("newHoverOut2",a)}else if(e.type==="mouseenter"){i("Touchable newHoverIn2");return a.a.d("newHoverIn2",a)}else if(e.type==="mouseleave"){i("Touchable newHoverOut2");return a.a.d("newHoverOut2",
+a)}if(e.type=="touchablemove")if(l instanceof g){i("Touchable target ID/node hitTarget "+document.elementFromPoint(l.b.x,l.b.y)+"e.target"+e.target+" e.currentTarget"+e.currentTarget+" self in hover"+a.i);var b=m;if(typeof e.currentTarget!=="undefined"&&e.currentTarget===a.a.B(0))b=d;if(b&&!a.i){a.i=d;i("Touchable newHoverIn2");a.a.d("newHoverIn2",a)}else if(b===m&&a.i){a.i=m;i("Touchable newHoverOut2");a.a.d("newHoverOut2",a)}}}var a=this;this.h=m;this.g=h;if(!c(h).m)throw Error("Hoverable depends on Touchable! Please be sure to include Touchable in your project.");
+this.a=c(h).m();this.i=m;this.target=null;if(typeof f!=="undefined"){this.p=typeof f.p!=="undefined"?f.p:m;if(typeof f.h!=="undefined")this.h=f.h}if(!this.p){this.a.G(k);this.a.c("mouseleave",k)}this.a.c("longTap",k);this.a.c("touchableend",k);if(!this.p){this.a.c("mouseenter",j);this.a.c("mouseleave",j)}a.a.c("touchablestart",function(){a.a.c("touchablemove",j)},m);a.a.c("touchableend",function(e,l){a.a.v("touchablemove",j);j(e,l)},m)}var g=c.m;c.k.A=function(h){return this.j(function(){return c(this).data.Hoverable=
+new n(this,h)})};c.k.w=function(h,f){return this.j(function(){c(this).c("newHoverIn",h).c("newHoverOut",f)})};c.k.z=function(h,f){return this.j(function(){c(this).c("newHoverIn2",h).c("newHoverOut2",f)})}})(jQuery);
+(function(c){function n(g,h){function f(){a.h&&console.log(arguments)}function i(b){if(typeof b.touches!=="undefined"){f("Touchable Touchstart touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return m;if(a.u)return m;a.u=d;if(b.touches.length==1){a.q=d;a.f.x=a.e.x=b.touches[0].clientX;a.f.y=a.e.y=b.touches[0].clientY}else if(b.touches.length==2){a.q=m;if(b.touches[0].clientY>b.touches[1].clientY){a.f.x=a.e.x=b.touches[0].clientX;a.f.y=a.e.y=b.touches[0].clientY}else{a.f.x=
+a.e.x=a.touches[1].clientX;a.f.y=a.e.y=a.touches[1].clientY}}e.call(document,"touchmove",k,m);e.call(document,"touchend",j,m)}else{f("Touchable Touchstart touches length "+b.pageX+" "+b.pageY);a.f.x=a.e.x=b.pageX;a.f.y=a.e.y=b.pageY;c(document).H(k);c(document).I(j)}b.preventDefault();if(a.r){f("Touchable doubleTap");a.a.d("doubleTap",a);clearTimeout(a.t);a.r=m}else{a.r=d;a.t=setTimeout(function(){a.r=m},500)}a.l=setTimeout(function(){f("Touchable longTap");c(a.g).d("longTap",a)},1E3);f("Touchable Tap");
+c(a.g).d("tap",a);c(a.g).d("touchablestart",a)}function k(b){if(typeof b.touches!=="undefined"){f("Touchable Touchsmove touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return m;if(b.touches.length==1||a.q){a.b.x=b.touches[0].clientX;a.b.y=b.touches[0].clientY}else if(a.touches.length==2&&!a.q)if(b.touches[0].clientY>b.touches[1].clientY){a.b.x=b.touches[0].clientX;a.b.y=b.touches[0].clientY}else{a.b.x=b.touches[1].clientX;a.b.y=b.touches[1].clientY}}else{a.b.x=b.pageX;
+a.b.y=b.pageY}c(a.g).J("webkitAnimate");a.n.x=a.b.x-a.e.x;a.n.y=a.b.y-a.e.y;a.o.x=a.b.x-a.f.x;a.o.y=a.b.y-a.f.y;a.s.x+=a.n.x;a.s.y+=a.n.y;a.e.x=a.b.x;a.e.y=a.b.y;f("Touchable Touchablemove self e.target"+b.target+"e.currentTarget "+b.currentTarget+" x:"+a.o.x);a.target=b.target;a.currentTarget=b.currentTarget;c(a.g).d("touchablemove",a);a.l&&clearTimeout(a.l)}function j(b){if(typeof b.touches!=="undefined"){if(b.targetTouches.length>0)return m;l.call(a.g,"touchmove",k,d);l.call(a.g,"touchend",j,d)}else{c(document).v("mousemove",
+k);c(document).v("mouseup",j)}a.u=m;a.l&&clearTimeout(a.l);f("Touchable Touchend self "+a.o.x);c(a.g).d("touchableend",a);f("Touchable: touchableend")}this.h=m;this.g=g;this.a=c(g);this.q=this.C=this.D=m;this.f={x:0,y:0};this.b={x:0,y:0};this.e={x:0,y:0};this.n={x:0,y:0};this.o={x:0,y:0};this.s={x:0,y:0};this.l=this.t=null;var a=this;if(typeof h!=="undefined")if(typeof h.h!=="undefined")this.h=h.h;var e=g.addEventListener||g.attachEvent,l=g.removeEventListener||g.detachEvent;e.call(g,"touchstart",
+function(){a.a.d("touchstart")},m);e.call(g,"touchend",function(){a.a.d("touchend")},m);e.call(g,"touchmove",function(){a.a.d("touchmove")},m);e.call(g,"touchstart",i,m);this.a.F(i)}c.k.m=function(g){return this.j(function(){return c(this).data.Touchable=new n(this,g)})};c.k.w=function(g,h){return this.j(function(){c(this).c("newHoverIn",g).c("newHoverOut",h)})};c.k.z=function(g,h){return this.j(function(){c(this).c("newHoverIn2",g).c("newHoverOut2",h)})};c.m=n})(jQuery);
View
8 index.html
@@ -1,13 +1,13 @@
<h1>Touchable</h1>
-<p>Touchable is a very lightweight (3,12kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+<p>Touchable is a very lightweight (1,96kb) jQuery Class that unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
The name Touchable therefore might be a bit confusing, cause we actually generate a generic "Touch" which involves also mouse events. For convenience they are all called "Touches".</p>
<p>Touchable really doesn't depend that much on jQuery, so it should work with other libraries like <a href="http://zeptojs.com/">Zepto</a> too. Havent tested that though.</p>
<h1>Hoverable</h1>
-<p>Hoverable is built upon Touchable and is a very lightweight (1,7kB) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
+<p>Hoverable is built upon Touchable and is a very lightweight (1,57kB / 3,04together with Touchable) jQuery Class that unifies hover events over different platforms like desktops and mobile devices with touchscreens (like Android, iPad, iPod Touch, iPhone etc.)
It introduces a new event called </p>
<ul>
@@ -16,11 +16,11 @@
<h2>Testing</h2>
-<p>right now I have tested Touchable on the following devices and browsers Chrome, Firefox, Safari, iPad Simulator, iPad, iPhone. But it should work quite everywhere. If you have any bug notes drop me a line.</p>
+<p>right now I have tested Touchable on the following devices and browsers Chrome, Firefox, Safari, iPad Simulator, iPad, iPhone, Internet Explorer 7/8. But it should work quite everywhere. If you have any bug notes drop me a line.</p>
<h2>Demo</h2>
-<p>I have setup a demo site for Hoverable on the <a href="http://dotmaster.github.com/Touchable-jQuery-Plugin/demo/demo.html">github page</a></p>
+<p>I have setup a demo site for Hoverable on the <a href="http://dotmaster.github.com/Touchable-jQuery-Plugin/demo/demo.html">github page</a>. View source to see how everything works.</p>
<h2>Usage</h2>
View
8 min/hoverable.min.js
@@ -1,5 +1,5 @@
var c=false;
-(function(e){function l(f,d){function g(){a.f&&console.log(arguments)}function j(b){if(b.type==="touchableend"||b.type==="mouseleave"){g("Touchable newHoverOut");return a.a.d("newHoverOut",a)}g("Touchable newHoverIn");a.a.d("newHoverIn",a)}function h(b,i){if(b.type==="touchableend"||b.type==="touchend"){g("Touchable newHoverOut2");a.c=c;return a.a.d("newHoverOut2",a)}else if(b.type==="mouseenter"){g("Touchable newHoverIn2");return a.a.d("newHoverIn2",a)}else if(b.type==="mouseleave"){g("Touchable newHoverOut2");return a.a.d("newHoverOut2",
-a)}if(b.type=="touchablemove")if(i instanceof m){g("Touchable target ID/node hitTarget "+document.elementFromPoint(i.j.x,i.j.y)+"e.target"+b.target+" e.currentTarget"+b.currentTarget+" self in hover"+a.c);var k=c;if(typeof b.currentTarget!=="undefined"&&b.currentTarget===a.a.m(0))k=true;if(k&&!a.c){a.c=true;g("Touchable newHoverIn2");a.a.d("newHoverIn2",a)}else if(k===c&&a.c){a.c=c;g("Touchable newHoverOut2");a.a.d("newHoverOut2",a)}}}this.f=c;this.l=f;try{this.a=e(f).i()}catch(n){console.log("Hoverable depends on Touchable! Please be sure to include Touchable in your project.")}this.c=
-c;this.target=null;var a=this;if(typeof d!=="undefined"){this.e=typeof d.e!=="undefined"?d.e:c;if(typeof d.f!=="undefined")this.f=d.f}if(!this.e){this.a.b("mouseenter",j);this.a.b("mouseleave",j)}this.a.b("longTap",j);this.a.b("touchableend",j);if(!this.e){this.a.b("mouseenter",h);this.a.b("mouseleave",h)}a.a.b("touchablestart",function(){a.a.b("touchablemove",h)},c);a.a.b("touchableend",function(b,i){a.a.p("touchablemove",h);h(b,i)},c)}var m=e.i;e.h.k=function(f){return this.g(function(){return e(this).data.Hoverable=
-new l(this,f)})};e.h.n=function(f,d){return this.g(function(){e(this).b("newHoverIn",f).b("newHoverOut",d)})};e.h.o=function(f,d){return this.g(function(){e(this).b("newHoverIn2",f).b("newHoverOut2",d)})}})(jQuery);
+(function(d){function l(e,f){function g(){a.f&&console.log(arguments)}function j(b){if(b.type==="touchableend"||b.type==="mouseleave"){g("Touchable newHoverOut");return a.a.d("newHoverOut",a)}g("Touchable newHoverIn");a.a.d("newHoverIn",a)}function h(b,i){if(b.type==="touchableend"||b.type==="touchend"){g("Touchable newHoverOut2");a.c=c;return a.a.d("newHoverOut2",a)}else if(b.type==="mouseenter"){g("Touchable newHoverIn2");return a.a.d("newHoverIn2",a)}else if(b.type==="mouseleave"){g("Touchable newHoverOut2");return a.a.d("newHoverOut2",
+a)}if(b.type=="touchablemove")if(i instanceof m){g("Touchable target ID/node hitTarget "+document.elementFromPoint(i.j.x,i.j.y)+"e.target"+b.target+" e.currentTarget"+b.currentTarget+" self in hover"+a.c);var k=c;if(typeof b.currentTarget!=="undefined"&&b.currentTarget===a.a.m(0))k=true;if(k&&!a.c){a.c=true;g("Touchable newHoverIn2");a.a.d("newHoverIn2",a)}else if(k===c&&a.c){a.c=c;g("Touchable newHoverOut2");a.a.d("newHoverOut2",a)}}}var a=this;this.f=c;this.l=e;if(!d(e).g)throw Error("Hoverable depends on Touchable! Please be sure to include Touchable in your project.");
+this.a=d(e).g();this.c=c;this.target=null;if(typeof f!=="undefined"){this.e=typeof f.e!=="undefined"?f.e:c;if(typeof f.f!=="undefined")this.f=f.f}if(!this.e){this.a.n(j);this.a.b("mouseleave",j)}this.a.b("longTap",j);this.a.b("touchableend",j);if(!this.e){this.a.b("mouseenter",h);this.a.b("mouseleave",h)}a.a.b("touchablestart",function(){a.a.b("touchablemove",h)},c);a.a.b("touchableend",function(b,i){a.a.q("touchablemove",h);h(b,i)},c)}var m=d.g;d.i.k=function(e){return this.h(function(){return d(this).data.Hoverable=
+new l(this,e)})};d.i.o=function(e,f){return this.h(function(){d(this).b("newHoverIn",e).b("newHoverOut",f)})};d.i.p=function(e,f){return this.h(function(){d(this).b("newHoverIn2",e).b("newHoverOut2",f)})}})(jQuery);
View
12 min/touchable.min.js
@@ -1,7 +1,7 @@
var d=false;
-(function(c){function j(e,g){function f(){a.l&&console.log(arguments)}function k(b){if(typeof b.touches!=="undefined"){f("Touchable Touchstart touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return d;if(a.r)return d;a.r=true;if(b.touches.length==1){a.k=true;a.c.x=a.b.x=b.touches[0].clientX;a.c.y=a.b.y=b.touches[0].clientY}else if(b.touches.length==2){a.k=d;if(b.touches[0].clientY>b.touches[1].clientY){a.c.x=a.b.x=b.touches[0].clientX;a.c.y=a.b.y=b.touches[0].clientY}else{a.c.x=a.b.x=
-a.touches[1].clientX;a.c.y=a.b.y=a.touches[1].clientY}}document.addEventListener("touchmove",h,d);document.addEventListener("touchend",i,d)}else{f("Touchable Touchstart touches length "+b.pageX+" "+b.pageY);a.c.x=a.b.x=b.pageX;a.c.y=a.b.y=b.pageY;c(document).w(h);c(document).z(i)}b.preventDefault();if(a.m){f("Touchable doubleTap");a.f.e("doubleTap",a);clearTimeout(a.o);a.m=d}else{a.m=true;a.o=setTimeout(function(){a.m=d},500)}a.g=setTimeout(function(){f("Touchable longTap");c(a.d).e("longTap",a)},
-1E3);f("Touchable Tap");c(a.d).e("tap",a);c(a.d).e("touchablestart",a)}function h(b){if(typeof b.touches!=="undefined"){f("Touchable Touchsmove touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return d;if(b.touches.length==1||a.k){a.a.x=b.touches[0].clientX;a.a.y=b.touches[0].clientY}else if(a.touches.length==2&&!a.k)if(b.touches[0].clientY>b.touches[1].clientY){a.a.x=b.touches[0].clientX;a.a.y=b.touches[0].clientY}else{a.a.x=b.touches[1].clientX;a.a.y=b.touches[1].clientY}}else{a.a.x=
-b.pageX;a.a.y=b.pageY}c(a.d).C("webkitAnimate");a.i.x=a.a.x-a.b.x;a.i.y=a.a.y-a.b.y;a.j.x=a.a.x-a.c.x;a.j.y=a.a.y-a.c.y;a.n.x+=a.i.x;a.n.y+=a.i.y;a.b.x=a.a.x;a.b.y=a.a.y;f("Touchable Touchablemove self e.target"+b.target+"e.currentTarget "+b.currentTarget+" x:"+a.j.x);a.target=b.target;a.currentTarget=b.currentTarget;c(a.d).e("touchablemove",a);a.g&&clearTimeout(a.g)}function i(b){if(typeof b.touches!=="undefined"){if(b.targetTouches.length>0)return d;a.d.removeEventListener("touchmove",h,true);a.d.removeEventListener("touchend",
-i,true)}else{c(document).t("mousemove",h);c(document).t("mouseup",i)}a.r=d;a.g&&clearTimeout(a.g);f("Touchable Touchend self "+a.j.x);c(a.d).e("touchableend",a);f("Touchable: touchableend")}this.l=d;this.d=e;this.f=c(e);this.k=this.u=this.v=d;this.c={x:0,y:0};this.a={x:0,y:0};this.b={x:0,y:0};this.i={x:0,y:0};this.j={x:0,y:0};this.n={x:0,y:0};this.g=this.o=null;var a=this;if(typeof g!=="undefined")if(typeof g.l!=="undefined")this.l=g.l;e.addEventListener("touchstart",function(){a.f.e("touchstart")},
-d);e.addEventListener("touchend",function(){a.f.e("touchend")},d);e.addEventListener("touchmove",function(){a.f.e("touchmove")},d);e.addEventListener("touchstart",k,d);this.f.h("mousedown",k)}c.q.s=function(e){return this.p(function(){return c(this).data.Touchable=new j(this,e)})};c.q.A=function(e,g){return this.p(function(){c(this).h("newHoverIn",e).h("newHoverOut",g)})};c.q.B=function(e,g){return this.p(function(){c(this).h("newHoverIn2",e).h("newHoverOut2",g)})};c.s=j})(jQuery);
+(function(c){function k(e,g){function f(){a.k&&console.log(arguments)}function l(b){if(typeof b.touches!=="undefined"){f("Touchable Touchstart touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return d;if(a.r)return d;a.r=true;if(b.touches.length==1){a.j=true;a.c.x=a.b.x=b.touches[0].clientX;a.c.y=a.b.y=b.touches[0].clientY}else if(b.touches.length==2){a.j=d;if(b.touches[0].clientY>b.touches[1].clientY){a.c.x=a.b.x=b.touches[0].clientX;a.c.y=a.b.y=b.touches[0].clientY}else{a.c.x=a.b.x=
+a.touches[1].clientX;a.c.y=a.b.y=a.touches[1].clientY}}h.call(document,"touchmove",i,d);h.call(document,"touchend",j,d)}else{f("Touchable Touchstart touches length "+b.pageX+" "+b.pageY);a.c.x=a.b.x=b.pageX;a.c.y=a.b.y=b.pageY;c(document).z(i);c(document).A(j)}b.preventDefault();if(a.m){f("Touchable doubleTap");a.f.e("doubleTap",a);clearTimeout(a.o);a.m=d}else{a.m=true;a.o=setTimeout(function(){a.m=d},500)}a.g=setTimeout(function(){f("Touchable longTap");c(a.d).e("longTap",a)},1E3);f("Touchable Tap");
+c(a.d).e("tap",a);c(a.d).e("touchablestart",a)}function i(b){if(typeof b.touches!=="undefined"){f("Touchable Touchsmove touches length "+b.touches.length);if(b.touches.length!==1&&b.touches.length!==2)return d;if(b.touches.length==1||a.j){a.a.x=b.touches[0].clientX;a.a.y=b.touches[0].clientY}else if(a.touches.length==2&&!a.j)if(b.touches[0].clientY>b.touches[1].clientY){a.a.x=b.touches[0].clientX;a.a.y=b.touches[0].clientY}else{a.a.x=b.touches[1].clientX;a.a.y=b.touches[1].clientY}}else{a.a.x=b.pageX;
+a.a.y=b.pageY}c(a.d).D("webkitAnimate");a.h.x=a.a.x-a.b.x;a.h.y=a.a.y-a.b.y;a.i.x=a.a.x-a.c.x;a.i.y=a.a.y-a.c.y;a.n.x+=a.h.x;a.n.y+=a.h.y;a.b.x=a.a.x;a.b.y=a.a.y;f("Touchable Touchablemove self e.target"+b.target+"e.currentTarget "+b.currentTarget+" x:"+a.i.x);a.target=b.target;a.currentTarget=b.currentTarget;c(a.d).e("touchablemove",a);a.g&&clearTimeout(a.g)}function j(b){if(typeof b.touches!=="undefined"){if(b.targetTouches.length>0)return d;m.call(a.d,"touchmove",i,true);m.call(a.d,"touchend",
+j,true)}else{c(document).t("mousemove",i);c(document).t("mouseup",j)}a.r=d;a.g&&clearTimeout(a.g);f("Touchable Touchend self "+a.i.x);c(a.d).e("touchableend",a);f("Touchable: touchableend")}this.k=d;this.d=e;this.f=c(e);this.j=this.u=this.v=d;this.c={x:0,y:0};this.a={x:0,y:0};this.b={x:0,y:0};this.h={x:0,y:0};this.i={x:0,y:0};this.n={x:0,y:0};this.g=this.o=null;var a=this;if(typeof g!=="undefined")if(typeof g.k!=="undefined")this.k=g.k;var h=e.addEventListener||e.attachEvent,m=e.removeEventListener||
+e.detachEvent;h.call(e,"touchstart",function(){a.f.e("touchstart")},d);h.call(e,"touchend",function(){a.f.e("touchend")},d);h.call(e,"touchmove",function(){a.f.e("touchmove")},d);h.call(e,"touchstart",l,d);this.f.w(l)}c.q.s=function(e){return this.p(function(){return c(this).data.Touchable=new k(this,e)})};c.q.B=function(e,g){return this.p(function(){c(this).l("newHoverIn",e).l("newHoverOut",g)})};c.q.C=function(e,g){return this.p(function(){c(this).l("newHoverIn2",e).l("newHoverOut2",g)})};c.s=k})(jQuery);
View
2 touchable.js
@@ -5,7 +5,7 @@
* @author Gregor Schwab
* @copyright (c) 2010 Gregor Schwab
* Usage Command Line: $(elem).Touchable() (@see Readme.md)
- * @version 0.0.1
+ * @version 0.0.2
* @requires jQuery
*/
View
2 server.js → utils/server.js
@@ -5,7 +5,7 @@
//Create Express frontend
var server = global.server = express.createServer();
-server.use(connect.staticProvider(__dirname));
+server.use(connect.staticProvider(__dirname+'/..'));
server.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
View
2 gh-pages.js → utils/update-gh-pages.js
@@ -37,6 +37,8 @@ var add = function(command){
oldCommand = command;
};
+process.chdir('.');
+console.log('Working directory: ' + process.cwd());
add('git checkout gh-pages');
add('nmd Readme.md -o index.html');
add('ln -s hoverable.js demo/hoverable.js');

0 comments on commit c1182ed

Please sign in to comment.
Something went wrong with that request. Please try again.