ractive-events-tap - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

dist/ractive-events-tap.es.js

@@ -20,5 +20,5 @@ var DISTANCE_THRESHOLD = 5; // maximum pixels pointer can move before cancel
 		// listen for mouse/pointer events...
-		if (window.navigator.pointerEnabled) {
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
 			node.addEventListener( 'pointerdown', handleMousedown, false );
-		} else if (window.navigator.msPointerEnabled) {
+		} else if ( window.MSPointerEvent || window.navigator.msPointerEnabled ) {
 			node.addEventListener( 'MSPointerDown', handleMousedown, false );
@@ -97,7 +97,7 @@ } else {
 
-		if ( window.navigator.pointerEnabled ) {
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
 			this.node.addEventListener( 'pointerup', handleMouseup, false );
 			document.addEventListener( 'pointermove', handleMousemove, false );
 			document.addEventListener( 'pointercancel', cancel, false );
-		} else if ( window.navigator.msPointerEnabled ) {
+		} else if ( window.PointerEvent || window.navigator.msPointerEnabled ) {
 			this.node.addEventListener( 'MSPointerUp', handleMouseup, false );
@@ -104,0 +104,0 @@ document.addEventListener( 'MSPointerMove', handleMousemove, false );

dist/ractive-events-tap.umd.js

@@ -5,208 +5,208 @@ (function (global, factory) {
 	(global.Ractive = global.Ractive || {}, global.Ractive.events = global.Ractive.events || {}, global.Ractive.events.tap = factory());
-}(this, function () { 'use strict';
+}(this, (function () { 'use strict';
 
-	var DISTANCE_THRESHOLD = 5; // maximum pixels pointer can move before cancel
-	var TIME_THRESHOLD = 400;   // maximum milliseconds between down and up before cancel
+var DISTANCE_THRESHOLD = 5; // maximum pixels pointer can move before cancel
+var TIME_THRESHOLD = 400;   // maximum milliseconds between down and up before cancel
 
-	function tap ( node, callback ) {
-		return new TapHandler( node, callback );
-	}
+function tap ( node, callback ) {
+	return new TapHandler( node, callback );
+}
 
-	function TapHandler ( node, callback ) {
-		this.node = node;
-		this.callback = callback;
+function TapHandler ( node, callback ) {
+	this.node = node;
+	this.callback = callback;
 
-		this.preventMousedownEvents = false;
+	this.preventMousedownEvents = false;
 
-		this.bind( node );
-	}
+	this.bind( node );
+}
 
-	TapHandler.prototype = {
-		bind: function bind ( node ) {
-			// listen for mouse/pointer events...
-			if (window.navigator.pointerEnabled) {
-				node.addEventListener( 'pointerdown', handleMousedown, false );
-			} else if (window.navigator.msPointerEnabled) {
-				node.addEventListener( 'MSPointerDown', handleMousedown, false );
-			} else {
-				node.addEventListener( 'mousedown', handleMousedown, false );
+TapHandler.prototype = {
+	bind: function bind ( node ) {
+		// listen for mouse/pointer events...
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
+			node.addEventListener( 'pointerdown', handleMousedown, false );
+		} else if ( window.MSPointerEvent || window.navigator.msPointerEnabled ) {
+			node.addEventListener( 'MSPointerDown', handleMousedown, false );
+		} else {
+			node.addEventListener( 'mousedown', handleMousedown, false );
 
-				// ...and touch events
-				node.addEventListener( 'touchstart', handleTouchstart, false );
-			}
+			// ...and touch events
+			node.addEventListener( 'touchstart', handleTouchstart, false );
+		}
 
-			// native buttons, and <input type='button'> elements, should fire a tap event
-			// when the space key is pressed
-			if ( node.tagName === 'BUTTON' || node.type === 'button' ) {
-				node.addEventListener( 'focus', handleFocus, false );
-			}
+		// native buttons, and <input type='button'> elements, should fire a tap event
+		// when the space key is pressed
+		if ( node.tagName === 'BUTTON' || node.type === 'button' ) {
+			node.addEventListener( 'focus', handleFocus, false );
+		}
 
-			node.__tap_handler__ = this;
-		},
+		node.__tap_handler__ = this;
+	},
 
-		fire: function fire ( event, x, y ) {
-			this.callback({
-				node: this.node,
-				original: event,
-				x: x,
-				y: y
-			});
-		},
+	fire: function fire ( event, x, y ) {
+		this.callback({
+			node: this.node,
+			original: event,
+			x: x,
+			y: y
+		});
+	},
 
-		mousedown: function mousedown ( event ) {
-			var this$1 = this;
+	mousedown: function mousedown ( event ) {
+		var this$1 = this;
 
-			if ( this.preventMousedownEvents ) {
+		if ( this.preventMousedownEvents ) {
+			return;
+		}
+
+		if ( event.which !== undefined && event.which !== 1 ) {
+			return;
+		}
+
+		var x = event.clientX;
+		var y = event.clientY;
+
+		// This will be null for mouse events.
+		var pointerId = event.pointerId;
+
+		var handleMouseup = function (event) {
+			if ( event.pointerId != pointerId ) {
 				return;
 			}
 
-			if ( event.which !== undefined && event.which !== 1 ) {
+			this$1.fire( event, x, y );
+			cancel();
+		};
+
+		var handleMousemove = function (event) {
+			if ( event.pointerId != pointerId ) {
 				return;
 			}
 
-			var x = event.clientX;
-			var y = event.clientY;
-
-			// This will be null for mouse events.
-			var pointerId = event.pointerId;
-
-			var handleMouseup = function (event) {
-				if ( event.pointerId != pointerId ) {
-					return;
-				}
-
-				this$1.fire( event, x, y );
+			if ( ( Math.abs( event.clientX - x ) >= DISTANCE_THRESHOLD ) || ( Math.abs( event.clientY - y ) >= DISTANCE_THRESHOLD ) ) {
 				cancel();
-			};
+			}
+		};
 
-			var handleMousemove = function (event) {
-				if ( event.pointerId != pointerId ) {
-					return;
-				}
+		var cancel = function () {
+			this$1.node.removeEventListener( 'MSPointerUp', handleMouseup, false );
+			document.removeEventListener( 'MSPointerMove', handleMousemove, false );
+			document.removeEventListener( 'MSPointerCancel', cancel, false );
+			this$1.node.removeEventListener( 'pointerup', handleMouseup, false );
+			document.removeEventListener( 'pointermove', handleMousemove, false );
+			document.removeEventListener( 'pointercancel', cancel, false );
+			this$1.node.removeEventListener( 'click', handleMouseup, false );
+			document.removeEventListener( 'mousemove', handleMousemove, false );
+		};
 
-				if ( ( Math.abs( event.clientX - x ) >= DISTANCE_THRESHOLD ) || ( Math.abs( event.clientY - y ) >= DISTANCE_THRESHOLD ) ) {
-					cancel();
-				}
-			};
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
+			this.node.addEventListener( 'pointerup', handleMouseup, false );
+			document.addEventListener( 'pointermove', handleMousemove, false );
+			document.addEventListener( 'pointercancel', cancel, false );
+		} else if ( window.PointerEvent || window.navigator.msPointerEnabled ) {
+			this.node.addEventListener( 'MSPointerUp', handleMouseup, false );
+			document.addEventListener( 'MSPointerMove', handleMousemove, false );
+			document.addEventListener( 'MSPointerCancel', cancel, false );
+		} else {
+			this.node.addEventListener( 'click', handleMouseup, false );
+			document.addEventListener( 'mousemove', handleMousemove, false );
+		}
 
-			var cancel = function () {
-				this$1.node.removeEventListener( 'MSPointerUp', handleMouseup, false );
-				document.removeEventListener( 'MSPointerMove', handleMousemove, false );
-				document.removeEventListener( 'MSPointerCancel', cancel, false );
-				this$1.node.removeEventListener( 'pointerup', handleMouseup, false );
-				document.removeEventListener( 'pointermove', handleMousemove, false );
-				document.removeEventListener( 'pointercancel', cancel, false );
-				this$1.node.removeEventListener( 'click', handleMouseup, false );
-				document.removeEventListener( 'mousemove', handleMousemove, false );
-			};
+		setTimeout( cancel, TIME_THRESHOLD );
+	},
 
-			if ( window.navigator.pointerEnabled ) {
-				this.node.addEventListener( 'pointerup', handleMouseup, false );
-				document.addEventListener( 'pointermove', handleMousemove, false );
-				document.addEventListener( 'pointercancel', cancel, false );
-			} else if ( window.navigator.msPointerEnabled ) {
-				this.node.addEventListener( 'MSPointerUp', handleMouseup, false );
-				document.addEventListener( 'MSPointerMove', handleMousemove, false );
-				document.addEventListener( 'MSPointerCancel', cancel, false );
-			} else {
-				this.node.addEventListener( 'click', handleMouseup, false );
-				document.addEventListener( 'mousemove', handleMousemove, false );
-			}
+	touchdown: function touchdown ( event ) {
+		var this$1 = this;
 
-			setTimeout( cancel, TIME_THRESHOLD );
-		},
+		var touch = event.touches[0];
 
-		touchdown: function touchdown ( event ) {
-			var this$1 = this;
+		var x = touch.clientX;
+		var y = touch.clientY;
 
-			var touch = event.touches[0];
+		var finger = touch.identifier;
 
-			var x = touch.clientX;
-			var y = touch.clientY;
+		var handleTouchup = function (event) {
+			var touch = event.changedTouches[0];
 
-			var finger = touch.identifier;
+			if ( touch.identifier !== finger ) {
+				cancel();
+				return;
+			}
 
-			var handleTouchup = function (event) {
-				var touch = event.changedTouches[0];
+			event.preventDefault(); // prevent compatibility mouse event
 
-				if ( touch.identifier !== finger ) {
-					cancel();
-					return;
-				}
+			// for the benefit of mobile Firefox and old Android browsers, we need this absurd hack.
+			this$1.preventMousedownEvents = true;
+			clearTimeout( this$1.preventMousedownTimeout );
 
-				event.preventDefault(); // prevent compatibility mouse event
+			this$1.preventMousedownTimeout = setTimeout( function () {
+				this$1.preventMousedownEvents = false;
+			}, 400 );
 
-				// for the benefit of mobile Firefox and old Android browsers, we need this absurd hack.
-				this$1.preventMousedownEvents = true;
-				clearTimeout( this$1.preventMousedownTimeout );
+			this$1.fire( event, x, y );
+			cancel();
+		};
 
-				this$1.preventMousedownTimeout = setTimeout( function () {
-					this$1.preventMousedownEvents = false;
-				}, 400 );
+		var handleTouchmove = function (event) {
+			if ( event.touches.length !== 1 || event.touches[0].identifier !== finger ) {
+				cancel();
+			}
 
-				this$1.fire( event, x, y );
+			var touch = event.touches[0];
+			if ( ( Math.abs( touch.clientX - x ) >= DISTANCE_THRESHOLD ) || ( Math.abs( touch.clientY - y ) >= DISTANCE_THRESHOLD ) ) {
 				cancel();
-			};
+			}
+		};
 
-			var handleTouchmove = function (event) {
-				if ( event.touches.length !== 1 || event.touches[0].identifier !== finger ) {
-					cancel();
-				}
+		var cancel = function () {
+			this$1.node.removeEventListener( 'touchend', handleTouchup, false );
+			window.removeEventListener( 'touchmove', handleTouchmove, false );
+			window.removeEventListener( 'touchcancel', cancel, false );
+		};
 
-				var touch = event.touches[0];
-				if ( ( Math.abs( touch.clientX - x ) >= DISTANCE_THRESHOLD ) || ( Math.abs( touch.clientY - y ) >= DISTANCE_THRESHOLD ) ) {
-					cancel();
-				}
-			};
+		this.node.addEventListener( 'touchend', handleTouchup, false );
+		window.addEventListener( 'touchmove', handleTouchmove, false );
+		window.addEventListener( 'touchcancel', cancel, false );
 
-			var cancel = function () {
-				this$1.node.removeEventListener( 'touchend', handleTouchup, false );
-				window.removeEventListener( 'touchmove', handleTouchmove, false );
-				window.removeEventListener( 'touchcancel', cancel, false );
-			};
+		setTimeout( cancel, TIME_THRESHOLD );
+	},
 
-			this.node.addEventListener( 'touchend', handleTouchup, false );
-			window.addEventListener( 'touchmove', handleTouchmove, false );
-			window.addEventListener( 'touchcancel', cancel, false );
+	teardown: function teardown () {
+		var node = this.node;
 
-			setTimeout( cancel, TIME_THRESHOLD );
-		},
+		node.removeEventListener( 'pointerdown',   handleMousedown, false );
+		node.removeEventListener( 'MSPointerDown', handleMousedown, false );
+		node.removeEventListener( 'mousedown',     handleMousedown, false );
+		node.removeEventListener( 'touchstart',    handleTouchstart, false );
+		node.removeEventListener( 'focus',         handleFocus, false );
+	}
+};
 
-		teardown: function teardown () {
-			var node = this.node;
+function handleMousedown ( event ) {
+	this.__tap_handler__.mousedown( event );
+}
 
-			node.removeEventListener( 'pointerdown',   handleMousedown, false );
-			node.removeEventListener( 'MSPointerDown', handleMousedown, false );
-			node.removeEventListener( 'mousedown',     handleMousedown, false );
-			node.removeEventListener( 'touchstart',    handleTouchstart, false );
-			node.removeEventListener( 'focus',         handleFocus, false );
-		}
-	};
+function handleTouchstart ( event ) {
+	this.__tap_handler__.touchdown( event );
+}
 
-	function handleMousedown ( event ) {
-		this.__tap_handler__.mousedown( event );
-	}
+function handleFocus () {
+	this.addEventListener( 'keydown', handleKeydown, false );
+	this.addEventListener( 'blur', handleBlur, false );
+}
 
-	function handleTouchstart ( event ) {
-		this.__tap_handler__.touchdown( event );
-	}
+function handleBlur () {
+	this.removeEventListener( 'keydown', handleKeydown, false );
+	this.removeEventListener( 'blur', handleBlur, false );
+}
 
-	function handleFocus () {
-		this.addEventListener( 'keydown', handleKeydown, false );
-		this.addEventListener( 'blur', handleBlur, false );
+function handleKeydown ( event ) {
+	if ( event.which === 32 ) { // space key
+		this.__tap_handler__.fire();
 	}
+}
 
-	function handleBlur () {
-		this.removeEventListener( 'keydown', handleKeydown, false );
-		this.removeEventListener( 'blur', handleBlur, false );
-	}
+return tap;
 
-	function handleKeydown ( event ) {
-		if ( event.which === 32 ) { // space key
-			this.__tap_handler__.fire();
-		}
-	}
-
-	return tap;
-
-}));
+})));

package.json

 {
   "name": "ractive-events-tap",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": "Rich Harris",
@@ -24,4 +24,4 @@ "license": "MIT",
     "lint": "eslint src",
-    "test": "open test/index.html"
+    "test": "chrome ./test/index.html"
   }
 }

README.md

@@ -18,4 +18,10 @@ # ractive-events-tap
 
-Install from npm...
+Include it from CDN...
 
+```html
+<script src="https://cdn.jsdelivr.net/npm/ractive@0.9.3/ractive.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/ractive-events-tap@0.3.1/dist/ractive-events-tap.umd.min.js"></script>
+```
+...or install from npm...
+
 ```bash
@@ -97,3 +103,8 @@ npm install ractive-events-tap
 
+## Commands when Contributing
 
+```bash
+npm run build #compile
+npm run test # run chrome 55+
+```
 
@@ -100,0 +111,0 @@ ## License

src/ractive-events-tap.js

@@ -20,5 +20,5 @@ const DISTANCE_THRESHOLD = 5; // maximum pixels pointer can move before cancel
 		// listen for mouse/pointer events...
-		if (window.navigator.pointerEnabled) {
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
 			node.addEventListener( 'pointerdown', handleMousedown, false );
-		} else if (window.navigator.msPointerEnabled) {
+		} else if ( window.MSPointerEvent || window.navigator.msPointerEnabled ) {
 			node.addEventListener( 'MSPointerDown', handleMousedown, false );
@@ -95,7 +95,7 @@ } else {
 
-		if ( window.navigator.pointerEnabled ) {
+		if ( window.PointerEvent || window.navigator.pointerEnabled ) {
 			this.node.addEventListener( 'pointerup', handleMouseup, false );
 			document.addEventListener( 'pointermove', handleMousemove, false );
 			document.addEventListener( 'pointercancel', cancel, false );
-		} else if ( window.navigator.msPointerEnabled ) {
+		} else if ( window.PointerEvent || window.navigator.msPointerEnabled ) {
 			this.node.addEventListener( 'MSPointerUp', handleMouseup, false );
@@ -102,0 +102,0 @@ document.addEventListener( 'MSPointerMove', handleMousemove, false );

test/tests.js

@@ -60,2 +60,34 @@ describe( 'ractive-events-tap', function () {
 	});
-});
+
+	it( 'IE Edge window.pointerEnabled == undefined should still result in a tap event', function ( done ) {
+		var ractive, node, tapped;
+
+		window.navigator.pointerEnabled = undefined;
+		/** NOTE removed mocking PointerEvent, it should be handled in the Browser itself. Ex. Chrome 56+
+		 * Because window.PointerEvent = new PointerEvent() is just very incorrect.
+		 * window.PointerEvent = new PointerEvent("pointerdown", {}); */
+
+		ractive = new Ractive({
+			el: fixture,
+			template: '<button id="test" on-tap="tap">tap me</button>',
+			debug: true
+		});
+
+		node = ractive.nodes.test;
+
+		ractive.on( 'tap', function () {
+			tapped = true;
+		});
+
+		assert.equal( tapped, undefined );
+		simulant.fire( node, 'mousedown' );
+		simulant.fire( node, 'pointerdown' );
+		simulant.fire( node, 'pointerup' );
+		assert.equal( tapped, true );
+
+		setTimeout( function () {
+			assert.equal( tapped, true );
+			done();
+		}, 100 );
+	});
+});

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26543

5.36%

Lines of code

559

4.88%

Number of lines in readme file

112

10.89%

Worsened metrics

Number of package files

11

-8.33%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes