From fe91ba3abbf192dc851e377c1edb799aa7f1e47e Mon Sep 17 00:00:00 2001 From: Damian Zawadzki Date: Thu, 31 Mar 2022 09:23:39 +0200 Subject: [PATCH 1/1] Audiobook player UI updated --- src/wolnelektury/static/2021/scripts/main.js | 112 ++- src/wolnelektury/static/2022/fonts/wl.svg | 55 +- src/wolnelektury/static/2022/fonts/wl.ttf | Bin 4616 -> 5272 bytes src/wolnelektury/static/2022/fonts/wl.woff | Bin 4692 -> 5348 bytes src/wolnelektury/static/2022/index.html | 843 ++++++++++-------- .../static/2022/styles/base/_icons.scss | 70 +- .../static/2022/styles/components/_media.scss | 14 +- .../2022/styles/components/_module.scss | 2 + .../2022/styles/components/_player.scss | 189 +++- .../2022/styles/components/_select.scss | 62 ++ 10 files changed, 884 insertions(+), 463 deletions(-) create mode 100644 src/wolnelektury/static/2022/styles/components/_select.scss diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index b79abf8e0..c456b6c37 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -30,16 +30,65 @@ // Ebook/Audiobook Btns (function() { - let button = $('.c-media__btn button'); + let button = $('.c-media__btn button:not(.l-button--media--full)'); + let popupLayer = $('.c-media__popup'); let closeButton = $('.c-media__popup__close'); + let playButton = $('.c-player__btn--md'); + let chaptersButton = $('.c-player__chapters span'); + let select = $('.c-select'); + let selectItem = $('.c-select li'); + let volumeButton = $('.icon-volume'); + + playButton.on('click', function() { + if($(this).find('.icon').hasClass('icon-play')) { + $(this).find('.icon-play').removeClass('icon-play').addClass('icon-pause'); + } else if($(this).find('.icon').hasClass('icon-pause')) { + $(this).find('.icon-pause').removeClass('icon-pause').addClass('icon-play'); + } + }); button.on('click', function () { let target = $(this).attr('id'); $('[data-popup=' + target).addClass('is-open'); + $('body').addClass('popup-open'); }); closeButton.on('click', function() { $(this).closest('.c-media__popup').removeClass('is-open'); + $('body').removeClass('popup-open'); + }); + + popupLayer.on('click', function(e) { + let _this = $(this); + if($(e.target).is(popupLayer)) { + _this.removeClass('is-open'); + $('body').removeClass('popup-open'); + } + }); + + chaptersButton.on('click', function() { + $(this).parent().toggleClass('is-active'); + }); + + select.on('click', function() { + $(this).toggleClass('is-active'); + }); + + selectItem.on('click', function() { + selectItem.removeClass('is-active'); + $(this).addClass('is-active'); + }); + + volumeButton.on('click', function() { + if($(this).hasClass('icon-volume')) { + $(this).removeClass('icon-volume').addClass('icon-mute'); + $(this).next().val(0); + $(this).next().css('background-size', '0% 100%'); + } else if($(this).hasClass('icon-mute')) { + $(this).removeClass('icon-mute').addClass('icon-volume'); + $(this).next().val(50); + $(this).next().css('background-size', '50% 100%'); + } }); $(document).keyup(function(e) { @@ -49,6 +98,40 @@ }); })(); +// Range +const rangeInputs = document.querySelectorAll('input[type="range"]') + +function handleInputChange(e) { + let target = e.target + if (e.target.type !== 'range') { + target = document.getElementById('range') + } + const min = target.min + const max = target.max + const val = target.value + + target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' +} + +rangeInputs.forEach(input => { + input.addEventListener('input', handleInputChange) +}); + +// Quotes slider +(function () { + let slider = $('.l-author__quotes__slider'); + + slider.slick({ + slidesToScroll: 1, + slidesToShow: 1, + infinite: true, + dots: true, + arrows: false, + autoplay: true, + autoplaySpeed: 2500 + }); +})(); + // Text overlay toggler (function () { let overlays = $('.l-article__overlay'); @@ -93,4 +176,29 @@ } if($change.length) { change(); } -})(); \ No newline at end of file +})(); + +//Switch +(function() { + let $switchOnce = $('#switch-once'); + let $switchMonthly = $('#switch-monthly'); + + $switchMonthly.on('click', function() { + $('.l-checkout__payments__box').removeClass('once'); + }); + + $switchOnce.on('click', function() { + $('.l-checkout__payments__box').addClass('once'); + }); +})(); + +//Copy function +(function() { + let $copy = $('.js-copy'); + + $copy.on('click', function() { + let $copyText = $(this).closest('.l-checkout__info__item').find('input'); + $copyText.select(); + document.execCommand('copy'); + }); +})(); diff --git a/src/wolnelektury/static/2022/fonts/wl.svg b/src/wolnelektury/static/2022/fonts/wl.svg index c5fbd3eae..284c0f8cb 100644 --- a/src/wolnelektury/static/2022/fonts/wl.svg +++ b/src/wolnelektury/static/2022/fonts/wl.svg @@ -1,26 +1,47 @@ -Generated by IcoMoon + + + +{ + "fontFamily": "wl", + "fontURL": "https://intui.eu/", + "description": "pomorskie.travel\nFont generated by IcoMoon.", + "majorVersion": 1, + "minorVersion": 0, + "version": "Version 1.0", + "fontId": "wl", + "psName": "wl", + "subFamily": "Regular", + "fullName": "wl" +} + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/wolnelektury/static/2022/fonts/wl.ttf b/src/wolnelektury/static/2022/fonts/wl.ttf index 482f6ddcc0b974047d4a1772e6d2acfc0d488501..afc780698c31d181eed105db8f9341114eee3ba3 100644 GIT binary patch delta 1309 zcma)5U1%d!6h3!uGSf|#q)8?-Nt0~SX0~aYB|o#7H2aga`y!DltGJXEWH)0vHg)qy zGVOLniTbbzfNefmMUYF-`W?i# zOs0v?xSQ;B8JODrkgn5p*bBI6AIpnG$Sa=QC`V{^g!OxP;b2zoN515FW+k8~fgSZ^ zSdzk#c${pxCSARpI}o8Ok+83qBRAub?I%%*&~79S@Q?aL;5ovMV*R{Gd|7!)zy@qQ zJJJu)13bT@njM&x|Jh-6fPO}m%I*feK;OYLz~4I13!=D_2^9(<=5z9+JLm3Y-N7im z6b&LW_HyH0b2=p(&_gf;3Y0Kkk@J(sh>{ykq)1$m1#uto^DO5gasPiy)E*yUBZL=@ z5W6)#=6W#c^}2m7Z!$Ps33Adjd5ed1`yM0Q^<)l+2!lzRF+fi~R+Iy}4M?-Jqq$|?F zHys|HdEDoByo*XS+}B`L=3e29Y36<7hU>fVi`TYJoN*uh6`VHngM(X-oc`)BZ)~_H zNnm+U9G*haG=lbkxe%>__OgY+$P9+=yM~NM^Pu_7BH#cX_CXac!UlPkY%-Ub>&z`$ zqL0~Zwnh6AJIW1kCGJt~b#8Nj$Mxnd4ZvHl$4mys_}Sy@4#Fq>xT!K2HP@IQC zrpUgrunqCHh3$Cb*DTCp{Cf*KAPI*o>;w<6IC)~*gAp_PPt1S|ell?v1&YGAmS98N zv#=ds)5jKOF@D>^4w!*i3p??qi|1-^4r*0hZ*>l*)AJ2|VLqiTq;WDjJ}v0LVMyaM z4-MoC=u@DfPq&)W^=7+sc3w;AZFNzrIqqyW^w^x%(Aui5&Bh)&AG@p4yrS%4OcNS}CSVc#s!Xn}tIE<^FoN=$Ggonh@ipyT^4@J@Z5dZ)H delta 672 zcmXw1O=uHA6#ix>*=^F2&6-U@o3wf;NFA{6ff+AQDU24-HiHWq(2!ZIW zy@Dmac8T8`Oiv@?7mCw584`fQeFN>V!M+FIAv1!GeQjw^qdfn$&gb zeb?Rc^r`&DFX|O8GFGk3&T*q0)_0YMl;7^Pjtld?I4w+XT(rGVwABpB4>DKZej_XL z8G1M|VH-lz<(ygk|LIKA3q@xye?t*n*qmk;~X)>hW*F*3~?UCV~|F8VdS z+V}JKW%JlybO+R$*vwrT-$n10b);eM_?;v)0=4p9`Y4DO8OpCSR(!7f-CBhzECxHr z5r)ks6tRrg;*R*Nt!ZzyO<9oZfiJ-Y{hGe2uNw*0i3nddo+6}XLGy0gu|@=Iog-zs zvmEClMW~em66%W2CULkk85V$$n5Q%M z+;iW%_ucut8}glmuyk^K90=gW-vO6tSAggzINwVNp>wd>P}%^bhJgtK;^fz_&M5PS z_8$5@7CbZcvrnM*F@R^#z#rSE9;>O!G=TRPoKrLq{*{T>Pz2y)^i8lI(VMk~wv1XC zwTgjBV0P=RD$aYDyNE*0z@gt0&`_4KF!vq$5ff2ZYbp&DwQVfEVc_}a=1#O*^BVSp zo3Z9mWR(7-?<4mTpZ*|u0Pibgr^CS5?uYa$y$bsv2;g(@A`yxOZ+?I!G#hpJy}WQZ zn=_RgJkPB56$*Vj%0y6>gP~ZAZ1oQJcJuDO5M2!gece2{84GPci;)oRgkk{y$WH{G zC5{2iUlfTin;R3bfFqWTni4(4^E--Bfm!{Z71k!`m$Xpb-Js{`73=~2R)L-u#hpx` zR0=R(k)PdpcQ@;n!u0j9giN1e6CLBZlx;vqpdSi=FMt$s#o^n=`U-Vp>R7)`0zQ~)>-urVP2-kvy2*n{M#NXX~i+f#BrFHeyWpGxtU z!{l_h`-XX=fj9H=+w$SJoL-)J+UIw^i;-~9jKSJ7>}#z43iG}$xqk@0d~NIGY4@?; zz-7bg0Jokz_03;a=RLzCeS5kY#Lof%eI7ApfuMa9Vdz!F1&f1z&J(!r8hXZTFT!u; zZ~_nep$03kL0%x6%q8YJbBmVgIh)P4XkT^=usv*JA4#WYo7%!`N?k}}_Zp5i z%)=2#>HkiKDR#s9;*X& delta 688 zcmX|864R-a=YS_0Wn6BB3^2Br$~+QXx=} z_9DoDlv2D13Oy7g2QLbu9;%?As1(s6;z2L|18=tVd&%G~-@Nbr=FL22XTN0M^n3M_ zg#rn}lNhJ2Rt%F+uiRZXvfe^^vRaxU5&nZ%&tHnLR)r)^esRSIS^diJ}Kt zFMcoH4W>#LiDExdGsN1xxRVS3iJbk&`&ss5`8KG|&4Z01KgBALu~ex|qHfGt0XV?w z`;#tRvskQXe%hm#R}>U(tMoHC+7gW2QDchx7RV>m;0%pH)O07cn&|PGDRT zTWZ32)SQqnWxlcVOxEOmieL-RwS~1eANPk+Le`SWt#jSJ-)-Cx-(r4jI~ULN%3Hme z_;ya6v9ryG;bmK;;vX}sJ>P#_h#mVwT_(B_ZRXGOiCR%Pi6e*IHfKg;K**Ur(NQ3t zg_t*>6?HX{R<{$0fn{13*Tp+y&3JBX%Cg)r--oVQm#kH5!}hR%ug|4>)Pabt`SKQ` zwAQ{>jNFWCxUEft+Dl~nv^U|4+K2EPSlV0QhqUjc9vUM_!t4Oy6>V=&l#XgI!L#gh wC^GSm=!p<{6xZGYAJD#&d40HYRk7ytkO diff --git a/src/wolnelektury/static/2022/index.html b/src/wolnelektury/static/2022/index.html index 246825a6e..3eaf87c07 100644 --- a/src/wolnelektury/static/2022/index.html +++ b/src/wolnelektury/static/2022/index.html @@ -1,443 +1,496 @@ - - - - - WolneLektury.pl - - - - + + + + + WolneLektury.pl + - - - - - + + - - - + + -
-
- +
+ +
+
+
+
+
-
- +
+
- -
-
-
-
- -
-
- -
-
- +
+ +
+
+
+
+ Henryk Sienkiewicz, Potop, Potop, tom pierwszy, tom 1, rozdział 1. Czyta Jasiek Staszczyk, reż. Jasiek Staszczyk +
+
+
+ + + +
+
    +
  • 2×
  • +
  • 1.75×
  • +
  • 1.5×
  • +
  • 1.25×
  • +
  • 1×
  • +
  • 0.75×
  • +
  • 0.5×
  • +
  • 0.25×
  • +
