Project-Pro/grechuta.pagedev.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save

Browse Source
This commit is contained in:
Roman Pyrih
2025-11-24 14:59:32 +01:00
parent 216419a30d
commit 870848e6e4
5 changed files with 286 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
wp-content/themes/hello-elementor/assets/js/custom.js
View File

@@ -93,8 +93,20 @@ jQuery(function ($) {
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) {
@@ -103,14 +115,21 @@ jQuery(function ($) {
}
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) {
@@ -118,6 +137,9 @@ jQuery(function ($) {
currentAudio.currentTime = 0
currentAudio = null
stopPlayer()
highlightSong(null)
} else {
let audio = new Audio(songURI)
currentAudio = audio
@@ -126,17 +148,85 @@ jQuery(function ($) {
}
})
$('.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')
}
function togglePlayer() {
$('.song-handler-anim').toggleClass('active')
}
})
jQuery(function ($) {
$('#frame-box nav #nav_foto').on('click', function () {
$('#frame-box #obrazy').hide()
@@ -323,7 +413,6 @@ jQuery(function ($) {
jQuery(function ($) {
var swiper_biogram = new Swiper('.swiper_biogram', {
// Не використовуємо стандартну пагінацію Swiper
loop: false,
on: {
slideChange: function () {
@@ -332,7 +421,6 @@ jQuery(function ($) {
},
})
// Прив'язуємо кліки по елементах пагінації
$('.swiper-pagination li').each(function (index) {
$(this).on('click', function () {
swiper_biogram.slideTo(index)
@@ -340,12 +428,10 @@ jQuery(function ($) {
})
})
// Функція для оновлення активного пункту
function updateCustomPagination(activeIndex) {
$('.swiper-pagination li').removeClass('active')
$('.swiper-pagination li').eq(activeIndex).addClass('active')
}
// Ініціалізація активного елемента
updateCustomPagination(0)
})
})

47
wp-content/themes/hello-elementor/assets/styles/custom.css
View File

@@ -313,6 +313,34 @@ body.page-id-846 #content .page-content {
font-family: Arial, sans-serif;
margin-bottom: 10px;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn {
display: flex;
padding: 0;
border: none;
line-height: 0;
background: transparent !important;
cursor: pointer;
outline: none;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn.active span.play {
display: none;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn.active span.stop {
display: inline-block;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn span {
line-height: 0;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn span.play {
display: inline-block;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn span.stop {
display: none;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .album-action-btn span img {
width: 100%;
max-width: 10px;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions {
list-style: none;
margin: 0;
@@ -338,6 +366,25 @@ body.page-id-846 #content .page-content {
height: -moz-fit-content;
height: fit-content;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions li:hover .song-icon img:nth-child(2) {
opacity: 1;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions li.active .song-icon img:nth-child(2) {
opacity: 1;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions li .song-icon {
position: relative;
display: inline-block;
line-height: 0;
margin-top: -1px;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions li .song-icon img:nth-child(2) {
position: absolute;
inset: 0;
width: 15px;
z-index: 1;
opacity: 0;
}
#frame-box #plyty #frame-box-content .frame-box-content-data .actions .song {
cursor: pointer;
}

2
wp-content/themes/hello-elementor/assets/styles/custom.css.map
View File

File diff suppressed because one or more lines are too long

66
wp-content/themes/hello-elementor/assets/styles/custom.scss
View File

@@ -358,6 +358,40 @@ body {
margin-bottom: 10px;
}
.album-action-btn {
display: flex;
padding: 0;
border: none;
line-height: 0;
background: transparent !important;
cursor: pointer;
outline: none;
&.active {
span.play {
display: none;
}
span.stop {
display: inline-block;
}
}
span {
line-height: 0;
&.play {
display: inline-block;
}
&.stop {
display: none;
}
img {
width: 100%;
max-width: 10px;
}
}
}
.actions {
list-style: none;
margin: 0;
@@ -381,6 +415,38 @@ body {
max-width: fit-content;
height: fit-content;
}
&:hover {
.song-icon {
img:nth-child(2) {
opacity: 1;
}
}
}
&.active {
.song-icon {
img:nth-child(2) {
opacity: 1;
}
}
}
.song-icon {
position: relative;
display: inline-block;
line-height: 0;
margin-top: -1px;
img {
&:nth-child(2) {
position: absolute;
inset: 0;
width: 15px;
z-index: 1;
opacity: 0;
}
}
}
}
.song {

90
wp-content/themes/hello-elementor/template-parts/frame-album-sections.php
View File

@@ -1,5 +1,13 @@
<section class="box box-1">
<?php if(get_field("albums_arr")[0]['show_title_img']) : ?>
<button class="album-action-btn">
<span class="play">
<img src="/wp-content/uploads/2025/11/play.svg" alt="">
</span>
<span class="stop">
<img src="/wp-content/uploads/2025/11/stop.svg" alt="">
</span>
</button>
<img class="title_img" src="<?= get_field("albums_arr")[0]['title_img']; ?>" alt="">
<?php else : ?>
<h2><?= get_field("albums_arr")[0]['title'] ?></h2>
@@ -14,7 +22,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[0]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -66,7 +77,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[1]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -105,7 +119,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[2]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -147,7 +164,10 @@
<li class="song-txt">Suita „Spotkania w czasie” z filmu Jastrun:</li>
<?php endif; ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -187,7 +207,10 @@
<?php foreach (get_field("albums_arr")[4]['albums_list'] as $key => $value) : ?>
<?php if($key <= 5) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
@@ -204,7 +227,10 @@
<?php foreach (get_field("albums_arr")[4]['albums_list'] as $key => $value) : ?>
<?php if($key > 5) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
@@ -244,7 +270,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[5]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
</ul>
@@ -277,7 +306,10 @@
<?php foreach (get_field("albums_arr")[6]['albums_list'] as $key => $value) : ?>
<?php if($key <= 5) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
@@ -287,7 +319,10 @@
<?php foreach (get_field("albums_arr")[6]['albums_list'] as $key => $value) : ?>
<?php if($key > 5) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
@@ -327,7 +362,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[7]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -366,7 +404,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[8]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -405,7 +446,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[9]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -444,7 +488,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[10]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -483,7 +530,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[11]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -522,7 +572,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[12]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -561,7 +614,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[13]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -600,7 +656,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[14]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>
@@ -639,7 +698,10 @@
<ul class="actions">
<?php foreach (get_field("albums_arr")[15]['albums_list'] as $key => $value) : ?>
<li class="song song-<?= $key; ?>" song="<?= $value['album_song']; ?>"><?= $value['album_name']; ?>
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<div class="song-icon">
<img src="/wp-content/uploads/2024/04/volume.png" alt="">
<img src="/wp-content/uploads/2025/11/274.svg" alt="">
</div>
</li>
<?php endforeach; ?>