Skip to content

Commit b2345ee

Browse files
20essentials20essentials
committed
v1.3.9
1 parent 2e4baf4 commit b2345ee

File tree

3 files changed

+171
-15
lines changed

3 files changed

+171
-15
lines changed

‎index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
</menu>
5858
</section>
5959

60+
6061
<section class="myForm playlist-container-form-2">
6162
<input
6263
type="text"
@@ -68,6 +69,68 @@
6869
<span class="max-length-input"> <output>0</output>/20 </span>
6970
</section>
7071

72+
<nav class="nav-of-options-of-the-playlist-list">
73+
<button
74+
title="List Order"
75+
class="am-button-nav-modal order button-nav-selected"
76+
>
77+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
78+
<path
79+
fill="none"
80+
stroke="currentColor"
81+
stroke-linecap="round"
82+
stroke-linejoin="round"
83+
stroke-width="4"
84+
d="M8 18v9m3 0H5m6-15H5m0-7s3-3 5 0s-5 7-5 7m0 22.5s2-3 5-1s0 4.5 0 4.5s3 2.5 0 4.5s-5-1-5-1m5-3.5H8m0-20l-3 2m15 4h22M20 38h22M20 10h22"
85+
/>
86+
</svg>
87+
</button>
88+
<button title="List Unorder Reverse" class="am-button-nav-modal unorder">
89+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
90+
<path
91+
fill="currentColor"
92+
d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m0 6.9a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3M8 11h13v2H8zm0 7h13v2H8z"
93+
/>
94+
</svg>
95+
</button>
96+
<button title="List Random" class="am-button-nav-modal random">
97+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
98+
<path
99+
fill="none"
100+
stroke="currentColor"
101+
stroke-linecap="round"
102+
stroke-linejoin="round"
103+
stroke-width="2"
104+
d="M20 21h-4v-4m0 4l5-5M6.5 9.504l-3.5-2L5 4M3 7.504l6.83-1.87M4 16l4-1l1 4m-1-4l-3.5 6M21 5l-.5 4l-4-.5m4 .5L16 3.5"
105+
/>
106+
</svg>
107+
</button>
108+
<button title="List a-to-z" class="am-button-nav-modal a-to-z">
109+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
110+
<path
111+
fill="none"
112+
stroke="currentColor"
113+
stroke-linecap="round"
114+
stroke-linejoin="round"
115+
stroke-width="2"
116+
d="m3 16l4 4l4-4m-4 4V4m13 4h-5m0 2V6.5a2.5 2.5 0 0 1 5 0V10m-5 4h5l-5 6h5"
117+
/>
118+
</svg>
119+
</button>
120+
<button title="List z-to-a" class="am-button-nav-modal z-to-a">
121+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
122+
<path
123+
fill="none"
124+
stroke="currentColor"
125+
stroke-linecap="round"
126+
stroke-linejoin="round"
127+
stroke-width="2"
128+
d="m3 8l4-4l4 4M7 4v16M20 8h-5m0 2V6.5a2.5 2.5 0 0 1 5 0V10m-5 4h5l-5 6h5"
129+
/>
130+
</svg>
131+
</button>
132+
</nav>
133+
71134
<article class="padding-top-card"></article>
72135

73136
<template class="template-card-single">

‎script.js‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -688,6 +688,8 @@ let d = document,
688688
$$ = el => document.querySelectorAll(el),
689689
maxItemsInInput = 5;
690690

691+
let playlistCards = [];
692+
let playlistCardsOriginal = [];
691693
let $inputPlaylist = $('.playlist-container-form .playlist-input');
692694
let $inputPlaylist2 = $('.playlist-container-form-2 .playlist-input');
693695
let regExP = /^(?![\s0-9\-_])[\w\s\-]{1,20}(?<![\s\-])$/;
@@ -2191,6 +2193,9 @@ function renderPlaylistCards() {
21912193
playListSection.append(fragmento);
21922194
}
21932195

2196+
let playListSection = d.querySelector(".playlist-section-articles");
2197+
playlistCards = [...playListSection.querySelectorAll(".card-single")];
2198+
playlistCardsOriginal = [...playlistCards];
21942199
addFotoStars();
21952200
}
21962201