-
-
- -
-
Czyta Wiktor Korzeniewski, reż. Adam Bień
- +
+
1. Godzina pierwsza – godzina miłości
+
+ Rozdziały +
    +
  • Godzina pierwsza – godzina miłości
  • +
  • Druga godzina – godzina rozpaczy
  • +
  • Trzecia godzina – godzina przestrogi
  • +
+
+ - + +
+
+ + +
+
+
+
+ + + +
+
+

Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.

+
+
+
+
+
+
+

Pobieranie e-booka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.pdf

+

Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.

+
+
+ .pdf
-
-
- - - +
+
+

.epub

+

Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.

-
-

Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.

+
+ .epub
-
-
-
-
-

Pobieranie e-booka

-

Wybierz wersję dla siebie:

+
+
+

.mobi

+

Natywny format dla czytnika Amazon Kindle.

-
-
-
-

.pdf

-

Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.

-
-
- .pdf -
-
-
-
-

.epub

-

Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.

-
-
- .epub -
-
-
-
-

.mobi

-

Natywny format dla czytnika Amazon Kindle.

-
-
- .mobi -
-
-
-
-

synchrobook (epub3)

-

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).

-
- -
-
-
-

inne formaty

- -
-
+
+ .mobi
-
-
-
-
-
-

Pobieranie audiobooka

