146 lines
3 KiB
JavaScript
Executable file
146 lines
3 KiB
JavaScript
Executable file
/**
|
|
* Cassette Demo page JS - you don't need this part.
|
|
*/
|
|
|
|
(function() {
|
|
|
|
function init() {
|
|
|
|
// Demo-specific things: background-switching, etc.
|
|
|
|
var bgIndex = 1,
|
|
backgrounds;
|
|
|
|
// note: remote servers will need to serve a CORS response header for cross-domain canvas access.
|
|
backgrounds = [
|
|
'image/demo_backgrounds/sfatnight_1600.jpg',
|
|
'http://freshly-ground.com/data/image/sm2/lake_1600.jpg',
|
|
'http://freshly-ground.com/data/image/sm2/wall_of_hard_drives.jpg',
|
|
'http://freshly-ground.com/data/image/sm2/attack_of_the_jellyfish.jpg',
|
|
'http://freshly-ground.com/data/image/sm2/cassette_tape_lamp.jpg'
|
|
];
|
|
|
|
document.getElementById('nextBackground').onclick = function(e) {
|
|
|
|
var i, j, refreshed,
|
|
loader = document.getElementById('tape-loader');
|
|
|
|
function refreshDone() {
|
|
// re-hide the loader
|
|
refreshed++;
|
|
if (refreshed == tapeUIs.length) {
|
|
if (loader) {
|
|
loader.className = 'hidden';
|
|
}
|
|
}
|
|
}
|
|
|
|
// hack: make the loader visible again
|
|
if (loader) {
|
|
loader.className = 'visible';
|
|
}
|
|
|
|
document.getElementsByTagName('html')[0].style.backgroundImage = 'url(' + backgrounds[bgIndex] + ')';
|
|
|
|
refreshed = 0;
|
|
|
|
for (i=0, j=tapeUIs.length; i<j; i++) {
|
|
tapeUIs[i].refreshBlurImage(refreshDone);
|
|
}
|
|
|
|
if (++bgIndex >= backgrounds.length) {
|
|
bgIndex = 0;
|
|
}
|
|
|
|
e.preventDefault();
|
|
return false;
|
|
|
|
}
|
|
|
|
// form helpers
|
|
|
|
var form = document.getElementById('tape-form'),
|
|
defaultValue,
|
|
input;
|
|
|
|
if (form) {
|
|
|
|
input = form.getElementsByTagName('input')[0];
|
|
|
|
function submitHandler(e) {
|
|
|
|
var inputURL = input.value,
|
|
s = soundManager.getSoundById('tapeSound'),
|
|
lastValue,
|
|
caughtSubmit;
|
|
|
|
// URL should at least have two slashes in it, to be considered valid.
|
|
if (s && inputURL.match(/\/\//) && s.url !== inputURL) {
|
|
|
|
s.load({
|
|
url: inputURL
|
|
}).play();
|
|
|
|
}
|
|
|
|
if (e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
// is the form focused? blur if so.
|
|
if (document.activeElement && document.activeElement == input) {
|
|
try {
|
|
caughtSubmit = true;
|
|
input.blur();
|
|
} catch(ee) {
|
|
// oh well
|
|
}
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
form.onsubmit = submitHandler;
|
|
|
|
// reset form on load
|
|
defaultValue = input.getAttribute('data-default-value');
|
|
|
|
input.value = defaultValue;
|
|
|
|
input.onfocus = function() {
|
|
|
|
caughtSubmit = false;
|
|
|
|
lastValue = this.value;
|
|
|
|
this.value = '';
|
|
|
|
}
|
|
|
|
input.onblur = function() {
|
|
|
|
if (!this.value) {
|
|
|
|
this.value = (lastValue || defaultValue);
|
|
|
|
}
|
|
|
|
if (!caughtSubmit) {
|
|
// user tabbed out, etc.? we may load a new URL now.
|
|
submitHandler();
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
soundManager.setup({
|
|
onready: init,
|
|
ontimeout: init
|
|
});
|
|
|
|
}());
|