mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-27 10:56:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Minimal working UI wireup

Browse source 
Working:
  - location.hash
  - click on slider
  - stepper buttons
  - UI update (except authors)
Not working:
  - playback
  - bugs in transition code
This commit is contained in:
s1341 2013-12-16 13:59:07 +02:00
parent 3013bab251
commit eef08490b2
4 changed files with 139 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

362
src/static/js/broadcast_slider.js
View file

@ -25,7 +25,14 @@ $.Class("RevisionSlider",
{//instance
init: function (connection, root_element) {
this.connection = connection;
this.revision_number = this.connection.head_revision;
this.revision_number = this.connection.getCurrentRevision().revnum;
// 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, head_revision = %d", this.revision_number);
// parse the various elements we need:
this.elements = {};
@ -40,10 +47,14 @@ $.Class("RevisionSlider",
});
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);
@ -67,20 +78,70 @@ $.Class("RevisionSlider",
this.slider.createHandle(rev.revNum, "star");
}
},
goToRevision: function (revNum) {
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
if (revNum > this.connection.head_revision)
revNum = this.connection.latest_revision;
if (revNum < 0)
revNum = 0;
console.log("GO TO REVISION", revNum);
this.elements.revision_label.html(html10n.get("timeslider.version", { "version": revNum }));
this.slider.setValue(revNum);
this.revision_number = revNum;
//TODO: set the enabled/disabled for button-left and button-right
if (revnum > this.connection.head_revision)
revnum = this.connection.latest_revision;
if (revnum < 0)
revnum = 0;
console.log("GO TO REVISION", revnum);
var _this = this;
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);
//TODO: set the enabled/disabled for button-left and button-right
});
},
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;
@ -98,30 +159,17 @@ $.Class("RevisionSlider",
}
);
function init(tsclient, fireWhenAllScriptsAreLoaded)
function init(connection, fireWhenAllScriptsAreLoaded)
{
var BroadcastSlider;
(function()
{ // wrap this code in its own namespace
tsui = new RevisionSlider(tsclient, $("#timeslider-top"));
// 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))
tsui.goToRevision(rev);
}
tsui = new RevisionSlider(connection, $("#timeslider-top"));
var sliderLength = 1000;
var sliderPos = 0;
var sliderActive = false;
var slidercallbacks = [];
var savedRevisions = [];
var sliderPlaying = false;
clientVars = tsclient.clientVars;
var clientVars = connection.clientVars;
function disableSelection(element)
{
@ -133,86 +181,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}
var _callSliderCallbacks = function(newval)
{
sliderPos = newval;
for (var i = 0; i < slidercallbacks.length; i++)
{
slidercallbacks[i](newval);
}
};
var removeSavedRevision = function(position)
{
var element = $("div.star [pos=" + position + "]");
savedRevisions.remove(element);
element.remove();
return element;
};
/* Begin small 'API' */
function onSlider(callback)
{
slidercallbacks.push(callback);
}
function getSliderPosition()
{
return sliderPos;
}
function setSliderPosition(newpos)
{
newpos = Number(newpos);
if (newpos < 0 || newpos > sliderLength) return;
if(!newpos){
newpos = 0; // stops it from displaying NaN if newpos isn't set
}
window.location.hash = "#" + newpos;
$("#ui-slider-handle").css('left', newpos * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0));
$("a.tlink").map(function()
{
$(this).attr('href', $(this).attr('thref').replace("%revision%", newpos));
});
$("#revision_label").html(html10n.get("timeslider.version", { "version": newpos}));
if (newpos === 0)
{
$("#leftstar").css('opacity', 0.5);
$("#leftstep").css('opacity', 0.5);
}
else
{
$("#leftstar").css('opacity', 1);
$("#leftstep").css('opacity', 1);
}
if (newpos == sliderLength)
{
$("#rightstar").css('opacity', 0.5);
$("#rightstep").css('opacity', 0.5);
}
else
{
$("#rightstar").css('opacity', 1);
$("#rightstep").css('opacity', 1);
}
sliderPos = newpos;
_callSliderCallbacks(newpos);
}
function getSliderLength()
{
return sliderLength;
}
function setSliderLength(newlength)
{
sliderLength = newlength;
updateSliderElements();
}
// just take over the whole slider screen with a reconnect message
@ -286,55 +254,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
fixPadHeight();
}
//This API is in use by broadcast.js
//TODO: refactor broadcast.js to use RevisionSlider instead
BroadcastSlider = {
onSlider: onSlider,
getSliderPosition: getSliderPosition,
setSliderPosition: setSliderPosition,
getSliderLength: getSliderLength,
setSliderLength: setSliderLength,
isSliderActive: function()
{
return sliderActive;
},
playpause: playpause,
showReconnectUI: showReconnectUI,
setAuthors: setAuthors
};
function playButtonUpdater()
{
if (sliderPlaying)
{
if (getSliderPosition() + 1 > sliderLength)
{
$("#playpause_button_icon").toggleClass('pause');
sliderPlaying = false;
return;
}
setSliderPosition(getSliderPosition() + 1);
setTimeout(playButtonUpdater, 100);
}
}
function playpause()
{
$("#playpause_button_icon").toggleClass('pause');
if (!sliderPlaying)
{
if (getSliderPosition() == sliderLength) setSliderPosition(0);
sliderPlaying = true;
playButtonUpdater();
}
else
{
sliderPlaying = false;
}
}
// assign event handlers to html UI elements after page load
//$(window).load(function ()
fireWhenAllScriptsAreLoaded.push(function()
@ -342,131 +261,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
disableSelection($("#playpause_button")[0]);
disableSelection($("#timeslider")[0]);
$(document).keyup(function(e)
{
var code = -1;
if (!e) e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (code == 37)
{ // left
if (!e.shiftKey)
{
setSliderPosition(getSliderPosition() - 1);
}
else
{
var nextStar = 0; // default to first revision in document
for (var i = 0; i < savedRevisions.length; i++)
{
var pos = parseInt(savedRevisions[i].attr('pos'));
if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
}
setSliderPosition(nextStar);
}
}
else if (code == 39)
{
if (!e.shiftKey)
{
setSliderPosition(getSliderPosition() + 1);
}
else
{
var _nextStar = sliderLength; // default to last revision in document
for (var _i = 0; _i < savedRevisions.length; _i++)
{
var _pos = parseInt(savedRevisions[_i].attr('pos'));
if (_pos > getSliderPosition() && _nextStar > _pos) _nextStar = _pos;
}
setSliderPosition(_nextStar);
}
}
else if (code == 32) playpause();
});
// play/pause toggling
$("XXXX#playpause_button").mousedown(function(evt)
{
var self = this;
$(self).css('background-image', 'url(/static/img/crushed_button_depressed.png)');
$(self).mouseup(function(evt2)
{
$(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
$(self).unbind('mouseup');
BroadcastSlider.playpause();
});
$(document).mouseup(function(evt2)
{
$(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
$(document).unbind('mouseup');
});
});
// next/prev saved revision and changeset
$('XXX.stepper').mousedown(function(evt)
{
var self = this;
var origcss = $(self).css('background-position');
if (!origcss)
{
origcss = $(self).css('background-position-x') + " " + $(self).css('background-position-y');
}
var origpos = parseInt(origcss.split(" ")[1]);
var newpos = (origpos - 43);
if (newpos < 0) newpos += 87;
var newcss = (origcss.split(" ")[0] + " " + newpos + "px");
if ($(self).css('opacity') != 1.0) newcss = origcss;
$(self).css('background-position', newcss);
$(self).mouseup(function(evt2)
{
$(self).css('background-position', origcss);
$(self).unbind('mouseup');
$(document).unbind('mouseup');
if ($(self).attr("id") == ("leftstep"))
{
setSliderPosition(getSliderPosition() - 1);
}
else if ($(self).attr("id") == ("rightstep"))
{
setSliderPosition(getSliderPosition() + 1);
}
else if ($(self).attr("id") == ("leftstar"))
{
var nextStar = 0; // default to first revision in document
for (var i = 0; i < savedRevisions.length; i++)
{
var pos = parseInt(savedRevisions[i].attr('pos'));
if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
}
setSliderPosition(nextStar);
}
else if ($(self).attr("id") == ("rightstar"))
{
var _nextStar = sliderLength; // default to last revision in document
for (var _i = 0; _i < savedRevisions.length; _i++)
{
var _pos = parseInt(savedRevisions[_i].attr('pos'));
if (_pos > getSliderPosition() && _nextStar > _pos) _nextStar = _pos;
}
setSliderPosition(_nextStar);
}
});
$(document).mouseup(function(evt2)
{
$(self).css('background-position', origcss);
$(self).unbind('mouseup');
$(document).unbind('mouseup');
});
});
if (clientVars)
{
$("#timeslider").show();
@ -475,12 +269,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
});
})();
BroadcastSlider.onSlider(function(loc)
{
$("#viewlatest").html(loc == BroadcastSlider.getSliderLength() ? "Viewing latest content" : "View latest content");
});
return BroadcastSlider;
}
exports.init = init;

