https://kpi.ac.th/wp-content/themes/seed/js/main-vanilla.js?ver=1761560906

1// Using event delegation https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/#web-performance
2document.addEventListener(
3    "click",
4    function(event) {
5        // Mobile Menu Toggle
6        if (event.target.matches(".site-toggle")) {
7            if (event.target.classList.contains("active")) {
8                removeClass(".site-toggle, .site-nav-m", "active");
9                removeClass("#page", "show-nav");
10            } else {
11                addClass(".site-toggle, .site-nav-m", "active");
12                addClass("#page", "show-nav");
13            }
14        }
15        if (event.target.matches("#site-nav-m .menu-item-has-children i")) {
16            if (event.target.parentNode.classList.contains("active")) {
17                event.target.parentNode.classList.remove("active");
18            } else {
19                event.target.parentNode.classList.add("active");
20            }
21        }
22        // Close menu on click (useful for One Page Website)
23        if (event.target.matches("#site-nav-m a")) {
24            if (event.target.getAttribute("href") == "#") {
25                if (event.target.parentNode.classList.contains("active")) {
26                    event.target.parentNode.classList.remove("active");
27                } else {
28                    event.target.parentNode.classList.add("active");
29                }
30            } else {
31                removeClass(".site-toggle, .site-nav-m", "active");
32            }
33        }
34    },
35    false
36);
37
38// Mobile Menu - Add Dropdown Toggle
39document.querySelectorAll("#site-nav-m .menu-item-has-children").forEach(e => {
40    e.insertAdjacentHTML("beforeend", '<i class="si-caret-down"></i>');
41});
42
43// Slider
44var sliders = document.querySelectorAll(".s-slider");
45if (sliders) {
46    for (var i = 0, len = sliders.length; i < len; i++) {
47        var slider = sliders[i];
48        if (slider.classList.contains("-togrid")) {
49            var flkty = new Flickity(slider, {
50                cellAlign: "left",
51                contain: true,
52                wrapAround: true,
53                imagesLoaded: true,
54                dragThreshold: 1,
55                watchCSS: true
56            });
57        } else {
58            var flkty = new Flickity(slider, {
59                cellAlign: "left",
60                contain: true,
61                wrapAround: true,
62                imagesLoaded: true,
63                dragThreshold: 1
64            });
65        }
66    }
67}
68// Fix iOS13 flickity performance - https://gist.github.com/bakura10/b0647ef412eb7757fa6f0d2c74c1f145
69(function() {
70    let touchingCarousel = false,
71        touchStartCoords;
72    document.body.addEventListener("touchstart", function(e) {
73        if (e.target.closest(".flickity-slider")) {
74            touchingCarousel = true;
75        } else {
76            touchingCarousel = false;
77            return;
78        }
79        touchStartCoords = {
80            x: e.touches[0].pageX,
81            y: e.touches[0].pageY
82        };
83    });
84    document.body.addEventListener(
85        "touchmove",
86        function(e) {
87            if (!(touchingCarousel && e.cancelable)) {
88                return;
89            }
90            let moveVector = {
91                x: e.touches[0].pageX - touchStartCoords.x,
92                y: e.touches[0].pageY - touchStartCoords.y
93            };
94            if (Math.abs(moveVector.x) > 1) e.preventDefault();
95        },
96        { passive: false }
97    );
98})();
99
100AOS.init();
101
102
103var swiper = new Swiper(".top-banner", {
104    pagination: {
105      el: ".swiper-pagination",
106      clickable: true,
107    },
108    loop: true,
109    autoplay: {
110        delay: 500000,
111      },
112});
113
114
115
116
117
118/** scroll to top */
119
120var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
121var rootElement = document.documentElement
122var TOGGLE_RATIO = 0.10
123function handleScroll() {
124  // do something on scroll
125  var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
126  if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
127    //show button
128    scrollToTopBtn.classList.add("showBtn");
129  } else {
130    //hide button
131    scrollToTopBtn.classList.remove("showBtn");
132  }
133}
134
135function scrollToTop() {
136  //scroll to top logic
137  rootElement.scrollTo({
138    top: 0,
139    behavior: "smooth"
140  })
141}
142scrollToTopBtn.addEventListener("click", scrollToTop)
143document.addEventListener("scroll", handleScroll)
144
145
146
147
148
149
150var swiper = new Swiper(".related-post", {
151
152    slidesPerView: 1,
153    spaceBetween: 10,
154    loop: true,
155    autoplay: {
156        delay: 5000,
157      },
158    watchSlidesProgress: true,
159    navigation: {
160        nextEl: ".swiper-button-next",
161        prevEl: ".swiper-button-prev",
162      },
163    breakpoints: {
164      640: {
165        slidesPerView: 3,
166        spaceBetween: 20,
167      },
168      768: {
169        slidesPerView: 4,
170        spaceBetween: 20,
171      },
172      1024: {
173        slidesPerView: 4,
174        spaceBetween: 20,
175      },
176    },
177});
178
179
180
181/*
182document.getElementById('toggle-theme').addEventListener('click', function() {
183    const currentMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
184    const icon = document.getElementById('theme-icon');
185    const text = document.getElementById('theme-text');
186
187    if (currentMode === 'dark') {
188        document.body.classList.remove('dark-mode');
189        document.body.classList.add('light-mode');
190        icon.src = '/wp-content/uploads/2024/09/rev-icon-dark.svg';
191        text.textContent = 'โหมดมืด'; // ข้อความที่เปลี่ยนแปลง
192        localStorage.setItem('theme', 'light');
193    } else {
194        document.body.classList.remove('light-mode');
195        document.body.classList.add('dark-mode');
196        icon.src = '/wp-content/uploads/2024/09/rev-icon-light.svg';
197        text.textContent = 'โหมดสว่าง'; // ข้อความที่เปลี่ยนแปลง
198        localStorage.setItem('theme', 'dark');
199    }
200});
201
202// โหลดธีมที่บันทึกไว้ใน localStorage เมื่อโหลดหน้าเว็บ
203window.addEventListener('load', function() {
204    const savedTheme = localStorage.getItem('theme');
205    const icon = document.getElementById('theme-icon');
206    const text = document.getElementById('theme-text');
207
208    if (savedTheme === 'dark') {
209        document.body.classList.add('dark-mode');
210        icon.src = '/wp-content/uploads/2024/09/rev-icon-light.svg';
211        text.textContent = 'โหมดสว่าง';
212    } else {
213        document.body.classList.add('light-mode');
214        icon.src = '/wp-content/uploads/2024/09/rev-icon-dark.svg';
215        text.textContent = 'โหมดมืด';
216    }
217});
218*/
219
220
221
222var acc = document.getElementsByClassName("accordion-info");
223var i;
224
225for (i = 0; i < acc.length; i++) {
226  acc[i].addEventListener("click", function() {
227    // ปิดหัวข้ออคอร์เดียนทั้งหมด
228    for (var j = 0; j < acc.length; j++) {
229      if (acc[j] !== this) {
230        acc[j].classList.remove("active");
231        acc[j].nextElementSibling.style.maxHeight = null;
232      }
233    }
234
235
236    // เปิด-ปิด หัวข้ออคอร์เดียนที่ถูกคลิก
237    this.classList.toggle("active");
238    var panel = this.nextElementSibling;
239    if (panel.style.maxHeight) {
240      panel.style.maxHeight = null;
241    } else {
242      panel.style.maxHeight = panel.scrollHeight + "px";
243    }
244  });
245}
246
247jQuery(document).ready(function($) {
248  $('.acf-field-theme-grey .acf-switch').on('click', function() {
249      $('html').toggleClass('theme-grey');
250  });
251});
252
253  
254
255
256  
257
258var swiper = new Swiper(".group-image", {
259    pagination: {
260      el: ".swiper-pagination",
261      clickable: true,
262    },
263    loop: true,
264    autoplay: {
265        delay: 5000,
266      },
267});
268
269
270
271document.addEventListener('DOMContentLoaded', function() {
272    // ตรวจสอบ cookie ก่อนที่จะทำงาน
273    function getCookie(name) {
274        var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
275        if (match) return match[2];
276    }
277
278    var popupBox = document.querySelector('.pp-box');
279    if (popupBox && !getCookie('popup_promotion')) {
280        popupBox.style.display = 'block'; // แสดงป๊อปอัพถ้าไม่มี cookie
281    }
282
283    // เริ่มต้น Swiper
284    var popupSwiper = new Swiper('.pop-gallery', {
285        loop: true,
286        autoplay: {
287            delay: 3000,
288        },
289        pagination: {
290            el: '.swiper-pagination',
291            clickable: true,
292        },
293    });
294
295    // จัดการการปิดป๊อปอัพ
296    var closeButton = document.querySelector('.pp-close');
297   
298    if (closeButton) {
299        var cookieDuration = parseInt(popupBox.dataset.cookieDuration, 10) || 3600; // ค่าเริ่มต้น 1 ชั่วโมงถ้าไม่มีค่า
300       
301        closeButton.addEventListener('click', function() {
302            popupBox.style.display = 'none';
303
304            // ตั้งค่า cookie
305            var date = new Date();
306            date.setTime(date.getTime() + (cookieDuration * 1000));
307            document.cookie = "popup_promotion=1; expires=" + date.toUTCString() + "; path=/; SameSite=Strict";
308        });
309    }
310});
311
312