first commit

wp-content/themes/hello-elementor/assets/js/custom.js

@@ -0,0 +1,213 @@
+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)`
+		)
+	}
+
+	// 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
+
+	$('.actions .song').on('click', function () {
+		let songURI = $(this).attr('song')
+
+		if (currentAudio !== null) {
+			currentAudio.pause()
+			currentAudio.currentTime = 0
+		}
+
+		let audio = new Audio(songURI)
+
+		currentAudio = audio
+
+		audio.play()
+		activePlayer()
+	})
+
+	$('.song-handler-anim').on('click', function () {
+		let songURI = $(this).attr('song')
+
+		if (currentAudio !== null) {
+			currentAudio.pause()
+			currentAudio.currentTime = 0
+			currentAudio = null
+			stopPlayer()
+		} else {
+			let audio = new Audio(songURI)
+			currentAudio = audio
+			audio.play()
+			activePlayer()
+		}
+	})
+
+	function activePlayer() {
+		$('.song-handler-anim').addClass('active')
+	}
+	function stopPlayer() {
+		$('.song-handler-anim').removeClass('active')
+	}
+	function togglePlayer() {
+		$('.song-handler-anim').toggleClass('active')
+	}
+})
+
+jQuery(function ($) {
+	$('#frame-box nav #nav_foto').on('click', function () {
+		$('#frame-box #foto').show()
+		$('#frame-box #plyty').hide()
+	})
+	$('#frame-box nav #nav_plyty').on('click', function () {
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').show()
+	})
+	$('#frame-box nav #nav_intro').on('click', function () {
+		$('#frame-box #intro').show()
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').hide()
+	})
+
+	$('#frame-box #intro p').on('click', function () {
+		$('#frame-box #intro').hide()
+		$('#frame-box #foto').hide()
+		$('#frame-box #plyty').show()
+	})
+})
+
+jQuery(function ($) {
+	$('#frame-box .actions .text').on('click', function () {
+		$('.text-data', this).toggleClass('active')
+	})
+})
+
+jQuery(function ($) {
+	Fancybox.bind('[data-fancybox]', {
+		// Your custom options
+	})
+})
+
+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)
+	})
+})