2011-02-03 03:12:01 +00:00
|
|
|
GUI.millis = function() {
|
|
|
|
var d = new Date();
|
|
|
|
return d.getTime();
|
|
|
|
}
|
|
|
|
|
2011-02-02 19:43:49 +00:00
|
|
|
GUI.Timer = function(gui) {
|
|
|
|
|
|
|
|
var _this = this;
|
|
|
|
|
2011-02-02 20:51:58 +00:00
|
|
|
this.hoverPoint = null;
|
|
|
|
this.activePoint = null;
|
|
|
|
|
2011-02-02 19:43:49 +00:00
|
|
|
this.gui = gui;
|
|
|
|
this.gui.timer = this;
|
|
|
|
|
2011-02-08 20:56:00 +00:00
|
|
|
this.gui.domElement.setAttribute('class', 'guidat time');
|
2011-02-09 18:27:59 +00:00
|
|
|
this.gui.domElement.style.width = '100%';
|
|
|
|
|
2011-02-08 20:56:00 +00:00
|
|
|
|
|
|
|
// Put toggle button on top.
|
|
|
|
var toggleButton = this.gui.domElement.lastChild;
|
2011-02-09 18:27:59 +00:00
|
|
|
|
2011-02-08 20:56:00 +00:00
|
|
|
this.gui.domElement.removeChild(toggleButton);
|
|
|
|
this.gui.domElement.insertBefore(toggleButton, this.gui.domElement.firstChild);
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
|
|
|
|
// Create tween dropdown.
|
|
|
|
this.tweenSelector = document.createElement('select');
|
|
|
|
this.tweenSelector.setAttribute('class', 'guidat-tween-selector');
|
|
|
|
for (var i in GUI.Easing) {
|
|
|
|
var opt = document.createElement('option');
|
|
|
|
opt.innerHTML = i;
|
|
|
|
this.tweenSelector.appendChild(opt);
|
|
|
|
}
|
|
|
|
this.tweenSelector.addEventListener('change', function(e) {
|
|
|
|
alert("CHANGE");
|
|
|
|
if (_this.activePoint != null) {
|
|
|
|
_this.activePoint.tween = GUI.Easing[this.value];
|
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
this.gui.domElement.appendChild(this.tweenSelector);
|
|
|
|
|
|
|
|
|
2011-02-02 19:43:49 +00:00
|
|
|
var playhead = 0;
|
|
|
|
var lastPlayhead = 0;
|
2011-02-08 15:40:38 +00:00
|
|
|
|
2011-02-02 19:43:49 +00:00
|
|
|
var playListeners = [];
|
|
|
|
var windowListeners = [];
|
|
|
|
|
|
|
|
var windowWidth = 10000;
|
2011-02-03 03:12:01 +00:00
|
|
|
var windowMin = -windowWidth/4;
|
2011-02-02 19:43:49 +00:00
|
|
|
|
|
|
|
var thisTime;
|
|
|
|
var lastTime;
|
|
|
|
|
|
|
|
var playInterval = -1;
|
|
|
|
var playResolution = 1000/60;
|
|
|
|
|
|
|
|
var playing = false;
|
|
|
|
|
2011-02-08 15:40:38 +00:00
|
|
|
var snapIncrement = 250;
|
|
|
|
var useSnap = false;
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('useSnap', function() {
|
2011-02-08 15:40:38 +00:00
|
|
|
return useSnap;
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineSetter__('useSnap', function(v) {
|
2011-02-08 15:40:38 +00:00
|
|
|
useSnap = v;
|
|
|
|
for (var i in _this.scrubbers) {
|
|
|
|
_this.scrubbers[i].render();
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('snapIncrement', function() {
|
2011-02-08 15:40:38 +00:00
|
|
|
return snapIncrement;
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineSetter__('snapIncrement', function(v) {
|
2011-02-08 15:40:38 +00:00
|
|
|
if (snapIncrement > 0) {
|
|
|
|
snapIncrement = v;
|
|
|
|
for (var i in _this.scrubbers) {
|
|
|
|
_this.scrubbers[i].render();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.snap = function(t) {
|
|
|
|
|
|
|
|
if (!this.useSnap) {
|
|
|
|
return t;
|
|
|
|
}
|
|
|
|
|
|
|
|
var r = Math.round(t/this.snapIncrement)*this.snapIncrement;
|
|
|
|
return r;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.scrubbers = [];
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
window.addEventListener('keyup', function(e) {
|
|
|
|
if (GUI.disableKeyListeners) return;
|
2011-02-03 00:01:12 +00:00
|
|
|
switch (e.keyCode) {
|
|
|
|
case 32:
|
|
|
|
_this.playPause();
|
|
|
|
break;
|
|
|
|
case 13:
|
|
|
|
_this.stop();
|
|
|
|
break;
|
|
|
|
case 8:
|
|
|
|
if (_this.activePoint != null) {
|
|
|
|
_this.activePoint.remove();
|
|
|
|
_this.activePoint = null;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
|
2011-02-08 15:40:38 +00:00
|
|
|
this.getSaveObject = function() {
|
|
|
|
|
|
|
|
var scrubberArr = [];
|
|
|
|
|
|
|
|
for (var i in _this.scrubbers) {
|
|
|
|
scrubberArr.push(_this.scrubbers[i].getSaveObject());
|
|
|
|
}
|
|
|
|
|
|
|
|
var obj = {'windowMin':_this.windowMin,
|
|
|
|
'windowWidth':_this.windowWidth,
|
|
|
|
'playhead':_this.playhead,
|
|
|
|
'snapIncrement': _this.snapIncrement,
|
|
|
|
'scrubbers': scrubberArr};
|
|
|
|
|
|
|
|
return obj;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('windowMin', function() {
|
2011-02-02 19:43:49 +00:00
|
|
|
return windowMin;
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineSetter__('windowMin', function(v) {
|
2011-02-02 19:43:49 +00:00
|
|
|
windowMin = v;
|
|
|
|
for (var i in windowListeners) {
|
|
|
|
windowListeners[i].call(windowListeners[i]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('windowWidth', function() {
|
2011-02-02 19:43:49 +00:00
|
|
|
return windowWidth;
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineSetter__('windowWidth', function(v) {
|
|
|
|
// TODO: Make these constants.
|
|
|
|
windowWidth = GUI.constrain(v, 1000, 60000);
|
2011-02-02 19:43:49 +00:00
|
|
|
for (var i in windowListeners) {
|
|
|
|
windowListeners[i].call(windowListeners[i]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('playhead', function() {
|
2011-02-02 19:43:49 +00:00
|
|
|
return playhead;
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineSetter__('playhead', function(t) {
|
2011-02-02 19:43:49 +00:00
|
|
|
lastPlayhead = playhead;
|
|
|
|
playhead = t;
|
2011-02-03 00:01:12 +00:00
|
|
|
if (playing) {
|
|
|
|
windowMin += ((playhead-windowWidth/2)-windowMin)*0.3;
|
|
|
|
}
|
2011-02-02 19:43:49 +00:00
|
|
|
for (var i = 0; i < playListeners.length; i++) {
|
|
|
|
playListeners[i].call(this, playhead, lastPlayhead);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2011-02-09 18:27:59 +00:00
|
|
|
this.__defineGetter__('playing', function() {
|
2011-02-02 19:43:49 +00:00
|
|
|
return playing;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.play = function() {
|
|
|
|
playing = true;
|
2011-02-03 03:12:01 +00:00
|
|
|
lastTime = GUI.millis();
|
2011-02-02 19:43:49 +00:00
|
|
|
if (playInterval == -1) {
|
|
|
|
playInterval = setInterval(this.update, playResolution);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
this.update = function() {
|
2011-02-03 03:12:01 +00:00
|
|
|
thisTime = GUI.millis();
|
2011-02-02 19:43:49 +00:00
|
|
|
_this.playhead = _this.playhead + (thisTime - lastTime);
|
|
|
|
lastTime = thisTime;
|
|
|
|
};
|
|
|
|
|
|
|
|
this.pause = function() {
|
|
|
|
playing = false;
|
|
|
|
clearInterval(playInterval);
|
|
|
|
playInterval = -1;
|
|
|
|
};
|
|
|
|
|
|
|
|
this.playPause = function() {
|
|
|
|
if (playing) {
|
|
|
|
this.pause();
|
|
|
|
} else {
|
|
|
|
this.play();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.stop = function() {
|
|
|
|
this.pause();
|
|
|
|
this.playhead = 0;
|
2011-02-03 03:12:01 +00:00
|
|
|
this.windowMin = -windowWidth/4;
|
2011-02-02 19:43:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
this.addPlayListener = function(fnc) {
|
|
|
|
playListeners.push(fnc);
|
|
|
|
};
|
|
|
|
|
|
|
|
this.addWindowListener = function(fnc) {
|
|
|
|
windowListeners.push(fnc);
|
|
|
|
};
|
|
|
|
|
2011-02-08 20:56:00 +00:00
|
|
|
}
|