diff --git a/src/node/db/Pad.js b/src/node/db/Pad.js index 4670696a39a..33ce0d7593a 100644 --- a/src/node/db/Pad.js +++ b/src/node/db/Pad.js @@ -54,6 +54,10 @@ Pad.prototype.getHeadRevisionNumber = function getHeadRevisionNumber() { return this.head; }; +Pad.prototype.getHeadChangesetNumber = function getHeadChangesetNumber() { + return this.head+1; +}; + Pad.prototype.getPublicStatus = function getPublicStatus() { return this.publicStatus; }; diff --git a/src/node/handler/PadMessageHandler.js b/src/node/handler/PadMessageHandler.js index 598b2df544c..21efcc2b04c 100644 --- a/src/node/handler/PadMessageHandler.js +++ b/src/node/handler/PadMessageHandler.js @@ -1116,6 +1116,7 @@ function handleClientReady(client, message) "historicalAuthorData": historicalAuthorData, "apool": apool, "rev": pad.getHeadRevisionNumber(), + "lastCs": pad.getHeadChangesetNumber(), "time": currentTime, }, "colorPalette": authorManager.getColorPalette(), @@ -1306,7 +1307,6 @@ function handleChangesetRequest(client, message) var data = changesetInfo; data.requestID = message.data.requestID; - client.json.send({type: "CHANGESET_REQ", data: data}); }); } @@ -1338,16 +1338,16 @@ function getChangesetInfo(padId, startNum, endNum, granularity, callback) { if(ERR(err, callback)) return; pad = _pad; - head_revision = pad.getHeadRevisionNumber(); + head_revision = pad.getHeadChangesetNumber(); callback(); }); }, function(callback) { //calculate the last full endnum - var lastRev = pad.getHeadRevisionNumber(); - if (endNum > lastRev+1) { - endNum = lastRev+1; + var lastRev = pad.getHeadChangesetNumber(); + if (endNum > lastRev) { + endNum = lastRev; } endNum = Math.floor(endNum / granularity)*granularity; @@ -1545,10 +1545,9 @@ function composePadChangesets(padId, startNum, endNum, callback) function(callback) { var changesetsNeeded=[]; - - var headNum = pad.getHeadRevisionNumber(); - if (endNum > headNum+1) - endNum = headNum+1; + var headNum = pad.getHeadChangesetNumber(); + if (endNum > headNum) + endNum = headNum; if (startNum < 0) startNum = 0; //create a array for all changesets, we will diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index f4329a5ed7c..4d39a8d1d08 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -1,7 +1,115 @@ +/* + * slider handles (SliderHandle) + */ + +.ui-slider-handle { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: pointer; + position: absolute; +} + +.ui-slider-handle-star { + background-image: url(../../static/img/star.png); + height: 16px; + top: 20px; + width: 15px; +} + +.ui-slider-handle-handle { + background-image: url(../../static/img/crushed_current_location.png); + height: 61px; + left: 0; + top: -14px; + width: 13px; +} + +/* + * Steppers + */ + +.stepper { + background: url(../../static/img/stepper_buttons.png) 0 0 no-repeat; + height: 21px; + overflow: hidden; + position: absolute; +} +#leftstar { + background-position: 0 -44px; + right: 34px; + top: 8px; + width: 30px; +} +#rightstar { + background-position: -29px -44px; + right: 5px; + top: 8px; + width: 30px; +} +#leftstep:active { + background-position: 0 -22px; + right: 34px; + top: 20px; + width: 30px; +} +#leftstep { + background-position: 0 -66px; + right: 34px; + top: 20px; + width: 30px; +} +#rightstep:active { + background-position: -29px -22px; + right: 5px; + top: 20px; + width: 30px; +} +#rightstep { + background-position: -29px -66px; + right: 5px; + top: 20px; + width: 30px; +} + +#playpause_button, +#playpause_button_icon { + height: 47px; + position: absolute; + width: 47px; +} +#playpause_button { + background-image: url(../../static/img/crushed_button_undepressed.png); + right: 77px; + top: 9px; +} +#playpause_button:active { + background-image: url(../../static/img/crushed_button_depressed.png); + right: 77px; + top: 9px; +} +#playpause_button_icon { + background-image: url(../../static/img/play.png); + left: 0; + top: 0; +} +.pause#playpause_button_icon { + background-image: url(../../static/img/pause.png) +} + + + + + + + +#timeslider .slider-handle { + position: absolute; +} #editorcontainerbox { overflow: auto; - top: 40px; - position: static; + top: 120px; + position: absolute; } #padcontent { font-size: 12px; @@ -45,6 +153,7 @@ top: 1px; width: 100%; } + #ui-slider-handle { -webkit-user-select: none; -moz-user-select: none; @@ -57,6 +166,7 @@ top: 0; width: 13px; } + #ui-slider-bar { -webkit-user-select: none; -moz-user-select: none; @@ -159,6 +269,7 @@ stepper:active{ top: 40px; width: 15px; } +>>>>>>> e51ab2db249fea3f7ac1e64ffca576fb163703f3 #timeslider #timer { background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent; padding:2px; @@ -170,6 +281,10 @@ stepper:active{ text-align: center; top: 9px; width: 122px; + background-color: #A9A9A9; + border: 1px solid #a8a8a8; + border-radius: 3px; + text-shadow: 0 0 3px #a5a5a5; } .topbarcenter, #docbar { @@ -217,6 +332,7 @@ stepper:active{ overflow: hidden; padding-top: 3px; width: 100%; + border-bottom: thin solid #cccccc; } .timeslider-bar #editbar { border-bottom: none; @@ -236,12 +352,16 @@ stepper:active{ z-index: 1; } #authorsList .author { - padding-left: 0.4em; - padding-right: 0.4em; + padding: 0 0.4em; + margin: 0 0.4em; + opacity: 0.6 } #authorsList .author-anonymous { - padding-left: 0.6em; - padding-right: 0.6em; + padding: 0 0.1em; +} +#authorsList .author.highlighted { + box-shadow: 0 0 10px #fff; + opacity: 1.0; } #padeditor { position: static diff --git a/src/static/js/broadcast.js b/src/static/js/broadcast.js index 191d802e0d1..b76e23426ce 100644 --- a/src/static/js/broadcast.js +++ b/src/static/js/broadcast.js @@ -1,5 +1,5 @@ /** - * This code is mostly from the old Etherpad. Please help us to comment this code. + * This code is mostly from the old Etherpad. Please help us to comment this code. * This helps other people to understand this code better and helps them to improve it. * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED */ @@ -27,13 +27,12 @@ var Changeset = require('./Changeset'); var linestylefilter = require('./linestylefilter').linestylefilter; var colorutils = require('./colorutils').colorutils; var _ = require('./underscore'); - +require("./jquery.class"); // These parameters were global, now they are injected. A reference to the // Timeslider controller would probably be more appropriate. -function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, BroadcastSlider) +function loadBroadcastJS(tsclient, fireWhenAllScriptsAreLoaded, BroadcastSlider) { - var changesetLoader = undefined; - + var changesetLoader; // Below Array#indexOf code was direct pasted by AppJet/Etherpad, licence unknown. Possible source: http://www.tutorialspoint.com/javascript/array_indexof.htm if (!Array.prototype.indexOf) { @@ -83,14 +82,14 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro var appLevelDisconnectReason = null; var padContents = { - currentRevision: clientVars.collab_client_vars.rev, - currentTime: clientVars.collab_client_vars.time, - currentLines: Changeset.splitTextLines(clientVars.collab_client_vars.initialAttributedText.text), + currentRevision: tsclient.clientVars.collab_client_vars.rev, + currentTime: tsclient.clientVars.collab_client_vars.time, + currentLines: Changeset.splitTextLines(tsclient.clientVars.collab_client_vars.initialAttributedText.text), currentDivs: null, // to be filled in once the dom loads - apool: (new AttribPool()).fromJsonable(clientVars.collab_client_vars.apool), + apool: (new AttribPool()).fromJsonable(tsclient.clientVars.collab_client_vars.apool), alines: Changeset.splitAttributionLines( - clientVars.collab_client_vars.initialAttributedText.attribs, clientVars.collab_client_vars.initialAttributedText.text), + tsclient.clientVars.collab_client_vars.initialAttributedText.attribs, tsclient.clientVars.collab_client_vars.initialAttributedText.text), // generates a jquery element containing HTML for a line lineToElement: function(line, aline) @@ -250,7 +249,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro */ function applyChangeset(changeset, revision, preventSliderMovement, timeDelta) - { + { // disable the next 'gotorevision' call handled by a timeslider update if (!preventSliderMovement) { @@ -274,12 +273,12 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro debugLog('Time Delta: ', timeDelta) updateTimer(); - + var authors = _.map(padContents.getActiveAuthors(), function(name) { return authorData[name]; }); - + BroadcastSlider.setAuthors(authors); } @@ -292,7 +291,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro str = '0' + str; return str; } - + var date = new Date(padContents.currentTime); var dateFormat = function() { @@ -307,15 +306,15 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro "month": month, "year": year, "hours": hours, - "minutes": minutes, + "minutes": minutes, "seconds": seconds })); } - - - - - + + + + + $('#timer').html(dateFormat()); var revisionDate = html10n.get("timeslider.saved", { "day": date.getDate(), @@ -338,7 +337,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro $('#revision_date').html(revisionDate) } - + updateTimer(); function goToRevision(newRevision) @@ -389,7 +388,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro // Loading changeset history for old revision (to make diff between old and new revision) loadChangesetsForRevision(padContents.currentRevision - 1); } - + var authors = _.map(padContents.getActiveAuthors(), function(name){ return authorData[name]; }); @@ -459,7 +458,8 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro var start = request.rev; var requestID = Math.floor(Math.random() * 100000); - sendSocketMsg("CHANGESET_REQ", { + //sendSocketMsg("CHANGESET_REQ", { + tsclient.sendMessage("CHANGESET_REQ", { "start": start, "granularity": granularity, "requestID": requestID @@ -467,21 +467,21 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro self.reqCallbacks[requestID] = callback; }, - handleSocketResponse: function(message) + handle_CHANGESET_REQ: function(data) { var self = changesetLoader; - var start = message.data.start; - var granularity = message.data.granularity; - var callback = self.reqCallbacks[message.data.requestID]; - delete self.reqCallbacks[message.data.requestID]; + var start = data.start; + var granularity = data.granularity; + var callback = self.reqCallbacks[data.requestID]; + delete self.reqCallbacks[data.requestID]; - self.handleResponse(message.data, start, granularity, callback); + self.handleResponse(data, start, granularity, callback); setTimeout(self.loadFromQueue, 10); }, handleResponse: function(data, start, granularity, callback) { - debugLog("response: ", data); + debugLog("handleResponse: ", data); var pool = (new AttribPool()).fromJsonable(data.apool); for (var i = 0; i < data.forwardsChangesets.length; i++) { @@ -495,56 +495,44 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro } if (callback) callback(start - 1, start + data.forwardsChangesets.length * granularity - 1); }, - handleMessageFromServer: function (obj) + handle_COLLABROOM: function (obj) { - debugLog("handleMessage:", arguments); - - if (obj.type == "COLLABROOM") + debugLog("handle_COLLABROOM:", arguments); + if (obj.type == "NEW_CHANGES") { - obj = obj.data; - - if (obj.type == "NEW_CHANGES") - { - debugLog(obj); - var changeset = Changeset.moveOpsToNewPool( - obj.changeset, (new AttribPool()).fromJsonable(obj.apool), padContents.apool); - - var changesetBack = Changeset.inverse( - obj.changeset, padContents.currentLines, padContents.alines, padContents.apool); + debugLog(obj); + var changeset = Changeset.moveOpsToNewPool( + obj.changeset, (new AttribPool()).fromJsonable(obj.apool), padContents.apool); - var changesetBack = Changeset.moveOpsToNewPool( - changesetBack, (new AttribPool()).fromJsonable(obj.apool), padContents.apool); - - loadedNewChangeset(changeset, changesetBack, obj.newRev - 1, obj.timeDelta); - } - else if (obj.type == "NEW_AUTHORDATA") - { - var authorMap = {}; - authorMap[obj.author] = obj.data; - receiveAuthorData(authorMap); + var changesetBack = Changeset.inverse( + obj.changeset, padContents.currentLines, padContents.alines, padContents.apool); - var authors = _.map(padContents.getActiveAuthors(), function(name) { - return authorData[name]; - }); + changesetBack = Changeset.moveOpsToNewPool( + changesetBack, (new AttribPool()).fromJsonable(obj.apool), padContents.apool); - BroadcastSlider.setAuthors(authors); - } - else if (obj.type == "NEW_SAVEDREV") - { - var savedRev = obj.savedRev; - BroadcastSlider.addSavedRevision(savedRev.revNum, savedRev); - } + loadedNewChangeset(changeset, changesetBack, obj.newRev - 1, obj.timeDelta); } - else if(obj.type == "CHANGESET_REQ") + else if (obj.type == "NEW_AUTHORDATA") { - changesetLoader.handleSocketResponse(obj); + var authorMap = {}; + authorMap[obj.author] = obj.data; + receiveAuthorData(authorMap); + + var authors = _.map(padContents.getActiveAuthors(), function(name) { + return authorData[name]; + }); + + BroadcastSlider.setAuthors(authors); } - else + else if (obj.type == "NEW_SAVEDREV") { - debugLog("Unknown message type: " + obj.type); + var savedRev = obj.savedRev; + BroadcastSlider.addSavedRevision(savedRev.revNum, savedRev); } } }; + //tsclient.on("CHANGESET_REQ", changesetLoader.handle_CHANGESET_REQ); + //tsclient.on("COLLABROOM", changesetLoader.handle_COLLABROOM); // to start upon window load, just push a function onto this array //window['onloadFuncts'].push(setUpSocket); @@ -553,12 +541,12 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro { // set up the currentDivs and DOM padContents.currentDivs = []; - $("#padcontent").html(""); + //$("#padcontent").html(""); for (var i = 0; i < padContents.currentLines.length; i++) { var div = padContents.lineToElement(padContents.currentLines[i], padContents.alines[i]); padContents.currentDivs.push(div); - $("#padcontent").append(div); + //$("#padcontent").append(div); } debugLog(padContents.currentDivs); }); @@ -576,7 +564,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro goToRevision.apply(goToRevision, arguments); } } - + BroadcastSlider.onSlider(goToRevisionIfEnabled); var dynamicCSS = makeCSSManager('dynamicsyntax'); @@ -587,7 +575,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro for (var author in newAuthorData) { var data = newAuthorData[author]; - var bgcolor = typeof data.colorId == "number" ? clientVars.colorPalette[data.colorId] : data.colorId; + var bgcolor = typeof data.colorId == "number" ? tsclient.clientVars.colorPalette[data.colorId] : data.colorId; if (bgcolor && dynamicCSS) { var selector = dynamicCSS.selectorStyle('.' + linestylefilter.getAuthorClassName(author)); @@ -598,7 +586,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro } } - receiveAuthorData(clientVars.collab_client_vars.historicalAuthorData); + receiveAuthorData(tsclient.clientVars.collab_client_vars.historicalAuthorData); return changesetLoader; } diff --git a/src/static/js/broadcast_revisions.js b/src/static/js/broadcast_revisions.js deleted file mode 100644 index 1980bdf30f1..00000000000 --- a/src/static/js/broadcast_revisions.js +++ /dev/null @@ -1,128 +0,0 @@ -/** - * This code is mostly from the old Etherpad. Please help us to comment this code. - * This helps other people to understand this code better and helps them to improve it. - * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED - */ - -/** - * Copyright 2009 Google Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS-IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -// revision info is a skip list whos entries represent a particular revision -// of the document. These revisions are connected together by various -// changesets, or deltas, between any two revisions. - -function loadBroadcastRevisionsJS() -{ - function Revision(revNum) - { - this.rev = revNum; - this.changesets = []; - } - - Revision.prototype.addChangeset = function(destIndex, changeset, timeDelta) - { - var changesetWrapper = { - deltaRev: destIndex - this.rev, - deltaTime: timeDelta, - getValue: function() - { - return changeset; - } - }; - this.changesets.push(changesetWrapper); - this.changesets.sort(function(a, b) - { - return (b.deltaRev - a.deltaRev) - }); - } - - revisionInfo = {}; - revisionInfo.addChangeset = function(fromIndex, toIndex, changeset, backChangeset, timeDelta) - { - var startRevision = revisionInfo[fromIndex] || revisionInfo.createNew(fromIndex); - var endRevision = revisionInfo[toIndex] || revisionInfo.createNew(toIndex); - startRevision.addChangeset(toIndex, changeset, timeDelta); - endRevision.addChangeset(fromIndex, backChangeset, -1 * timeDelta); - } - - revisionInfo.latest = clientVars.collab_client_vars.rev || -1; - - revisionInfo.createNew = function(index) - { - revisionInfo[index] = new Revision(index); - if (index > revisionInfo.latest) - { - revisionInfo.latest = index; - } - - return revisionInfo[index]; - } - - // assuming that there is a path from fromIndex to toIndex, and that the links - // are laid out in a skip-list format - revisionInfo.getPath = function(fromIndex, toIndex) - { - var changesets = []; - var spans = []; - var times = []; - var elem = revisionInfo[fromIndex] || revisionInfo.createNew(fromIndex); - if (elem.changesets.length != 0 && fromIndex != toIndex) - { - var reverse = !(fromIndex < toIndex) - while (((elem.rev < toIndex) && !reverse) || ((elem.rev > toIndex) && reverse)) - { - var couldNotContinue = false; - var oldRev = elem.rev; - - for (var i = reverse ? elem.changesets.length - 1 : 0; - reverse ? i >= 0 : i < elem.changesets.length; - i += reverse ? -1 : 1) - { - if (((elem.changesets[i].deltaRev < 0) && !reverse) || ((elem.changesets[i].deltaRev > 0) && reverse)) - { - couldNotContinue = true; - break; - } - - if (((elem.rev + elem.changesets[i].deltaRev <= toIndex) && !reverse) || ((elem.rev + elem.changesets[i].deltaRev >= toIndex) && reverse)) - { - var topush = elem.changesets[i]; - changesets.push(topush.getValue()); - spans.push(elem.changesets[i].deltaRev); - times.push(topush.deltaTime); - elem = revisionInfo[elem.rev + elem.changesets[i].deltaRev]; - break; - } - } - - if (couldNotContinue || oldRev == elem.rev) break; - } - } - - var status = 'partial'; - if (elem.rev == toIndex) status = 'complete'; - - return { - 'fromRev': fromIndex, - 'rev': elem.rev, - 'status': status, - 'changesets': changesets, - 'spans': spans, - 'times': times - }; - } -} - -exports.loadBroadcastRevisionsJS = loadBroadcastRevisionsJS; diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index 822526a387e..60c7521bdc3 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -1,9 +1,3 @@ -/** - * This code is mostly from the old Etherpad. Please help us to comment this code. - * This helps other people to understand this code better and helps them to improve it. - * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED - */ - /** * Copyright 2009 Google Inc. * @@ -20,23 +14,19 @@ * limitations under the License. */ - // These parameters were global, now they are injected. A reference to the - // Timeslider controller would probably be more appropriate. var _ = require('./underscore'); var padmodals = require('./pad_modals').padmodals; -function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) +function init(connection, fireWhenAllScriptsAreLoaded) { var BroadcastSlider; (function() { // wrap this code in its own namespace - var sliderLength = 1000; - var sliderPos = 0; - var sliderActive = false; - var slidercallbacks = []; - var savedRevisions = []; - var sliderPlaying = false; + + + + var clientVars = connection.clientVars; function disableSelection(element) { @@ -48,113 +38,6 @@ function loadBroadcastSliderJS(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 updateSliderElements = function() - { - for (var i = 0; i < savedRevisions.length; i++) - { - var position = parseInt(savedRevisions[i].attr('pos')); - savedRevisions[i].css('left', (position * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0)) - 1); - } - $("#ui-slider-handle").css('left', sliderPos * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0)); - } - - var addSavedRevision = function(position, info) - { - var newSavedRevision = $('
'); - newSavedRevision.addClass("star"); - - newSavedRevision.attr('pos', position); - newSavedRevision.css('position', 'absolute'); - newSavedRevision.css('left', (position * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0)) - 1); - $("#timeslider-slider").append(newSavedRevision); - newSavedRevision.mouseup(function(evt) - { - BroadcastSlider.setSliderPosition(position); - }); - savedRevisions.push(newSavedRevision); - }; - - 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', .5); - $("#leftstep").css('opacity', .5); - } - else - { - $("#leftstar").css('opacity', 1); - $("#leftstep").css('opacity', 1); - } - - if (newpos == sliderLength) - { - $("#rightstar").css('opacity', .5); - $("#rightstep").css('opacity', .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 @@ -163,117 +46,11 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) padmodals.showModal("disconnected"); } + //TODO: figure out what the hell this is for var fixPadHeight = _.throttle(function(){ var height = $('#timeslider-top').height(); $('#editorcontainerbox').css({marginTop: height}); }, 600); - - function setAuthors(authors) - { - var authorsList = $("#authorsList"); - authorsList.empty(); - var numAnonymous = 0; - var numNamed = 0; - var colorsAnonymous = []; - _.each(authors, function(author) - { - var authorColor = clientVars.colorPalette[author.colorId] || author.colorId; - if (author.name) - { - if (numNamed !== 0) authorsList.append(', '); - - $('') - .text(author.name || "unnamed") - .css('background-color', authorColor) - .addClass('author') - .appendTo(authorsList); - - numNamed++; - } - else - { - numAnonymous++; - if(authorColor) colorsAnonymous.push(authorColor); - } - }); - if (numAnonymous > 0) - { - var anonymousAuthorString = html10n.get("timeslider.unnamedauthors", { num: numAnonymous }); - - if (numNamed !== 0){ - authorsList.append(' + ' + anonymousAuthorString); - } else { - authorsList.append(anonymousAuthorString); - } - - if(colorsAnonymous.length > 0){ - authorsList.append(' ('); - _.each(colorsAnonymous, function(color, i){ - if( i > 0 ) authorsList.append(' '); - $(' ') - .css('background-color', color) - .addClass('author author-anonymous') - .appendTo(authorsList); - }); - authorsList.append(')'); - } - - } - if (authors.length == 0) - { - authorsList.append(html10n.get("timeslider.toolbar.authorsList")); - } - - fixPadHeight(); - } - - BroadcastSlider = { - onSlider: onSlider, - getSliderPosition: getSliderPosition, - setSliderPosition: setSliderPosition, - getSliderLength: getSliderLength, - setSliderLength: setSliderLength, - isSliderActive: function() - { - return sliderActive; - }, - playpause: playpause, - addSavedRevision: addSavedRevision, - 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 () @@ -456,36 +233,11 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (clientVars) { $("#timeslider").show(); - - var startPos = clientVars.collab_client_vars.rev; - if(window.location.hash.length > 1) - { - var hashRev = Number(window.location.hash.substr(1)); - if(!isNaN(hashRev)) - { - // this is necessary because of the socket.io-event which loads the changesets - setTimeout(function() { setSliderPosition(hashRev); }, 1); - } - } - - setSliderLength(clientVars.collab_client_vars.rev); - setSliderPosition(clientVars.collab_client_vars.rev); - - _.each(clientVars.savedRevisions, function(revision) - { - addSavedRevision(revision.revNum, revision); - }) - } + }); })(); - BroadcastSlider.onSlider(function(loc) - { - $("#viewlatest").html(loc == BroadcastSlider.getSliderLength() ? "Viewing latest content" : "View latest content"); - }) - - return BroadcastSlider; } -exports.loadBroadcastSliderJS = loadBroadcastSliderJS; +exports.init = init; diff --git a/src/static/js/jquery.class.js b/src/static/js/jquery.class.js new file mode 100644 index 00000000000..4657c6ab436 --- /dev/null +++ b/src/static/js/jquery.class.js @@ -0,0 +1,836 @@ +(function( $ ) { + // Several of the methods in this plugin use code adapated from Prototype + // Prototype JavaScript framework, version 1.6.0.1 + // (c) 2005-2007 Sam Stephenson + var regs = { + undHash: /_|-/, + colons: /::/, + words: /([A-Z]+)([A-Z][a-z])/g, + lowUp: /([a-z\d])([A-Z])/g, + dash: /([a-z\d])([A-Z])/g, + replacer: /\{([^\}]+)\}/g, + dot: /\./ + }, + getNext = function(current, nextPart, add){ + return current[nextPart] || ( add && (current[nextPart] = {}) ); + }, + isContainer = function(current){ + var type = typeof current; + return type && ( type == 'function' || type == 'object' ); + }, + getObject = function( objectName, roots, add ) { + + var parts = objectName ? objectName.split(regs.dot) : [], + length = parts.length, + currents = $.isArray(roots) ? roots : [roots || window], + current, + ret, + i, + c = 0, + type; + + if(length == 0){ + return currents[0]; + } + while(current = currents[c++]){ + for (i =0; i < length - 1 && isContainer(current); i++ ) { + current = getNext(current, parts[i], add); + } + if( isContainer(current) ) { + + ret = getNext(current, parts[i], add); + + if( ret !== undefined ) { + + if ( add === false ) { + delete current[parts[i]]; + } + return ret; + + } + + } + } + }, + + /** + * @class jQuery.String + * + * A collection of useful string helpers. + * + */ + str = $.String = $.extend( $.String || {} , { + /** + * @function + * Gets an object from a string. + * @param {String} name the name of the object to look for + * @param {Array} [roots] an array of root objects to look for the name + * @param {Boolean} [add] true to add missing objects to + * the path. false to remove found properties. undefined to + * not modify the root object + */ + getObject : getObject, + /** + * Capitalizes a string + * @param {String} s the string. + * @return {String} a string with the first character capitalized. + */ + capitalize: function( s, cache ) { + return s.charAt(0).toUpperCase() + s.substr(1); + }, + /** + * Capitalizes a string from something undercored. Examples: + * @codestart + * jQuery.String.camelize("one_two") //-> "oneTwo" + * "three-four".camelize() //-> threeFour + * @codeend + * @param {String} s + * @return {String} a the camelized string + */ + camelize: function( s ) { + s = str.classize(s); + return s.charAt(0).toLowerCase() + s.substr(1); + }, + /** + * Like camelize, but the first part is also capitalized + * @param {String} s + * @return {String} the classized string + */ + classize: function( s , join) { + var parts = s.split(regs.undHash), + i = 0; + for (; i < parts.length; i++ ) { + parts[i] = str.capitalize(parts[i]); + } + + return parts.join(join || ''); + }, + /** + * Like [jQuery.String.classize|classize], but a space separates each 'word' + * @codestart + * jQuery.String.niceName("one_two") //-> "One Two" + * @codeend + * @param {String} s + * @return {String} the niceName + */ + niceName: function( s ) { + str.classize(parts[i],' '); + }, + + /** + * Underscores a string. + * @codestart + * jQuery.String.underscore("OneTwo") //-> "one_two" + * @codeend + * @param {String} s + * @return {String} the underscored string + */ + underscore: function( s ) { + return s.replace(regs.colons, '/').replace(regs.words, '$1_$2').replace(regs.lowUp, '$1_$2').replace(regs.dash, '_').toLowerCase(); + }, + /** + * Returns a string with {param} replaced values from data. + * + * $.String.sub("foo {bar}",{bar: "far"}) + * //-> "foo far" + * + * @param {String} s The string to replace + * @param {Object} data The data to be used to look for properties. If it's an array, multiple + * objects can be used. + * @param {Boolean} [remove] if a match is found, remove the property from the object + */ + sub: function( s, data, remove ) { + var obs = []; + obs.push(s.replace(regs.replacer, function( whole, inside ) { + //convert inside to type + var ob = getObject(inside, data, typeof remove == 'boolean' ? !remove : remove), + type = typeof ob; + if((type === 'object' || type === 'function') && type !== null){ + obs.push(ob); + return ""; + }else{ + return ""+ob; + } + })); + return obs.length <= 1 ? obs[0] : obs; + } + }); + +})(jQuery); +(function( $ ) { + + // if we are initializing a new class + var initializing = false, + makeArray = $.makeArray, + isFunction = $.isFunction, + isArray = $.isArray, + extend = $.extend, + concatArgs = function(arr, args){ + return arr.concat(makeArray(args)); + }, + // tests if we can get super in .toString() + fnTest = /xyz/.test(function() { + xyz; + }) ? /\b_super\b/ : /.*/, + // overwrites an object with methods, sets up _super + // newProps - new properties + // oldProps - where the old properties might be + // addTo - what we are adding to + inheritProps = function( newProps, oldProps, addTo ) { + addTo = addTo || newProps + for ( var name in newProps ) { + // Check if we're overwriting an existing function + addTo[name] = isFunction(newProps[name]) && + isFunction(oldProps[name]) && + fnTest.test(newProps[name]) ? (function( name, fn ) { + return function() { + var tmp = this._super, + ret; + + // Add a new ._super() method that is the same method + // but on the super-class + this._super = oldProps[name]; + + // The method only need to be bound temporarily, so we + // remove it when we're done executing + ret = fn.apply(this, arguments); + this._super = tmp; + return ret; + }; + })(name, newProps[name]) : newProps[name]; + } + }, + + + /** + * @class jQuery.Class + * @plugin jquery/class + * @tag core + * @download dist/jquery/jquery.class.js + * @test jquery/class/qunit.html + * + * Class provides simulated inheritance in JavaScript. Use clss to bridge the gap between + * jQuery's functional programming style and Object Oriented Programming. It + * is based off John Resig's [http://ejohn.org/blog/simple-javascript-inheritance/|Simple Class] + * Inheritance library. Besides prototypal inheritance, it includes a few important features: + * + * - Static inheritance + * - Introspection + * - Namespaces + * - Setup and initialization methods + * - Easy callback function creation + * + * + * ## Static v. Prototype + * + * Before learning about Class, it's important to + * understand the difference between + * a class's __static__ and __prototype__ properties. + * + * //STATIC + * MyClass.staticProperty //shared property + * + * //PROTOTYPE + * myclass = new MyClass() + * myclass.prototypeMethod() //instance method + * + * A static (or class) property is on the Class constructor + * function itself + * and can be thought of being shared by all instances of the + * Class. Prototype propertes are available only on instances of the Class. + * + * ## A Basic Class + * + * The following creates a Monster class with a + * name (for introspection), static, and prototype members. + * Every time a monster instance is created, the static + * count is incremented. + * + * @codestart + * $.Class.extend('Monster', + * /* @static *| + * { + * count: 0 + * }, + * /* @prototype *| + * { + * init: function( name ) { + * + * // saves name on the monster instance + * this.name = name; + * + * // sets the health + * this.health = 10; + * + * // increments count + * this.Class.count++; + * }, + * eat: function( smallChildren ){ + * this.health += smallChildren; + * }, + * fight: function() { + * this.health -= 2; + * } + * }); + * + * hydra = new Monster('hydra'); + * + * dragon = new Monster('dragon'); + * + * hydra.name // -> hydra + * Monster.count // -> 2 + * Monster.shortName // -> 'Monster' + * + * hydra.eat(2); // health = 12 + * + * dragon.fight(); // health = 8 + * + * @codeend + * + * + * Notice that the prototype init function is called when a new instance of Monster is created. + * + * + * ## Inheritance + * + * When a class is extended, all static and prototype properties are available on the new class. + * If you overwrite a function, you can call the base class's function by calling + * this._super. Lets create a SeaMonster class. SeaMonsters are less + * efficient at eating small children, but more powerful fighters. + * + * + * Monster.extend("SeaMonster",{ + * eat: function( smallChildren ) { + * this._super(smallChildren / 2); + * }, + * fight: function() { + * this.health -= 1; + * } + * }); + * + * lockNess = new SeaMonster('Lock Ness'); + * lockNess.eat(4); //health = 12 + * lockNess.fight(); //health = 11 + * + * ### Static property inheritance + * + * You can also inherit static properties in the same way: + * + * $.Class.extend("First", + * { + * staticMethod: function() { return 1;} + * },{}) + * + * First.extend("Second",{ + * staticMethod: function() { return this._super()+1;} + * },{}) + * + * Second.staticMethod() // -> 2 + * + * ## Namespaces + * + * Namespaces are a good idea! We encourage you to namespace all of your code. + * It makes it possible to drop your code into another app without problems. + * Making a namespaced class is easy: + * + * @codestart + * $.Class.extend("MyNamespace.MyClass",{},{}); + * + * new MyNamespace.MyClass() + * @codeend + *

