From: Radek Czajka Date: Fri, 1 Apr 2022 12:58:05 +0000 (+0200) Subject: Merge remote-tracking branch 'zawadzki/new-design' X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/1249091e84840ca27aa6047db36c8e899328f15c Merge remote-tracking branch 'zawadzki/new-design' --- 1249091e84840ca27aa6047db36c8e899328f15c diff --cc src/wolnelektury/static/2021/scripts/main.js index 000000000,c456b6c37..d1138658b mode 000000,100644..100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@@ -1,0 -1,204 +1,204 @@@ + // JS Menu + (function () { + let button = $('.js-menu'); + let menu = $('.l-navigation__menu'); + let menuLinks = menu.find('a'); + + button.on('click', function() { + if(!$(this).hasClass('is-active')) { + $(this).addClass('is-active'); + menu.addClass('is-open'); + button.find('.bar').addClass('animate'); + menuLinks.attr('tabindex', 0); + } else { + $(this).removeClass('is-active'); + menu.removeClass('is-open'); + button.find('.bar').removeClass('animate'); + menuLinks.attr('tabindex', -1); + } + }); + + $(document).keyup(function(e) { + if (e.keyCode === 27) { + button.removeClass('is-active'); + menu.removeClass('is-open'); + button.find('.bar').removeClass('animate'); + menuLinks.attr('tabindex', -1); + } + }); + })(); + + // Ebook/Audiobook Btns + (function() { + 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() { ++ /*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) { + if (e.keyCode === 27) { + $('.c-media__popup').removeClass('is-open'); + } + }); + })(); + + // 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'); + let button = $('.l-article__read-more'); + + overlays.each(function () { + let maxHeight = $(this).attr('data-max-height'); + if($(this).outerHeight() > maxHeight) { + $(this).css({'maxHeight': maxHeight+'px'}).addClass('is-active'); + } else { + $(this).next('.l-article__read-more').hide(); + } + }); + + button.on('click', function() { + let dataLabel = $(this).attr('data-label'); + let dataAction = $(this).attr('data-action'); + $(this).parent().find('.l-article__overlay').toggleClass('is-clicked'); + if($(this).text() === dataLabel) { + $(this).text(dataAction); + } else { + $(this).text(dataLabel); + } + }); + })(); + + //Zmieniamy się popup + (function() { + let $change = $('.l-change-pop'); + function change() { + if(localStorage.getItem('change') === null) { + $change.addClass('show'); + } else { + $change.remove(); + return false; + } + + $change.on('click', '.l-change-pop__close', function () { + $change.slideUp(); + localStorage.setItem('change', 'showed'); + }); + } + + if($change.length) { change(); } + })(); + + //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 --cc src/wolnelektury/static/2022/styles/components/_player.scss index 9e4095088,7ef0760dc..8b4ee513f --- a/src/wolnelektury/static/2022/styles/components/_player.scss +++ b/src/wolnelektury/static/2022/styles/components/_player.scss @@@ -92,21 -123,19 +130,33 @@@ } } + +.c-player__title { + top: -27px; + left: 0; + position: absolute; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 140%; + letter-spacing: 0.05em; + color: #083F4D; +} + + .c-player__info { + top: -27px; + left: 0; + position: absolute; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 140%; + letter-spacing: 0.05em; + color: #083F4D; + } + + .c-player__chapters { top: -27px; right: 0; position: absolute;