50
src/static/js/revisioncache.js
View file

@ -29,6 +29,14 @@ $.Class("Changeset",
getValue: function () {
return this.value;
},
compose: function (other, pad) {
var newvalue = libchangeset.compose(this.value, other.value, pad.apool);
var newchangeset = new Changeset(this.from_revision, other.to_revision,
this.deltatime + other.deltatime, newvalue);
console.log(newchangeset);
//TODO: insert new changeset into the graph somehow.
return newchangeset;
},
/**
* Apply this changeset to the passed pad.
* @param {PadClient} pad - The pad to apply the changeset to.
@ -553,7 +561,7 @@ $.Class("PadClient",
var _this = this;
this.divs.splice = function () {
return _this._spliceDivs.apply(_this, arguments);
}
};
// we need to provide a get, as we want to give
// libchangeset the text of a div, not the div itself
this.divs.get = function (index) {
@ -563,23 +571,36 @@ $.Class("PadClient",
goToRevision: function (revnum, atRevision_callback) {
console.log("[padclient > goToRevision] revnum: %d", revnum);
var _this = this;
if (this.revision.revnum == revnum) {
if (atRevision_callback)
atRevision_callback.call(this, this.revision, this.timestamp);
return;
};
this.revisionCache.transition(this.revision.revnum, revnum, function (path) {
console.log("[padclient > applyChangeset_callback] path:", path);
var time = _this.timestamp;
for (var p in path) {
console.log(p, path[p].deltatime, path[p].value);
var changeset = path[p];
time += changeset.deltatime * 1000;
changeset.apply(_this);
var composed = path[0];
var _path = path.slice(1);
for (var p in _path) {
console.log(p, _path[p].deltatime, _path[p].value);
var changeset = _path[p];
composed = composed.compose(changeset, _this);
//time += changeset.deltatime * 1000;
//changeset.apply(_this);
}
composed.apply(_this);
time += composed.deltatime * 1000;
// set revision and timestamp
_this.revision = path.slice(-1)[0].to_revision;
_this.timestamp = time;
console.log(_this.revision, _this.timestamp)
console.log(_this.revision, _this.timestamp);
// fire the callback
if (atRevision_callback)
atRevision_callback.call(_this,_this.revision, _this.timestamp);
if (atRevision_callback) {
console.log("[padclient] about to call atRevision_callback", _this.revision, _this.timestamp);
atRevision_callback.call(_this, _this.revision, _this.timestamp);
}
});
},
@ -636,14 +657,3 @@ $.Class("PadClient",
},
}
);
function init(clientVars, connection)
{
revisionCache = new RevisionCache(connection, clientVars.collab_client_vars.rev || 0);
var collabClientVars = clientVars.collab_client_vars;
p = new PadClient(collabClientVars.rev, collabClientVars.time, collabClientVars.initialAttributedText.text, collabClientVars.initialAttributedText.attribs, collabClientVars.apool);
}
exports.init = init;

16
src/static/js/sliderui.js
View file

@ -93,10 +93,7 @@ $.Class("SliderUI",
handle.element.css('left', (handle.value * this._getStep()) );
}
},
// this internal version of _setValue should only be used to render
// when the handle changes position as a result of UI events handled
// by this slider.
_setValue: function (value) {
setValue: function (value) {
if (value < 0)
value = 0;
if (value > this.options.max)
@ -105,11 +102,6 @@ $.Class("SliderUI",
this.current_value = value;
this.render();
},
// this 'public' version of _setValue also triggers a change event
setValue: function(value) {
this._setValue(value);
this._trigger("change", value);
},
setMax: function (max) {
this.options.max = max;
this.render();
@ -136,14 +128,14 @@ $.Class("SliderUI",
var start_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
console.log("sliderbar mousedown, value:", start_value);
if (_this.current_value != start_value)
_this._setValue(start_value);
_this.setValue(start_value);
$(document).on("mousemove.slider", function (event) {
var current_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
console.log("sliderbar mousemove, value:", current_value);
// don't change the value if it hasn't actually changed!
if (_this.current_value != current_value) {
_this._setValue(current_value);
_this.setValue(current_value);
_this._trigger("slide", current_value);
}
});
@ -155,7 +147,7 @@ $.Class("SliderUI",
var end_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
console.log("sliderbar mouseup, value:", end_value);
// always change the value at mouseup
_this._setValue(end_value);
_this.setValue(end_value);
_this._trigger("change", end_value);
});

40
src/static/js/timeslider.js
View file

@ -204,10 +204,31 @@ AuthenticatedSocketClient("TimesliderClient",
collabClientVars.apool);
},
//TODO: handle new revisions, authors etc.
handle_COLLABROOM: function(data) {
console.log("[timeslider_client] handle_COLLABROOM: ", data);
},
/**
* Go to the specified revision number. This abstracts the implementation
* of the actual goToRevision in the padClient.
* @param {number} revision_number - The revision to go to.
* @param {callback} atRevision_callback - Called when the transition to the
* revision has completed (i.e.
* changesets have been applied).
*/
goToRevision: function (revision_number, atRevision_callback) {
this.padClient.goToRevision(revision_number, atRevision_callback);
},
/**
* Get the current revision.
* @return {Revision} - the current revision.
*/
getCurrentRevision: function () {
return this.padClient.revision;
},
}
);
@ -247,21 +268,20 @@ function init(baseURL) {
.on("CLIENT_VARS", function(data, context, callback) {
//load all script that doesn't work without the clientVars
BroadcastSlider = require('./broadcast_slider').init(this,fireWhenAllScriptsAreLoaded);
//cl = require('./revisioncache').init(this.clientVars, this);
//changesetLoader = require('./broadcast').loadBroadcastJS(this, fireWhenAllScriptsAreLoaded, BroadcastSlider);
//initialize export ui
require('./pad_impexp').padimpexp.init();
//change export urls when the slider moves
BroadcastSlider.onSlider(function(revno)
{
// export_links is a jQuery Array, so .each is allowed.
export_links.each(function()
{
this.setAttribute('href', this.href.replace( /(.+?)\/\w+\/(\d+\/)?export/ , '$1/' + padId + '/' + revno + '/export'));
});
});
//TODO: fix this to use the slider.change event
//BroadcastSlider.onSlider(function(revno)
//{
//// export_links is a jQuery Array, so .each is allowed.
//export_links.each(function()
//{
//this.setAttribute('href', this.href.replace( /(.+?)\/\w+\/(\d+\/)?export/ , '$1/' + padId + '/' + revno + '/export'));
//});
//});
//fire all start functions of these scripts, formerly fired with window.load
for(var i=0;i < fireWhenAllScriptsAreLoaded.length;i++)