Code Monkey home page Code Monkey logo

sbrilenko / event.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mudcube/event.js

0.0 1.0 0.0 686 KB

:hand: Multi-touch, gestures, and other events—click, dblclick, dbltap, tap, longpress, drag, swipe, pinch, rotate, shake. For pointer events, each listener can handle anywhere from 1 to 12 fingers at a time, or more, depending on the device. Includes MetaKey tracking (CMD, CTRL) to support native key-commands in various platforms.

License: MIT License

JavaScript 58.13% HTML 40.51% CSS 1.36%

event.js's Introduction

Demos


Your demo here?

Supported events


1  : click, dblclick, dbltap
1+ : tap, longpress, drag, swipe
2+ : pinch, rotate
   : mousewheel, devicemotion, shake

Three ways to add/remove events (and why)


// Retains "this" attribute as target, and overrides native addEventListener.
target.addEventListener(type, listener, useCapture); 
target.removeEventListener(type, listener, useCapture);

// Has less function calls then the override version, while retains similar formatting.
eventjs.add(target, type, listener, configure); 
eventjs.remove(target, type, listener, configure);

// Same as the previous, but (arguably) cleaner looking code.
eventjs.add(configure);
eventjs.remove(configure);

Click: fingers, minFingers, maxFingers


eventjs.add(window, "click", function(event, self) {
	console.log(self.gesture, self.x, self.y);
});

Double-Click: fingers, minFingers, maxFingers


eventjs.add(window, "dblclick", function(event, self) {
	console.log(self.gesture, self.x, self.y);
});

Drag: fingers, maxFingers, position


eventjs.add(window, "drag", function(event, self) {
	console.log(self.gesture, self.fingers, self.state, self.start, self.x, self.y, self.bbox);
});

Gesture: fingers, minFingers, maxFingers


eventjs.add(window, "gesture", function(event, self) {
	console.log(self.gesture, self.fingers, self.state, self.rotation, self.scale);
});

Swipe: fingers, minFingers, maxFingers, snap, threshold


eventjs.add(window, "swipe", function(event, self) {
	console.log(self.gesture, self.fingers, self.velocity, self.angle, self.start, self.x, self.y);
});

Tap: fingers, minFingers, maxFingers, timeout


eventjs.add(window, "tap", function(event, self) {
	console.log(self.gesture, self.fingers);
});

Longpress: fingers, minFingers, maxFingers, delay


eventjs.add(window, "longpress", function(event, self) {
	console.log(self.gesture, self.fingers);
});

Shake


eventjs.add(window, "shake", function(event, self) {
	console.log(self.gesture, self.acceleration, self.accelerationIncludingGravity);
});

DeviceMotion (smooth quirks)


eventjs.add(window, "devicemotion", function(event, self) {
	console.log(self.gesture, self.acceleration, self.accelerationIncludingGravity);
});

Wheel (smooth quirks)


eventjs.add(window, "wheel", function(event, self) {
	console.log(self.gesture, self.state, self.wheelDelta);
});

Single listener with a custom configuration.


// adding with addEventListener()
target.addEventListener("swipe", function(event) {
	console.log(event.velocity, event.angle, event.fingers);
}, {
	fingers: 2, // listen for specifically two fingers (minFingers & maxFingers both now equal 3)
	snap: 90 // snap to 90 degree intervals.
});

// adding with eventjs.add() - a bit more efficient
eventjs.add(target, "swipe", function(event, self) {
	console.log(self.velocity, self.angle, self.fingers);
}, {
	fingers: 2,
	snap: 90 
});

// adding with eventjs.add() w/ configuration
eventjs.add({
	target: target,
	type: "swipe",
	fingers: 2,
	snap: 90, 
	listener: function(event, self) {
		console.log(self.velocity, self.angle, self.fingers);
	}
});

Multiple listeners glued together.


// adding with addEventListener()
target.addEventListener("click swipe", function(event) { });

// adding with eventjs.add()
eventjs.add(target, "click swipe", function(event, self) { });

Query selectors to create an event (querySelectorAll)


// adding events to NodeList from querySelectorAll()
document.querySelectorAll("#element a.link").addEventListener("click", callback);

// adding with eventjs.add()
eventjs.add("#element a.link", "click", callback);

Listen until selector to become available (querySelector)


