deac/MIDI.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

update libraries to latest

Browse source
This commit is contained in:
Michael Deal 2012-11-06 13:06:08 -08:00
parent 5f6984123f
commit bec7710bdc
9 changed files with 240 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
AudioTest.html
View file

@ -1,12 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> <html xmlns = "http://www.w3.org/1999/xhtml">
<head> <head>
<script src="./js/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/DOMLoader.script.js" type="text/javascript"></script>
<script src="./js/MIDI/audioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/audioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script> <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script> <script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- base64 packages --> <!-- base64 packages -->
<script src="./js/Polyfill/Base64.js" type="text/javascript"></script> <script src="./js/Polyfill/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>

8
MIDIPlayer.html
View file

@ -6,16 +6,16 @@
<!-- soundfont.js css --> <!-- soundfont.js css -->
<link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" /> <link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" />
<!-- soundfont.js package --> <!-- soundfont.js package -->
<script src="./js/Color/Space.js" type="text/javascript"></script> <script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
<script src="./js/Event.js" type="text/javascript"></script>
<script src="./js/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/DOMLoader.script.js" type="text/javascript"></script>
<script src="./js/MIDI/audioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/audioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script> <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script> <script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/MusicTheory/Synesthesia.js" type="text/javascript"></script> <script src="./js/MusicTheory/Synesthesia.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script> <script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- jasmid package --> <!-- jasmid package -->
<script src="./inc/jasmid/stream.js"></script> <script src="./inc/jasmid/stream.js"></script>
<script src="./inc/jasmid/midifile.js"></script> <script src="./inc/jasmid/midifile.js"></script>

8
WhitneyMusicBox.html
View file

@ -2,16 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Whitney Music Box in HTML5</title> <title>Whitney Music Box in HTML5</title>
<script src="./js/Color/Space.js" type="text/javascript"></script> <script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
<script src="./js/Event.js" type="text/javascript"></script>
<script src="./js/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/DOMLoader.script.js" type="text/javascript"></script>
<script src="./js/MIDI/audioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/audioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/loadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script> <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script> <script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/MusicTheory/Synesthesia.js" type="text/javascript"></script> <script src="./js/MusicTheory/Synesthesia.js" type="text/javascript"></script>
<script src="./js/Widgets/Loader.js" type="text/javascript"></script> <script src="./js/Widgets/Loader.js" type="text/javascript"></script>
<script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- base642binary package --> <!-- base642binary package -->
<script src="./js/Polyfill/Base64.js" type="text/javascript"></script> <script src="./js/Polyfill/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>

4
js/Color/Space.js → js/Color/SpaceW3.js
View file

