From f3fcbf26533f741d38559da64839a043bbc53611 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Fri, 3 Apr 2020 16:11:01 +0200 Subject: [PATCH] css: refactor timeslider - simplify template - use flexboxes - simplify javascript code - remove some obsolete code adjusting a background-position when using steppers buttons - add comments and remove old code --- src/static/css/timeslider.css | 376 ++++++++---------------------- src/static/js/broadcast.js | 6 +- src/static/js/broadcast_slider.js | 170 +++----------- src/static/js/pad_editbar.js | 2 +- src/static/js/timeslider.js | 2 +- src/templates/pad.html | 1 + src/templates/timeslider.html | 299 +++++++++++++----------- 7 files changed, 296 insertions(+), 560 deletions(-) diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css index be53dc95..558e4e13 100644 --- a/src/static/css/timeslider.css +++ b/src/static/css/timeslider.css @@ -1,303 +1,123 @@ -@import url('./lists_and_indents.css'); - -p.pblort { - height: 100px; -} -.timeslider-bar #editbar { - display: block; -} -#editorcontainerbox { - overflow: auto; - top: 40px; - position: static; -} -#padpage { - position: absolute; - top: 0px; - bottom: 0px; - width: 100%; -} -#padmain { - margin-top: 0px; - position: absolute; - top: 63px !important; - left: 0px; - right: 0px; - bottom: 0px; - zoom: 1; -} -#padeditor { - bottom: 0px; - left: 0; - position: absolute; - right: 0px; - top: 0; - zoom: 1; -} -#padcontent { - font-size: 12px; +#editbar { padding: 10px; } + +.timeslider-bar { + display: flex; + flex-direction: row; +} + +/* TITLE */ + +.timeslider-title-container { + flex: 1 auto; +} +.timeslider-subtitle { + margin-top: 10px; +} + +/* RIGHT TOOLBAR (export, settings, back to pad) */ + +.editbarright ul li { + margin-top: 0; +} +.editbarright ul li a { + background-color: transparent; + border: none; + margin-left: 10px +} +.editbarright .buttontext { + padding: 2px 5px; +} + + +/* SLIDER */ + #timeslider-wrapper { - left: 0; + display: flex; + flex-direction: row; + height: 40px; +} + +#timeslider-slider { + flex: 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + cursor: pointer; position: relative; - right: 0; +} + +#timeslider-slider #timer { + position: absolute; top: 0; -} -#timeslider-left { - background-color:#fff; - height: 63px; - left: 0; - position: absolute; - width: 134px; -} -#timeslider-right { - background-color:#fff; - height: 63px; - position: absolute; right: 0; - top: 0; - width: 155px; } -#timeslider { - height: 63px; - margin: 0 9px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color:#fff; - /* bgcolor is reuqired so you can't see pad content behind it */ -} -#timeslider #timeslider-slider { - height: 61px; - left: 0; - position: absolute; - top: 1px; + +#timeslider-slider #ui-slider-bar { + height: 10px; width: 100%; -} -#ui-slider-handle { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - background-color: #666; - cursor: pointer; - height: 61px; - left: 0; - position: absolute; - top: 0; - width: 13px; -} -#ui-slider-bar { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - cursor: pointer; - height: 60px; - margin-left: 5px; - margin-right: 150px; + background-color: #c2c2c2; position: relative; - top: 0px; } -#playpause_button, -#playpause_button_icon { - height: 44px; +#timeslider-slider #ui-slider-handle { + height: 40px; + width: 10px; + z-index: 2; position: absolute; - width: 44px; - text-align:center; - vertical-align:middle; - background:none; -} -#playpause_button { - right: 77px; - top: 9px; - height:50px; - height:50px; - background: background-linear-gradient( #F7F7F7, #F1F1F1 80%) repeat scroll 0 0 transparent; - border-radius:24px; - cursor:hand; -} -#playpause_button_icon:before { - line-height:44px; - padding-left:2px; - font-family: fontawesome-etherpad; - content: "\e82c"; - font-size:24px; - color:#666; + background-color: #3e3e3e; + cursor: move; } -#playpause_button_icon { - left: 0; - top: 0; - border-radius:48px; - border: solid 1px #666; -} -.pause:before { - line-height:44px; - padding-left:2px; - font-family: fontawesome-etherpad; - content: "\e82e" !important; - font-size:24px; - color:#666; - padding-left:0 !important; -} -#leftstar, -#rightstar, -#leftstep, -#rightstep { - background-color: white; - overflow: hidden; +#timeslider-slider .star { + cursor: pointer; position: absolute; + top: -4px } - -.stepper{ +#timeslider-slider .star:before{ font-family: fontawesome-etherpad; - border-radius:2px; - border: #666 solid 1px; -/* line-height:18px; */ - text-align:center; - height:22px; - color:#666; -} - -stepper:active{ - color:#000; -} - -#leftstep { - right: 38px; - top: 20px; - width: 25px; -} -#leftstep:before{ - content: '\e821'; - vertical-align:middle; -} -#rightstep:before{ - content: "\e822"; - vertical-align:middle; -} - -#rightstep { - right: 12px; - top: 20px; - width: 25px; -} -.star:before{ - font-family: fontawesome-etherpad; - content: "\e835"; + color: #da9700; + content: "\e836"; vertical-align:middle; font-size:16px; -} -#timeslider .star { - cursor: pointer; - height: 16px; - position: absolute; - top: 25px; - width: 15px; -} -#timeslider #timer { - background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent; - padding:2px; - border-radius:2px; - font-size: 11px; - left: 7px; - position: absolute; - text-align: center; - top: 9px; - width: 122px; -} -.topbarcenter, -#docbar { - display: none -} -#padmain { - top: 0px !important -} -#editbar{ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.editbarright { - float: right; - text-align: right; - height: 30px !important; -} -.toolbar ul{ - position:relative; - float:right; - height:30px; -} -#import_export, #settings{ - top: 115px; - position: fixed; -} -#import_export .popup { - width: 183px; - border-top: none; - border-right: none; - border-radius: 0 0 0 6px; -} -#import_export { - width: 185px; -} -.timeslider-bar { - background: #f7f7f7; - background: -webkit-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -moz-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -o-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: -ms-linear-gradient(#f7f7f7, #f1f1f1 80%); - background: linear-gradient(#f7f7f7, #f1f1f1 80%); - overflow: hidden; - padding-top: 3px; - width: 100%; -} -.timeslider-bar #editbar { - border-bottom: none; - float: right; - width: auto; -} -.timeslider-bar h1 { - margin: 5px -} -.timeslider-bar p { - margin: 5px -} -#timeslider-top { - width: 100%; - position: fixed; - z-index: 1; -} -#authorsList .author { - padding-left: 0.4em; - padding-right: 0.4em; -} -#authorsList .author-anonymous { - padding-left: 0.6em; - padding-right: 0.6em; -} -#padeditor { - position: static + margin-left: -1px; } -button{ - margin:0; - padding:0; - cursor:pointer; -} +/* BUTTONS TO MOVE SLIDER (Play/Pause, Next, Prev)*/ -button::-moz-focus-inner { - padding: 0; - border: 0 +#slider-btn-container { + margin-left: 15px; + display: flex; + align-items: center; } - -button:focus{ +#slider-btn-container button { border: 1px solid #666; + border-radius: 50%; + width: 30px; + height: 30px; + margin-left: 5px; } +#slider-btn-container #playpause_button_icon { + width: 40px; + height: 40px; + font-size: 22px; + padding-left: 2px; +} +#slider-btn-container #playpause_button_icon.pause:before { + content: "\e82e"; + padding-left: 0; + padding-right: 2px; +} + + +/* PAD CONTENT */ + +#editorcontainerbox { + overflow-y: scroll; +} + +#innerdocbody { + white-space: normal; + word-break: break-word; +} \ No newline at end of file diff --git a/src/static/js/broadcast.js b/src/static/js/broadcast.js index 60273f2d..380f69d6 100644 --- a/src/static/js/broadcast.js +++ b/src/static/js/broadcast.js @@ -125,7 +125,7 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro } else { - $("#padcontent").prepend(newDivs[i]); + $("#innerdocbody").prepend(newDivs[i]); } startDiv = newDivs[i]; } @@ -548,12 +548,12 @@ function loadBroadcastJS(socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro { // set up the currentDivs and DOM padContents.currentDivs = []; - $("#padcontent").html(""); + $("#innerdocbody").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); + $("#innerdocbody").append(div); } debugLog(padContents.currentDivs); }); diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js index 1893994e..5f4325bb 100644 --- a/src/static/js/broadcast_slider.js +++ b/src/static/js/broadcast_slider.js @@ -41,16 +41,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) var savedRevisions = []; var sliderPlaying = false; - function disableSelection(element) - { - element.onselectstart = function() - { - return false; - }; - element.unselectable = "on"; - element.style.MozUserSelect = "none"; - element.style.cursor = "default"; - } var _callSliderCallbacks = function(newval) { sliderPos = newval; @@ -76,9 +66,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) 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); + $("#ui-slider-bar").append(newSavedRevision); newSavedRevision.mouseup(function(evt) { BroadcastSlider.setSliderPosition(position); @@ -122,27 +111,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) $("#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); - } + $("#leftstar, #leftstep").toggleClass('disabled', newpos == 0); + $("#rightstar, #rightstep").toggleClass('disabled', newpos == sliderLength); sliderPos = newpos; _callSliderCallbacks(newpos); @@ -166,12 +136,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) padmodals.showModal("disconnected"); } - // Throttle seems like overkill here... Not sure why we do it! - var fixPadHeight = _.throttle(function(){ - var height = $('#timeslider-top').height(); - $('#editorcontainerbox').css({marginTop: height}); - }, 600); - function setAuthors(authors) { var authorsList = $("#authorsList"); @@ -230,8 +194,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) { authorsList.append(html10n.get("timeslider.toolbar.authorsList")); } - - fixPadHeight(); } BroadcastSlider = { @@ -283,66 +245,42 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) } // assign event handlers to html UI elements after page load - //$(window).load(function () fireWhenAllScriptsAreLoaded.push(function() { - disableSelection($("#playpause_button")[0]); - disableSelection($("#timeslider")[0]); - $(document).keyup(function(e) { - // If focus is on editbar, don't do anything - var target = $(':focus'); - if($(target).parents(".toolbar").length === 1){ - return; - } - var code = -1; if (!e) var e = window.event; - if (e.keyCode) code = e.keyCode; - else if (e.which) code = e.which; + var code = e.keyCode || 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); + if (e.shiftKey) { + $('#leftstar').click(); + } else { + $('#leftstep').click(); } } 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); + { // right + if (e.shiftKey) { + $('#rightstar').click(); + } else { + $('#rightstep').click(); } } - else if (code == 32) playpause(); + else if (code == 32) + { // spacebar + $("#playpause_button_icon").trigger('click'); + } }); + // Resize $(window).resize(function() { updateSliderElements(); }); + // Slider click $("#ui-slider-bar").mousedown(function(evt) { $("#ui-slider-handle").css('left', (evt.clientX - $("#ui-slider-bar").offset().left)); @@ -386,57 +324,22 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) }) // play/pause toggling - $("#playpause_button").mousedown(function(evt) + $("#playpause_button_icon").click(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'); - }); + BroadcastSlider.playpause(); }); // next/prev saved revision and changeset - $('.stepper').mousedown(function(evt) + $('.stepper').click(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")) - { + switch ($(this).attr("id")) { + case "leftstep": setSliderPosition(getSliderPosition() - 1); - } - else if ($(self).attr("id") == ("rightstep")) - { + break; + case "rightstep": setSliderPosition(getSliderPosition() + 1); - } - else if ($(self).attr("id") == ("leftstar")) - { + break; + case "leftstar": var nextStar = 0; // default to first revision in document for (var i = 0; i < savedRevisions.length; i++) { @@ -444,9 +347,8 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (pos < getSliderPosition() && nextStar < pos) nextStar = pos; } setSliderPosition(nextStar); - } - else if ($(self).attr("id") == ("rightstar")) - { + break; + case "rightstar": var nextStar = sliderLength; // default to last revision in document for (var i = 0; i < savedRevisions.length; i++) { @@ -454,19 +356,13 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded) if (pos > getSliderPosition() && nextStar > pos) nextStar = pos; } setSliderPosition(nextStar); - } - }); - $(document).mouseup(function(evt2) - { - $(self).css('background-position', origcss); - $(self).unbind('mouseup'); - $(document).unbind('mouseup'); - }); + break; + } }) if (clientVars) { - $("#timeslider").show(); + $("#timeslider-wrapper").show(); var startPos = clientVars.collab_client_vars.rev; if(window.location.hash.length > 1) diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 33aa0ff1..d109eed9 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -298,7 +298,7 @@ var padeditbar = (function() // Timeslider probably.. // Shift focus away from any drop downs $(':focus').blur(); // required to do not try to remove! - $('#padmain').focus(); // Focus back onto the pad + $('#editorcontainerbox').focus(); // Focus back onto the pad }else{ // Shift focus away from any drop downs $(':focus').blur(); // required to do not try to remove! diff --git a/src/static/js/timeslider.js b/src/static/js/timeslider.js index 3cdff91a..297f3ee7 100644 --- a/src/static/js/timeslider.js +++ b/src/static/js/timeslider.js @@ -190,7 +190,7 @@ function handleClientVars(message) } function setFont(font){ - $('#padcontent').css("font-family", font); + $('#innerdocbody').css("font-family", font); } exports.baseURL = ''; diff --git a/src/templates/pad.html b/src/templates/pad.html index 3c8b21c1..f8030fc1 100644 --- a/src/templates/pad.html +++ b/src/templates/pad.html @@ -86,6 +86,7 @@ +
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html index 6d3b6f2f..50fc56b7 100644 --- a/src/templates/timeslider.html +++ b/src/templates/timeslider.html @@ -35,6 +35,7 @@ <% e.begin_block("timesliderStyles"); %> + @@ -50,143 +51,170 @@ <% e.begin_block("timesliderBody"); %> -
-
- <% e.begin_block("timesliderTop"); %> -
- -
-
- -
-
+ + + +
+ <% e.begin_block("timesliderTop"); %> + + +
+ +
+

+ + +

+

+ + +

-
-
- <% e.begin_block("timesliderEditbarRight"); %> -
    - <%- toolbar.menu(settings.toolbar.timeslider, true, 'timeslider-right', 'timeslider') %> -
- <% e.end_block(); %> -
- -
-

- - -

-

- - -

-
+
+ <% e.begin_block("timesliderEditbarRight"); %> +
    + <%- toolbar.menu(settings.toolbar.timeslider, true, 'timeslider-right', 'timeslider') %> +
+ <% e.end_block(); %>
+
+ + +
+
+
+
+
+
+ +
+ + + + + + +
+
+ + + <% e.end_block(); %> +
+ + +
+ + + + + +
+
+
+
+ + + + + + + + + + + + + + -
-
-
-
-
-
-
-
-
- + + + - +
+ - -
- -
+ + + @@ -273,5 +293,4 @@ <% e.end_block(); %> -