diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index dc3c7fe78..0b7d7523a 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -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; diff --git a/src/static/js/revisioncache.js b/src/static/js/revisioncache.js index f2a389f29..e3d22f363 100644 --- a/src/static/js/revisioncache.js +++ b/src/static/js/revisioncache.js @@ -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; diff --git a/src/static/js/sliderui.js b/src/static/js/sliderui.js index e82dd9778..c4e6f9e89 100644 --- a/src/static/js/sliderui.js +++ b/src/static/js/sliderui.js @@ -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); }); diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js index 44336fc68..817bc9e9d 100644 --- a/src/static/js/timeslider.js +++ b/src/static/js/timeslider.js @@ -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++)