Skip to content

Commit

Permalink
refactor: update modal function
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Dec 23, 2024
1 parent 7737fb7 commit 9e1d653
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 27 deletions.
18 changes: 9 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
<div class="position-relative text-center p-2">
<h1 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Pernikahan</h1>

<img src="./assets/images/bg.png" alt="bg" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<img src="./assets/images/bg.png" alt="bg" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">

<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<p class="my-2" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
Expand Down Expand Up @@ -163,7 +163,7 @@ <h2 class="font-esthetic py-4 m-0" style="font-size: 2rem;">Assalamualaikum Wara
<div class="overflow-x-hidden pb-4">

<div data-aos="fade-right" data-aos-duration="2000">
<img src="./assets/images/cowo.png" alt="cowo" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<img src="./assets/images/cowo.png" alt="cowo" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Wahyu Siapa</h2>
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putra ke-1</p>
<p class="mb-0">Bapak ... dan Ibu ...</p>
Expand All @@ -190,7 +190,7 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&amp;</h2>
</div>

<div data-aos="fade-left" data-aos-duration="2000">
<img src="./assets/images/cewe.png" alt="cewe" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<img src="./assets/images/cewe.png" alt="cewe" onclick="guest.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic m-0" style="font-size: 2rem;">Nama Riski Siapa</h2>
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putri ke-2</p>
<p class="mb-0">Bapak ... dan Ibu ...</p>
Expand Down Expand Up @@ -319,13 +319,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri

<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=1" alt="image 1" class="d-block w-100" onclick="guest.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=2" alt="image 2" class="d-block w-100" onclick="guest.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=3" alt="image 3" class="d-block w-100" onclick="guest.modal(this)">
</div>
</div>

Expand All @@ -349,13 +349,13 @@ <h2 class="font-esthetic text-center py-2 m-0" style="font-size: 2.5rem;">Galeri

<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=4" alt="image 4" class="d-block w-100" onclick="guest.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=5" alt="image 5" class="d-block w-100" onclick="guest.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="util.modal(this)">
<img src="https://picsum.photos/1280/720?random=6" alt="image 6" class="d-block w-100" onclick="guest.modal(this)">
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions js/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,9 +251,9 @@ export const admin = (() => {
comment.init();

try {
const jwt = session.decode();
if (!jwt || (jwt.exp ?? 0) < (Date.now() / 1000)) {
throw new Error('invalid token');
const exp = session.decode()?.exp;
if (!exp || exp < (Date.now() / 1000)) {
throw new Error('Invalid token');
}

getUserDetail();
Expand Down
2 changes: 0 additions & 2 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@ import { theme } from './theme.js';
import { audio } from './audio.js';
import { offline } from './offline.js';
import { comment } from './comment.js';
import { progress } from './progress.js';
import { pagination } from './pagination.js';

document.addEventListener('DOMContentLoaded', () => {
theme.init();
audio.init();
guest.init();
offline.init();
progress.init();
pagination.init();
window.AOS.init();

Expand Down
12 changes: 12 additions & 0 deletions js/guest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,15 @@ export const guest = (() => {
util.timeOut(animation, 1500);
};

/**
* @param {HTMLImageElement} img
* @returns {void}
*/
const modal = (img) => {
document.getElementById('show-modal-image').src = img.src;
bootstrap.Modal.getOrCreateInstance('#modal-image').show();

Check failure on line 154 in js/guest.js

View workflow job for this annotation

GitHub Actions / analyze-code 

'bootstrap' is not defined
};

/**
* @returns {void}
*/
Expand Down Expand Up @@ -177,12 +186,14 @@ export const guest = (() => {
if (document.body.getAttribute('data-key')?.length === 0) {
document.getElementById('comment')?.remove();
document.querySelector('a.nav-link[href="#comment"]')?.closest('li.nav-item')?.remove();
progress.init();
return;
}

progress.add();
progress.add();
comment.init();
progress.init();

session.guest()
.then((res) => {
Expand All @@ -203,6 +214,7 @@ export const guest = (() => {
init,
open,
name,
modal,
closeInformation,
};
})();
2 changes: 1 addition & 1 deletion js/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,9 +217,9 @@ export const theme = (() => {
};

return {
change,
init,
spyTop,
change,
isDarkMode,
showButtonChangeTheme
};
Expand Down
12 changes: 0 additions & 12 deletions js/util.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { bootstrap } from './bootstrap.js';

export const util = (() => {

/**
Expand Down Expand Up @@ -68,15 +66,6 @@ export const util = (() => {
*/
const animate = (svg, timeout, classes) => timeOut(() => svg.classList.add(classes), timeout);

/**
* @param {HTMLImageElement} img
* @returns {void}
*/
const modal = (img) => {
document.getElementById('show-modal-image').src = img.src;
bootstrap.Modal.getOrCreateInstance('#modal-image').show();
};

const copy = async (button, message = null, timeout = 1500) => {
const copy = button.getAttribute('data-copy');

Expand Down Expand Up @@ -127,7 +116,6 @@ export const util = (() => {
return {
open,
copy,
modal,
timeOut,
animate,
escapeHtml,
Expand Down

0 comments on commit 9e1d653

Please sign in to comment.