@ -28,7 +28,7 @@
if (typeof(Color) === "undefined") Color = {}; if (typeof(Color) === "undefined") Color = {};
if (typeof(Color.Space) === "undefined") Color.Space = {}; if (typeof(Color.Space) === "undefined") Color.Space = {};
(function () { (function () { "use strict";
var functions = { var functions = {
// holds generated cached conversion functions. // holds generated cached conversion functions.
@ -383,7 +383,7 @@ root.HSV_RGB = function (o) {
var H = o.H / 360; var H = o.H / 360;
var S = o.S / 100; var S = o.S / 100;
var V = o.V / 100; var V = o.V / 100;
var R, G, B; var R, G, B, D, A, C;
if (S === 0) { if (S === 0) {
R = G = B = Math.round(V * 255); R = G = B = Math.round(V * 255);
} else { } else {

8
js/MIDI/loadPlugin.js
View file

@ -60,12 +60,12 @@ MIDI.loadPlugin = function(callback, instrument) {
// works well in Firefox // works well in Firefox
DOMLoader.sendRequest({ DOMLoader.sendRequest({
url: "./soundfont/soundfont-" + filetype + instrument + ".js", url: "./soundfont/soundfont-" + filetype + instrument + ".js",
callback: function (response) { onload: function (response) {
MIDI.Soundfont = JSON.parse(response.responseText); MIDI.Soundfont = JSON.parse(response.responseText);
if (loader) loader.message("Downloading: 100%<br>Processing..."); if (loader) loader.message("Downloading: 100%<br>Processing...");
MIDI.HTML5.connect(callback); MIDI.HTML5.connect(callback);
}, },
progress: function (evt) { onprogress: function (evt) {
var percent = evt.loaded / 1719931 * 100 >> 0; var percent = evt.loaded / 1719931 * 100 >> 0;
if (loader) loader.message("Downloading: " + (percent + "%")); if (loader) loader.message("Downloading: " + (percent + "%"));
} }
@ -75,12 +75,12 @@ MIDI.loadPlugin = function(callback, instrument) {
// works well in Chrome // works well in Chrome
DOMLoader.sendRequest({ DOMLoader.sendRequest({
url: "./soundfont/soundfont-" + filetype + instrument + ".js", url: "./soundfont/soundfont-" + filetype + instrument + ".js",
callback: function(response) { onload: function(response) {
MIDI.Soundfont = JSON.parse(response.responseText); MIDI.Soundfont = JSON.parse(response.responseText);
if (loader) loader.message("Downloading: 100%<br>Processing..."); if (loader) loader.message("Downloading: 100%<br>Processing...");
MIDI.WebAudioAPI.connect(callback); MIDI.WebAudioAPI.connect(callback);
}, },
progress: function (evt) { onprogress: function (evt) {
var percent = evt.loaded / 1719931 * 100 >> 0; var percent = evt.loaded / 1719931 * 100 >> 0;
if (loader) loader.message("Downloading: " + (percent + "%")); if (loader) loader.message("Downloading: " + (percent + "%"));
} }

3
js/Widgets/Loader.js
View file

@ -27,7 +27,7 @@
if (typeof(widgets) === "undefined") var widgets = {}; if (typeof(widgets) === "undefined") var widgets = {};
widgets.Loader = (function(root) { widgets.Loader = (function(root) { "use strict";
var PI = Math.PI; var PI = Math.PI;
var defaultConfig = { var defaultConfig = {
@ -86,6 +86,7 @@ return function (conf) {
var div = document.createElement("div"); var div = document.createElement("div");
var span = document.createElement("span"); var span = document.createElement("span");
div.appendChild(span); div.appendChild(span);
div.className = defaultConfig.id;
that.span = span; that.span = span;
that.div = div; that.div = div;
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");

74
js/DOMLoader.XMLHttp.js → js/Window/DOMLoader.XMLHttp.js
View file

@ -1,16 +1,17 @@
/* /*
DOMLoader.XMLHttp : 0.1 : mudcu.be DOMLoader.XMLHttp
----------------------------------- --------------------------
DOMLoader.sendRequest({ DOMLoader.sendRequest({
url: "./dir/something.extension", url: "./dir/something.extension",
error: function(event) { data: "test!",
onerror: function(event) {
console.log(event); console.log(event);
}, },
callback: function(response) { onload: function(response) {
console.log(response.responseText); console.log(response.responseText);
}, },
progress: function (event) { onprogress: function (event) {
var percent = event.loaded / event.total * 100 >> 0; var percent = event.loaded / event.total * 100 >> 0;
loader.message("loading: " + percent + "%"); loader.message("loading: " + percent + "%");
} }
@ -18,21 +19,20 @@
*/ */
if (typeof(DOMLoader) === "undefined") DOMLoader = {}; if (typeof(DOMLoader) === "undefined") var DOMLoader = {};
(function() { "use strict";
// Add XMLHttpRequest when not available // Add XMLHttpRequest when not available
if (typeof (window.XMLHttpRequest) === "undefined") { if (typeof (XMLHttpRequest) === "undefined") {
(function () { // http://www.quirksmode.org/js/xmlhttp.html var XMLHttpRequest;
(function () { // find equivalent for IE
var factories = [ var factories = [
function () { function () {
return new ActiveXObject("Msxml2.XMLHTTP"); return new ActiveXObject("Msxml2.XMLHTTP")
}, function () { }, function () {
return new ActiveXObject("Msxml3.XMLHTTP"); return new ActiveXObject("Msxml3.XMLHTTP")
}, function () { }, function () {
return new ActiveXObject("Microsoft.XMLHTTP"); return new ActiveXObject("Microsoft.XMLHTTP")
}]; }];
for (var i = 0; i < factories.length; i++) { for (var i = 0; i < factories.length; i++) {
try { try {
@ -42,7 +42,7 @@ if (typeof (window.XMLHttpRequest) === "undefined") {
} }
break; break;
} }
window.XMLHttpRequest = factories[i]; XMLHttpRequest = factories[i];
})(); })();
} }
@ -68,7 +68,7 @@ if (typeof ((new XMLHttpRequest()).responseText) === "undefined") {
// inject VBScript // inject VBScript
document.write(IEBinaryToArray_ByteStr_Script); document.write(IEBinaryToArray_ByteStr_Script);
DOMLoader.sendRequest = function(config) { DOMLoader.sendRequest = function(conf) {
// helper to convert from responseBody to a "responseText" like thing // helper to convert from responseBody to a "responseText" like thing
function getResponseText(binary) { function getResponseText(binary) {
var byteMapping = {}; var byteMapping = {};
@ -83,14 +83,13 @@ if (typeof ((new XMLHttpRequest()).responseText) === "undefined") {
return rawBytes.replace(/[\s\S]/g, function (match) { return rawBytes.replace(/[\s\S]/g, function (match) {
return byteMapping[match]; return byteMapping[match];
}) + lastChr; }) + lastChr;
} };
// //
var req = new XMLHttpRequest(); var req = XMLHttpRequest();
req.open("GET", config.url, true); req.open("GET", conf.url, true);
req.setRequestHeader("Accept-Charset", "x-user-defined"); if (conf.responseType) req.responseType = conf.responseType;
if (config.responseType) req.responseType = config.responseType; if (conf.onerror) req.onerror = conf.onerror;
if (config.error) req.onerror = config.error; if (conf.onprogress) req.onprogress = conf.onprogress;
if (config.progress) req.onprogress = config.progress;
req.onreadystatechange = function (event) { req.onreadystatechange = function (event) {
if (req.readyState === 4) { if (req.readyState === 4) {
if (req.status === 200) { if (req.status === 200) {
@ -98,29 +97,34 @@ if (typeof ((new XMLHttpRequest()).responseText) === "undefined") {
} else { } else {
req = false; req = false;
} }
if (config.callback) config.callback(req); if (conf.onload) conf.onload(req);
} }
}; };
req.setRequestHeader("Accept-Charset", "x-user-defined");
req.send(null); req.send(null);
return req; return req;
} }
} else { } else {
DOMLoader.sendRequest = function(config) { DOMLoader.sendRequest = function(conf) {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.open('GET', config.url, true); req.open(conf.data ? "POST" : "GET", conf.url, true);
if (req.overrideMimeType) req.overrideMimeType("text/plain; charset=x-user-defined"); if (req.overrideMimeType) req.overrideMimeType("text/plain; charset=x-user-defined");
if (config.responseType) req.responseType = config.responseType; if (conf.data) req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
if (config.error) req.onerror = config.error; if (conf.responseType) req.responseType = conf.responseType;
if (config.progress) req.onprogress = config.progress; if (conf.onerror) req.onerror = conf.onerror;
if (conf.onprogress) req.onprogress = conf.onprogress;
req.onreadystatechange = function (event) { req.onreadystatechange = function (event) {
if (req.readyState === 4) { if (req.readyState === 4) {
if (req.status !== 200) req = false; if (req.status !== 200 && req.status != 304) {
if (config.callback) config.callback(req); if (conf.onerror) conf.onerror(event, false);
return;
}
if (conf.onload) {
conf.onload(req);
}
} }
}; };
req.send(""); req.send(conf.data);
return req; return req;
}; };
} }
})();

80
js/DOMLoader.script.js → js/Window/DOMLoader.script.js
View file

@ -1,7 +1,12 @@
/* /*
----------------------------------------------------
DOMLoader : 0.2 : mudcu.be DOMLoader.script.js : 0.1.2 : 2012/09/08 : http://mudcu.be
--------------------------- ----------------------------------------------------
Copyright 2011-2012 Mudcube. All rights reserved.
----------------------------------------------------
/// No verification
DOMLoader.script.add("../js/jszip/jszip.js");
/// Strict loading order and verification.
DOMLoader.script.add({ DOMLoader.script.add({
strictOrder: true, strictOrder: true,
srcs: [ srcs: [
@ -24,10 +29,19 @@
console.log(3) console.log(3)
} }
}); });
/// Just verification.
DOMLoader.script.add({
src: "../js/jszip/jszip.js",
verify: "JSZip",
callback: function() {
console.log(1)
}
});
*/ */
if (typeof(DOMLoader) === "undefined") DOMLoader = {}; if (typeof(DOMLoader) === "undefined") var DOMLoader = {};
(function() { "use strict";
DOMLoader.script = function() { DOMLoader.script = function() {
this.loaded = {}; this.loaded = {};
@ -37,6 +51,9 @@ DOMLoader.script = function() {
DOMLoader.script.prototype.add = function(config) { DOMLoader.script.prototype.add = function(config) {
var that = this; var that = this;
if (typeof(config) === "string") {
config = { src: config };
}
var srcs = config.srcs; var srcs = config.srcs;
if (typeof(srcs) === "undefined") { if (typeof(srcs) === "undefined") {
srcs = [{ srcs = [{
@ -49,7 +66,7 @@ DOMLoader.script.prototype.add = function(config) {
/// ///
var testElement = function(element, test) { var testElement = function(element, test) {
if (that.loaded[element.src]) return; if (that.loaded[element.src]) return;
if (test && !eval(test)) return; if (test && typeof(window[test]) === "undefined") return;
that.loaded[element.src] = true; that.loaded[element.src] = true;
// //
if (that.loading[element.src]) that.loading[element.src](); if (that.loading[element.src]) that.loading[element.src]();
@ -61,10 +78,23 @@ DOMLoader.script.prototype.add = function(config) {
/// ///
var batchTest = []; var batchTest = [];
var addElement = function(element) { var addElement = function(element) {
if (/([\w\d.\[\]])$/.test(element.verify)) { // check whether its a variable reference if (typeof(element) === "string") {
element.test = "(typeof(" + element.verify + ") !== \"undefined\")"; element = {
batchTest.push(element.test); src: element,
verify: config.verify
};
} }
if (/([\w\d.])$/.test(element.verify)) { // check whether its a variable reference
element.test = element.verify;
if (typeof(element.test) === "object") {
for (var key in element.test) {
batchTest.push(element.test[key]);
}
} else {
batchTest.push(element.test);
}
}
if (that.loaded[element.src]) return;
var script = document.createElement("script"); var script = document.createElement("script");
script.onreadystatechange = function() { script.onreadystatechange = function() {
if (this.readyState !== "loaded" && this.readyState !== "complete") return; if (this.readyState !== "loaded" && this.readyState !== "complete") return;
@ -72,6 +102,9 @@ DOMLoader.script.prototype.add = function(config) {
}; };
script.onload = function() { script.onload = function() {
testElement(element); testElement(element);
};
script.onerror = function() {
}; };
script.setAttribute("type", "text/javascript"); script.setAttribute("type", "text/javascript");
script.setAttribute("src", element.src); script.setAttribute("src", element.src);
@ -87,7 +120,29 @@ DOMLoader.script.prototype.add = function(config) {
testElement(srcs[n], srcs[n].test); testElement(srcs[n], srcs[n].test);
} }
} }
if (!config.strictOrder && eval(batchTest.join(" && "))) { // finished loading all the requested scripts var istrue = true;
for (var n = 0; n < batchTest.length; n ++) {
var test = batchTest[n];
if (test && test.indexOf(".") !== -1) {
test = test.split(".");
var level0 = window[test[0]];
if (typeof(level0) === "undefined") continue;
if (test.length === 2) { //- this is a bit messy and could handle more cases
if (typeof(level0[test[1]]) === "undefined") {
istrue = false;
}
} else if (test.length === 3) {
if (typeof(level0[test[1]][test[2]]) === "undefined") {
istrue = false;
}
}
} else {
if (typeof(window[test]) === "undefined") {
istrue = false;
}
}
}
if (!config.strictOrder && istrue) { // finished loading all the requested scripts
if (config.callback) config.callback(); if (config.callback) config.callback();
} else { // keep calling back the function } else { // keep calling back the function
setTimeout(function() { //- should get slower over time? setTimeout(function() { //- should get slower over time?
@ -121,11 +176,12 @@ DOMLoader.script.prototype.add = function(config) {
getNext(); getNext();
} else { // loose ordering } else { // loose ordering
for (var ID = 0; ID < srcs.length; ID ++) { for (var ID = 0; ID < srcs.length; ID ++) {
if (that.loaded[srcs[ID].src]) return;
addElement(srcs[ID]); addElement(srcs[ID]);
} }
onLoad(); onLoad();
} }
}; };
DOMLoader.script = (new DOMLoader.script()); DOMLoader.script = (new DOMLoader.script());
})();

156
js/Event.js → js/Window/Event.js
View file

@ -203,7 +203,7 @@
* Track for proper command/control-key for Mac/PC. * Track for proper command/control-key for Mac/PC.
---------------------------------------------------- ----------------------------------------------------
Event.add(window, "keyup keydown", Event.proxy.metaTracker); Event.add(window, "keyup keydown", Event.proxy.metaTracker);
console.log(Event.metaKey); console.log(Event.proxy.metaKey);
* Test for event features, in this example Drag & Drop file support. * Test for event features, in this example Drag & Drop file support.
---------------------------------------------------- ----------------------------------------------------
@ -269,31 +269,37 @@ var eventManager = function(target, type, listener, configure, trigger) {
configure = configure || {}; configure = configure || {};
// Check for element to load on interval (before onload). // Check for element to load on interval (before onload).
if (typeof(target) === "string" && type === "ready") { if (typeof(target) === "string" && type === "ready") {
var time = (new Date).getTime();
var timeout = configure.timeout; var timeout = configure.timeout;
var speed = configure.interval || 1000 / 60; var ms = configure.interval || 1000 / 60;
var interval = setInterval(function() { var interval = setInterval(function() {
if ((new Date).getTime() - time > timeout) {
clearInterval(interval);
}
if (document.querySelector(target)) { if (document.querySelector(target)) {
clearInterval(interval); clearInterval(interval);
listener(); listener();
} }
}, speed); }, ms);
return; return;
} }
// Get DOM element from Query Selector. // Get DOM element from Query Selector.
if (typeof(target) === "string") { if (typeof(target) === "string") {
target = document.querySelectorAll(target); target = document.querySelectorAll(target);
if (target.length === 0) return; if (target.length === 0) return createError("Missing target on listener!"); // No results.
if (target.length === 1) { if (target.length === 1) { // Single target.
target = target[0]; target = target[0];
} else { /// Handle multiple targets.
var events = {};
for (var n = 0, length = target.length; n < length; n ++) {
var event = eventManager(target[n], type, listener, configure, trigger);
if (event) events[n] = event;
}
return batch(events);
} }
} }
/// Handle multiple targets.
if (target.length > 0) {
var events = {};
for (var n = 0, length = target.length; n < length; n ++) {
var event = eventManager(target[n], type, listener, clone(configure), trigger);
if (event) events[n] = event;
}
return createBatchCommands(events);
}
// Check for multiple events in one string. // Check for multiple events in one string.
if (type.indexOf && type.indexOf(" ") !== -1) type = type.split(" "); if (type.indexOf && type.indexOf(" ") !== -1) type = type.split(" ");
if (type.indexOf && type.indexOf(",") !== -1) type = type.split(","); if (type.indexOf && type.indexOf(",") !== -1) type = type.split(",");
@ -302,23 +308,23 @@ var eventManager = function(target, type, listener, configure, trigger) {
var events = {}; var events = {};
if (typeof(type.length) === "number") { // Handle multiple listeners glued together. if (typeof(type.length) === "number") { // Handle multiple listeners glued together.
for (var n = 0, length = type.length; n < length; n ++) { // Array [type] for (var n = 0, length = type.length; n < length; n ++) { // Array [type]
var event = eventManager(target, type[n], listener, configure, trigger); var event = eventManager(target, type[n], listener, clone(configure), trigger);
if (event) events[type[n]] = event; if (event) events[type[n]] = event;
} }
} else { // Handle multiple listeners. } else { // Handle multiple listeners.
for (var key in type) { // Object {type} for (var key in type) { // Object {type}
if (typeof(type[key]) === "function") { // without configuration. if (typeof(type[key]) === "function") { // without configuration.
var event = eventManager(target, key, type[key], configure, trigger); var event = eventManager(target, key, type[key], clone(configure), trigger);
} else { // with configuration. } else { // with configuration.
var event = eventManager(target, key, type[key].listener, type[key], trigger); var event = eventManager(target, key, type[key].listener, clone(type[key]), trigger);
} }
if (event) events[key] = event; if (event) events[key] = event;
} }
} }
return batch(events); return createBatchCommands(events);
} }
// Ensure listener is a function. // Ensure listener is a function.
if (typeof(listener) !== "function") return; if (typeof(listener) !== "function") return createError("Listener is not a function! ", target, type, listener);
// Generate a unique wrapper identifier. // Generate a unique wrapper identifier.
var useCapture = configure.useCapture || false; var useCapture = configure.useCapture || false;
var id = normalize(type) + getID(target) + "." + getID(listener) + "." + (useCapture ? 1 : 0); var id = normalize(type) + getID(target) + "." + getID(listener) + "." + (useCapture ? 1 : 0);
@ -346,14 +352,13 @@ var eventManager = function(target, type, listener, configure, trigger) {
wrappers[id] = root.proxy[type](configure); wrappers[id] = root.proxy[type](configure);
} }
} else { // Fire native event. } else { // Fire native event.
var type = normalize(type);
if (trigger === "remove") { // Remove event listener. if (trigger === "remove") { // Remove event listener.
if (!wrappers[id]) return; // Already removed. if (!wrappers[id]) return; // Already removed.
target[remove](type, listener, useCapture); target[remove](type, listener, useCapture);
delete wrappers[id]; delete wrappers[id];
} else if (trigger === "add") { // Attach event listener. } else if (trigger === "add") { // Attach event listener.
if (wrappers[id]) return wrappers[id]; // Already attached. if (wrappers[id]) return wrappers[id]; // Already attached.
var type = normalize(type);
// Attach listener.
target[add](type, listener, useCapture); target[add](type, listener, useCapture);
// Record wrapper. // Record wrapper.
wrappers[id] = { wrappers[id] = {
@ -370,7 +375,7 @@ var eventManager = function(target, type, listener, configure, trigger) {
}; };
/// Perform batch actions on multiple events. /// Perform batch actions on multiple events.
var batch = function(events) { var createBatchCommands = function(events) {
return { return {
remove: function() { // Remove multiple events. remove: function() { // Remove multiple events.
for (var key in events) { for (var key in events) {
@ -385,6 +390,13 @@ var batch = function(events) {
}; };
}; };
/// Display error message in console.
var createError = function(message) {
if (typeof(console) === "undefined") return;
if (typeof(console.error) === "undefined") return;
console.error(arguments);
};
/// Handle naming discrepancies between platforms. /// Handle naming discrepancies between platforms.
var normalize = (function() { var normalize = (function() {
var translate = {}; var translate = {};
@ -423,7 +435,7 @@ var counter = 0;
var getID = function(object) { var getID = function(object) {
if (object === window) return "#window"; if (object === window) return "#window";
if (object === document) return "#document"; if (object === document) return "#document";
if (!object) return console.log("Missing target on listener!"); if (!object) return createError("Missing target on listener!");
if (!object.uniqueID) object.uniqueID = "id" + counter ++; if (!object.uniqueID) object.uniqueID = "id" + counter ++;
return object.uniqueID; return object.uniqueID;
}; };
@ -442,7 +454,6 @@ root.createPointerEvent = function (event, self, preventRecord) {
var eventName = self.gesture; var eventName = self.gesture;
var target = self.target; var target = self.target;
var pts = event.changedTouches || root.proxy.getCoords(event); var pts = event.changedTouches || root.proxy.getCoords(event);
///
if (pts.length) { if (pts.length) {
var pt = pts[0]; var pt = pts[0];
self.pointers = preventRecord ? [] : pts; self.pointers = preventRecord ? [] : pts;
@ -568,19 +579,28 @@ root.pointerSetup = function(conf, self) {
/// ///
if (Event.modifyEventListener) conf.listener = Event.createPointerEvent; if (Event.modifyEventListener) conf.listener = Event.createPointerEvent;
/// Convenience commands. /// Convenience commands.
var fingers = 0;
var type = self.gesture.indexOf("pointer") === 0 && Event.modifyEventListener ? "pointer" : "mouse"; var type = self.gesture.indexOf("pointer") === 0 && Event.modifyEventListener ? "pointer" : "mouse";
self.proxy = function(listener) {
self.defaultListener = conf.listener;
conf.listener = listener;
listener(conf.event, self);
};
self.remove = function() { self.remove = function() {
if (conf.onPointerDown) Event.remove(conf.target, type + "down", conf.onPointerDown); if (conf.onPointerDown) Event.remove(conf.target, type + "down", conf.onPointerDown);
if (conf.onPointerMove) Event.remove(conf.doc, type + "move", conf.onPointerMove); if (conf.onPointerMove) Event.remove(conf.doc, type + "move", conf.onPointerMove);
if (conf.onPointerUp) Event.remove(conf.doc, type + "up", conf.onPointerUp); if (conf.onPointerUp) Event.remove(conf.doc, type + "up", conf.onPointerUp);
}; };
self.enable = function(opt) { self.resume = function(opt) {
if (conf.onPointerMove && (!opt || opt.move)) Event.add(conf.doc, type + "move", conf.onPointerMove); if (conf.onPointerMove && (!opt || opt.move)) Event.add(conf.doc, type + "move", conf.onPointerMove);
if (conf.onPointerUp && (!opt || opt.move)) Event.add(conf.doc, type + "up", conf.onPointerUp); if (conf.onPointerUp && (!opt || opt.move)) Event.add(conf.doc, type + "up", conf.onPointerUp);
conf.fingers = fingers;
}; };
self.disable = function(opt) { self.pause = function(opt) {
fingers = conf.fingers;
if (conf.onPointerMove && (!opt || opt.move)) Event.remove(conf.doc, type + "move", conf.onPointerMove); if (conf.onPointerMove && (!opt || opt.move)) Event.remove(conf.doc, type + "move", conf.onPointerMove);
if (conf.onPointerUp && (!opt || opt.up)) Event.remove(conf.doc, type + "up", conf.onPointerUp); if (conf.onPointerUp && (!opt || opt.up)) Event.remove(conf.doc, type + "up", conf.onPointerUp);
conf.fingers = 0;
}; };
/// ///
return self; return self;
@ -614,8 +634,13 @@ root.pointerStart = function(event, self, conf) {
break; break;
} }
/// ///
var x = (touch.pageX + bbox.scrollLeft - pt.offsetX) * bbox.scaleX; if (conf.position === "relative") {
var y = (touch.pageY + bbox.scrollTop - pt.offsetY) * bbox.scaleY; var x = (touch.pageX + bbox.scrollLeft - pt.offsetX) * bbox.scaleX;
var y = (touch.pageY + bbox.scrollTop - pt.offsetY) * bbox.scaleY;
} else {
var x = (touch.pageX - pt.offsetX);
var y = (touch.pageY - pt.offsetY);
}
/// ///
pt.rotation = 0; pt.rotation = 0;
pt.scale = 1; pt.scale = 1;
@ -625,7 +650,13 @@ root.pointerStart = function(event, self, conf) {
/// ///
conf.fingers ++; conf.fingers ++;
}; };
// ///
conf.event = event;
if (self.defaultListener) {
conf.listener = self.defaultListener;
delete self.defaultListener;
}
///
var isTouchStart = !conf.fingers; var isTouchStart = !conf.fingers;
var track = conf.tracker; var track = conf.tracker;
var touches = event.changedTouches || root.getCoords(event); var touches = event.changedTouches || root.getCoords(event);
@ -658,7 +689,7 @@ root.pointerStart = function(event, self, conf) {
addTouchStart(touch, sid); addTouchStart(touch, sid);
} else { // Start tracking fingers. } else { // Start tracking fingers.
track = conf.tracker = {}; track = conf.tracker = {};
conf.bbox = root.getBoundingBox(conf.target); self.bbox = conf.bbox = root.getBoundingBox(conf.target);
conf.fingers = 0; conf.fingers = 0;
conf.cancel = false; conf.cancel = false;
addTouchStart(touch, sid); addTouchStart(touch, sid);
@ -788,7 +819,10 @@ root.getCoord = function(event) {
}; };
} else if(typeof(event.pageX) !== "undefined" && typeof(event.pageY) !== "undefined") { // Desktop browsers. } else if(typeof(event.pageX) !== "undefined" && typeof(event.pageY) !== "undefined") { // Desktop browsers.
root.getCoord = function(event) { root.getCoord = function(event) {
return event; return {
x: event.pageX,
y: event.pageY
};
}; };
} else { // Internet Explorer <=8.0 } else { // Internet Explorer <=8.0
root.getCoord = function(event) { root.getCoord = function(event) {
@ -855,7 +889,7 @@ root.getBoundingBox = function(o) {
Keep track of metaKey, the proper ctrlKey for users platform. Keep track of metaKey, the proper ctrlKey for users platform.
*/ */
root.metaTracker = (function() { (function() {
var agent = navigator.userAgent.toLowerCase(); var agent = navigator.userAgent.toLowerCase();
var mac = agent.indexOf("macintosh") !== -1; var mac = agent.indexOf("macintosh") !== -1;
if (mac && agent.indexOf("khtml") !== -1) { // chrome, safari. if (mac && agent.indexOf("khtml") !== -1) { // chrome, safari.
@ -865,7 +899,10 @@ root.metaTracker = (function() {
} else { // windows, linux, or mac opera. } else { // windows, linux, or mac opera.
var watch = { 17: true }; var watch = { 17: true };
} }
return function(event) { root.isMetaKey = function(event) {
return !!watch[event.keyCode];
};
root.metaTracker = function(event) {
if (watch[event.keyCode]) { if (watch[event.keyCode]) {
root.metaKey = event.type === "keydown"; root.metaKey = event.type === "keydown";
} }
@ -911,8 +948,13 @@ root.click = function(conf) {
var pointer = pointers[0]; var pointer = pointers[0];
var bbox = conf.bbox; var bbox = conf.bbox;
var newbbox = root.getBoundingBox(conf.target); var newbbox = root.getBoundingBox(conf.target);
var ax = (pointer.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX; if (conf.position === "relative") {
var ay = (pointer.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY; var ax = (pointer.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX;
var ay = (pointer.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY;
} else {
var ax = (pointer.pageX - bbox.x1);
var ay = (pointer.pageY - bbox.y1);
}
if (ax > 0 && ax < bbox.width && // Within target coordinates. if (ax > 0 && ax < bbox.width && // Within target coordinates.
ay > 0 && ay < bbox.height && ay > 0 && ay < bbox.height &&
bbox.scrollTop === newbbox.scrollTop) { bbox.scrollTop === newbbox.scrollTop) {
@ -984,8 +1026,13 @@ root.dblclick = function(conf) {
pointer1 = pointers[0]; pointer1 = pointers[0];
} }
var bbox = conf.bbox; var bbox = conf.bbox;
var ax = (pointer1.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX; if (conf.position === "relative") {
var ay = (pointer1.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY; var ax = (pointer1.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX;
var ay = (pointer1.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY;
} else {
var ax = (pointer1.pageX - bbox.x1);
var ay = (pointer1.pageY - bbox.y1);
}
if (!(ax > 0 && ax < bbox.width && // Within target coordinates.. if (!(ax > 0 && ax < bbox.width && // Within target coordinates..
ay > 0 && ay < bbox.height && ay > 0 && ay < bbox.height &&
Math.abs(pointer1.pageX - pointer0.pageX) <= 25 && // Within drift deviance. Math.abs(pointer1.pageX - pointer0.pageX) <= 25 && // Within drift deviance.
@ -1044,6 +1091,18 @@ if (typeof(Event.proxy) === "undefined") Event.proxy = {};
Event.proxy = (function(root) { "use strict"; Event.proxy = (function(root) { "use strict";
root.dragElement = function(that, event) {
root.drag({
event: event,
target: that,
position: "move",
listener: function(event, self) {
that.style.left = self.x + "px";
that.style.top = self.y + "px";
}
});
};
root.drag = function(conf) { root.drag = function(conf) {
conf.gesture = "drag"; conf.gesture = "drag";
conf.onPointerDown = function (event) { conf.onPointerDown = function (event) {
@ -1071,8 +1130,13 @@ root.drag = function(conf) {
self.identifier = identifier; self.identifier = identifier;
self.start = pt.start; self.start = pt.start;
self.fingers = 1; // TODO(mud): option to track as single set, or individually. self.fingers = 1; // TODO(mud): option to track as single set, or individually.
self.x = (pt.pageX + bbox.scrollLeft - pt.offsetX) * bbox.scaleX; if (conf.position === "relative") {
self.y = (pt.pageY + bbox.scrollTop - pt.offsetY) * bbox.scaleY; self.x = (pt.pageX + bbox.scrollLeft - pt.offsetX) * bbox.scaleX;
self.y = (pt.pageY + bbox.scrollTop - pt.offsetY) * bbox.scaleY;
} else {
self.x = (pt.pageX - pt.offsetX);
self.y = (pt.pageY - pt.offsetY);
}
/// ///
conf.listener(event, self); conf.listener(event, self);
} }
@ -1157,8 +1221,13 @@ root.gesture = function(conf) {
// Check whether "pt" is used by another gesture. // Check whether "pt" is used by another gesture.
if (!pt) continue; if (!pt) continue;
// Find the actual coordinates. // Find the actual coordinates.
pt.move.x = (touch.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX; if (conf.position === "relative") {
pt.move.y = (touch.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY; pt.move.x = (touch.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX;
pt.move.y = (touch.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY;
} else {
pt.move.x = (touch.pageX - bbox.x1);
pt.move.y = (touch.pageY - bbox.y1);
}
} }
/// ///
if (conf.fingers < conf.minFingers) return; if (conf.fingers < conf.minFingers) return;
@ -1564,8 +1633,13 @@ root.longpress = function(conf) {
var identifier = touch.identifier || Infinity; var identifier = touch.identifier || Infinity;
var pt = conf.tracker[identifier]; var pt = conf.tracker[identifier];
if (!pt) continue; if (!pt) continue;
var x = (touch.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX; if (conf.position === "relative") {
var y = (touch.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY; var x = (touch.pageX + bbox.scrollLeft - bbox.x1) * bbox.scaleX;
var y = (touch.pageY + bbox.scrollTop - bbox.y1) * bbox.scaleY;
} else {
var x = (touch.pageX - bbox.x1);
var y = (touch.pageY - bbox.y1);
}
if (!(x > 0 && x < bbox.width && // Within target coordinates.. if (!(x > 0 && x < bbox.width && // Within target coordinates..
y > 0 && y < bbox.height && y > 0 && y < bbox.height &&
Math.abs(x - pt.start.x) <= 25 && // Within drift deviance. Math.abs(x - pt.start.x) <= 25 && // Within drift deviance.