From 60123f2c3cb55d31b9ce973a794a0edbe2a282b9 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Mon, 25 Apr 2022 13:02:29 +0200 Subject: [PATCH 1/1] new layout fixes --- src/catalogue/static/player/2022_player.js | 86 +++++++++++-------- .../templates/catalogue/2022/book_detail.html | 11 ++- .../static/2022/styles/layout/_aside.scss | 2 +- .../static/2022/styles/layout/_header.scss | 5 ++ .../2022/styles/layout/_navigation.scss | 7 ++ src/wolnelektury/static/js/search.js | 19 +++- 6 files changed, 85 insertions(+), 45 deletions(-) diff --git a/src/catalogue/static/player/2022_player.js b/src/catalogue/static/player/2022_player.js index f6dc06965..0efe2fc10 100644 --- a/src/catalogue/static/player/2022_player.js +++ b/src/catalogue/static/player/2022_player.js @@ -12,7 +12,45 @@ var speed = 1; var totalDurationLeft = 0; var lastUpdate = 0; + var player = null; + + var setMedia = function(elem, time=0) { + console.log('setMedia', elem, time); + var media = {} + + media['mp3'] = elem.attr('data-mp3'); + media['oga'] = elem.attr('data-ogg'); + media['id'] = elem.attr('data-media-id'); + + $(".c-player__head", $root).html( + $(".attribution", elem).html()) + ; + $(".c-player__info", $root).html( + $(".title", elem).html() + ); + $(".c-media__caption .content", $root).html($(".project-description", elem).html()); + $(".c-media__caption .license", $root).html($(".license", elem).html()); + $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html()); + + player.jPlayer("setMedia", media); + player.jPlayer("option", "playbackRate", speed); + player.jPlayer("pause", time); + + $currentMedia = elem; + $(".play-prev", $root).prop("disabled", !elem.prev().length); + $(".play-next", $root).prop("disabled", !elem.next().length); + + let du = elem.data('duration'); + currentDuration = du; + elem.nextAll().each(function() { + du += $(this).data('duration'); + }); + totalDurationLeft = du; + + return player; + }; + $self.jPlayer({ swfPath: "/static/js/contrib/jplayer/", solution: "html,flash", @@ -21,50 +59,14 @@ useStateClassSkin: true, ready: function() { - var player = $(this); + player = $(this); console.log(1); - var setMedia = function(elem, time=0) { - console.log('setMedia', elem, time); - var media = {} - - media['mp3'] = elem.attr('data-mp3'); - media['oga'] = elem.attr('data-ogg'); - media['id'] = elem.attr('data-media-id'); - - $(".c-player__head", $root).html( - $(".attribution", elem).html()) - ; - $(".c-player__info", $root).html( - $(".title", elem).html() - ); - $(".c-media__caption .content", $root).html($(".project-description", elem).html()); - $(".c-media__caption .license", $root).html($(".license", elem).html()); - $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html()); - - player.jPlayer("setMedia", media); - $("audio")[0].playbackRate = speed; - player.jPlayer("pause", time); - - $currentMedia = elem; - $(".play-prev", $root).prop("disabled", !elem.prev().length); - $(".play-next", $root).prop("disabled", !elem.next().length); - - let du = elem.data('duration'); - currentDuration = du; - elem.nextAll().each(function() { - du += $(this).data('duration'); - }); - totalDurationLeft = du; - - return player; - }; - let selectItem = $('.c-select li'); selectItem.on('click', function() { let speedStr = $(this).data('speed'); speed = parseFloat(speedStr); - $("audio")[0].playbackRate = speed; + player.jPlayer("option", "playbackRate", speed); localStorage['audiobook-speed'] = speedStr; }); @@ -149,6 +151,14 @@ localStorage["audiobook-history"] = JSON.stringify(audiobooks); lastUpdate = t; } + }, + + + ended: function(event) { + let p = $currentMedia.next(); + if (p.length) { + setMedia(p).jPlayer("play"); + } } }); }); diff --git a/src/catalogue/templates/catalogue/2022/book_detail.html b/src/catalogue/templates/catalogue/2022/book_detail.html index a70cba0f7..4eb6ec4da 100644 --- a/src/catalogue/templates/catalogue/2022/book_detail.html +++ b/src/catalogue/templates/catalogue/2022/book_detail.html @@ -128,11 +128,16 @@

{% for author in book.authors %}{{ author.name }}{% if not forloop.last %}, {% endif %}{% endfor %} - {% if book.translators %} - (tłum. {% for translator in book.translators %}{{ translator }}{% endfor %}) - {% endif %}

{{ book.title }}

+ {% if book.translators %} +

+ tłum. + {% for translator in book.translators %} + {{ translator }}{% if not forloop.last %}, {% endif %} + {% endfor %} +

+ {% endif %}
diff --git a/src/wolnelektury/static/2022/styles/layout/_aside.scss b/src/wolnelektury/static/2022/styles/layout/_aside.scss index e1689b919..934ad644e 100644 --- a/src/wolnelektury/static/2022/styles/layout/_aside.scss +++ b/src/wolnelektury/static/2022/styles/layout/_aside.scss @@ -29,10 +29,10 @@ line-height: 26px; span { - color: #007880; } a { + color: #007880; &:hover { text-decoration: underline; } diff --git a/src/wolnelektury/static/2022/styles/layout/_header.scss b/src/wolnelektury/static/2022/styles/layout/_header.scss index cf30a2de3..7518ee7c9 100644 --- a/src/wolnelektury/static/2022/styles/layout/_header.scss +++ b/src/wolnelektury/static/2022/styles/layout/_header.scss @@ -46,6 +46,11 @@ &:not(:last-child):after { content: "/";margin-left: 10px; } } } + + .l-header__translators { + font-size: 18px; + margin-top: 5px; + } } .l-header__actions { diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index c212fe456..51a9420da 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -111,3 +111,10 @@ $teal: #007880; margin: auto; cursor: pointer; } + + + +.ui-autocomplete a { + display: block; + transition: none; +} diff --git a/src/wolnelektury/static/js/search.js b/src/wolnelektury/static/js/search.js index 34c63f3c9..7f2a69856 100644 --- a/src/wolnelektury/static/js/search.js +++ b/src/wolnelektury/static/js/search.js @@ -1,6 +1,6 @@ var __bind = function (self, fn) { - return function() { fn.apply(self, arguments); }; + return function() { return fn.apply(self, arguments); }; }; (function($){ @@ -19,8 +19,9 @@ var __bind = function (self, fn) { source: this.element.data('source') }; - this.element.autocomplete($.extend(opts, this.options)) - .data("autocomplete")._renderItem = __bind(this, this.render_item); + this.element.autocomplete($.extend(opts, this.options)); + this.element.autocomplete('instance')._renderItem = __bind(this, this.render_item_2022); + this.element.data('autocomplete')._renderItem = __bind(this, this.render_item);; }, enter: function(event, ui) { @@ -43,6 +44,18 @@ var __bind = function (self, fn) { .appendTo(ul); }, + render_item_2022: function (ul, item) { + var label; + if (item['author']) { + label = '' + item.label + ', ' + item['author']; + } else { + label = item.label; + } + return $("
  • ") + .append(''+label+'') + .appendTo(ul); + }, + destroy: function() { } }); -- 2.20.1