mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-28 11:26:16 -04:00
Implement authorinfo; split RevisionSlider out
This commit is contained in:
s1341
parent
ed3e88ba20
commit
3c0bd5767b
4 changed files with 361 additions and 227 deletions
|
|
@ -16,212 +16,6 @@
|
||||||
|
|
||||||
var _ = require('./underscore');
|
var _ = require('./underscore');
|
||||||
var padmodals = require('./pad_modals').padmodals;
|
var padmodals = require('./pad_modals').padmodals;
|
||||||
var sliderui = require('./sliderui');
|
|
||||||
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));
|
|
||||||
if(!isNaN(rev))
|
|
||||||
this.revision_number = rev;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("New RevisionSlider, current_revision = %d", this.revision_number);
|
|
||||||
// parse the various elements we need:
|
|
||||||
this.elements = {};
|
|
||||||
this.loadElements(root_element);
|
|
||||||
var _this = this;
|
|
||||||
this.slider = new SliderUI(this.elements.slider_bar,
|
|
||||||
options = {
|
|
||||||
value: this.revision_number,
|
|
||||||
max: this.connection.getHeadRevision(),
|
|
||||||
change: function () { _this.onChange.apply(_this, arguments); },
|
|
||||||
slide: function () { _this.onSlide.apply(_this, arguments); },
|
|
||||||
});
|
|
||||||
this.loadSavedRevisionHandles();
|
|
||||||
this.slider.render();
|
|
||||||
|
|
||||||
this._mouseInit();
|
|
||||||
|
|
||||||
this.goToRevision(this.revision_number);
|
|
||||||
},
|
|
||||||
onChange: function (value) {
|
|
||||||
console.log("in change handler:", value);
|
|
||||||
this.goToRevision(value);
|
|
||||||
},
|
|
||||||
onSlide: function (value) {
|
|
||||||
console.log("in slide handler:", value);
|
|
||||||
this.goToRevision(value);
|
|
||||||
},
|
|
||||||
loadElements: function (root_element) {
|
|
||||||
this.elements.root = root_element;
|
|
||||||
//this.elements['slider-handle'] = root_element.first("#ui-slider-handle");
|
|
||||||
this.elements.slider_bar = root_element.find("#ui-slider-bar");
|
|
||||||
this.elements.slider = root_element.find("#timeslider-slider");
|
|
||||||
this.elements.button_left = root_element.find("#leftstep");
|
|
||||||
this.elements.button_right = root_element.find("#rightstep");
|
|
||||||
this.elements.button_play = root_element.find("#playpause_button");
|
|
||||||
this.elements.timestamp = root_element.find("#timer");
|
|
||||||
this.elements.revision_label = root_element.find("#revision_label");
|
|
||||||
this.elements.revision_date = root_element.find("#revision_date");
|
|
||||||
this.elements.authors = root_element.first("#authorsList");
|
|
||||||
},
|
|
||||||
loadSavedRevisionHandles: function () {
|
|
||||||
for (var r in this.connection.savedRevisions) {
|
|
||||||
var rev = this.connection.savedRevisions[r];
|
|
||||||
this.slider.createHandle(rev.revNum, "star");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
playpause: function () {
|
|
||||||
if (this.is_playing) {
|
|
||||||
this.is_playing = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var revnum = this.revision_number;
|
|
||||||
if (revnum == this.connection.getHeadRevision())
|
|
||||||
revnum = 0;
|
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
var keepPlaying = function (current_revnum) {
|
|
||||||
if (current_revnum == _this.connection.getHeadRevision())
|
|
||||||
_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.getHeadRevision())
|
|
||||||
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.getHeadRevision())
|
|
||||||
revnum = this.connection.latest_revision;
|
|
||||||
if (revnum < 0)
|
|
||||||
revnum = 0;
|
|
||||||
|
|
||||||
var _this = this;
|
|
||||||
this.connection.goToRevision(revnum, function (revision, timestamp) {
|
|
||||||
console.log("[revisionslider > goToRevision > callback]", revision, timestamp);
|
|
||||||
//update UI elements:
|
|
||||||
_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 + "";
|
|
||||||
while (str.length < length)
|
|
||||||
str = '0' + str;
|
|
||||||
return str;
|
|
||||||
};
|
|
||||||
var months = [
|
|
||||||
html10n.get("timeslider.month.january"),
|
|
||||||
html10n.get("timeslider.month.february"),
|
|
||||||
html10n.get("timeslider.month.march"),
|
|
||||||
html10n.get("timeslider.month.april"),
|
|
||||||
html10n.get("timeslider.month.may"),
|
|
||||||
html10n.get("timeslider.month.june"),
|
|
||||||
html10n.get("timeslider.month.july"),
|
|
||||||
html10n.get("timeslider.month.august"),
|
|
||||||
html10n.get("timeslider.month.september"),
|
|
||||||
html10n.get("timeslider.month.october"),
|
|
||||||
html10n.get("timeslider.month.november"),
|
|
||||||
html10n.get("timeslider.month.december")
|
|
||||||
];
|
|
||||||
var date = new Date(timestamp);
|
|
||||||
var timestamp_format = html10n.get("timeslider.dateformat",
|
|
||||||
{
|
|
||||||
"day": zeropad(date.getDate(), 2),
|
|
||||||
"month": zeropad(date.getMonth() + 1, 2),
|
|
||||||
"year": date.getFullYear(),
|
|
||||||
"hours": zeropad(date.getHours(), 2),
|
|
||||||
"minutes": zeropad(date.getMinutes(), 2),
|
|
||||||
"seconds": zeropad(date.getSeconds(), 2),
|
|
||||||
});
|
|
||||||
this.elements.timestamp.html(timestamp_format);
|
|
||||||
|
|
||||||
var revisionDate = html10n.get("timeslider.saved", {
|
|
||||||
"day": date.getDate(),
|
|
||||||
"month": months[date.getMonth()],
|
|
||||||
"year": date.getFullYear()
|
|
||||||
});
|
|
||||||
|
|
||||||
this.elements.revision_date.html(revisionDate);
|
|
||||||
},
|
|
||||||
_mouseInit: function () {
|
|
||||||
var _this = this;
|
|
||||||
this.elements.button_left.on("click", function (event) {
|
|
||||||
if ($(this).hasClass("disabled"))
|
|
||||||
return;
|
|
||||||
_this.is_playing = false;
|
|
||||||
_this.goToRevision(_this.revision_number - 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.elements.button_right.on("click", function (event) {
|
|
||||||
if ($(this).hasClass("disabled"))
|
|
||||||
return;
|
|
||||||
_this.is_playing = false;
|
|
||||||
_this.goToRevision(_this.revision_number + 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.elements.button_play.on("click", function (event) {
|
|
||||||
_this.playpause();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function init(connection, fireWhenAllScriptsAreLoaded)
|
function init(connection, fireWhenAllScriptsAreLoaded)
|
||||||
{
|
{
|
||||||
|
|
@ -230,7 +24,6 @@ function init(connection, fireWhenAllScriptsAreLoaded)
|
||||||
(function()
|
(function()
|
||||||
{ // wrap this code in its own namespace
|
{ // wrap this code in its own namespace
|
||||||
|
|
||||||
tsui = new RevisionSlider(connection, $("#timeslider-top"));
|
|
||||||
|
|
||||||
|
|
||||||
var clientVars = connection.clientVars;
|
var clientVars = connection.clientVars;
|
||||||
|
|
|
||||||
|
|
@ -533,9 +533,59 @@ Thread("ChangesetLoader",
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
var libcssmanager = require("./cssmanager");
|
||||||
|
var linestylefilter = require("./linestylefilter").linestylefilter;
|
||||||
|
var libcolorutils = require('./colorutils').colorutils;
|
||||||
|
$.Class("Author",
|
||||||
|
{//static
|
||||||
|
},
|
||||||
|
{//instance
|
||||||
|
init: function (id, data, palette) {
|
||||||
|
this.id = id;
|
||||||
|
this.name = data.name;
|
||||||
|
this.is_anonymous = !this.name;
|
||||||
|
// if the colorId is an integer, it's an index into the color palette,
|
||||||
|
// otherwise we assume it is a valid css color string
|
||||||
|
this.background_color = typeof data.colorId == "number" ? palette[data.colorId] : data.colorId;
|
||||||
|
// foreground color should be black unless the luminosity of the
|
||||||
|
// background color is lower than 0.5. This effectively makes sure
|
||||||
|
// that the text is readable.
|
||||||
|
this.color = (libcolorutils.luminosity(libcolorutils.css2triple(this.background_color)) < 0.5 ? "#ffffff" : "#000000");
|
||||||
|
// generate a css class name for this author.
|
||||||
|
this.cssclass = linestylefilter.getAuthorClassName(this.id);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Create and add a rule to the stylesheet setting the foreground and
|
||||||
|
* background colors for this authors cssclass. This class can then be
|
||||||
|
* applied to any span authored by this author, and the colors will just work.
|
||||||
|
* @param {object} cssmanager - A cssmanager wrapper for the stylesheet to
|
||||||
|
* which the rules should be added.
|
||||||
|
*/
|
||||||
|
addStyleRule: function (cssmanager) {
|
||||||
|
// retrieve a style selector for '.<authorid>' class, which is applied
|
||||||
|
// to blobs which were authored by that <authorid>.
|
||||||
|
var selector = cssmanager.selectorStyle("." + this.cssclass);
|
||||||
|
// apply the colors
|
||||||
|
selector.backgroundColor = this.background_color;
|
||||||
|
selector.color = this.color;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Retrieve the name of this user.
|
||||||
|
*/
|
||||||
|
getName: function () {
|
||||||
|
return this.is_anonymous ? "anonymous" : this.name;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Retrieve the cssclass for this user.
|
||||||
|
*/
|
||||||
|
getCSSClass: function () {
|
||||||
|
return this.cssclass;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
var AttribPool = require("./AttributePool");
|
var AttribPool = require("./AttributePool");
|
||||||
var domline = require("./domline").domline;
|
var domline = require("./domline").domline;
|
||||||
var linestylefilter = require("./linestylefilter").linestylefilter;
|
|
||||||
$.Class("PadClient",
|
$.Class("PadClient",
|
||||||
{//static
|
{//static
|
||||||
USE_COMPOSE: false,
|
USE_COMPOSE: false,
|
||||||
|
|
@ -545,19 +595,20 @@ $.Class("PadClient",
|
||||||
* Create a PadClient.
|
* Create a PadClient.
|
||||||
* @constructor
|
* @constructor
|
||||||
* @param {RevisionCache} revisionCache - A RevisionCache object to use.
|
* @param {RevisionCache} revisionCache - A RevisionCache object to use.
|
||||||
* @param {number} revision - The current revision of the pad.
|
* @param {dict} options - All the necessary options. TODO: document this.
|
||||||
* @param {datetime} timestamp - The timestamp of the current revision.
|
|
||||||
* @param {string} atext - The attributed text.
|
|
||||||
* @param {string} attribs - The attributes string.
|
|
||||||
* @param {object} apool - The attribute pool.
|
|
||||||
*/
|
*/
|
||||||
init: function (revisionCache, revision, timestamp, atext, attribs, apool) {
|
init: function (revisionCache, options) {
|
||||||
this.revisionCache = revisionCache;
|
this.revisionCache = revisionCache;
|
||||||
this.revision = this.revisionCache.getRevision(revision);
|
this.revision = this.revisionCache.getRevision(options.revnum);
|
||||||
this.timestamp = timestamp;
|
this.timestamp = options.timestamp;
|
||||||
this.alines = libchangeset.splitAttributionLines(attribs, atext);
|
this.alines = libchangeset.splitAttributionLines(options.atext.attributes, options.atext.text);
|
||||||
this.apool = (new AttribPool()).fromJsonable(apool);
|
this.apool = (new AttribPool()).fromJsonable(options.atext.apool);
|
||||||
this.lines = libchangeset.splitTextLines(atext);
|
this.lines = libchangeset.splitTextLines(options.atext.text);
|
||||||
|
this.authors = {};
|
||||||
|
this.dynamicCSS = libcssmanager.makeCSSManager('dynamicsyntax');
|
||||||
|
this.palette = options.palette;
|
||||||
|
|
||||||
|
this.updateAuthors(options.author_info);
|
||||||
|
|
||||||
//TODO: this is a kludge! we should receive the padcontent as an
|
//TODO: this is a kludge! we should receive the padcontent as an
|
||||||
//injected dependency
|
//injected dependency
|
||||||
|
|
@ -620,8 +671,30 @@ $.Class("PadClient",
|
||||||
atRevision_callback.call(_this, _this.revision, _this.timestamp);
|
atRevision_callback.call(_this, _this.revision, _this.timestamp);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* Update the authors of this pad.
|
||||||
|
* @param {object} author_info - The author info object sent by the server
|
||||||
|
*/
|
||||||
|
updateAuthors: function (author_info) {
|
||||||
|
var authors = author_info;
|
||||||
|
for (var authorid in authors) {
|
||||||
|
if (authorid in this.authors) {
|
||||||
|
// just dispose of existing ones instead of trying to update existing
|
||||||
|
// objects.
|
||||||
|
delete this.authors[authorid];
|
||||||
|
}
|
||||||
|
var author = new Author(authorid, authors[authorid], this.palette);
|
||||||
|
this.authors[authorid] = author;
|
||||||
|
author.addStyleRule(this.dynamicCSS);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Get a div jquery element for a given attributed text line.
|
||||||
|
* @param {string} text - The text content of the line.
|
||||||
|
* @param {string} atext - The attributes string.
|
||||||
|
* @return {jquery object} - The div element ready for insertion into the DOM.
|
||||||
|
*/
|
||||||
_getDivForLine: function (text, atext) {
|
_getDivForLine: function (text, atext) {
|
||||||
var dominfo = domline.createDomLine(text != '\n', true);
|
var dominfo = domline.createDomLine(text != '\n', true);
|
||||||
|
|
||||||
|
|
|
||||||
253
src/static/js/revisionslider.js
Normal file
253
src/static/js/revisionslider.js
Normal file
|
|
@ -0,0 +1,253 @@
|
||||||
|
var sliderui = require('./sliderui');
|
||||||
|
require('./jquery.class');
|
||||||
|
|
||||||
|
$.Class("RevisionSlider",
|
||||||
|
{//statics
|
||||||
|
/**
|
||||||
|
* The number of milliseconds to wait between revisions when playing back.
|
||||||
|
*/
|
||||||
|
PLAYBACK_DELAY: 400,
|
||||||
|
},
|
||||||
|
{//instance
|
||||||
|
/**
|
||||||
|
* Create a new RevisionSlider, given a connection to the server and a root
|
||||||
|
* element.
|
||||||
|
* @constructor
|
||||||
|
* @param {TimesliderClient} connection - The connection to the server.
|
||||||
|
* @param {jquery object} root_element - The element to build the slider on.
|
||||||
|
*/
|
||||||
|
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));
|
||||||
|
if(!isNaN(rev))
|
||||||
|
this.revision_number = rev;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("New RevisionSlider, current_revision = %d", this.revision_number);
|
||||||
|
// parse the various elements we need:
|
||||||
|
this.elements = {};
|
||||||
|
this.loadElements(root_element);
|
||||||
|
var _this = this;
|
||||||
|
this.slider = new SliderUI(this.elements.slider_bar,
|
||||||
|
options = {
|
||||||
|
value: this.revision_number,
|
||||||
|
max: this.connection.getHeadRevision(),
|
||||||
|
change: function () { _this.onChange.apply(_this, arguments); },
|
||||||
|
slide: function () { _this.onSlide.apply(_this, arguments); },
|
||||||
|
});
|
||||||
|
this.loadSavedRevisionHandles();
|
||||||
|
this.slider.render();
|
||||||
|
|
||||||
|
this._mouseInit();
|
||||||
|
|
||||||
|
this.goToRevision(this.revision_number);
|
||||||
|
},
|
||||||
|
onChange: function (value) {
|
||||||
|
console.log("in change handler:", value);
|
||||||
|
this.goToRevision(value);
|
||||||
|
},
|
||||||
|
onSlide: function (value) {
|
||||||
|
console.log("in slide handler:", value);
|
||||||
|
this.goToRevision(value);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Populate the elements dictionary with the various elements we might want
|
||||||
|
* to use.
|
||||||
|
* @param {jquery object} root_element - The root element of this slider.
|
||||||
|
*/
|
||||||
|
loadElements: function (root_element) {
|
||||||
|
this.elements.root = root_element;
|
||||||
|
this.elements.slider_bar = root_element.find("#ui-slider-bar");
|
||||||
|
this.elements.slider = root_element.find("#timeslider-slider");
|
||||||
|
this.elements.button_left = root_element.find("#leftstep");
|
||||||
|
this.elements.button_right = root_element.find("#rightstep");
|
||||||
|
this.elements.button_play = root_element.find("#playpause_button");
|
||||||
|
this.elements.timestamp = root_element.find("#timer");
|
||||||
|
this.elements.revision_label = root_element.find("#revision_label");
|
||||||
|
this.elements.revision_date = root_element.find("#revision_date");
|
||||||
|
this.elements.authors = root_element.find("#authorsList");
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Create 'star' handles on the slider for each saved revision.
|
||||||
|
*/
|
||||||
|
loadSavedRevisionHandles: function () {
|
||||||
|
for (var r in this.connection.savedRevisions) {
|
||||||
|
var rev = this.connection.savedRevisions[r];
|
||||||
|
this.slider.createHandle(rev.revNum, "star");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Toggle (and execute) the playback mode.
|
||||||
|
*/
|
||||||
|
playpause: function () {
|
||||||
|
if (this.is_playing) {
|
||||||
|
this.is_playing = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var revnum = this.revision_number;
|
||||||
|
if (revnum == this.connection.getHeadRevision())
|
||||||
|
revnum = 0;
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
var keepPlaying = function (current_revnum) {
|
||||||
|
if (current_revnum == _this.connection.getHeadRevision())
|
||||||
|
_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.getHeadRevision())
|
||||||
|
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");
|
||||||
|
|
||||||
|
this.renderAuthors();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the authors line.
|
||||||
|
*/
|
||||||
|
renderAuthors: function () {
|
||||||
|
//TODO: consider alphabetizing the authors?
|
||||||
|
var authors = this.connection.getAuthors();
|
||||||
|
this.elements.authors.empty();
|
||||||
|
if ($.isEmptyObject(authors)) {
|
||||||
|
this.elements.authors.append("No authors");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (var authorid in authors) {
|
||||||
|
var author = authors[authorid];
|
||||||
|
var span = $("<span />")
|
||||||
|
.text(author.getName())
|
||||||
|
.addClass('author')
|
||||||
|
.addClass(author.getCSSClass());
|
||||||
|
this.elements.authors.append(span);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 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.getHeadRevision())
|
||||||
|
revnum = this.connection.latest_revision;
|
||||||
|
if (revnum < 0)
|
||||||
|
revnum = 0;
|
||||||
|
|
||||||
|
var _this = this;
|
||||||
|
this.connection.goToRevision(revnum, function (revision, timestamp) {
|
||||||
|
console.log("[revisionslider > goToRevision > callback]", revision, timestamp);
|
||||||
|
//update UI elements:
|
||||||
|
_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 + "";
|
||||||
|
while (str.length < length)
|
||||||
|
str = '0' + str;
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
var months = [
|
||||||
|
html10n.get("timeslider.month.january"),
|
||||||
|
html10n.get("timeslider.month.february"),
|
||||||
|
html10n.get("timeslider.month.march"),
|
||||||
|
html10n.get("timeslider.month.april"),
|
||||||
|
html10n.get("timeslider.month.may"),
|
||||||
|
html10n.get("timeslider.month.june"),
|
||||||
|
html10n.get("timeslider.month.july"),
|
||||||
|
html10n.get("timeslider.month.august"),
|
||||||
|
html10n.get("timeslider.month.september"),
|
||||||
|
html10n.get("timeslider.month.october"),
|
||||||
|
html10n.get("timeslider.month.november"),
|
||||||
|
html10n.get("timeslider.month.december")
|
||||||
|
];
|
||||||
|
var date = new Date(timestamp);
|
||||||
|
var timestamp_format = html10n.get("timeslider.dateformat",
|
||||||
|
{
|
||||||
|
"day": zeropad(date.getDate(), 2),
|
||||||
|
"month": zeropad(date.getMonth() + 1, 2),
|
||||||
|
"year": date.getFullYear(),
|
||||||
|
"hours": zeropad(date.getHours(), 2),
|
||||||
|
"minutes": zeropad(date.getMinutes(), 2),
|
||||||
|
"seconds": zeropad(date.getSeconds(), 2),
|
||||||
|
});
|
||||||
|
this.elements.timestamp.html(timestamp_format);
|
||||||
|
|
||||||
|
var revisionDate = html10n.get("timeslider.saved", {
|
||||||
|
"day": date.getDate(),
|
||||||
|
"month": months[date.getMonth()],
|
||||||
|
"year": date.getFullYear()
|
||||||
|
});
|
||||||
|
|
||||||
|
this.elements.revision_date.html(revisionDate);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Initialize mouse events and handlers
|
||||||
|
*/
|
||||||
|
_mouseInit: function () {
|
||||||
|
var _this = this;
|
||||||
|
this.elements.button_left.on("click", function (event) {
|
||||||
|
if ($(this).hasClass("disabled"))
|
||||||
|
return;
|
||||||
|
_this.is_playing = false;
|
||||||
|
_this.goToRevision(_this.revision_number - 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.elements.button_right.on("click", function (event) {
|
||||||
|
if ($(this).hasClass("disabled"))
|
||||||
|
return;
|
||||||
|
_this.is_playing = false;
|
||||||
|
_this.goToRevision(_this.revision_number + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.elements.button_play.on("click", function (event) {
|
||||||
|
_this.playpause();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -173,6 +173,7 @@ SocketClient("AuthenticatedSocketClient",
|
||||||
);
|
);
|
||||||
|
|
||||||
require('./revisioncache');
|
require('./revisioncache');
|
||||||
|
require('./revisionslider');
|
||||||
AuthenticatedSocketClient("TimesliderClient",
|
AuthenticatedSocketClient("TimesliderClient",
|
||||||
{ //statics
|
{ //statics
|
||||||
},
|
},
|
||||||
|
|
@ -197,11 +198,20 @@ AuthenticatedSocketClient("TimesliderClient",
|
||||||
this.revisionCache = new RevisionCache(this, collabClientVars.rev || 0);
|
this.revisionCache = new RevisionCache(this, collabClientVars.rev || 0);
|
||||||
|
|
||||||
this.padClient = new PadClient(this.revisionCache,
|
this.padClient = new PadClient(this.revisionCache,
|
||||||
collabClientVars.rev,
|
{
|
||||||
collabClientVars.time,
|
revnum: collabClientVars.rev,
|
||||||
collabClientVars.initialAttributedText.text,
|
timestamp: collabClientVars.time,
|
||||||
collabClientVars.initialAttributedText.attribs,
|
atext: {
|
||||||
collabClientVars.apool);
|
text: collabClientVars.initialAttributedText.text,
|
||||||
|
attributes: collabClientVars.initialAttributedText.attribs,
|
||||||
|
apool: collabClientVars.apool,
|
||||||
|
},
|
||||||
|
author_info: collabClientVars.historicalAuthorData,
|
||||||
|
palette: this.clientVars.colorPalette,
|
||||||
|
});
|
||||||
|
|
||||||
|
//TODO: not wild about the timeslider-top selector being hard-coded here.
|
||||||
|
this.ui = new RevisionSlider(this, $("#timeslider-top"));
|
||||||
},
|
},
|
||||||
|
|
||||||
//TODO: handle new revisions, authors etc.
|
//TODO: handle new revisions, authors etc.
|
||||||
|
|
@ -220,7 +230,13 @@ AuthenticatedSocketClient("TimesliderClient",
|
||||||
goToRevision: function (revision_number, atRevision_callback) {
|
goToRevision: function (revision_number, atRevision_callback) {
|
||||||
this.padClient.goToRevision(revision_number, atRevision_callback);
|
this.padClient.goToRevision(revision_number, atRevision_callback);
|
||||||
},
|
},
|
||||||
|
/**
|
||||||
|
* Get the authors for the current pad.
|
||||||
|
* @return {dict} - A dictionary of author-id to Author objects.
|
||||||
|
*/
|
||||||
|
getAuthors: function () {
|
||||||
|
return this.padClient.authors;
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* Get the current revision.
|
* Get the current revision.
|
||||||
* @return {Revision} - the current revision.
|
* @return {Revision} - the current revision.
|
||||||
|
|
@ -235,7 +251,6 @@ AuthenticatedSocketClient("TimesliderClient",
|
||||||
getHeadRevision: function () {
|
getHeadRevision: function () {
|
||||||
return this.head_revision;
|
return this.head_revision;
|
||||||
},
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue