From 748b38f9d6281291bf0aba1f9f0e14c8ed4e51ec Mon Sep 17 00:00:00 2001 From: s1341 Date: Mon, 2 Dec 2013 17:43:39 +0200 Subject: [PATCH] Steppers/Play-pause now in CSS Also, the steppers actually work. --- src/static/css/timeslider.css | 136 ++++++++++++++++++------------ src/static/js/broadcast_slider.js | 35 ++++++-- src/static/js/timeslider.js | 3 - 3 files changed, 110 insertions(+), 64 deletions(-) diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index 4477bbf24..4a962cd65 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -1,9 +1,6 @@ /* * slider handles (SliderHandle) */ -#timeslider .slider-handle { - position: absolute; -} .ui-slider-handle { -webkit-user-select: none; @@ -28,6 +25,87 @@ 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; @@ -88,58 +166,6 @@ position: relative; top: 20px; } -#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_icon { - background-image: url(../../static/img/play.png); - left: 0; - top: 0; -} -.pause#playpause_button_icon { - background-image: url(../../static/img/pause.png) -} -#leftstar, -#rightstar, -#leftstep, -#rightstep { - 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: 29px; -} -#leftstep { - background-position: 0 -22px; - right: 34px; - top: 20px; - width: 30px; -} -#rightstep { - background-position: -29px -22px; - right: 5px; - top: 20px; - width: 30px; -} #timeslider #timer { color: #fff; font-family: Arial, sans-serif; diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index 97cd3fb92..1a7dff961 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -192,7 +192,8 @@ $.Class("RevisionSlider", {//instance init: function (timeslider, root_element) { this.timeslider = timeslider; - console.log("New SliderUI, head_revision = %d", this.timeslider.head_revision); + this.revision_number = this.timeslider.head_revision; + console.log("New RevisionSlider, head_revision = %d", this.revision_number); // parse the various elements we need: this.elements = {}; this.loadElements(root_element); @@ -203,7 +204,9 @@ $.Class("RevisionSlider", change: function () { _this.onChange.apply(_this, arguments); }, slide: function () { _this.onSlide.apply(_this, arguments); }, }); - this.loadSavedRevisions(); + this.loadSavedRevisionHandles(); + + this._mouseInit(); }, onChange: function (value) { console.log("in change handler:", value); @@ -224,7 +227,7 @@ $.Class("RevisionSlider", this.elements['revision-date'] = root_element.find("#revision_date"); this.elements['authors'] = root_element.first("#authorsList"); }, - loadSavedRevisions: function () { + loadSavedRevisionHandles: function () { for (var r in this.timeslider.savedRevisions) { var rev = this.timeslider.savedRevisions[r]; this.slider.attachHandle(new SliderSavedRevisionUI(this, rev)); @@ -233,12 +236,30 @@ $.Class("RevisionSlider", 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. - if (revNum <= 0 || revNum > this.timeslider.head_revision) + //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.timeslider.head_revision) revNum = this.timeslider.latest_revision; + if (revNum < 0) + revNum = 0; console.log("GO TO REVISION", revNum) + this.elements["revision-label"].html(html10n.get("timeslider.version", { "version": revNum })); this.slider.setValue(revNum); + this.revision_number = revNum; + //TODO: set the enabled/disabled for button-left and button-right }, + _mouseInit: function () { + var _this = this; + this.elements["button-left"].on("click", function (event) { + console.log("was :", _this.revision_number); + _this.goToRevision(_this.revision_number - 1); + }); + this.elements["button-right"].on("click", function (event) { + _this.goToRevision(_this.revision_number + 1); + }); + + } } ); @@ -431,6 +452,8 @@ function loadBroadcastSliderJS(tsclient, fireWhenAllScriptsAreLoaded) fixPadHeight(); } + //This API is in use by broadcast.js + //TODO: refactor broadcast.js to use RevisionSlider instead BroadcastSlider = { onSlider: onSlider, getSliderPosition: getSliderPosition, @@ -532,7 +555,7 @@ function loadBroadcastSliderJS(tsclient, fireWhenAllScriptsAreLoaded) // play/pause toggling - $("#playpause_button").mousedown(function(evt) + $("XXXX#playpause_button").mousedown(function(evt) { var self = this; @@ -551,7 +574,7 @@ function loadBroadcastSliderJS(tsclient, fireWhenAllScriptsAreLoaded) }); // next/prev saved revision and changeset - $('.stepper').mousedown(function(evt) + $('XXX.stepper').mousedown(function(evt) { var self = this; var origcss = $(self).css('background-position'); diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js index fb6353043..d7673f0b9 100644 --- a/src/static/js/timeslider.js +++ b/src/static/js/timeslider.js @@ -191,9 +191,6 @@ AuthenticatedSocketClient("TimesliderClient", function init(baseURL) { $(document).ready(function () { - console.log("<<<<<<<<<<<<<<<<<<<<<<<<"); - console.log("HELLO"); - console.log("<<<<<<<<<<<<<<<<<<<<<<<<"); // start the custom js if (typeof customStart == "function") customStart();