Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@KostasSliazas
KostasSliazas authored Jan 15, 2025
1 parent 6227995 commit 829d61a
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 69 deletions.
56 changes: 28 additions & 28 deletions src/k7.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@
this.isAutoPlayOn = true;

// Set the play button active for the first time (playing)
if (this.showButtons) this.play.className = 'but bra brb opa tpo lft atc';
if (this.showButtons) this.play.className = 'b a s o y l q';

if (!this.showButtonsOnPlay) {
// Hide buttons if configured not to show during auto-play
if (this.showButtons) {
this.foot.className = this.onow.className = 'dpn';
this.foot.className = this.onow.className = 'n';
}
this.left.className = this.rigt.className = this.clos.className = 'dpn';
this.left.className = this.rigt.className = this.clos.className = 'n';
}
}
if (this.isAutoPlayOn) {
Expand Down Expand Up @@ -128,28 +128,28 @@
}
this.isAutoPlayOn = false;
//same classes names
const classNames = 'but bra brb opa';
const classNames = 'b a s o';
// if show buttons compiled display them
if (this.showButtons) {
this.foot.className = this.onow.className = '';
this.play.className = classNames + ' tpo lft';
this.play.className = classNames + ' y l';
}
// always show close button on clear
this.clos.className = classNames + ' rtm rtp';
this.clos.className = classNames + ' j p';
this.leftRightButtonsVisibility();
}

leftRightButtonsVisibility() {
// Adjust visibility of left and right buttons based on the current image index
this.left.className = this.indexOfImage === 0 ? 'dpn' : 'but tpo hvr lft';
this.rigt.className = this.indexOfImage === this.imagesArray.length - 1 ? 'dpn' : 'but tpo hvr rgt';
this.left.className = this.indexOfImage === 0 ? 'n' : 'b y l';
this.rigt.className = this.indexOfImage === this.imagesArray.length - 1 ? 'n' : 'b y r';
}

// Close the image viewer
close() {
this.isActive = false;
this.imag.className = 'sca hdi w10 tpo lft';
de.className = de.className.split('fff').join('').trim();
this.imag.className = 'g h w y l';
de.className = de.className.split('f').join('').trim();
}

// Show the current image
Expand All @@ -166,15 +166,15 @@
// Activate the UI if not active
if (!this.isActive) {
this.isActive = true;
de.className = de.className ? de.className + ' fff' : 'fff';
this.imag.className = 'fff w10 tpo lft';
de.className = de.className ? de.className + ' f' : 'f';
this.imag.className = 'f w y l';
}

// Prevent reloading if the current image matches the source
if (this.imgs.src === fullNamePrefixed || this.imgs.src === imageSource) return;

// Update UI state and trigger image loading
this.spin.className = 'bor';
this.spin.className = 'u';

// Remove old image and append the new one
this.insi.removeChild(this.imgs);
Expand All @@ -186,7 +186,7 @@

