mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-27 10:56:16 -04:00
Play/Pause working.
This commit is contained in:
parent
ccfb0e2d56
commit
ab9b55dbc4
1 changed files with 70 additions and 11 deletions
|
@ -21,11 +21,14 @@ require('./jquery.class');
|
|||
|
||||
$.Class("RevisionSlider",
|
||||
{//statics
|
||||
PLAYBACK_DELAY: 400,
|
||||
},
|
||||
{//instance
|
||||
init: function (connection, root_element) {
|
||||
this.connection = connection;
|
||||
this.revision_number = this.connection.getCurrentRevision().revnum;
|
||||
this.timestamp = 0;
|
||||
this.is_playing = false;
|
||||
// if there was a revision specified in the 'location.hash', jump to it.
|
||||
if (window.location.hash.length > 1) {
|
||||
var rev = Number(window.location.hash.substr(1));
|
||||
|
@ -79,11 +82,61 @@ $.Class("RevisionSlider",
|
|||
this.slider.createHandle(rev.revNum, "star");
|
||||
}
|
||||
},
|
||||
goToRevision: function (revnum) {
|
||||
//TODO: this should actually do an async jump to revision (with all the server fetching
|
||||
//and changeset rendering that that implies), and perform the setPosition in a callback.
|
||||
//TODO: we need some kind of callback for setting revision metadata.
|
||||
//TODO: at some point we need to set window.location.hash
|
||||
playpause: function () {
|
||||
if (this.is_playing) {
|
||||
this.is_playing = false;
|
||||
return;
|
||||
}
|
||||
|
||||
var revnum = this.revision_number;
|
||||
if (revnum == this.connection.head_revision)
|
||||
revnum = 0;
|
||||
|
||||
var _this = this;
|
||||
var keepPlaying = function (current_revnum) {
|
||||
if (current_revnum == _this.connection.head_revision)
|
||||
_this.is_playing = false;
|
||||
if (!_this.is_playing)
|
||||
return;
|
||||
setTimeout(function () {
|
||||
_this.goToRevision(current_revnum + 1, keepPlaying);
|
||||
}, RevisionSlider.PLAYBACK_DELAY);
|
||||
};
|
||||
|
||||
this.is_playing = true;
|
||||
this.goToRevision(revnum, keepPlaying);
|
||||
},
|
||||
/**
|
||||
* Update the UI elements to the current revision
|
||||
*/
|
||||
render: function () {
|
||||
this.elements.revision_label.html(html10n.get("timeslider.version", { "version": this.revision_number }));
|
||||
this.slider.setValue(this.revision_number);
|
||||
window.location.hash = "#" + this.revision_number;
|
||||
this.setTimestamp(this.timestamp);
|
||||
if (this.is_playing)
|
||||
this.elements.button_play.find("div").addClass("pause");
|
||||
else
|
||||
this.elements.button_play.find("div").removeClass("pause");
|
||||
if (this.revision_number == this.connection.head_revision)
|
||||
this.elements.button_right.addClass("disabled");
|
||||
else
|
||||
this.elements.button_right.removeClass("disabled");
|
||||
if (this.revision_number === 0)
|
||||
this.elements.button_left.addClass("disabled");
|
||||
else
|
||||
this.elements.button_left.removeClass("disabled");
|
||||
},
|
||||
/**
|
||||
* Go to a specific revision number. This will perform the actual
|
||||
* transition to the revision and set the UI elements as required
|
||||
* once the transition is done. The callback can be used to perform
|
||||
* actions after the transition is complete and the UI has been
|
||||
* updated.
|
||||
* @param {number} revnum - The revision to transition to.
|
||||
* @param {callback} atRevision_callback - The callback.
|
||||
*/
|
||||
goToRevision: function (revnum, atRevision_callback) {
|
||||
if (revnum > this.connection.head_revision)
|
||||
revnum = this.connection.latest_revision;
|
||||
if (revnum < 0)
|
||||
|
@ -94,15 +147,18 @@ $.Class("RevisionSlider",
|
|||
this.connection.goToRevision(revnum, function (revision, timestamp) {
|
||||
console.log("[revisionslider > goToRevision > callback]", revision, timestamp);
|
||||
//update UI elements:
|
||||
var revnum = revision.revnum;
|
||||
_this.elements.revision_label.html(html10n.get("timeslider.version", { "version": revnum }));
|
||||
_this.slider.setValue(revnum);
|
||||
_this.revision_number = revnum;
|
||||
window.location.hash = "#" + revnum;
|
||||
_this.setTimestamp(timestamp);
|
||||
_this.revision_number = revision.revnum;
|
||||
_this.timestamp = timestamp;
|
||||
_this.render.call(_this);
|
||||
//TODO: set the enabled/disabled for button-left and button-right
|
||||
if (atRevision_callback)
|
||||
atRevision_callback(revnum);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Set the timestamp and revision date displays
|
||||
* @param {number} timestamp - The timestamp of the current revision.
|
||||
*/
|
||||
setTimestamp: function (timestamp) {
|
||||
var zeropad = function (str, length) {
|
||||
str = str + "";
|
||||
|
@ -155,6 +211,9 @@ $.Class("RevisionSlider",
|
|||
_this.goToRevision(_this.revision_number + 1);
|
||||
});
|
||||
|
||||
this.elements.button_play.on("click", function (event) {
|
||||
_this.playpause();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue