438 lines
9.9 KiB
JavaScript
438 lines
9.9 KiB
JavaScript
jQuery(function ($) {
|
|
gsap.registerPlugin(ScrollTrigger)
|
|
|
|
let frameElements = $('.frame-box-content-data .box')
|
|
let frameScrollWidth = parseFloat(0)
|
|
frameElements.each(function (index, element) {
|
|
frameScrollWidth += parseFloat(element.offsetWidth)
|
|
|
|
let marginLeft = parseFloat($(element).css('margin-left'))
|
|
if (!isNaN(marginLeft) && marginLeft !== 0) {
|
|
frameScrollWidth += marginLeft
|
|
}
|
|
})
|
|
|
|
$(
|
|
'#frame-box .frame-box-content-bg, #frame-box .frame-box-content-bg img'
|
|
).css('width', `${frameScrollWidth}px`)
|
|
$('#frame-box .piano-keys').css('width', `${frameScrollWidth}px`)
|
|
frameScrollWidth = frameScrollWidth - parseFloat($('#frame-box').width())
|
|
$('.frame-box-content-data, #frame-box .piano').css(
|
|
'width',
|
|
`${frameScrollWidth}px`
|
|
)
|
|
|
|
let dragHandle = document.querySelector('#drag-handle')
|
|
Draggable.create(dragHandle, {
|
|
type: 'x',
|
|
bounds: '#frame-box',
|
|
onDrag: updateScroll,
|
|
onThrowUpdate: updateScroll,
|
|
})
|
|
|
|
function updateScroll() {
|
|
let frameWidth = document.querySelector('#frame-box').offsetWidth
|
|
let thisWidth = this.styles.target.clientWidth
|
|
|
|
let scrollPosition = (this.x / (frameWidth - thisWidth)) * frameScrollWidth
|
|
|
|
$('#frame-box-content, .piano').css(
|
|
'transform',
|
|
`translateX(${-scrollPosition}px)`
|
|
)
|
|
|
|
hideHelpingStep(1)
|
|
}
|
|
|
|
$('body').on('click', '.img-box-helping', function () {
|
|
hideHelpingStep(2)
|
|
})
|
|
$('body').on('click', '.song-handler-anim', function () {
|
|
hideHelpingStep(3)
|
|
})
|
|
|
|
shouldShowHelpingStep(1)
|
|
shouldShowHelpingStep(2)
|
|
shouldShowHelpingStep(3)
|
|
|
|
function shouldShowHelpingStep(stepNumber) {
|
|
const selector = `.helping .step-${stepNumber}`
|
|
const storageKey = `helpingStep${stepNumber}HiddenAt`
|
|
const lastHidden = localStorage.getItem(storageKey)
|
|
const now = Date.now()
|
|
|
|
if (lastHidden && now - parseInt(lastHidden) < 24 * 60 * 60 * 1000) {
|
|
$(selector).remove()
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
function hideHelpingStep(stepNumber) {
|
|
const selector = `.helping .step-${stepNumber}`
|
|
const storageKey = `helpingStep${stepNumber}HiddenAt`
|
|
const now = Date.now()
|
|
|
|
$(selector).remove()
|
|
localStorage.setItem(storageKey, now.toString())
|
|
}
|
|
|
|
// gsap.to("#frame-box-content, .piano", {
|
|
// xPercent: -100,
|
|
// ease: "linear",
|
|
// scrollTrigger: {
|
|
// id: "scrollTrigger",
|
|
// trigger: "main#content",
|
|
// pin: true,
|
|
// scrub: 1,
|
|
// end: () => "+=" + frameScrollWidth
|
|
// },
|
|
// });
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
let currentAudio = null
|
|
|
|
let fullAlbumPlaying = false
|
|
let fullAlbumList = []
|
|
let fullAlbumIndex = 0
|
|
let fullAlbumButton = null
|
|
|
|
function highlightSong(li) {
|
|
$('.song').removeClass('active')
|
|
if (li) li.addClass('active')
|
|
}
|
|
|
|
$('.actions .song').on('click', function () {
|
|
stopFullAlbum()
|
|
|
|
let songURI = $(this).attr('song')
|
|
|
|
if (currentAudio !== null) {
|
|
currentAudio.pause()
|
|
currentAudio.currentTime = 0
|
|
}
|
|
|
|
let audio = new Audio(songURI)
|
|
currentAudio = audio
|
|
audio.play()
|
|
|
|
highlightSong($(this))
|
|
|
|
activePlayer()
|
|
})
|
|
|
|
$('.song-handler-anim').on('click', function () {
|
|
if (fullAlbumPlaying) {
|
|
stopFullAlbum()
|
|
return
|
|
}
|
|
|
|
let songURI = $(this).attr('song')
|
|
|
|
if (currentAudio !== null) {
|
|
currentAudio.pause()
|
|
currentAudio.currentTime = 0
|
|
currentAudio = null
|
|
stopPlayer()
|
|
|
|
highlightSong(null)
|
|
} else {
|
|
let audio = new Audio(songURI)
|
|
currentAudio = audio
|
|
audio.play()
|
|
activePlayer()
|
|
}
|
|
})
|
|
|
|
$('.box button').on('click', function () {
|
|
if (fullAlbumPlaying) {
|
|
stopFullAlbum()
|
|
return
|
|
}
|
|
|
|
let box = $(this).closest('.box')
|
|
fullAlbumButton = $(this)
|
|
|
|
fullAlbumList = []
|
|
box.find('.actions .song[song]').each(function () {
|
|
fullAlbumList.push($(this).attr('song'))
|
|
})
|
|
|
|
if (fullAlbumList.length === 0) return
|
|
|
|
fullAlbumPlaying = true
|
|
fullAlbumIndex = 0
|
|
fullAlbumButton.addClass('active')
|
|
|
|
playFullAlbumSong(box)
|
|
})
|
|
|
|
function playFullAlbumSong(box) {
|
|
let src = fullAlbumList[fullAlbumIndex]
|
|
|
|
if (currentAudio !== null) {
|
|
currentAudio.pause()
|
|
currentAudio.currentTime = 0
|
|
}
|
|
|
|
currentAudio = new Audio(src)
|
|
currentAudio.play()
|
|
|
|
activePlayer()
|
|
|
|
let currentLi = box.find('.actions .song[song="' + src + '"]')
|
|
highlightSong(currentLi)
|
|
|
|
currentAudio.onended = function () {
|
|
fullAlbumIndex++
|
|
if (fullAlbumIndex < fullAlbumList.length) {
|
|
playFullAlbumSong(box)
|
|
} else {
|
|
stopFullAlbum()
|
|
}
|
|
}
|
|
}
|
|
|
|
function stopFullAlbum() {
|
|
fullAlbumPlaying = false
|
|
|
|
if (fullAlbumButton) {
|
|
fullAlbumButton.removeClass('active')
|
|
}
|
|
|
|
if (currentAudio) {
|
|
currentAudio.pause()
|
|
currentAudio.currentTime = 0
|
|
}
|
|
|
|
currentAudio = null
|
|
fullAlbumIndex = 0
|
|
|
|
highlightSong(null)
|
|
|
|
stopPlayer()
|
|
}
|
|
|
|
function activePlayer() {
|
|
$('.song-handler-anim').addClass('active')
|
|
}
|
|
function stopPlayer() {
|
|
$('.song-handler-anim').removeClass('active')
|
|
}
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
$('#frame-box nav #nav_foto').on('click', function () {
|
|
$('#frame-box #obrazy').hide()
|
|
$('#frame-box #foto').show()
|
|
$('#frame-box #plyty').hide()
|
|
$('#frame-box #biogram').hide()
|
|
})
|
|
$('#frame-box nav #nav_plyty').on('click', function () {
|
|
$('#frame-box #obrazy').hide()
|
|
$('#frame-box #foto').hide()
|
|
$('#frame-box #plyty').show()
|
|
$('#frame-box #biogram').hide()
|
|
})
|
|
$('#frame-box nav #nav_intro').on('click', function () {
|
|
$('#frame-box #obrazy').hide()
|
|
$('#frame-box #intro').show()
|
|
$('#frame-box #foto').hide()
|
|
$('#frame-box #plyty').hide()
|
|
$('#frame-box #biogram').hide()
|
|
})
|
|
|
|
$('#frame-box #intro p').on('click', function () {
|
|
$('#frame-box #obrazy').hide()
|
|
$('#frame-box #intro').hide()
|
|
$('#frame-box #foto').hide()
|
|
$('#frame-box #plyty').show()
|
|
$('#frame-box #biogram').hide()
|
|
|
|
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
|
|
$('#frame-box nav#nav ul#nav_ul li#nav_plyty').addClass('active')
|
|
})
|
|
|
|
$('#frame-box nav #nav_biogram').on('click', function () {
|
|
$('#frame-box #obrazy').hide()
|
|
$('#frame-box #biogram').show()
|
|
$('#frame-box #intro').hide()
|
|
$('#frame-box #foto').hide()
|
|
$('#frame-box #plyty').hide()
|
|
})
|
|
|
|
$('#frame-box nav #nav_obrazy').on('click', function () {
|
|
$('#frame-box #obrazy').show()
|
|
$('#frame-box #biogram').hide()
|
|
$('#frame-box #intro').hide()
|
|
$('#frame-box #foto').hide()
|
|
$('#frame-box #plyty').hide()
|
|
})
|
|
|
|
$('#frame-box nav#nav ul#nav_ul li').on('click', function () {
|
|
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
|
|
$(this).addClass('active')
|
|
})
|
|
})
|
|
|
|
// jQuery(function ($) {
|
|
// $('#frame-box .actions .text').on('click', function () {
|
|
// $('.text-data', this).toggleClass('active')
|
|
// })
|
|
// })
|
|
|
|
jQuery(document).ready(function ($) {
|
|
$('li.text').on('click', function () {
|
|
const songId = $(this).attr('data-song-id')
|
|
|
|
$.ajax({
|
|
url: '/wp-admin/admin-ajax.php',
|
|
type: 'POST',
|
|
data: {
|
|
action: 'get_song_text',
|
|
song_id: songId,
|
|
},
|
|
beforeSend: function () {
|
|
$('#song-text-box').html('<p>Ładowanie...</p>')
|
|
},
|
|
success: function (response) {
|
|
$('#song-text-box').addClass('active')
|
|
$('#song-text-box').html(response)
|
|
},
|
|
error: function () {
|
|
$('#song-text-box').addClass('active')
|
|
$('#song-text-box').html(
|
|
'<div class="song-text-content"><p>Bład proszę spróbować później.</p></div>'
|
|
)
|
|
setTimeout(() => {
|
|
$('#song-text-box').removeClass('active')
|
|
}, 2000)
|
|
},
|
|
})
|
|
})
|
|
|
|
$(document).on(
|
|
'click',
|
|
'#song-text-box .song-text-close .close-btn',
|
|
function () {
|
|
$('#song-text-box').removeClass('active')
|
|
setTimeout(() => {
|
|
$('#song-text-box').empty()
|
|
}, 1000)
|
|
}
|
|
)
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
Fancybox.bind('[data-fancybox]', {})
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
function finger_1_anim() {
|
|
const element = $('.hand-finder-part-1')
|
|
element.css('animation', 'finger-1 500ms')
|
|
setTimeout(() => {
|
|
element.css('animation', 'none')
|
|
setTimeout(finger_1_anim, 3000)
|
|
}, 1000)
|
|
}
|
|
function finger_2_anim() {
|
|
const element = $('.hand-finder-part-2')
|
|
element.css('animation', 'finger-2 500ms')
|
|
setTimeout(() => {
|
|
element.css('animation', 'none')
|
|
setTimeout(finger_2_anim, 3000)
|
|
}, 1000)
|
|
}
|
|
|
|
finger_1_anim()
|
|
finger_2_anim()
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
$('#frame-box #nav_book').on('click', function () {
|
|
$('#frame-box #book').fadeIn('slow')
|
|
$('#flipbook').turn('page', 2)
|
|
})
|
|
$('#frame-box #book .book-close').on('click', function () {
|
|
$('#frame-box #book').fadeOut('slow')
|
|
})
|
|
|
|
$('#flipbook').turn({
|
|
width: window.matchMedia('(max-width: 968px)').matches
|
|
? $(window).width() * 0.9
|
|
: 600,
|
|
height: window.matchMedia('(max-width: 968px)').matches
|
|
? ($(window).width() * 0.9) / 1.445
|
|
: 415,
|
|
autoCenter: true,
|
|
display: 'double',
|
|
when: {
|
|
turned: function (event, page, view) {
|
|
if (page > 3) {
|
|
$('.book-contents').fadeIn()
|
|
} else {
|
|
$('.book-contents').fadeOut()
|
|
}
|
|
},
|
|
turning: function (event, page, view) {
|
|
if (page === 1) {
|
|
// event.preventDefault()
|
|
if (!$(event.target).closest('a').length) {
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
})
|
|
|
|
$('#flipbook').on('touchstart', 'a', function (event) {
|
|
event.stopPropagation()
|
|
})
|
|
|
|
$(document).on('click', 'ul.table-of-contents', function (e) {
|
|
e.stopPropagation()
|
|
})
|
|
|
|
$(document).on('click', '.goto-page', function (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
var page = $(this).data('page')
|
|
|
|
$('#flipbook').turn('page', page)
|
|
})
|
|
|
|
$(document).on('click', '.book-contents', function (e) {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
$('#flipbook').turn('page', 2)
|
|
})
|
|
})
|
|
|
|
jQuery(function ($) {
|
|
var swiper_biogram = new Swiper('.swiper_biogram', {
|
|
loop: false,
|
|
on: {
|
|
slideChange: function () {
|
|
updateCustomPagination(swiper_biogram.activeIndex)
|
|
},
|
|
},
|
|
})
|
|
|
|
$('.swiper-pagination li').each(function (index) {
|
|
$(this).on('click', function () {
|
|
swiper_biogram.slideTo(index)
|
|
updateCustomPagination(index)
|
|
})
|
|
})
|
|
|
|
function updateCustomPagination(activeIndex) {
|
|
$('.swiper-pagination li').removeClass('active')
|
|
$('.swiper-pagination li').eq(activeIndex).addClass('active')
|
|
}
|
|
|
|
updateCustomPagination(0)
|
|
})
|