this.imgs.onload = e => {
// Hide the spinner
this.spin.className = 'dpn';
this.spin.className = 'n';
if (this.isAutoPlayOn) {
this.autoPlayLoop();
}
Expand Down Expand Up @@ -266,28 +266,28 @@

init() {
// Add inline CSS using base64 string dinamicaly (increases file size)
const resource = element('link', 'rel', 'stylesheet', 'href', 'data:text/css;base64,QGtleWZyYW1lcyBye3Rve3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19I2s3ICosI2s3IDo6YWZ0ZXIsI2s3IDo6YmVmb3Jle2JveC1zaXppbmc6Ym9yZGVyLWJveDtkaXNwbGF5OmlubGluZS1ibG9jaztmb250OjEycHgvNCBzYW5zLXNlcmlmO3Bvc2l0aW9uOmFic29sdXRlfSNrNyAuYnV0ICp7ei1pbmRleDotMTtwb2ludGVyLWV2ZW50czpub25lfSNrN3tiYWNrZ3JvdW5kOnZhcigtLWNvbG9yMiwgIzIyMyk7Y29sb3I6I2FhYTtwb3NpdGlvbjpmaXhlZDt0ZXh0LWFsaWduOmNlbnRlcjt0cmFuc2l0aW9uOnRyYW5zZm9ybSAuMnM7dXNlci1zZWxlY3Q6bm9uZTt6LWluZGV4Ojk5OTk5OX0jazcgI2lucyBpbWd7YmFja2dyb3VuZDp2YXIoLS1jb2xvcjEsICMzMzQpO21heC1oZWlnaHQ6MTAwJTttYXgtd2lkdGg6MTAwJX0jazcgI2ZsbiwjazcgI3BsYXt0ZXh0LWluZGVudDo1MHB4O3doaXRlLXNwYWNlOm5vd3JhcDtib3R0b206MjRweDtoZWlnaHQ6NDhweH0jazcgI2FsdHtyaWdodDo1MHB4fSNrNyAjYWx0LCNrNyAjaW5zLCNrNyAjaW5zIGltZywjazcgI3N0YXtwb3NpdGlvbjpyZWxhdGl2ZX0jazcgI3N0YXt0ZXh0LWluZGVudDowfSNrNyAjYmx0LCNrNyAjYnRye3dpZHRoOjIwJTttaW4td2lkdGg6OTZweDtib3JkZXI6MDtoZWlnaHQ6MTAwJTtib3JkZXItcmFkaXVzOjB9I2s3ICNsZnQ6OmFmdGVyLCNrNyAjcmd0OjphZnRlcntwYWRkaW5nOjlweDt0b3A6MTRweH0jazcgI2xmdDo6YWZ0ZXJ7Ym9yZGVyLXdpZHRoOjJweCAwIDAgMnB4O2xlZnQ6MTRweH0jazcgI3JndDo6YWZ0ZXJ7cmlnaHQ6MTRweDtib3JkZXItd2lkdGg6MnB4IDJweCAwIDB9I2s3ICNibHQ6aG92ZXIgI2xmdDo6YWZ0ZXJ7bGVmdDo5cHh9I2s3ICNidHI6aG92ZXIgI3JndDo6YWZ0ZXJ7cmlnaHQ6OXB4fSNrNyAjY2xzOjphZnRlciwjazcgI2Nsczo6YmVmb3Jle2JvcmRlci13aWR0aDowIDAgMCAycHg7aGVpZ2h0OjMwcHg7bGVmdDoyM3B4O3RvcDoxMHB4fSNrNyAjcGxpOjpiZWZvcmUsI2s3ICNzcG57Ym9yZGVyLXJhZGl1czo1MCU7aGVpZ2h0OjI0cHg7d2lkdGg6MjRweH0jazcgI3NwbnthbmltYXRpb246ciAuM3MgbGluZWFyIGluZmluaXRlO2JvcmRlci1jb2xvcjp0cmFuc3BhcmVudCAjYWFhO2xlZnQ6NTAlO21hcmdpbjotMTJweCAwIDAtMTJweDt0b3A6NTAlfSNrNyAjZHdse2JvcmRlci1yYWRpdXM6MCAwIDJweCAycHg7dG9wOjI3cHg7aGVpZ2h0OjZweDt3aWR0aDoyNHB4O2JvcmRlci10b3A6MH0jazcgI3BsaTo6YmVmb3Jle3RyYW5zaXRpb246LjJzIGJvcmRlci1yYWRpdXM7dG9wOjEycHh9I2s3ICNwbGkuYXRjOjpiZWZvcmV7Ym9yZGVyLXJhZGl1czo0cHh9I2s3ICNwbGk6OmFmdGVye2JvcmRlci1jb2xvcjp0cmFuc3BhcmVudCAjZmZmO2JvcmRlci13aWR0aDo1cHggMCA1cHggMTJweDtsZWZ0OjE5cHg7dG9wOjE5cHg7d2lkdGg6MTBweH0jazcgI3BsaS5hdGM6OmFmdGVye2JvcmRlci13aWR0aDowIDJweDtwYWRkaW5nLXRvcDoxMHB4fSNrNyAjZGxmOjphZnRlcntib3JkZXItd2lkdGg6MCAwIDJweCAycHg7Ym90dG9tOjIxcHg7aGVpZ2h0OjEycHg7bGVmdDoxOHB4O3dpZHRoOjEycHh9I2s3ICNkbGY6OmJlZm9yZXtiYWNrZ3JvdW5kOiNmZmY7aGVpZ2h0OjE4cHg7bGVmdDoyM3B4O3RvcDo5cHg7d2lkdGg6MnB4fSNrNyAjY2xze3RvcDoyNHB4fSNrNyAjZHdsLCNrNyAjcGxpOjpiZWZvcmV7bGVmdDoxMnB4fSNrNyAjY2xzLCNrNyAjZmxuLCNrNyAjcmd0e3JpZ2h0OjI0cHh9I2s3ICNsZnQsI2s3ICNwbGF7bGVmdDoyNHB4fSNrNyAjaW5zIGltZywjazcgLnRybnt0b3A6NTAlO3otaW5kZXg6LTE7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTUwJSl9I2s3IC5ydHA6OmFmdGVyLCNrNyAucnRwOjpiZWZvcmV7dHJhbnNmb3JtOnJvdGF0ZSg0NWRlZyl9I2s3IC5ydG06OmFmdGVye3RyYW5zZm9ybTpyb3RhdGUoLTQ1ZGVnKX0jazcgLncxMCwjazcudzEwe2hlaWdodDoxMDAlO3dpZHRoOjEwMCV9I2s3IC5ib3IsI2s3IC5icmE6OmFmdGVyLCNrNyAuYnJiOjpiZWZvcmV7Ym9yZGVyOjJweCBzb2xpZCAjZmZmfSNrNyAuYnV0e2JhY2tncm91bmQ6MCAwO2hlaWdodDo0OHB4O3dpZHRoOjQ4cHg7Ym9yZGVyLXJhZGl1czo1MCU7Ym9yZGVyOjA7Y3Vyc29yOnBvaW50ZXI7dHJhbnNpdGlvbjpvcGFjaXR5IC4xcyAuMnM7bWFyZ2luOjA7cGFkZGluZzowfSNrNyAuYnV0OjphZnRlciwjazcgLmJ1dDo6YmVmb3Jle2NvbnRlbnQ6IiJ9I2s3IC5idXQ6Zm9jdXMsI2s3IC5idXQ6aG92ZXIsI2s3IC5idXQ6aG92ZXIgc3BhbntiYWNrZ3JvdW5kOnJnYmEoNyw3LDcsLjIpO29wYWNpdHk6MTtvdXRsaW5lOjB9I2s3ICNibHQ6Zm9jdXMsI2s3ICNidHI6Zm9jdXN7YmFja2dyb3VuZDowIDB9I2s3IC5idXQ6YWN0aXZle29wYWNpdHk6LjN9I2s3IC5kcG57ZGlzcGxheTpub25lfSNrNyAuaGRpLCNrNy5oZGl7b3BhY2l0eTowfSNrNyAub3Bhe29wYWNpdHk6Ljd9I2s3IC5yZ3R7cmlnaHQ6MH0jazcgLnRwbywjazcudHBve3RvcDowfSNrNyAubGZ0LCNrNy5sZnR7bGVmdDowfSNrNyAuZmZmLCNrNy5mZmYsaHRtbC5mZmZ7b3ZlcmZsb3c6aGlkZGVuIWltcG9ydGFudH0jazcuc2Nhe3RyYW5zZm9ybTpzY2FsZSgwKX1AbWVkaWEgKG1pbi13aWR0aDoxMDI0cHgpeyNrNzpub3QoOmhvdmVyKSAjY250fmRpdiwjazc6bm90KDpob3ZlcikgI2luc34uYnV0e29wYWNpdHk6MH19');
const resource = element('link', 'rel', 'stylesheet', 'href', 'data:text/css;base64,QGtleWZyYW1lcyBye3Rve3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19I2s3ICosI2s3IDo6YWZ0ZXIsI2s3IDo6YmVmb3Jle2JveC1zaXppbmc6Ym9yZGVyLWJveDtkaXNwbGF5OmlubGluZS1ibG9jaztmb250OjEycHgvNCBzYW5zLXNlcmlmO3Bvc2l0aW9uOmFic29sdXRlfSNrNyAuYiAqe3otaW5kZXg6LTE7cG9pbnRlci1ldmVudHM6bm9uZX0jazd7YmFja2dyb3VuZDp2YXIoLS1jb2xvcjIsICMyMjMpO2NvbG9yOiNhYWE7cG9zaXRpb246Zml4ZWQ7dGV4dC1hbGlnbjpjZW50ZXI7dHJhbnNpdGlvbjp0cmFuc2Zvcm0gLjJzO3VzZXItc2VsZWN0Om5vbmU7ei1pbmRleDo5OTk5OTl9I2s3ICNpbnMgaW1ne2JhY2tncm91bmQ6dmFyKC0tY29sb3IxLCAjMzM0KTttYXgtaGVpZ2h0OjEwMCU7bWF4LXdpZHRoOjEwMCV9I2s3ICNmbG4sI2s3ICNwbGF7dGV4dC1pbmRlbnQ6NTBweDt3aGl0ZS1zcGFjZTpub3dyYXA7Ym90dG9tOjI0cHg7aGVpZ2h0OjQ4cHh9I2s3ICNhbHR7cmlnaHQ6NTBweH0jazcgI2FsdCwjazcgI2lucywjazcgI2lucyBpbWcsI2s3ICNzdGF7cG9zaXRpb246cmVsYXRpdmV9I2s3ICNzdGF7dGV4dC1pbmRlbnQ6MH0jazcgI2JsdCwjazcgI2J0cnt3aWR0aDoyMCU7bWluLXdpZHRoOjk2cHg7Ym9yZGVyOjA7aGVpZ2h0OjEwMCU7Ym9yZGVyLXJhZGl1czowfSNrNyAjbGZ0OjphZnRlciwjazcgI3JndDo6YWZ0ZXJ7cGFkZGluZzo5cHg7dG9wOjE0cHh9I2s3ICNsZnQ6OmFmdGVye2JvcmRlci13aWR0aDoycHggMCAwIDJweDtsZWZ0OjE0cHh9I2s3ICNyZ3Q6OmFmdGVye3JpZ2h0OjE0cHg7Ym9yZGVyLXdpZHRoOjJweCAycHggMCAwfSNrNyAjYmx0OmhvdmVyICNsZnQ6OmFmdGVye2xlZnQ6OXB4fSNrNyAjYnRyOmhvdmVyICNyZ3Q6OmFmdGVye3JpZ2h0OjlweH0jazcgI2Nsczo6YWZ0ZXIsI2s3ICNjbHM6OmJlZm9yZXtib3JkZXItd2lkdGg6MCAwIDAgMnB4O2hlaWdodDozMHB4O2xlZnQ6MjNweDt0b3A6MTBweH0jazcgI3BsaTo6YmVmb3JlLCNrNyAjc3Bue2JvcmRlci1yYWRpdXM6NTAlO2hlaWdodDoyNHB4O3dpZHRoOjI0cHh9I2s3ICNzcG57YW5pbWF0aW9uOnIgLjNzIGxpbmVhciBpbmZpbml0ZTtib3JkZXItY29sb3I6dHJhbnNwYXJlbnQgI2FhYTtsZWZ0OjUwJTttYXJnaW46LTEycHggMCAwLTEycHg7dG9wOjUwJX0jazcgI2R3bHtib3JkZXItcmFkaXVzOjAgMCAycHggMnB4O3RvcDoyN3B4O2hlaWdodDo2cHg7d2lkdGg6MjRweDtib3JkZXItdG9wOjB9I2s3ICNwbGk6OmJlZm9yZXt0cmFuc2l0aW9uOi4ycyBib3JkZXItcmFkaXVzO3RvcDoxMnB4fSNrNyAjcGxpLnE6OmJlZm9yZXtib3JkZXItcmFkaXVzOjRweH0jazcgI3BsaTo6YWZ0ZXJ7Ym9yZGVyLWNvbG9yOnRyYW5zcGFyZW50ICNmZmY7Ym9yZGVyLXdpZHRoOjVweCAwIDVweCAxMnB4O2xlZnQ6MTlweDt0b3A6MTlweDt3aWR0aDoxMHB4fSNrNyAjcGxpLnE6OmFmdGVye2JvcmRlci13aWR0aDowIDJweDtwYWRkaW5nLXRvcDoxMHB4fSNrNyAjZGxmOjphZnRlcntib3JkZXItd2lkdGg6MCAwIDJweCAycHg7Ym90dG9tOjIxcHg7aGVpZ2h0OjEycHg7bGVmdDoxOHB4O3dpZHRoOjEycHh9I2s3ICNkbGY6OmJlZm9yZXtiYWNrZ3JvdW5kOiNmZmY7aGVpZ2h0OjE4cHg7bGVmdDoyM3B4O3RvcDo5cHg7d2lkdGg6MnB4fSNrNyAjY2xze3RvcDoyNHB4fSNrNyAjZHdsLCNrNyAjcGxpOjpiZWZvcmV7bGVmdDoxMnB4fSNrNyAjY2xzLCNrNyAjZmxuLCNrNyAjcmd0e3JpZ2h0OjI0cHh9I2s3ICNsZnQsI2s3ICNwbGF7bGVmdDoyNHB4fSNrNyAjaW5zIGltZywjazcgLnR7dG9wOjUwJTt6LWluZGV4Oi0xO3RyYW5zZm9ybTp0cmFuc2xhdGVZKC01MCUpfSNrNyAucDo6YWZ0ZXIsI2s3IC5wOjpiZWZvcmV7dHJhbnNmb3JtOnJvdGF0ZSg0NWRlZyl9I2s3IC5qOjphZnRlcnt0cmFuc2Zvcm06cm90YXRlKC00NWRlZyl9I2s3IC53LCNrNy53e2hlaWdodDoxMDAlO3dpZHRoOjEwMCV9I2s3IC5hOjphZnRlciwjazcgLnM6OmJlZm9yZSwjazcgLnV7Ym9yZGVyOjJweCBzb2xpZCAjZmZmfSNrNyAuYntiYWNrZ3JvdW5kOjAgMDtoZWlnaHQ6NDhweDt3aWR0aDo0OHB4O2JvcmRlci1yYWRpdXM6NTAlO2JvcmRlcjowO2N1cnNvcjpwb2ludGVyO3RyYW5zaXRpb246b3BhY2l0eSAuMXMgLjJzO21hcmdpbjowO3BhZGRpbmc6MH0jazcgLmI6OmFmdGVyLCNrNyAuYjo6YmVmb3Jle2NvbnRlbnQ6IiJ9I2s3IC5iOmZvY3VzLCNrNyAuYjpob3ZlciwjazcgLmI6aG92ZXIgc3BhbntiYWNrZ3JvdW5kOnJnYmEoNyw3LDcsLjIpO29wYWNpdHk6MTtvdXRsaW5lOjB9I2s3ICNibHQ6Zm9jdXMsI2s3ICNidHI6Zm9jdXN7YmFja2dyb3VuZDowIDB9I2s3IC5iOmFjdGl2ZXtvcGFjaXR5Oi4zfSNrNyAubntkaXNwbGF5Om5vbmV9I2s3IC5oLCNrNy5oe29wYWNpdHk6MH0jazcgLm97b3BhY2l0eTouN30jazcgLnJ7cmlnaHQ6MH0jazcgLnksI2s3Lnl7dG9wOjB9I2s3IC5sLCNrNy5se2xlZnQ6MH0jazcgLmYsI2s3LmYsaHRtbC5me292ZXJmbG93OmhpZGRlbiFpbXBvcnRhbnR9I2s3Lmd7dHJhbnNmb3JtOnNjYWxlKDApfUBtZWRpYSAobWluLXdpZHRoOjEwMjRweCl7I2s3Om5vdCg6aG92ZXIpICNjbnR+ZGl2LCNrNzpub3QoOmhvdmVyKSAjaW5zfi5ie29wYWNpdHk6MH19');
append(d.getElementsByTagName('head')[0], resource);

// DOM elements setup
/** @type {HTMLElement} */
this.clos = element('button', 'id', 'cls', 'class', 'bra rtp opa but rtm brb', 'aria-label', 'Close', 'title', 'Close (Esc)');
this.clos = element('button', 'id', 'cls', 'class', 'a p o b j s', 'aria-label', 'Close', 'title', 'Close (Esc)');
/** @type {HTMLElement} */
this.ilef = element('span', 'id', 'lft', 'class', 'bra rtm opa trn but');
this.ilef = element('span', 'id', 'lft', 'class', 'a j o t b');
/** @type {HTMLElement} */
this.irig = element('span', 'id', 'rgt', 'class', 'bra rtp opa but trn');
this.irig = element('span', 'id', 'rgt', 'class', 'a p o b t');
/** @type {HTMLElement} */
this.imag = element('div', 'id', 'k7', 'class', 'sca hdi fff w10 tpo lft', 'role', 'dialog', 'aria-label', 'Image Gallery');
this.imag = element('div', 'id', 'k7', 'class', 'g h f w y l', 'role', 'dialog', 'aria-label', 'Image Gallery');
/** @type {HTMLElement} */
this.cent = element('div', 'id', 'cnt', 'class', 'tpo lft w10');
this.cent = element('div', 'id', 'cnt', 'class', 'y l w');
/** @type {HTMLElement} */
this.left = element('button', 'id', 'blt', 'class', 'but tpo lft', 'aria-label', 'Previous (Left Arrow)');
this.left = element('button', 'id', 'blt', 'class', 'b y l', 'aria-label', 'Previous (Left Arrow)');
/** @type {HTMLElement} */
this.rigt = element('button', 'id', 'btr', 'class', 'but tpo rgt', 'aria-label', 'Next (Right Arrow)');
this.rigt = element('button', 'id', 'btr', 'class', 'b y r', 'aria-label', 'Next (Right Arrow)');
/** @type {HTMLElement} */
this.insi = element('div', 'id', 'ins', 'class', 'w10');
this.insi = element('div', 'id', 'ins', 'class', 'w');
/** @type {HTMLElement} */
this.spin = element('div', 'id', 'spn', 'class', 'dpn', 'aria-hidden', 'true');
this.spin = element('div', 'id', 'spn', 'class', 'n', 'aria-hidden', 'true');
/** @type {HTMLElement} */
this.imgs = element('img', 'src', 'data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=', 'alt', '', 'loading', 'lazy');

Expand All @@ -300,19 +300,19 @@

if (this.showButtons) {
/** @type {HTMLElement} */
this.wdow = element('button', 'id', 'dlf', 'class', 'tpo rgt bra rtm opa but', 'aria-label', 'download');
this.wdow = element('button', 'id', 'dlf', 'class', 'y r a j o b', 'aria-label', 'download');
/** @type {HTMLElement} */
this.play = element('button', 'id', 'pli', 'class', 'tpo lft bra brb opa but', 'aria-label', 'play');
this.play = element('button', 'id', 'pli', 'class', 'y l a s o b', 'aria-label', 'play');
/** @type {HTMLElement} */
this.foot = element('div', 'id', 'pla');
/** @type {HTMLElement} */
this.onow = element('div', 'id', 'fln');
/** @type {HTMLElement} */
this.alts = element('span', 'id', 'alt', 'class', 'fff');
this.alts = element('span', 'id', 'alt', 'class', 'f');
/** @type {HTMLElement} */
this.fine = element('span', 'id', 'sta');
/** @type {HTMLElement} */
this.down = element('span', 'id', 'dwl', 'class', 'bor');
this.down = element('span', 'id', 'dwl', 'class', 'u');

append(this.onow, this.alts, this.wdow);
append(this.imag, this.onow, this.foot);
Expand Down
Loading

0 comments on commit 829d61a

Please sign in to comment.