Introspection

+ * Often, it's nice to create classes whose name helps determine functionality. Ruby on + * Rails's [http://api.rubyonrails.org/classes/ActiveRecord/Base.html|ActiveRecord] ORM class + * is a great example of this. Unfortunately, JavaScript doesn't have a way of determining + * an object's name, so the developer must provide a name. Class fixes this by taking a String name for the class. + * @codestart + * $.Class.extend("MyOrg.MyClass",{},{}) + * MyOrg.MyClass.shortName //-> 'MyClass' + * MyOrg.MyClass.fullName //-> 'MyOrg.MyClass' + * @codeend + * The fullName (with namespaces) and the shortName (without namespaces) are added to the Class's + * static properties. + * + * + *

Setup and initialization methods

+ *

+ * Class provides static and prototype initialization functions. + * These come in two flavors - setup and init. + * Setup is called before init and + * can be used to 'normalize' init's arguments. + *

+ *
PRO TIP: Typically, you don't need setup methods in your classes. Use Init instead. + * Reserve setup methods for when you need to do complex pre-processing of your class before init is called. + * + *
+ * @codestart + * $.Class.extend("MyClass", + * { + * setup: function() {} //static setup + * init: function() {} //static constructor + * }, + * { + * setup: function() {} //prototype setup + * init: function() {} //prototype constructor + * }) + * @codeend + * + *

Setup

+ *

Setup functions are called before init functions. Static setup functions are passed + * the base class followed by arguments passed to the extend function. + * Prototype static functions are passed the Class constructor function arguments.

+ *

If a setup function returns an array, that array will be used as the arguments + * for the following init method. This provides setup functions the ability to normalize + * arguments passed to the init constructors. They are also excellent places + * to put setup code you want to almost always run.

+ *

+ * The following is similar to how [jQuery.Controller.prototype.setup] + * makes sure init is always called with a jQuery element and merged options + * even if it is passed a raw + * HTMLElement and no second parameter. + *

+ * @codestart + * $.Class.extend("jQuery.Controller",{ + * ... + * },{ + * setup: function( el, options ) { + * ... + * return [$(el), + * $.extend(true, + * this.Class.defaults, + * options || {} ) ] + * } + * }) + * @codeend + * Typically, you won't need to make or overwrite setup functions. + *

Init

+ * + *

Init functions are called after setup functions. + * Typically, they receive the same arguments + * as their preceding setup function. The Foo class's init method + * gets called in the following example: + *

+ * @codestart + * $.Class.Extend("Foo", { + * init: function( arg1, arg2, arg3 ) { + * this.sum = arg1+arg2+arg3; + * } + * }) + * var foo = new Foo(1,2,3); + * foo.sum //-> 6 + * @codeend + *

Callbacks

+ *

Similar to jQuery's proxy method, Class provides a + * [jQuery.Class.static.callback callback] + * function that returns a callback to a method that will always + * have + * this set to the class or instance of the class. + *

+ * The following example uses this.callback to make sure + * this.name is available in show. + * @codestart + * $.Class.extend("Todo",{ + * init: function( name ) { this.name = name } + * get: function() { + * $.get("/stuff",this.callback('show')) + * }, + * show: function( txt ) { + * alert(this.name+txt) + * } + * }) + * new Todo("Trash").get() + * @codeend + *

Callback is available as a static and prototype method.

+ *

Demo

+ * @demo jquery/class/class.html + * + * @constructor Creating a new instance of an object that has extended jQuery.Class + * calls the init prototype function and returns a new instance of the class. + * + */ + + clss = $.Class = function() { + if (arguments.length) { + clss.extend.apply(clss, arguments); + } + }; + + /* @Static*/ + extend(clss, { + /** + * @function callback + * Returns a callback function for a function on this Class. + * The callback function ensures that 'this' is set appropriately. + * @codestart + * $.Class.extend("MyClass",{ + * getData: function() { + * this.showing = null; + * $.get("data.json",this.callback('gotData'),'json') + * }, + * gotData: function( data ) { + * this.showing = data; + * } + * },{}); + * MyClass.showData(); + * @codeend + *

Currying Arguments

+ * Additional arguments to callback will fill in arguments on the returning function. + * @codestart + * $.Class.extend("MyClass",{ + * getData: function( callback ) { + * $.get("data.json",this.callback('process',callback),'json'); + * }, + * process: function( callback, jsonData ) { //callback is added as first argument + * jsonData.processed = true; + * callback(jsonData); + * } + * },{}); + * MyClass.getData(showDataFunc) + * @codeend + *

Nesting Functions

+ * Callback can take an array of functions to call as the first argument. When the returned callback function + * is called each function in the array is passed the return value of the prior function. This is often used + * to eliminate currying initial arguments. + * @codestart + * $.Class.extend("MyClass",{ + * getData: function( callback ) { + * //calls process, then callback with value from process + * $.get("data.json",this.callback(['process2',callback]),'json') + * }, + * process2: function( type,jsonData ) { + * jsonData.processed = true; + * return [jsonData]; + * } + * },{}); + * MyClass.getData(showDataFunc); + * @codeend + * @param {String|Array} fname If a string, it represents the function to be called. + * If it is an array, it will call each function in order and pass the return value of the prior function to the + * next function. + * @return {Function} the callback function. + */ + callback: function( funcs ) { + + //args that should be curried + var args = makeArray(arguments), + self; + + funcs = args.shift(); + + if (!isArray(funcs) ) { + funcs = [funcs]; + } + + self = this; + + return function class_cb() { + var cur = concatArgs(args, arguments), + isString, + length = funcs.length, + f = 0, + func; + + for (; f < length; f++ ) { + func = funcs[f]; + if (!func ) { + continue; + } + + isString = typeof func == "string"; + if ( isString && self._set_called ) { + self.called = func; + } + cur = (isString ? self[func] : func).apply(self, cur || []); + if ( f < length - 1 ) { + cur = !isArray(cur) || cur._use_call ? [cur] : cur + } + } + return cur; + } + }, + /** + * @function getObject + * Gets an object from a String. + * If the object or namespaces the string represent do not + * exist it will create them. + * @codestart + * Foo = {Bar: {Zar: {"Ted"}}} + * $.Class.getobject("Foo.Bar.Zar") //-> "Ted" + * @codeend + * @param {String} objectName the object you want to get + * @param {Object} [current=window] the object you want to look in. + * @return {Object} the object you are looking for. + */ + getObject: $.String.getObject, + /** + * @function newInstance + * Creates a new instance of the class. This method is useful for creating new instances + * with arbitrary parameters. + *

Example

+ * @codestart + * $.Class.extend("MyClass",{},{}) + * var mc = MyClass.newInstance.apply(null, new Array(parseInt(Math.random()*10,10)) + * @codeend + * @return {class} instance of the class + */ + newInstance: function() { + var inst = this.rawInstance(), + args; + if ( inst.setup ) { + args = inst.setup.apply(inst, arguments); + } + if ( inst.init ) { + inst.init.apply(inst, isArray(args) ? args : arguments); + } + return inst; + }, + /** + * Setup gets called on the inherting class with the base class followed by the + * inheriting class's raw properties. + * + * Setup will deeply extend a static defaults property on the base class with + * properties on the base class. For example: + * + * $.Class("MyBase",{ + * defaults : { + * foo: 'bar' + * } + * },{}) + * + * MyBase("Inheriting",{ + * defaults : { + * newProp : 'newVal' + * } + * },{} + * + * Inheriting.defaults -> {foo: 'bar', 'newProp': 'newVal'} + * + * @param {Object} baseClass the base class that is being inherited from + * @param {String} fullName the name of the new class + * @param {Object} staticProps the static properties of the new class + * @param {Object} protoProps the prototype properties of the new class + */ + setup: function( baseClass, fullName ) { + this.defaults = extend(true, {}, baseClass.defaults, this.defaults); + return arguments; + }, + rawInstance: function() { + initializing = true; + var inst = new this(); + initializing = false; + return inst; + }, + /** + * Extends a class with new static and prototype functions. There are a variety of ways + * to use extend: + * @codestart + * //with className, static and prototype functions + * $.Class.extend('Task',{ STATIC },{ PROTOTYPE }) + * //with just classname and prototype functions + * $.Class.extend('Task',{ PROTOTYPE }) + * //With just a className + * $.Class.extend('Task') + * @codeend + * @param {String} [fullName] the classes name (used for classes w/ introspection) + * @param {Object} [klass] the new classes static/class functions + * @param {Object} [proto] the new classes prototype functions + * @return {jQuery.Class} returns the new class + */ + extend: function( fullName, klass, proto ) { + // figure out what was passed + if ( typeof fullName != 'string' ) { + proto = klass; + klass = fullName; + fullName = null; + } + if (!proto ) { + proto = klass; + klass = null; + } + + proto = proto || {}; + var _super_class = this, + _super = this.prototype, + name, shortName, namespace, prototype; + + // Instantiate a base class (but only create the instance, + // don't run the init constructor) + initializing = true; + prototype = new this(); + initializing = false; + // Copy the properties over onto the new prototype + inheritProps(proto, _super, prototype); + + // The dummy class constructor + + function Class() { + // All construction is actually done in the init method + if ( initializing ) return; + + if ( this.constructor !== Class && arguments.length ) { //we are being called w/o new + return arguments.callee.extend.apply(arguments.callee, arguments) + } else { //we are being called w/ new + return this.Class.newInstance.apply(this.Class, arguments) + } + } + // Copy old stuff onto class + for ( name in this ) { + if ( this.hasOwnProperty(name) ) { + Class[name] = this[name]; + } + } + + // copy new props on class + inheritProps(klass, this, Class); + + // do namespace stuff + if ( fullName ) { + + var parts = fullName.split(/\./), + shortName = parts.pop(), + current = clss.getObject(parts.join('.'), window, true), + namespace = current; + + + current[shortName] = Class; + } + + // set things that can't be overwritten + extend(Class, { + prototype: prototype, + namespace: namespace, + shortName: shortName, + constructor: Class, + fullName: fullName + }); + + //make sure our prototype looks nice + Class.prototype.Class = Class.prototype.constructor = Class; + + + /** + * @attribute fullName + * The full name of the class, including namespace, provided for introspection purposes. + * @codestart + * $.Class.extend("MyOrg.MyClass",{},{}) + * MyOrg.MyClass.shortName //-> 'MyClass' + * MyOrg.MyClass.fullName //-> 'MyOrg.MyClass' + * @codeend + */ + + var args = Class.setup.apply(Class, concatArgs([_super_class],arguments)); + + if ( Class.init ) { + Class.init.apply(Class, args || []); + } + + /* @Prototype*/ + return Class; + /** + * @function setup + * If a setup method is provided, it is called when a new + * instances is created. It gets passed the same arguments that + * were given to the Class constructor function ( new Class( arguments ... )). + * + * $.Class("MyClass", + * { + * setup: function( val ) { + * this.val = val; + * } + * }) + * var mc = new MyClass("Check Check") + * mc.val //-> 'Check Check' + * + * Setup is called before [jQuery.Class.prototype.init init]. If setup + * return an array, those arguments will be used for init. + * + * $.Class("jQuery.Controller",{ + * setup : function(htmlElement, rawOptions){ + * return [$(htmlElement), + * $.extend({}, this.Class.defaults, rawOptions )] + * } + * }) + * + *
PRO TIP: + * Setup functions are used to normalize constructor arguments and provide a place for + * setup code that extending classes don't have to remember to call _super to + * run. + *
+ * + * Setup is not defined on $.Class itself, so calling super in inherting classes + * will break. Don't do the following: + * + * $.Class("Thing",{ + * setup : function(){ + * this._super(); // breaks! + * } + * }) + * + * @return {Array|undefined} If an array is return, [jQuery.Class.prototype.init] is + * called with those arguments; otherwise, the original arguments are used. + */ + //break up + /** + * @function init + * If an init method is provided, it gets called when a new instance + * is created. Init gets called after [jQuery.Class.prototype.setup setup], typically with the + * same arguments passed to the Class + * constructor: ( new Class( arguments ... )). + * + * $.Class("MyClass", + * { + * init: function( val ) { + * this.val = val; + * } + * }) + * var mc = new MyClass(1) + * mc.val //-> 1 + * + * [jQuery.Class.prototype.setup Setup] is able to modify the arguments passed to init. Read + * about it there. + * + */ + //Breaks up code + /** + * @attribute Class + * References the static properties of the instance's class. + *

Quick Example

+ * @codestart + * // a class with a static classProperty property + * $.Class.extend("MyClass", {classProperty : true}, {}); + * + * // a new instance of myClass + * var mc1 = new MyClass(); + * + * // + * mc1.Class.classProperty = false; + * + * // creates a new MyClass + * var mc2 = new mc.Class(); + * @codeend + * Getting static properties via the Class property, such as it's + * [jQuery.Class.static.fullName fullName] is very common. + */ + } + + }) + + + + + + clss.prototype. + /** + * @function callback + * Returns a callback function. This does the same thing as and is described better in [jQuery.Class.static.callback]. + * The only difference is this callback works + * on a instance instead of a class. + * @param {String|Array} fname If a string, it represents the function to be called. + * If it is an array, it will call each function in order and pass the return value of the prior function to the + * next function. + * @return {Function} the callback function + */ + callback = clss.callback; + + +})(jQuery) \ No newline at end of file diff --git a/src/static/js/revisioncache.js b/src/static/js/revisioncache.js new file mode 100644 index 00000000000..5a596e1e7b2 --- /dev/null +++ b/src/static/js/revisioncache.js @@ -0,0 +1,850 @@ +/** + * Copyright 2009 Google Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +require('./jquery.class'); +var libchangeset = require("./Changeset"); + +function log () { + console.log.apply(console, arguments); +}; + +$.Class("Changeset", + {//statics + }, + {//instance + init: function (from_revision, to_revision, deltatime, value) { + this.from_revision = from_revision; + this.to_revision = to_revision; + this.deltatime = deltatime; + this.value = value; + }, + 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); + //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. + */ + apply: function (pad) { + // must mutate attribution lines before text lines + libchangeset.mutateAttributionLines(this.value, pad.alines, pad.apool); + + // Looks like this function can take a regular array of strings + libchangeset.mutateTextLines(this.value, /* padcontents */ /*this.lines */ pad.divs); + }, + /** + * Return a list of all authors that took part in this change + * @param {Apool} apool - The attribute pool to use + * @returns {Object} - Like so {: 1} + */ + getAuthors: function (apool) { + var authors = {} + libchangeset.eachAttribNumber(this.value, function (attribNum) { + try {// Any errors thrown inside this function will go straight to area 51... + if(apool.getAttribKey(attribNum) != 'author') return + authors[apool.getAttribValue(attribNum)] = 1 + }catch(e) {console.error(e.message)} + }) + return authors + }, + /** + * 'Follow' the Changeset in a given direction, returning the revision at + * the specified end of the edge. + * @param {bool} direction - If true, go to the 'from' revision, otherwise + * go to the 'to' revision. + * @returns {Revision} + */ + follow: function () { + return this.to_revision; + } + } +); + +/** + * Revision class. Represents a specific revision. Each instance has three + * possible edges in each direction. Each edge is essentially a Changeset. + * We store three edges at different granularities, to make skipping fast. + * e.g. to go from r1 to r251, you start at r1, use the big edge to go to + * r100, use the big edge again to go to r200, use the next 5 medium edges to + * go from r200 to r210, etc. until reaching r250, follow the next small edge + * to get to 251. A total of 8 edges are traversed (a.k.a. applied), + * making this significantly cheaper than applying all 250 changesets from r1 + * to r251. + */ +$.Class("Revision", + {//statics + // we rely on the fact that granularities are always traversed biggest to + // smallest. Changing this will break lots of stuff. + granularities: [ 1000, 100, 10, 1 ] + }, + {//instance + /** + * Create a new revision for the specified revision number. + * @constructor + * @param {number} revnum - The revision number this object represents. + */ + init: function (revnum) { + this.revnum = revnum; + // next/previous edges, granularityed as big, medium and small + this.next = {}; + this.previous = {}; + for (var g=0; g 0 ? this.next : this.previous + , granularity = Math.abs(delta_revnum) + + direction_edges[granularity] = new Changeset(this, target, timedelta, changeset); + + return null; + }, + getAuthors: function(apool) { + try { + var previousRev = this.previous[Revision.granularities[Revision.granularities.length-1]].to_revision + , changeset = previousRev.next[Revision.granularities[Revision.granularities.length-1]] + return changeset.getAuthors(apool) + }catch(e) { + return {} // in case it's not loaded yet + } + }, + lt: function (other, is_reverse) { + if (is_reverse) + return this.gt(other); + return this.revnum < other.revnum; + }, + gt: function (other, is_reverse) { + if (is_reverse) + return this.lt(other); + return this.revnum > other.revnum; + } + } +); + +$.Class("RevisionCache", + { + VERBOSE: true, + }, + {//instance + /** + * Create a new RevisionCache. + * @constructor + * @param {TimesliderClient} connection - The connection to be used for loading changesets. + * @param {number} head_revnum - The current head revision number. TODO: we can probably do away with this now. + */ + init: function (connection, head_revnum) { + this.log = RevisionCache.VERBOSE ? log : function () {}; + this.connection = connection; + this.loader = new ChangesetLoader(connection); + this.revisions = {}; + this.head_revision = this.getRevision(head_revnum || 0); + this.loader.start(); + this.prefetch(); + }, + /** + * Get the head revision. + * @returns {Revision} - the head revision. + */ + getHeadRevision: function () { + return this.head_revision; + }, + /** + * Get a Revision instance for the specified revision number. + * If we don't yet have a Revision instance for this revision, create a + * new one. Also make sure that the head_revision attribute always refers + * to the instance for the pad's head revision. + * @param {number} revnum - The revision number for which we want a + * Revision object. + * @returns {Revision} + */ + getRevision: function (revnum) { + if (revnum in this.revisions) + return this.revisions[revnum]; + var revision = new Revision(revnum); + this.revisions[revnum] = revision; + if (this.head_revision && revnum > this.head_revision.revnum) { + this.head_revision = revision; + } + return revision; + }, + /** + * Add a new revision at the head. + * @param {number} revnum - the revision number of the new revision. + * @param {function} cb - callback + */ + fetchNewHead: function (new_revnum, cb) { + this.loader.enqueue(this.head_revision.revnum, 1, function() { + log('Fetched new head revision: ', new_revnum) + cb && cb() + }) + this.head_revision = this.getRevision(new_revnum); + }, + /** + * Links two revisions, specified by from and to with the changeset data + * in value and reverseValue respectively. + * @param {number} from - The revision number from which the forward + * changeset originates. + * @param {number} to - The revision number to which the forward changeset + * bring us. + * @param {changeset} forwardValue - The forward changeset data. + * @param {changeset} reverseValue - The reverse changeset data. + * @param {time} timedelta - The difference in time between the from and + * to revisions. + */ + addChangesetPair: function (from, to, value, reverseValue, timedelta) { + var from_rev = this.getRevision(from); + var to_rev = this.getRevision(to); + from_rev.addChangeset(to_rev, value, timedelta); + to_rev.addChangeset(from_rev, reverseValue, -timedelta); + }, + + /** + * Find a (minimal) path from a given revision to another revision, + * regardless of what changesets are available + * @param {number} from - The revision # from which to start. + * @param {number} to - The revision # which the path should try to reach. + * @param {number} max - The last revision # + * @returns {object} - A list of tuples (i.e. [10, 20]) which each describe an edge between two revisions. + */ + calcPath: function (from, to) { + var path = [] + , delta = to - from + , directionLeft = delta < 0 + , adelta = Math.abs(delta) + , sign = delta / adelta + , granularity + , next, shortcut + , max = this.head_revision.revnum + + if(delta == 0) return path + + for(var g=0; g < Revision.granularities.length; g++) { + granularity = Revision.granularities[g] + if(granularity > max) continue; + if(granularity <= adelta + || ( Math.round(from / granularity)*granularity != Math.round(to /granularity)*granularity && Math.round(adelta / granularity)*granularity == 1 ) + // (check if it's faster to overshoot the target with a higher granularity and go back afterwards) + ){ + // Use the highways, e.g. 39 -> 40 -> 30 ->* 27 instead of 39 -> 29 ->* 27 + if(from % granularity != 0) { + if((shortcut = Math.round(from/granularity)*granularity) > max) continue; // no highway nearby, so we hike to the next one... + next = shortcut + path = this.calcPath(from, next) // go to the highway + }else { + // we're already on the highway, so use it. + next = from+(granularity*sign) + if(next < 0 || next > max) continue// check for constraints + path.push([from, next]) + } + + return path.concat(this.calcPath(next, to)) // recursion + } + } + throw new Error('Ooops! All possibility sources drained. Input is likely to be invalid.') + }, + + /** + * Returnes the changesets to go from `from_revnum` to `to_revnum` + * + * @param {Number} from_revnum + * @param {Number} to_revnum + * @param {Function} - applyChangeset_callback(arrayOfChangesets) called when everything is ready + */ + //TODO: horrible name! + transition: function (from_revnum, to_revnum, applyChangeset_callback) { + var _this = this + var path = this.calcPath(from_revnum, to_revnum); + var current_revision = this.getRevision(from_revnum); + var target_revision = this.getRevision(to_revnum); + + this.log("[revisioncache > transition] from %d -> %d", from_revnum, to_revnum); + log("PATH: ", print_path(path)) + // For debugging: + function print_path(path) { + var res = "["; + res += path + .map(function(edge) {return ''+edge[0]+'->'+edge[1]}) + .join(', ') + res += "]"; + return res; + } + + _this.requestChangesets(path, function() { + var changesetList = path.map(function(edge) { + var delta = edge[1]-edge[0] + , granularity = Math.abs(delta) + , start_rev = _this.getRevision(edge[0]) + , edge_set = delta > 0 ? start_rev.next : start_rev.previous + + return edge_set[granularity] + }) + + applyChangeset_callback && applyChangeset_callback(changesetList) + }); + }, + + /** + * Request changesets which will allow transitioning from 'from' to 'to' + * from the server. + * @param {Array} path - The path from one rev to another (e.g. [[0,1], [1,2], [2,3], [3,13]] ) + * @param {function} changesetsProcessed_callback - A callback triggered + * when all necessary changesets are available + */ + requestChangesets: function (path, changesetsProcessed_callback) { + var _this = this + this.log("[revisioncache] requestChangesets: "); // XXX: Log the path here + + var totalRequests = 0 + path.forEach(function(edge) { + var delta = edge[1] - edge[0] + , granularity = Math.abs(delta) + , start_rev = _this.getRevision(edge[0]) + , direction_changesets = delta > 0 ? start_rev.next : start_rev.previous + + if(direction_changesets[granularity]) return // this edge exists already. no need to fetch it again + + _this.log("\t[requestChangesets] REQUEST changeset from %d -> %d", edge[0], edge[1]); + _this.loader.enqueue(Math.min(edge[0], edge[1]), granularity, process_received_changeset); + totalRequests++ + }) + + if(totalRequests == 0) changesetsProcessed_callback && changesetsProcessed_callback() + + var count = 0 // the path segment we're at right now + function process_received_changeset (data) { + count++ + + _this.log("[revisioncache] received changesets {from: %d, to: %d} @ granularity: %d", data.start, data.actualEndNum, data.granularity); + _this.processChangesetInfo(data) + + if (count == totalRequests) { + changesetsProcessed_callback && changesetsProcessed_callback() + } + } + + }, + + processChangesetInfo: function(data) { + var curr = data.start; + for (var i = 0; i < data.timeDeltas.length; i++, curr += data.granularity) { + this.addChangesetPair(curr, curr + data.granularity, data.forwardsChangesets[i], data.backwardsChangesets[i], data.timeDeltas[i]); + } + }, + + prefetch: function() { + var _this = this + , max = this.getHeadRevision().revnum + Revision.granularities.forEach(function(granularity) { + var lastHop = Math.floor( max/granularity )*granularity + , fetchStart = lastHop - (granularity*100) + if(fetchStart < 0) fetchStart = 0 + + // prefetch changesets for this granularity + _this.loader.enqueue(fetchStart, granularity, function(data) { + _this.processChangesetInfo(data) + log('Prefetched: 100 revs @ granularity '+granularity) + }); + }) + } + } +); + +$.Class("Thread", + {//statics + VERBOSE: true + }, + {//instance + init: function (interval) { + this._is_running = false; + this._is_stopping = false; + this._interval_id = null; + this._interval = interval ? interval : 1000; + this.log = Thread.VERBOSE ? log : function () {}; + }, + _run: function () { + this.log("[thread] tick"); + }, + // start the run loop + start: function () { + var _this = this; + this.log("[thread] starting"); + var wrapper = function () { + if (_this._is_running && _this._is_stopping) { + this.log("[thread] shutting down"); + clearInterval(_this._interval_id); + _this._is_running = false; + return; + } + _this._run.apply(_this); + }; + this._is_running = true; + this._is_stopping = false; + this._interval_id = setInterval(wrapper, this._interval); + }, + // stop the run loop + stop: function () { + this._is_stopping = true; + this.log("[thread] request stop"); + // TODO: consider finding a way to make this block + // or alternatively, having a callback which is called + // when the thread stops + } + } +); + +$.Class("ChangesetRequest", + {//statics + }, + {//instance + init: function (start, granularity, callback) { + this.log = ChangesetLoader.VERBOSE ? log : function () {}; + this.start = start; + this.granularity = granularity; + this.request_id = (this.granularity << 16) + this.start; + this.fulfill_callback = callback; + }, + getRequestID: function () { + return this.request_id; + }, + fulfill: function (data) { + var id = this.getRequestID(); + this.log("[changesetrequest] Fulfilling request: %d, start: %d, granularity: %d", id, id & 0xffff, id >> 16); + if (this.fulfill_callback) + this.fulfill_callback(data); + } + + } +); + +Thread("ChangesetLoader", + {//statics + VERBOSE: false, + }, + {//instance + /** + * Create a new ChangesetLoader. + * @constructor + * @param {TimesliderClient} connection - a TimesliderClient object to be used + * for communication with the server. + */ + init: function (connection) { + var _this = this + this._super(200); + this.connection = connection; + this.queues = {}; + Revision.granularities.forEach(function(granularity) { + _this.queues[granularity] = []; + }) + this.pending = {}; + this.connection.on("CHANGESET_REQ", function () { + _this.on_response.apply(_this, arguments); + }); + this.log = ChangesetLoader.VERBOSE ? log : function () {}; + }, + /** + * Enqueue a request for changesets. The changesets will be retrieved + * asynchronously. + * @param {number} start - The revision from which to start. + * + * @param {number} granularity - The granularity of the changesets. If this + * is 1, the response will include changesets which + * can be applied to go from revision r to r+1. + * If 10 is specified, the resulting changesets will + * be 'condensed', so that each changeset will go from + * r to r+10. + * If any other number is specified, that granularity will + * apply. + * + * TODO: there is currently no 'END' revision implemented + * in the server. The 'END' calculated at the server is: + * start + (100 * granularity) + * We should probably fix this so that you can specify + * exact ranges. Right now, the minimum number of + * changesets/revisions you can retrieve is 100, which + * feels broken. + * @param {function} callback - A callback which will be triggered when the request has + * been fulfilled. The context of the callback will be the + * ChangesetRequest object, so you can check what you actually + * asked for. + */ + enqueue: function (start, granularity, callback) { + var _this = this + this.log("[changeset_loader] enqueue: %d, %d", start, granularity); + //TODO: check cache to see if we really need to fetch this + // maybe even do splices if we just need a smaller range + // in the middle + var queue = null; + for(var g=0; g 0) { + // TODO: pop and handle + var request = queue.pop(); + if (request.getRequestID() in this.pending) { + //this request is already pending! + var id = request.getRequestID(); + this.log("ALREADY PENDING REQUEST: %d, start: %d, granularity: %d", id, id & 0xffff, id >> 16); + continue; + } + //TODO: test AGAIN to make sure that it hasn't been retrieved and cached by + //a previous request. This should handle the case when two requests for the + //same changesets are enqueued (which would be fine, as at enqueue time, we + //only check the cache of AVAILABLE changesets, not the pending requests), + //the first one is fulfilled, and then we pop the second one, and don't + //need to perform a server request. Note: it might be worth changing enqueue + //to check the pending requests queue to avoid this situation entirely. + + this.connection.sendMessage("CHANGESET_REQ", { + start: request.start, + granularity: request.granularity, + requestID: request.getRequestID(), + }, addToPending); + } + } + //TODO: this stop is just for debugging!!!! + //FIXME: remove when done testing + //this.stop(); + }, + on_response: function (data) { + this.log("[changesetloader] on_response: ", data); + if (!(data.requestID in this.pending)) { + this.log("[changesetloader] WTF? changeset not pending: ", data.requestID); + return; + } + + // pop it from the pending list: + var request = this.pending[data.requestID]; + delete this.pending[data.requestID]; + this.log("[changesetloader] still pending: ", this.pending); + //fulfill the request + request.fulfill(data); + }, + } +); + +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 '.' class, which is applied + // to blobs which were authored by that . + 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 domline = require("./domline").domline; +$.Class("PadClient", + {//static + USE_COMPOSE: false, + VERBOSE: true, + }, + {//instance + /** + * Create a PadClient. + * @constructor + * @param {RevisionCache} revisionCache - A RevisionCache object to use. + * @param {dict} options - All the necessary options. TODO: document this. + */ + init: function (revisionCache, options) { + this.revisionCache = revisionCache; + this.revision = this.revisionCache.getRevision(options.revnum); + this.timestamp = options.timestamp; + this.alines = libchangeset.splitAttributionLines(options.atext.attributes, options.atext.text); + this.apool = (new AttribPool()).fromJsonable(options.atext.apool); + this.lines = libchangeset.splitTextLines(options.atext.text); + this.authors = {}; + this.dynamicCSS = libcssmanager.makeCSSManager('dynamicsyntax'); + this.palette = options.palette; + this.log = PadClient.VERBOSE ? log : function () {}; + + this.updateAuthors(options.author_info); + + //TODO: this is a kludge! we should receive the padcontent as an + //injected dependency + this.divs = []; + this.padcontent = $("#padcontent"); + for (var i in this.lines) { + var div = this._getDivForLine(this.lines[i], this.alines[i]); + this.divs.push(div); + this.padcontent.append(div); + } + + // monkey patch divs.splice to use our custom splice function + this.divs.original_splice = this.divs.splice; + 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) { + return this[index].data('text'); + }; + }, + + getVisibleAuthors: function() { + var authors = {} + , _this = this + this.alines.forEach(function(aline) { + libchangeset.eachAttribNumber(aline, function(attribNum) { + if(_this.apool.getAttribKey(attribNum) != 'author') return + authors[_this.apool.getAttribValue(attribNum)] = 1 + }) + }) + return authors + }, + + goToRevision: function (revnum, atRevision_callback) { + this.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) { + _this.log("[padclient > applyChangeset_callback] path:", path); + var time = _this.timestamp; + var p, changeset = null; //pre-declare, because they're used in both blocks. + if (PadClient.USE_COMPOSE) { + var composed = path[0]; + var _path = path.slice(1); + for (p in _path) { + changeset = _path[p]; + composed = composed.compose(changeset, _this); + } + composed.apply(_this); + time += composed.deltatime * 1000; + } else { // Don't compose, just apply + for (p in path) { + changeset = path[p]; + time += changeset.deltatime * 1000; + //try { + _this.log("[transition] %d -> %d, changeset: %s", changeset.from_revision.revnum, changeset.to_revision.revnum, changeset.value); + changeset.apply(_this); + /*} catch (err) { + log("Error applying changeset: "); + log("\t", changeset.value); + log("\t %d -> %d ", changeset.from_revision.revnum, changeset.to_revision.revnum); + log(err); + log("--------------"); + }*/ + } + } + + // set revision and timestamp + _this.revision = path.slice(-1)[0].to_revision; + _this.timestamp = time; + // fire the callback + if (atRevision_callback) { + _this.log("[padclient] about to call atRevision_callback", _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; + this.log("[updateAuthors]: ", authors); + 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); + } + }, + /** + * Merge a foreign (forward) changeset into our data. This involves rebuilding + * the forward changeset in our apool and building a reverse changeset. + * This is used to move new upstream changesets/revisions into our apool context. + * @param {string} changeset - The foreign changeset to merge + * @param {object} apool - The apool for that changeset + * @returns {object} - A values object with forward and reverse changesets. + */ + mergeForeignChangeset: function (changeset, apool) { + var values = {}; + values.forward = libchangeset.moveOpsToNewPool( + changeset, + (new AttribPool()).fromJsonable(apool), + this.apool + ); + var reverseValue = libchangeset.inverse( + changeset, + this.divs, + this.alines, + this.apool + ); + values.reverse = libchangeset.moveOpsToNewPool( + reverseValue, + (new AttribPool()).fromJsonable(apool), + this.apool + ); + return values; + }, + /** + * 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) { + //this.log("[_getDivsForLine] %s; %s", text, atext); + var dominfo = domline.createDomLine(text != '\n', true); + + // Here begins the magic invocation: + linestylefilter.populateDomLine(text, atext, this.apool, dominfo); + dominfo.prepareForAdd(); + + var div = $("
" + + dominfo.node.innerHTML + "
"); + return div; + }, + /** + * we need a customized splice function for our divs array, because we + * need to be able to: + * - remove elements from the DOM when they are spliced out + * - create a new div for line elements and add them to the array + * instead of the raw line + * - add the new divs to the DOM + * this function is fully compliant with the Array.prototype.splice + * spec, as we're monkey-patching it on to the divs array. + * @param {number} index - Index at which to start changing the array. + * @param {number} howMany - An integer indicating the number of old array elements to remove. + * @param {array} elements - The elements to add to the array. In our case, these are lines. + */ + _spliceDivs: function (index, howMany/*, elements..*/) { + var elements = Array.prototype.slice.call(arguments, 2); + // remove howMany divs starting from index. We need to remove them from + // the DOM. + for (var i = index; i < (index + howMany) && i < this.divs.length; i++) + this.divs[i].remove(); + + // generate divs for the new elements: + var newdivs = []; + for (var i=0; i 1) { + var rev = Number(window.location.hash.substr(1)); + if(!isNaN(rev) && !(rev > this.revision_number)) + 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, this.elements.timestamp, + 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); + if (!this.is_playing) + this.goToRevision(value); + }, + onSlide: function (value) { + // console.log("in slide handler:", value); + if (!this.is_playing) + 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"); + this.elements.export_links = $('.timeslider #export > .exportlink'); + + }, + /** + * 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 () { + var _this = this; + + if (this.is_playing) { + this.is_playing = false; + return; + } + + var revnum = this.revision_number; + + var keepPlaying = function (current_revnum) { + // we've been stopped + if(!_this.is_playing) return _this.render() + + // we're at the end + if (current_revnum == _this.connection.getHeadRevision()) { + setTimeout(function() { + keepPlaying(current_revnum) + }, 200) + return; + } + + // next! + 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.setMax(this.connection.getHeadRevision()); + 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(); + this.renderExports(); + }, + + renderExports: function() { + var _this = this + , revnum = _this.revision_number -1 + + if(revnum < 0) revnum = 0 + + this.elements.export_links.each(function() { + var newLink = this.href.replace( /(.+?)\/\w+\/(\d+\/)?export/ , '$1/' + _this.connection.padID + '/' + revnum + '/export') + this.setAttribute('href', newLink); + }); + }, + + + /** + * Render the authors line. + */ + renderAuthors: function () { + var allAuthors = this.connection.getAuthors() + , visibleAuthors = this.connection.padClient.getVisibleAuthors() + , changesetAuthors = this.connection.getCurrentRevision().getAuthors(this.connection.padClient.apool) + + this.elements.authors.empty(); + // console.log('changesetAuthors',changesetAuthors,'visible authors: ',visibleAuthors,'allAuthors: ', allAuthors, this.connection.padClient.alines) + + for (var authorid in visibleAuthors) { + if(!(authorid in allAuthors)) continue; + var author = allAuthors[authorid]; + var span = $("") + .text(author.getName()) + .addClass('author') + .addClass(author.getCSSClass()); + + if(authorid in changesetAuthors) span.addClass('highlighted') + this.elements.authors.append(span); + } + + if ($.isEmptyObject(allAuthors)) { + this.elements.authors.append("No authors"); + } + }, + + /** + * 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; + + this.slider.indicateTransition(revnum) + + 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(); + }); + } + + } +); diff --git a/src/static/js/sliderui.js b/src/static/js/sliderui.js new file mode 100644 index 00000000000..aaa389a02e6 --- /dev/null +++ b/src/static/js/sliderui.js @@ -0,0 +1,198 @@ +/** + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS-IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +require("./jquery.class"); + +/** + * This is an implementation of a (very) simple Slider UI. + * + * Create a slider by doing: + * slider = new SliderUI(sliderbar_element, options); + * sliderbar_element should be a jquery wraper of the element which will serve as + * the bar on which the handles will be hung. + * optionalions is an optional dictionary which currently supports the following: + * value = the initial value for the default handle (default: 0) + * max = the maximum value for the slider (default: 100) + */ + + +/** + * A class for anything which can be hung off of the slider bar. + * I.e. this is for the handle, or saved-revisions (stars). + */ +$.Class("SliderHandleUI", + {//statics + }, + {//instance + /** + * Construct the SliderHandle. + * @param {SliderUI} slider The slider from which this handle will be hung. + * @param {Number} position The initial position for this handle. + */ + init: function (slider, value, type) { + //console.log("New SliderHandle(%d, %s)", value, type); + this.slider = slider; + this.value = value; + //create the element: + this.element = $("
"); + if (type === "") + type = "handle"; + this.element.addClass("ui-slider-handle-" + type); + this._mouseInit(); + }, + _mouseInit: function () { + this.element.on("mousedown.sliderhandle", null, this, function(event) { + //console.log("sliderhandleui - mousedown"); + }); + }, + } +); + +//TODO: +// - window resizing is currently broken! +// - keyboard events +$.Class("SliderUI", + {//statics + defaults: { + min: 0, + max: 100, + value: 0, + } + , animationDuration: 250 + }, + {//instance + init: function (element, timerEl, options) { + this.options = $.extend({}, this.defaults, options); + this.timerEl = timerEl + this.element = element; + this.current_value = this.options.value; + this.handles = []; + this.createHandle(this.current_value, 'handle'); + this._mouseInit(); + + // handle window resize + var _this = this; + $(window).resize(function() { + _this.render(); + }); + }, + _getStep: function () { + return (this.element.width()) / (this.options.max * 1.0); + }, + render: function (duration) { + var handle + , left, handleWidth + + if(!duration) duration = SliderUI.animationDuration + + for(var h in this.handles) { + handle = this.handles[h] + left = (handle.value * this._getStep()) + handleWidth = handle.element.width() + + // animate slider handle + handle.element.stop() + handle.element.animate({left: left-(handleWidth/2) }, duration); + + if(h == 0) { + // move the timer within the boundaries of the slider (centered above the handle if possible) + var timerWidth = this.timerEl.width() + , timerPos = Math.max(7, Math.min(left-(timerWidth/2)+(handleWidth/2), this.element.width()-timerWidth)) + this.timerEl.stop() + this.timerEl.animate({left: timerPos }, duration); + } + + } + }, + + /** + * Starts moving the handle, even though the revision is not loaded, yet. + * @param value - The revision to move the handle towards + */ + indicateTransition: function(value) { + this.handles[0].value = value + this.render(2000) + }, + /** + * Update the value in the UI. This should never be called internally. + * It should only be called by an event handler after a transition + * has completed. + * @param {number} value - The value to set. + */ + setValue: function (value) { + if (value < 0) + value = 0; + if (value > this.options.max) + value = this.options.max; + this.handles[0].value = value; + this.current_value = value; + this.render(); + }, + setMax: function (max) { + this.options.max = max; + this.render(); + }, + createHandle: function (value, type) { + //console.log("createHandle(%d, %s)", value, type); + var handle = new SliderHandleUI(this, value, type); + this.handles.push(handle); + this.element.append(handle.element); + return handle; + }, + _trigger: function (eventname, value) { + //console.log("triggering event: ", eventname); + if (eventname in this.options) { + return this.options[eventname](value); + } + }, + _mouseInit: function () { + // handle all mouse events for the slider and handles right here + var _this = this; + this.element.on("mousedown.slider", function (event) { + if (event.target == _this.element[0] || $(event.target).hasClass("ui-slider-handle")) { + // the click is on the slider bar itself. + var start_value = Math.round((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); + } + var prev_value = start_value; + + $(document).on("mousemove.slider", function (event) { + var current_value = Math.round((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 (prev_value != current_value) { + _this._trigger("slide", current_value); + prev_value = current_value; + } + }); + + $(document).on("mouseup.slider", function (event) { + // make sure to get rid of the handlers on document, + // we don't need them after this 'slide' session is done. + $(document).off("mouseup.slider mousemove.slider"); + var end_value = Math.round((event.clientX-_this.element.offset().left) / _this._getStep()); + //console.log("sliderbar mouseup, value:", end_value); + // always change the value at mouseup + _this._trigger("change", end_value); + + }); + } else { + console.log("We shouldn't be here!"); + console.log(event.target); + } + }); + }, + } +); diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js index b3c10b8a3a9..3e5e21aab58 100644 --- a/src/static/js/timeslider.js +++ b/src/static/js/timeslider.js @@ -1,9 +1,3 @@ -/** - * This code is mostly from the old Etherpad. Please help us to comment this code. - * This helps other people to understand this code better and helps them to improve it. - * TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED - */ - /** * Copyright 2009 Google Inc. * @@ -23,16 +17,299 @@ // These jQuery things should create local references, but for now `require()` // assigns to the global `$` and augments it with plugins. require('./jquery'); -JSON = require('./json2'); +require('./jquery.class'); +//JSON = require('./json2'); var createCookie = require('./pad_utils').createCookie; var readCookie = require('./pad_utils').readCookie; var randomString = require('./pad_utils').randomString; var hooks = require('./pluginfw/hooks'); -var token, padId, export_links; +var token, padId; + +$.Class("SocketClient", + { //statics + VERBOSE: false, + }, + { //instance + init: function (baseurl) { + this.baseurl = baseurl; + this.log = SocketClient.VERBOSE ? console.log : function () {}; + // connect to the server + this.log("[socket_client] connecting to:", this.baseurl); + this.socket = io.connect(this.baseurl, {resource: "socket.io"}); + // setup the socket callbacks: + _this = this; + + this.socket.on("connect", function() { + _this.onConnect.apply(_this, arguments); + }); + this.socket.on("disconnect", function() { + _this.onDisconnect.apply(_this, arguments); + }); + this.socket.on("message", function(message) { + _this.onMessage.apply(_this, arguments); + }); + }, + + onConnect: function() { + this.log("[socket_client] > onConnect"); + }, + + onDisconnect: function() { + this.log("[socket_client] > onDisconnect"); + }, + + /** + * Triggered when a new message arrives from the server. + * @param {object} message - The message. + */ + onMessage: function(message) { + this.log("[socket_client] > onMessage: ", message); + }, + + /** + * Sends a message to the server. + * @param {object} message - The message to send + * @param {function} callback - A callback function which will be called after + * the message has been sent to the socket. + */ + sendMessage: function(message, callback) { + this.log("[socket_client] > sendMessage: ", message); + this.socket.json.send(message); + if (callback) + callback(); + }, + } +); + +SocketClient("AuthenticatedSocketClient", + { //statics + VERBOSE: false, + }, + { //instance + init: function (baseurl, padID) { + this.log = AuthenticatedSocketClient.VERBOSE ? console.log : function () {}; + + //make sure we have a token + this.token = readCookie("token"); + if(this.token === null) + { + this.token = "t." + randomString(); + createCookie("token", this.token, 60); + } + this.padID = padID; + this.sessionID = decodeURIComponent(readCookie("sessionID")); + this.password = readCookie("password"); + this.handlers = {}; + + this._super(baseurl); + }, + + /** + * Sends a pad message to the server, including all the neccessary + * session info and tokens. + * @param {string} type - The message type to send. See the server code for + * valid message types. + * @param {object} data - The data payload to be sent to the server. + * @param {function} callback - A callback function which will be called after + * the message has been sent to the socket. + */ + sendMessage: function (type, data, callback) { + this.sessionID = decodeURIComponent(readCookie("sessionID")); + this.password = readCookie("password"); + var msg = { "component" : "pad", // FIXME: Remove this stupidity! + "type": type, + "data": data, + "padId": this.padID, + "token": this.token, + "sessionID": this.sessionID, + "password": this.password, + "protocolVersion": 2}; + this._super(msg, callback); + }, + + onMessage: function (message) { + this.log("[authorized_client] > onMessage:", message); + if (message.accessStatus) + { //access denied? + //TODO raise some kind of error? + this.log("ACCESS ERROR!"); + } + this.dispatchMessage(message.type, message.data); + }, + + /** + * Dispatch incoming messages to handlers in subclasses or registered + * as event handlers. + * @param {string} type - The type of the message. See the server code + * for possible values. + * @param {object} data - The message payload. + */ + dispatchMessage: function(type, data) { + this.log("[authorized_client] > dispatchMessage('%s', %s)", type, data); + // first call local handlers + if ("handle_" + type in this) + this["handle_" + type](data); + // then call registered handlers + if (type in this.handlers) + for(var h in this.handlers[type]) + { //TODO: maybe chain the handlers into some kind of chain-of-responsibility? + var handler = this.handlers[type][h]; + handler.handler.call(this, data, handler.context); + } + }, + + /** + * Register an event handler for a given message type. + * @param {string} type - The message type. + * @param {function} handler - The handler function. + * @param {object} context - Optionally, some context to be passed to the handler. + */ + on: function(type, handler, context) { + if (!(type in this.handlers)) + this.handlers[type] = []; + this.handlers[type].push({handler: handler, context: context}); + return this; + }, + + /** + * Dispatch COLLABROOM messages. + * @param {object} data - The data received from the server. + */ + handle_COLLABROOM: function(data) { + //this.log("[authsocket_client] handle_COLLABROOM: ", data); + this.dispatchMessage(data.type, data); + }, + + } +); + +require('./revisioncache'); +require('./revisionslider'); +AuthenticatedSocketClient("TimesliderClient", + { //statics + VERBOSE: false, + }, + { //instance + init: function (baseurl, padID) { + this.log = TimesliderClient.VERBOSE ? console.log : function () {}; + this._super(baseurl, padID); + }, + + onConnect: function () { + this.sendMessage("CLIENT_READY", {}); + }, + + initialize: function (clientVars) { + if (this.is_initialized) + return; + this.clientVars = clientVars; + var collabClientVars = this.clientVars.collab_client_vars; + this.savedRevisions = this.clientVars.savedRevisions; + + this.revisionCache = new RevisionCache(this, collabClientVars.rev || 0); + + this.padClient = new PadClient(this.revisionCache, + { + revnum: collabClientVars.lastCs, + timestamp: collabClientVars.time, + atext: { + 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")); + this.is_initialized = true; + }, -function init() { + // ------------------------------------------ + // Handling events + handle_CLIENT_VARS: function(data) { + this.log("[timeslider_client] handle_CLIENT_VARS: ", data); + this.initialize(data); + }, + + /** + * Handle USER_NEWINFO messages, which let us know that a (new) user + * has connected to this pad. + * @param {object} data - the data received from the server. + */ + handle_USER_NEWINFO: function (data) { + this.log("[timeslider_client] handle_USER_NEWINFO: ", data.userInfo); + //TODO: we might not want to add EVERY new user to the users list, + //possibly only active users? + var authors = {}; + authors[data.userInfo.userId] = data.userInfo; + this.padClient.updateAuthors(authors); + this.ui.render(); + }, + + /** + * Handle USER_LEAVE messages, which lets us know that a user has left the + * pad. + * @param {object} data - The data received from the server. + */ + handle_USER_LEAVE: function (data) { + this.log("[timeslider_client] handle_USER_LEAVE ", data.userInfo); + }, + + /** + * Handle NEW_CHANGES messages, which lets us know that a new revision has + * been added to the pad. + * @param {object} data - The data received from the server. + */ + handle_NEW_CHANGES: function (data) { + var _this = this + this.log("[timeslider_client] handle_NEW_CHANGES: ", data); + this.revisionCache.fetchNewHead(data.newRev, function() { + _this.ui.render(); + }); + }, + + + /** + * 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 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. + * @return {Revision} - the current revision. + */ + getCurrentRevision: function () { + return this.padClient.revision; + }, + /** + * Get the head revision. + * @return {Revision} - the head revision. + */ + getHeadRevision: function () { + return this.revisionCache.getHeadRevision().revnum; + }, + } +); + +function init(baseURL) { + var timesliderclient; $(document).ready(function () { // start the custom js @@ -47,7 +324,7 @@ function init() { //ensure we have a token token = readCookie("token"); - if(token == null) + if(token === null) { token = "t." + randomString(); createCookie("token", token, 60); @@ -55,109 +332,43 @@ function init() { var loc = document.location; //get the correct port - var port = loc.port == "" ? (loc.protocol == "https:" ? 443 : 80) : loc.port; + var port = loc.port === "" ? (loc.protocol == "https:" ? 443 : 80) : loc.port; //create the url var url = loc.protocol + "//" + loc.hostname + ":" + port + "/"; //find out in which subfolder we are - var resource = exports.baseURL.substring(1) + 'socket.io'; - - //build up the socket io connection - socket = io.connect(url, {resource: resource}); + var resource = baseURL.substring(1) + 'socket.io'; - //send the ready message once we're connected - socket.on('connect', function() - { - sendSocketMsg("CLIENT_READY", {}); - }); + var cl; + console.log(url, baseURL, resource, padId); + timesliderclient = new TimesliderClient(url, padId) + .on("CLIENT_VARS", function(data, context, callback) { + //load all script that doesn't work without the clientVars + BroadcastSlider = require('./broadcast_slider').init(this,fireWhenAllScriptsAreLoaded); - socket.on('disconnect', function() - { - BroadcastSlider.showReconnectUI(); - }); + //initialize export ui + require('./pad_impexp').padimpexp.init(); - //route the incoming messages - socket.on('message', function(message) - { - if(window.console) console.log(message); - - if(message.type == "CLIENT_VARS") - { - handleClientVars(message); - } - else if(message.accessStatus) - { - $("body").html("

You have no permission to access this pad

") - } else { - changesetLoader.handleMessageFromServer(message); - } - }); - - //get all the export links - export_links = $('#export > .exportlink') + //fire all start functions of these scripts, formerly fired with window.load + for(var i=0;i < fireWhenAllScriptsAreLoaded.length;i++) + { + fireWhenAllScriptsAreLoaded[i](); + } + //$("#ui-slider-handle").css('left', $("#ui-slider-bar").width() - 2); + }); $('button#forcereconnect').click(function() { window.location.reload(); }); - exports.socket = socket; // make the socket available + //exports.socket = socket; // make the socket available exports.BroadcastSlider = BroadcastSlider; // Make the slider available hooks.aCallAll("postTimesliderInit"); }); -} - -//sends a message over the socket -function sendSocketMsg(type, data) -{ - var sessionID = decodeURIComponent(readCookie("sessionID")); - var password = readCookie("password"); - - var msg = { "component" : "pad", // FIXME: Remove this stupidity! - "type": type, - "data": data, - "padId": padId, - "token": token, - "sessionID": sessionID, - "password": password, - "protocolVersion": 2}; - - socket.json.send(msg); + return timesliderclient; } var fireWhenAllScriptsAreLoaded = []; - -var changesetLoader; -function handleClientVars(message) -{ - //save the client Vars - clientVars = message.data; - - //load all script that doesn't work without the clientVars - BroadcastSlider = require('./broadcast_slider').loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded); - require('./broadcast_revisions').loadBroadcastRevisionsJS(); - changesetLoader = require('./broadcast').loadBroadcastJS(socket, sendSocketMsg, 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')); - }); - }); - - //fire all start functions of these scripts, formerly fired with window.load - for(var i=0;i < fireWhenAllScriptsAreLoaded.length;i++) - { - fireWhenAllScriptsAreLoaded[i](); - } - $("#ui-slider-handle").css('left', $("#ui-slider-bar").width() - 2); -} -exports.baseURL = ''; exports.init = init; diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html index 1fab02796e5..0634975fc67 100644 --- a/src/templates/timeslider.html +++ b/src/templates/timeslider.html @@ -52,12 +52,11 @@
<% e.begin_block("timesliderTop"); %>
-