@@ -2274,23 +2279,63 @@ const amFragment = document.createDocumentFragment();
22742279

22752280
function generarColorHex() {
22762281
const hex = Math.floor(Math.random() * 0xffffff).toString(16);
2277-
return "#" + hex.padStart(6, "0");
2282+
return '#' + hex.padStart(6, '0');
22782283
}
22792284

22802285
document.addEventListener('click', e => {
22812286
if (e.target.matches('.open-all-artists')) {
22822287
$modalAllArtists.classList.add('modal-all-artist-open');
22832288
}
2284-
})
2289+
});
22852290

2286-
bands.forEach((band) => {
2291+
bands.forEach(band => {
22872292
const [nameBand, hrefBand] = band;
22882293
const anchor = document.createElement('a');
22892294
anchor.href = hrefBand;
22902295
anchor.textContent = nameBand;
2291-
anchor.classList.add('artist-link');
2292-
anchor.style.setProperty('--colorin', `${generarColorHex()}88`)
2296+
anchor.classList.add('artist-link');
2297+
anchor.style.setProperty('--colorin', `${generarColorHex()}88`);
22932298
amFragment.appendChild(anchor);
22942299
});
22952300

2296-
$modalAllArtists.append(amFragment);
2301+
$modalAllArtists.append(amFragment);
2302+
2303+
/* ===========================Navbar of Buttons Playlist========================= */
2304+
document.addEventListener("click", (e) => {
2305+
if (!e.target.matches(".am-button-nav-modal")) return;
2306+
if (!playlistCards || playlistCards.length === 0) return;
2307+
2308+
let playListSection = d.querySelector(".playlist-section-articles");
2309+
2310+
if (e.target.matches(".order")) {
2311+
playlistCards = [...playlistCardsOriginal];
2312+
}
2313+
2314+
if (e.target.matches(".unorder")) {
2315+
playlistCards = [...playlistCardsOriginal];
2316+
playlistCards.reverse();
2317+
}
2318+
2319+
if (e.target.matches(".random")) {
2320+
playlistCards.sort(() => Math.random() - 0.5);
2321+
}
2322+
2323+
if (e.target.matches(".a-to-z")) {
2324+
playlistCards.sort((a, b) => {
2325+
let nameA = a.querySelector(".card-single-right h3").textContent.toLowerCase();
2326+
let nameB = b.querySelector(".card-single-right h3").textContent.toLowerCase();
2327+
return nameA.localeCompare(nameB);
2328+
});
2329+
}
2330+
2331+
if (e.target.matches(".z-to-a")) {
2332+
playlistCards.sort((a, b) => {
2333+
let nameA = a.querySelector(".card-single-right h3").textContent.toLowerCase();
2334+
let nameB = b.querySelector(".card-single-right h3").textContent.toLowerCase();
2335+
return nameB.localeCompare(nameA);
2336+
});
2337+
}
2338+
2339+
playListSection.innerHTML = "";
2340+
playlistCards.forEach((card) => playListSection.append(card));
2341+
});

‎styles.css‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ html {
3232
body {
3333
--sb-track-color: transparent;
3434
--sb-thumb-color: #6baf8d;
35-
--sb-size: 0.5vmax ;
35+
--sb-size: 0.5vmax;
3636
}
3737

3838
body::-webkit-scrollbar {
@@ -83,7 +83,7 @@ body::-webkit-scrollbar-thumb {
8383
box-shadow: inset 0 0 10px 20px #0f05;
8484

8585
& ~ .playlist-section {
86-
left: 0;
86+
left: 0;
8787
opacity: 1;
8888
}
8989
}
@@ -346,6 +346,8 @@ body::-webkit-scrollbar-thumb {
346346
transition: opacity 0.5s ease, left 0.3s ease;
347347
scrollbar-width: thin;
348348
scrollbar-color: var(--color1, 'gray') black;
349+
--nav-of-options-top: 83px;
350+
--nav-of-options-height: 32px;
349351

350352
.settings-backup {
351353
position: absolute;
@@ -369,7 +371,49 @@ body::-webkit-scrollbar-thumb {
369371
}
370372

371373
.padding-top-card {
372-
height: 78px;
374+
height: calc(var(--nav-of-options-height) + var(--nav-of-options-top));
375+
}
376+
377+
.nav-of-options-of-the-playlist-list {
378+
position: absolute;
379+
z-index: 500;
380+
width: 100%;
381+
height: var(--nav-of-options-height);
382+
top: var(--nav-of-options-top);
383+
display: flex;
384+
385+
button {
386+
background-color: transparent;
387+
width: 20%;
388+
display: flex;
389+
flex-wrap: wrap;
390+
border: none;
391+
outline: none;
392+
place-content: center;
393+
border-right: 2px solid #000;
394+
border-bottom: 2px solid #000;
395+
396+
&:nth-child(even) {
397+
background: var(--color2);
398+
}
399+
&:nth-child(odd) {
400+
background: var(--color1);
401+
}
402+
403+
&:last-child {
404+
border-right: none;
405+
}
406+
407+
&:active {
408+
opacity: 0.8;
409+
}
410+
411+
svg {
412+
width: 80%;
413+
height: 80%;
414+
pointer-events: none;
415+
}
416+
}
373417
}
374418

375419
.card-single {
@@ -703,10 +747,11 @@ body::-webkit-scrollbar-thumb {
703747
}
704748

705749
.shadow {
706-
width: 60px;
750+
width: var(--nav-of-options-height);
707751
height: 60px;
708752
background: gray;
709753
position: absolute;
754+
width: 60px;
710755
top: 0;
711756
left: 0;
712757
right: 0;
@@ -911,6 +956,7 @@ body::-webkit-scrollbar-thumb {
911956
.centrar.tetraPyramid {
912957
transform-style: preserve-3d;
913958
perspective: 10000px;
959+
914960
.container-tetra {
915961
width: 120px;
916962
height: 120px;
@@ -931,7 +977,6 @@ body::-webkit-scrollbar-thumb {
931977
width: 100%;
932978
height: 100%;
933979
position: absolute;
934-
background-color: #0002;
935980
background-color: #000;
936981
transform-style: preserve-3d;
937982
perspective: 10000px;
@@ -966,14 +1011,17 @@ body::-webkit-scrollbar-thumb {
9661011
&.left {
9671012
transform-origin: 0% 0%;
9681013
transform: rotateY(90deg);
1014+
background-color: mediumturquoise;
9691015
}
9701016

9711017
&.top {
9721018
transform-origin: 50% 0%;
9731019
transform: rotateX(-90deg);
9741020
}
1021+
9751022
&.bottom {
9761023
transform-origin: 50% 100%;
1024+
background-color: red;
9771025
transform: rotateX(90deg);
9781026
}
9791027
}
@@ -994,7 +1042,7 @@ body::-webkit-scrollbar-thumb {
9941042

9951043
&.triangle-top {
9961044
bottom: -118px;
997-
transform: scaleY(-1);
1045+
transform: scale3d(-1, -1, -1) translateZ(118px);
9981046
}
9991047

10001048
&.triangle-right {
@@ -1023,7 +1071,7 @@ body::-webkit-scrollbar-thumb {
10231071
left: 194px;
10241072
}
10251073

1026-
& .side {
1074+
.side {
10271075
width: 100%;
10281076
height: 100%;
10291077
clip-path: polygon(50% 0, 100% 100%, 0 100%);
@@ -1521,7 +1569,7 @@ body::-webkit-scrollbar-thumb {
15211569

15221570
&.triangle-top {
15231571
bottom: -118px;
1524-
transform: scaleY(-1);
1572+
transform: scale3d(-1, -1, -1) translateZ(118px);
15251573
}
15261574

15271575
&.triangle-right {
@@ -3468,7 +3516,7 @@ html {
34683516
top: 0.7vmax;
34693517
height: 30px;
34703518

3471-
@media (width <= 800px) and (orientation: portrait) {
3519+
@media (width <= 800px) and (orientation: portrait) {
34723520
left: 30%;
34733521
}
34743522
}

0 commit comments

Comments
 (0)