-

Wybierz wersję dla siebie:

+
+
+

synchrobook (epub3)

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).

-
-
-
-

.mp3

-

Uniwersalny format, obsługiwany przez wszystkie urządzenia.

-
-
- .mp3 -
-
-
-
-

OggVorbis

-

Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.

-
-
- .ogg -
-
-
-
-

DAISY

-

Format dla osób z dysfunkcjami czytania.

-
-
- DAISY -
-
-
-
-

synchrobook

-

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.

-
- -
+ +
+
+
+

inne formaty

+
-
-
- -

Opis

- -

- Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają: pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika i wciela je w życie. -

-

- Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna: komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę? -

-

- Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor) to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa. -

-
-
-
-
-
-

Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!

-
- Dorzuć się! - Dorzuć się! -
-
-
-
-
-
-

O autorze

-
-
- Adam Mickiewicz -
- Źródło: Wikipedia -
-
-
-

Adam Mickiewicz

-

- Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka
- Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł) -

-

- Najważniejsze dzieła:
- Ballady i romanse (1822), Grażyna (1823), Sonety krymskie (1826), Konrad Wallenrod (1828), - Dziady (cz.II i IV 1823, cz.III 1832), Księgi narodu polskiego i pielgrzymstwa polskiego (1833), - Pan Tadeusz (1834); wiersze: Oda do młodości (1820), Do Matki Polki (1830), Śmierć pułkownika (1831), - Reduta Ordona (1831)... -

-
+
-
-
-
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część I

+
+
+
+

Pobieranie audiobooka

+

Wybierz wersję dla siebie:

+
+
+
+
+

.mp3

+

Uniwersalny format, obsługiwany przez wszystkie urządzenia.

+
+
+ .mp3 +
+
+
+
+

OggVorbis

+

Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.

+
+
+ .ogg +
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część II

+
+
+

DAISY

+

Format dla osób z dysfunkcjami czytania.

+
+
+ DAISY +
-
- - Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten - nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże. - -

Adam Mickiewicz – Dziady, część III

+
+
+

synchrobook

+

Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.

+
+
+
-
-
-
-

Motywy występujące w tym utworze Wszystkie motywy

- -
-
- -
-
-
-

Tytuły powiązane

- + + +
+
+

Ta książka jest dostępna dla tysięcy dzieciaków dzięki darowiznom od osób takich jak Ty!

+ Dorzuć się!
+
+ Dorzuć się! +
-
- -