Minimal working UI wireup

Working:
  - location.hash
  - click on slider
  - stepper buttons
  - UI update (except authors)
Not working:
  - playback
  - bugs in transition code

src/static/js/broadcast_slider.js

@@ -25,7 +25,14 @@ $.Class("RevisionSlider",
   {//instance
     init: function (connection, root_element) {
       this.connection = connection;
-      this.revision_number = this.connection.head_revision;
+      this.revision_number = this.connection.getCurrentRevision().revnum;
+      // if there was a revision specified in the 'location.hash', jump to it.
+      if (window.location.hash.length > 1) {
+        var rev = Number(window.location.hash.substr(1));
+        if(!isNaN(rev))
+          this.revision_number = rev;
+      }
+
       console.log("New RevisionSlider, head_revision = %d", this.revision_number);
       // parse the various elements we need:
       this.elements = {};
@@ -40,10 +47,14 @@ $.Class("RevisionSlider",
                   });
       this.loadSavedRevisionHandles();
       this.slider.render();
+
       this._mouseInit();
+
+      this.goToRevision(this.revision_number);
     },
     onChange: function (value) {
       console.log("in change handler:", value);
+      this.goToRevision(value);
     },
     onSlide: function (value) {
       console.log("in slide handler:", value);
@@ -67,20 +78,70 @@ $.Class("RevisionSlider",
         this.slider.createHandle(rev.revNum, "star");
       }
     },
-    goToRevision: function (revNum) {
+    goToRevision: function (revnum) {
       //TODO: this should actually do an async jump to revision (with all the server fetching
       //and changeset rendering that that implies), and perform the setPosition in a callback.
       //TODO: we need some kind of callback for setting revision metadata.
       //TODO: at some point we need to set window.location.hash
-      if (revNum > this.connection.head_revision)
+      if (revnum > this.connection.head_revision)
-        revNum = this.connection.latest_revision;
+        revnum = this.connection.latest_revision;
-      if (revNum < 0)
+      if (revnum < 0)
-        revNum = 0;
+        revnum = 0;
-      console.log("GO TO REVISION", revNum);
+      console.log("GO TO REVISION", revnum);
-      this.elements.revision_label.html(html10n.get("timeslider.version", { "version": revNum }));
+
-      this.slider.setValue(revNum);
+      var _this = this;
-      this.revision_number = revNum;
+      this.connection.goToRevision(revnum, function (revision, timestamp) {
-      //TODO: set the enabled/disabled for button-left and button-right
+        console.log("[revisionslider > goToRevision > callback]", revision, timestamp);
+        //update UI elements:
+        var revnum = revision.revnum;
+        _this.elements.revision_label.html(html10n.get("timeslider.version", { "version": revnum }));
+        _this.slider.setValue(revnum);
+        _this.revision_number = revnum;
+        window.location.hash = "#" + revnum;
+        _this.setTimestamp(timestamp);
+        //TODO: set the enabled/disabled for button-left and button-right
+      });
+    },
+    setTimestamp: function (timestamp) {
+      var zeropad = function (str, length) {
+        str = str + "";
+        while (str.length < length)
+          str = '0' + str;
+        return str;
+      }
+      var months = [
+                    html10n.get("timeslider.month.january"),
+                    html10n.get("timeslider.month.february"),
+                    html10n.get("timeslider.month.march"),
+                    html10n.get("timeslider.month.april"),
+                    html10n.get("timeslider.month.may"),
+                    html10n.get("timeslider.month.june"),
+                    html10n.get("timeslider.month.july"),
+                    html10n.get("timeslider.month.august"),
+                    html10n.get("timeslider.month.september"),
+                    html10n.get("timeslider.month.october"),
+                    html10n.get("timeslider.month.november"),
+                    html10n.get("timeslider.month.december")
+      ];
+      var date = new Date(timestamp);
+      var timestamp_format = html10n.get("timeslider.dateformat",
+                         {
+                          "day": zeropad(date.getDate(), 2),
+                          "month": zeropad(date.getMonth() + 1, 2),
+                          "year": date.getFullYear(),
+                          "hours": zeropad(date.getHours(), 2),
+                          "minutes": zeropad(date.getMinutes(), 2),
+                          "seconds": zeropad(date.getSeconds(), 2),
+                         });
+      this.elements.timestamp.html(timestamp_format);
+
+      var revisionDate = html10n.get("timeslider.saved", {
+                                      "day": date.getDate(),
+                                      "month": months[date.getMonth()],
+                                      "year": date.getFullYear()
+      });
+
+      this.elements.revision_date.html(revisionDate);
     },
     _mouseInit: function () {
       var _this = this;
@@ -98,30 +159,17 @@ $.Class("RevisionSlider",
   }
 );
 
-function init(tsclient, fireWhenAllScriptsAreLoaded)
+function init(connection, fireWhenAllScriptsAreLoaded)
 {
   var BroadcastSlider;
 
   (function()
   { // wrap this code in its own namespace
 
-    tsui = new RevisionSlider(tsclient, $("#timeslider-top"));
+    tsui = new RevisionSlider(connection, $("#timeslider-top"));
-
-    // if there was a revision specified in the 'location.hash', jump to it.
-    if (window.location.hash.length > 1) {
-      var rev = Number(window.location.hash.substr(1));
-      if(!isNaN(rev))
-        tsui.goToRevision(rev);
-    }
 
 
-    var sliderLength = 1000;
+    var clientVars = connection.clientVars;
-    var sliderPos = 0;
-    var sliderActive = false;
-    var slidercallbacks = [];
-    var savedRevisions = [];
-    var sliderPlaying = false;
-    clientVars = tsclient.clientVars;
 
     function disableSelection(element)
     {
@@ -133,86 +181,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
       element.style.MozUserSelect = "none";
       element.style.cursor = "default";
     }
-    var _callSliderCallbacks = function(newval)
-      {
-        sliderPos = newval;
-        for (var i = 0; i < slidercallbacks.length; i++)
-        {
-          slidercallbacks[i](newval);
-        }
-      };
-    var removeSavedRevision = function(position)
-      {
-        var element = $("div.star [pos=" + position + "]");
-        savedRevisions.remove(element);
-        element.remove();
-        return element;
-      };
-
-    /* Begin small 'API' */
-
-    function onSlider(callback)
-    {
-      slidercallbacks.push(callback);
-    }
-
-    function getSliderPosition()
-    {
-      return sliderPos;
-    }
-
-    function setSliderPosition(newpos)
-    {
-      newpos = Number(newpos);
-      if (newpos < 0 || newpos > sliderLength) return;
-      if(!newpos){
-        newpos = 0; // stops it from displaying NaN if newpos isn't set
-      }
-      window.location.hash = "#" + newpos;
-      $("#ui-slider-handle").css('left', newpos * ($("#ui-slider-bar").width() - 2) / (sliderLength * 1.0));
-      $("a.tlink").map(function()
-      {
-        $(this).attr('href', $(this).attr('thref').replace("%revision%", newpos));
-      });
-
-      $("#revision_label").html(html10n.get("timeslider.version", { "version": newpos}));
-
-      if (newpos === 0)
-      {
-        $("#leftstar").css('opacity', 0.5);
-        $("#leftstep").css('opacity', 0.5);
-      }
-      else
-      {
-        $("#leftstar").css('opacity', 1);
-        $("#leftstep").css('opacity', 1);
-      }
-
-      if (newpos == sliderLength)
-      {
-        $("#rightstar").css('opacity', 0.5);
-        $("#rightstep").css('opacity', 0.5);
-      }
-      else
-      {
-        $("#rightstar").css('opacity', 1);
-        $("#rightstep").css('opacity', 1);
-      }
-
-      sliderPos = newpos;
-      _callSliderCallbacks(newpos);
-    }
-
-    function getSliderLength()
-    {
-      return sliderLength;
-    }
-
-    function setSliderLength(newlength)
-    {
-      sliderLength = newlength;
-      updateSliderElements();
-    }
 
     // just take over the whole slider screen with a reconnect message
 
@@ -286,55 +254,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
       fixPadHeight();
     }
 
-    //This API is in use by broadcast.js
-    //TODO: refactor broadcast.js to use RevisionSlider instead
-    BroadcastSlider = {
-      onSlider: onSlider,
-      getSliderPosition: getSliderPosition,
-      setSliderPosition: setSliderPosition,
-      getSliderLength: getSliderLength,
-      setSliderLength: setSliderLength,
-      isSliderActive: function()
-      {
-        return sliderActive;
-      },
-      playpause: playpause,
-      showReconnectUI: showReconnectUI,
-      setAuthors: setAuthors
-    };
-
-    function playButtonUpdater()
-    {
-      if (sliderPlaying)
-      {
-        if (getSliderPosition() + 1 > sliderLength)
-        {
-          $("#playpause_button_icon").toggleClass('pause');
-          sliderPlaying = false;
-          return;
-        }
-        setSliderPosition(getSliderPosition() + 1);
-
-        setTimeout(playButtonUpdater, 100);
-      }
-    }
-
-    function playpause()
-    {
-      $("#playpause_button_icon").toggleClass('pause');
-
-      if (!sliderPlaying)
-      {
-        if (getSliderPosition() == sliderLength) setSliderPosition(0);
-        sliderPlaying = true;
-        playButtonUpdater();
-      }
-      else
-      {
-        sliderPlaying = false;
-      }
-    }
-
     // assign event handlers to html UI elements after page load
     //$(window).load(function ()
     fireWhenAllScriptsAreLoaded.push(function()
@@ -342,131 +261,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
       disableSelection($("#playpause_button")[0]);
       disableSelection($("#timeslider")[0]);
 
-      $(document).keyup(function(e)
-      {
-        var code = -1;
-        if (!e) e = window.event;
-        if (e.keyCode) code = e.keyCode;
-        else if (e.which) code = e.which;
-
-        if (code == 37)
-        { // left
-          if (!e.shiftKey)
-          {
-            setSliderPosition(getSliderPosition() - 1);
-          }
-          else
-          {
-            var nextStar = 0; // default to first revision in document
-            for (var i = 0; i < savedRevisions.length; i++)
-            {
-              var pos = parseInt(savedRevisions[i].attr('pos'));
-              if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
-            }
-            setSliderPosition(nextStar);
-          }
-        }
-        else if (code == 39)
-        {
-          if (!e.shiftKey)
-          {
-            setSliderPosition(getSliderPosition() + 1);
-          }
-          else
-          {
-            var _nextStar = sliderLength; // default to last revision in document
-            for (var _i = 0; _i < savedRevisions.length; _i++)
-            {
-              var _pos = parseInt(savedRevisions[_i].attr('pos'));
-              if (_pos > getSliderPosition() && _nextStar > _pos) _nextStar = _pos;
-            }
-            setSliderPosition(_nextStar);
-          }
-        }
-        else if (code == 32) playpause();
-
-      });
-
-
-      // play/pause toggling
-      $("XXXX#playpause_button").mousedown(function(evt)
-      {
-        var self = this;
-
-        $(self).css('background-image', 'url(/static/img/crushed_button_depressed.png)');
-        $(self).mouseup(function(evt2)
-        {
-          $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
-          $(self).unbind('mouseup');
-          BroadcastSlider.playpause();
-        });
-        $(document).mouseup(function(evt2)
-        {
-          $(self).css('background-image', 'url(/static/img/crushed_button_undepressed.png)');
-          $(document).unbind('mouseup');
-        });
-      });
-
-      // next/prev saved revision and changeset
-      $('XXX.stepper').mousedown(function(evt)
-      {
-        var self = this;
-        var origcss = $(self).css('background-position');
-        if (!origcss)
-        {
-          origcss = $(self).css('background-position-x') + " " + $(self).css('background-position-y');
-        }
-        var origpos = parseInt(origcss.split(" ")[1]);
-        var newpos = (origpos - 43);
-        if (newpos < 0) newpos += 87;
-
-        var newcss = (origcss.split(" ")[0] + " " + newpos + "px");
-        if ($(self).css('opacity') != 1.0) newcss = origcss;
-
-        $(self).css('background-position', newcss);
-
-        $(self).mouseup(function(evt2)
-        {
-          $(self).css('background-position', origcss);
-          $(self).unbind('mouseup');
-          $(document).unbind('mouseup');
-          if ($(self).attr("id") == ("leftstep"))
-          {
-            setSliderPosition(getSliderPosition() - 1);
-          }
-          else if ($(self).attr("id") == ("rightstep"))
-          {
-            setSliderPosition(getSliderPosition() + 1);
-          }
-          else if ($(self).attr("id") == ("leftstar"))
-          {
-            var nextStar = 0; // default to first revision in document
-            for (var i = 0; i < savedRevisions.length; i++)
-            {
-              var pos = parseInt(savedRevisions[i].attr('pos'));
-              if (pos < getSliderPosition() && nextStar < pos) nextStar = pos;
-            }
-            setSliderPosition(nextStar);
-          }
-          else if ($(self).attr("id") == ("rightstar"))
-          {
-            var _nextStar = sliderLength; // default to last revision in document
-            for (var _i = 0; _i < savedRevisions.length; _i++)
-            {
-              var _pos = parseInt(savedRevisions[_i].attr('pos'));
-              if (_pos > getSliderPosition() && _nextStar > _pos) _nextStar = _pos;
-            }
-            setSliderPosition(_nextStar);
-          }
-        });
-        $(document).mouseup(function(evt2)
-        {
-          $(self).css('background-position', origcss);
-          $(self).unbind('mouseup');
-          $(document).unbind('mouseup');
-        });
-      });
-
       if (clientVars)
       {
         $("#timeslider").show();
@@ -475,12 +269,6 @@ function init(tsclient, fireWhenAllScriptsAreLoaded)
     });
   })();
 
-  BroadcastSlider.onSlider(function(loc)
-  {
-    $("#viewlatest").html(loc == BroadcastSlider.getSliderLength() ? "Viewing latest content" : "View latest content");
-  });
-
-  return BroadcastSlider;
 }
 
 exports.init = init;

src/static/js/revisioncache.js

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

src/static/js/sliderui.js

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

src/static/js/timeslider.js

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