eventjs.add("body", "ready", callback);
// or...
eventjs.add({
	target: "body", 
	type: "ready", 
	timeout: 10000, // set a timeout to stop checking.
	interval: 30, // set how often to check for element.
	listener: callback
});

Multiple listeners bound to one listener w/ configuration.


var bindings = eventjs.add({
	target: target,
	type: "click swipe",
	snap: 90, // snap to 90 degree intervals.
	minFingers: 2, // minimum required fingers to start event.
	maxFingers: 4, // maximum fingers in one event.
	listener: function(event, self) {
		console.log(self.gesture); // will be click or swipe.
		console.log(self.x);
		console.log(self.y);
		console.log(self.identifier);
		console.log(self.start);
		console.log(self.fingers); // somewhere between "2" and "4".
		self.pause(); // disable event.
		self.resume(); // enable event.
		self.remove(); // remove event.
	}
});

Multiple listeners bound to multiple callbacks w/ configuration.


var bindings = eventjs.add({
	target: target,
	minFingers: 1,
	maxFingers: 12,
	listeners: {
		click: function(event, self) {
			self.remove(); // removes this click listener.
		},
		swipe: function(event, self) {
			binding.remove(); // removes both the click + swipe listeners.
		}
	}
});

Multiple listeners bound to multiple callbacks w/ multiple configurations.


var binding = eventjs.add({
	target: target,
	listeners: {
		longpress: {
			fingers: 1,
			wait: 500, // milliseconds
			listener: function(event, self) {
				console.log(self.fingers); // "1" finger.
			}
		},
		drag: {
			fingers: 3,
			position: "relative", // "relative", "absolute", "difference", "move"
			listener: function(event, self) {
				console.log(self.fingers); // "3" fingers.
				console.log(self.x); // coordinate is relative to edge of target.
			}
		}
	}
});

Capturing an event and manually forwarding it to a proxy (tiered events).


eventjs.add(target, "down", function(event, self) {
	var x = event.pageX; // local variables that wont change.
	var y = event.pageY;
	eventjs.proxy.drag({
		event: event,
		target: target,
		listener: function(event, self) {
			console.log(x - event.pageX); // measure movement.
			console.log(y - event.pageY);
		}
	});
});

Stop, prevent and cancel.


eventjs.stop(event); // stop bubble.
eventjs.prevent(event); // prevent default.
eventjs.cancel(event); // stop and prevent.

Track for proper command/control-key for Mac/PC.


eventjs.add(window, "keyup keydown", eventjs.proxy.metaTracker); // setup tracking on the metaKey.
eventjs.add(window, "focus load blur beforeunload", eventjs.proxy.metaTrackerReset); // 
console.log(eventjs.proxy.metaTracker(event)); // returns whether metaKey is pressed.
console.log(eventjs.proxy.metaKey); // indicates whether metaKey is pressed (once metaTracker is run).

Test for event features, in this example Drag & Drop file support.


console.log(eventjs.supports('dragstart') && eventjs.supports('drop') && !!window.FileReader);

Turn prototyping on/off


// NOTE: These two features are on by default (so it's easy to add to a project)
//       however, I like to run without modify* support in production, as it's less hacky.
// ----------------------------------------------------
// add custom *EventListener commands to HTMLElements.
eventjs.modifyEventListener = true; 
// add bulk *EventListener commands on NodeLists from querySelectorAll and others.
eventjs.modifySelectors = true; 

Upgrading


The latest version of MIDI.js makes calls to midijs instead of Event. This fixes issues
with using the library with other frameworks, also, using the Event namespace was a bit hacky.

If you want to use the latest library, but not update your calls (or prefer the Event namespace), 
add this to the bottom of the Event.min.js
///
var addEvent = eventjs.add;
var removeEvent = eventjs.remove;
///
(function() {
	for (var key in eventjs) {
		Event[key] = eventjs[key];
	}
	for (var key in eventjs.proxy) {
		addEvent[key] = eventjs.proxy[key];
	}
})();

Browser support


Firefox
Chrome
Chrome Mobile
Opera
Internet Explorer - for IE8 or less include http://git.io/ppQT
Safari
Safari Mobile

MIT License

Copyright (c) 2010-2014 SketchIO (Michael Deal)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

event.js's People

Contributors

mudcube avatar asturur avatar

Watchers

sbrilenko avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.