https://www.schooljotter.com/wp-content/themes/sj3-theme/js/index.js?ver=1.0.1

1
2
3document.addEventListener("DOMContentLoaded", () => {
4
5    // Scroll menu
6    let scrollPosition = window.scrollY;
7    const header = document.querySelector("#masthead");
8    const scrollBreakpoint = 200;
9    const scrollClassName = 'scrolled';
10
11    window.addEventListener('scroll', function () {
12        scrollPosition = window.scrollY;
13
14        if (scrollPosition > scrollBreakpoint) {
15            header.classList.add(scrollClassName);
16        }
17        else {
18            header.classList.remove(scrollClassName);
19        }
20    });
21
22    // Mobile menu toggle
23
24    const mobileSidebar = document.querySelector('.mobile-sidebar');
25    const mobileSidebarCloseBtn = mobileSidebar.querySelector('.mobile-sidebar .close-btn');
26    const mobileSidebarOpenBtn = document.querySelector('.site-header .navbar-toggler');
27
28    mobileSidebarOpenBtn.addEventListener('click', () => mobileSidebar.classList.remove('hidden'));
29    mobileSidebarCloseBtn.addEventListener('click', () => {
30        mobileSidebar.classList.add('hidden');
31        setTimeout(() => {
32            secondaryMenu.querySelector('ul').remove();
33            primaryMenu.style.display = 'block';
34        }, 500)
35    });
36
37    // Mobile menu sublevels
38
39    const primaryMenu = mobileSidebar.querySelector('.sidebar-content > .primary');
40    const secondaryMenu = mobileSidebar.querySelector('.sidebar-content > .secondary');
41    const goBack = mobileSidebar.querySelector('.go-back');
42
43    mobileSidebar.querySelectorAll('.menu-item-has-children').forEach(item => {
44        const submenu = item.querySelector('ul');
45
46        item.addEventListener('click', () => {
47            primaryMenu.style.display = 'none';
48            secondaryMenu.style.display = 'block';
49            secondaryMenu.appendChild(submenu);
50        })
51    });
52
53    goBack.addEventListener('click', () => {
54        primaryMenu.style.display = 'block';
55        secondaryMenu.style.display = 'none';
56    })
57
58    // submenu items on hover
59
60    const menuItemsWithChildren = document.querySelectorAll('.site-header .menu-item-has-children');
61
62    menuItemsWithChildren.forEach(item => {
63        item.addEventListener('mouseover', () => {
64            item.querySelector('ul').classList.add('show');
65        })
66        item.addEventListener('mouseout', () => {
67            item.querySelector('ul').classList.remove('show');
68        })
69    })
70
71    // ct slider
72
73    const ctSlider = document.querySelector('.ct-slider');
74    const ctSlides = ctSlider?.querySelectorAll('.slide') || [];
75    const arrowLeft = ctSlider?.querySelector('.arrow-left');
76    const arrowRight = ctSlider?.querySelector('.arrow-right');
77    let currentSlide = 0;
78    let maxSlides = 0;
79
80    if (ctSlides[0]) {
81        ctSlides[0].classList.add('show');
82        maxSlides = ctSlides.length - 1;
83
84        arrowRight.addEventListener('click', () => {

85            ctSlides.forEach(slide => slide.classList.remove('show'));
86            if (currentSlide == maxSlides) {
87                ctSlides[0].classList.add('show');
88                currentSlide = 0;
89            } else {
90                currentSlide++;
91                ctSlides[currentSlide].classList.add('show');
92            }
93        })
94
95        arrowLeft.addEventListener('click', () => {
96            ctSlides.forEach(slide => slide.classList.remove('show'));
97            if (currentSlide == 0) {
98                ctSlides[maxSlides].classList.add('show');
99                currentSlide = maxSlides;
100            } else {
101                currentSlide++;
102                ctSlides[currentSlide].classList.add('show');
103            }
104        })
105    }
106
107    // rating popup
108
109    const ratingPopup = document.querySelector('.rating-popup');
110    const ratingPopupAction = ratingPopup.querySelector('.action');
111
112    ratingPopupAction.addEventListener('click', () => {
113        ratingPopup.classList.toggle('show')
114    })
115
116    // Portfolio single attributes
117
118    const portfolioAttributes = document.querySelector('#portfolioAttributes');
119    const portfolioButtons = portfolioAttributes.querySelectorAll('.menu-item');
120    const portfolioContainers = portfolioAttributes.querySelectorAll('.single-content');
121
122    portfolioButtons.forEach(btn => {
123        btn.addEventListener('click', () => {
124            portfolioButtons.forEach(el => el.classList.remove('active'));
125            btn.classList.add('active');
126            portfolioContainers.forEach(el => el.classList.remove('active'));
127            const selected = btn.dataset.section;
128            portfolioContainers.forEach(el => {
129                if (el.dataset.section === selected) {
130                    el.classList.add('active');
131                }
132            });
133
134        })
135    })
136
137    // truncate pipe TODO
138
139    // const containersToTruncate = document.querySelectorAll('.truncate-pipe');
140
141    // containersToTruncate.forEach(container => {
142    //     container.querySelectorAll('p').forEach((el, index) => {
143    //         if (index > 0) {
144    //             el.classList.add('hidden');
145    //         }
146    //     });
147
148    //     const newDiv = document.createElement("div");
149    //     newDiv.classList.add('more-less-button');
150    //     newDiv.appendChild(document.createTextNode("Show More"));
151    //     container.appendChild(newDiv);
152    // })
153
154
155});