--- /dev/null
- playButton.on('click', function() {
+ // 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() {
+ 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');
+ });
+ })();
width: 100%;
align-items: center;
position: relative;
- padding: 25px 34px;
background-color: #D5ECED;
- border-radius: 5px;
+ padding: 25px 34px 25px 14px;
+ }
+
+ .c-player__head {
+ background: #006066;
+ padding: 8px 14px;
+ border-radius: 5px 5px 0px 0px;
+ font-weight: 600;
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.02em;
+ color: #FFFFFF;
}
.c-player__btn {
}
}
+ .c-player__btns {
+ display: flex;
+ align-items: center;
+
+ button {
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ width: 40px; height: 40px;
+ border-radius: 50%;
+ cursor: pointer;
+ margin: 0 5px;
+ outline: 0;
+ border: 1px solid transparent;
+ transition: border-color $ease-out 450ms;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:hover {
+ border-color: rgba(#007880, 0.5);
+ }
+
+ &.c-player__btn--md {
+ width: 50px; height: 50px;
+ .icon-play {
+ font-size: 20px;
+ position: relative;
+ left: 2px;
+ }
+ .icon-pause {
+ font-size: 20px;
+ }
+ }
+
+ .icon {
+ color: #007880;
+ font-size: 16px;
+ }
+ }
+ }
+
.c-player__timeline {
max-width: 590px;
width: calc(100% - 60px);
margin-right: 0;
position: relative;
- &:before {
- content: "1×";
- font-weight: bold;
- font-size: 15px;
- line-height: 120%;
- text-align: center;
- color: #007880;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: -70px;
- }
-
& > span {
height: 10px;
width: 100%;
display: block;
- background: #FFFFFF;
+ background: #F2F2F2;
border-radius: 5px;
position: relative;
overflow: hidden;
- span {
- width: 40%;
+ span.jp-seek-bar {
+ height: 100%;
+ position: absolute;
+ border-radius: 5px;
+ background-color: #FFFFFF;
+ top: 0; left: 0;
+ }
+
+ span.jp-play-bar {
height: 100%;
position: absolute;
border-radius: 5px;
- background-color: #083F4D;
+ background-color: #006066;
top: 0; left: 0;
}
}
}
+
+.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;
line-height: 140%;
letter-spacing: 0.05em;
color: #083F4D;
+ z-index: 1;
+
+ &.is-active {
+ span {
+ &:after {
+ transform: rotate(180deg);
+ }
+ }
+ ul {
+ opacity: 1;
+ transform: none;
+ pointer-events: all;
+ }
+ }
+
+ span {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ &:after {
+ margin-left: 5px;
+ content: $icon-arrow-down;
+ font-family: '#{$icomoon-font-family}' !important;
+ transition: transform $ease-out 450ms;
+ }
+ }
+
+ ul {
+ width: 283px;
+ position: absolute;
+ background-color: #083F4D;
+ transform: translateY(-10px);
+ opacity: 0;
+ box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
+ transition: all $ease-out 450ms;
+ list-style-position: inside;
+ border-radius: 10px;
+ right: 0;
+ margin: 10px 0 0;
+ padding: 15px;
+ pointer-events: none;
+ li {
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.05em;
+ list-style-type: decimal;
+ margin: 5px 0;
+ color: white;
+ }
+ }
+ }
+
+ .c-player__volume {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 40px;
+
+ .icon {
+ font-size: 21px;
+ color: #007880;
+ margin-right: 8px;
+ cursor: pointer;
+ }
+
+ input[type=range] {
+ width: 100px;
+ -webkit-appearance: none;
+ background: 0 0;
+ border: 0;
+ border-radius: 5px;
+ height: 10px;
+ color: #006066;
+ display: block;
+ margin: 0;
+ padding: 0;
+ transition: box-shadow .3s ease;
+ outline: 0;
+
+ background: white;
+ background-image: linear-gradient(#006066, #006066);
+ background-size: 60% 100%;
+ background-repeat: no-repeat;
+ }
+ }
+
+ input[type=range]::-webkit-slider-thumb {
+ height: 10px;
+ width: 10px;
+ background: #006066;
+ border-radius: 50%;
+ cursor: pointer;
+ }
+
+ input[type=range],
+ input[type=range]::-webkit-slider-runnable-track,
+ input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;
}
.c-player__length {
display: block;
position: relative;
- span {
+ > span {
position: absolute;
padding-top: 10px;
font-style: normal;
fnp / wolnelektury.git / commitdiff