https://kg.ac.rs/js/head.js

1// ============================================================
2//  head.js  —  Univerzitet u Kragujevcu
3// ============================================================
4
5// — Service Worker —
6if ('serviceWorker' in navigator) {
7    window.addEventListener('load', function() {
8        if (location.hostname === 'kg.ac.rs' || location.hostname === 'www.kg.ac.rs') {
9            navigator.serviceWorker.register('/js/service-worker.js', { scope: '/' })
10                .catch(function(err) {
11                    console.warn('Service Worker registration failed:', err);
12                });
13        }
14    });
15}
16
17
18$(document).ready(function() {
19
20    // — Tastaturna navigacija u meniju —
21    $('.header-menu li.drop > a, .header-menu li.drop > [tabindex]').on('keydown', function(e) {
22        if (e.key === 'Enter' || e.key === ' ') {
23            e.preventDefault();
24            $(this).closest('li.drop').find('> .dropdown').first().find('a').first().focus();
25        }
26    });
27
28    $('.header-menu .dropdown a, .header-menu .dropdown-two a, .header-menu .dropdown-three a').on('keydown', function(e) {
29        var $a = $(this);
30        var $li = $a.closest('li');
31        if (e.key === 'ArrowDown') {
32            e.preventDefault();
33            $li.nextAll('li').find('> a').first().focus();
34        } else if (e.key === 'ArrowUp') {
35            e.preventDefault();
36            $li.prevAll('li').find('> a').first().focus();
37        } else if (e.key === 'ArrowRight') {
38            e.preventDefault();
39            $li.find('.dropdown-two a, .dropdown-three a').first().focus();
40        } else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
41            e.preventDefault();
42            $li.closest('.dropdown, .dropdown-two, .dropdown-three')
43               .closest('li').find('> a').first().focus();
44        }
45    });
46
47    // — Dropdown overflow zaštita - glavni meni —
48    $('.header-menu li.drop').on('mouseenter', function() {
49        var $dropdown = $(this).children('.dropdown');
50        if (!$dropdown.length) return;
51        $dropdown.removeClass('drop-left');
52        var rect = $dropdown[0].getBoundingClientRect();
53        if (rect.right > window.innerWidth) {
54            $dropdown.addClass('drop-left');
55        }
56    });
57
58    $('.header-menu .dropdown > li').on('mouseenter', function() {
59        var $two = $(this).children('.dropdown-two');
60        if (!$two.length) return;
61        $two.removeClass('drop-left');
62        var rect = $two[0].getBoundingClientRect();
63        if (rect.right > window.innerWidth) {
64            $two.addClass('drop-left');
65        }
66    });
67
68    $('.header-menu .dropdown-two > li').on('mouseenter', function() {
69        var $three = $(this).children('.dropdown-three');
70        if (!$three.length) return;
71        $three.removeClass('drop-left');
72        var rect = $three[0].getBoundingClientRect();
73        if (rect.right > window.innerWidth) {
74            $three.addClass('drop-left');
75        }
76    });
77
78    // — Aktivni link u meniju na osnovu trenutne URL —
79    (function() {
80        var trenutna = window.location.pathname.split('/').pop() || 'index.php';
81        var linkovi = document.querySelectorAll('.header-menu a');
82        linkovi.forEach(function(link) {
83            var href = link.getAttribute('href');
84            if (href && href.split('?')[0] === trenutna) {
85                link.classList.add('active');
86                var roditelj = link.closest('li.drop');
87                if (roditelj) {
88                    var glavniLink = roditelj.querySelector(':scope > a');
89                    if (glavniLink) glavniLink.classList.add('active');
90                }
91            }
92        });
93    })();
94
95    // — bxSlider - aktuelno ticker —
96    $('.aktuelno').bxSlider({
97        pager: false,
98        nextSelector: '#slider-next',
99        prevSelector: '#slider-prev',
100        nextText: '',
101        prevText: '',
102        mode: 'fade',
103        auto: true,
104        speed: 1000,
105        pause: 5000,
106        autoHover: true,
107        adaptiveHeight: true,
108    });

109
110    // — bxSlider - home slider —
111    $('.homeSlider').bxSlider({
112        pager: false,
113        auto: true,
114        autoHover: true,
115        speed: 1500,
116        pause: 5000,
117        video: false,
118    });
119
120    // — DoubleTapToGo za glavni meni —
121    $('.header-menu li.drop > a').doubleTapToGo();
122
123    // — TOUCH - Рангирање dropdown u gornjoj traci —
124    $('.htnav-dropdown-wrap > a').on('touchend', function(e) {
125        if (window.innerWidth <= 840) return;
126
127        var $wrap = $(this).closest('.htnav-dropdown-wrap');
128        var $drop = $wrap.find('.htnav-dropdown');
129
130        if (!$wrap.hasClass('tapped')) {
131            e.preventDefault();
132            e.stopPropagation();
133            $('.htnav-dropdown-wrap').not($wrap).removeClass('tapped')
134                .find('.htnav-dropdown').css('display', '');
135            $wrap.addClass('tapped');
136            $drop.css('display', 'block');
137        }
138    });
139
140    $(document).on('touchend', function(e) {
141        if (!$(e.target).closest('.htnav-dropdown-wrap').length) {
142            $('.htnav-dropdown-wrap').removeClass('tapped')
143                .find('.htnav-dropdown').css('display', '');
144        }
145    });
146
147    // ============================================================
148    //  MOBILNI MENI
149    // ============================================================
150
151    var $mobileNav = $('#mobileMenuNav');
152    var $ul = $('<ul></ul>').css({ listStyle: 'none', margin: 0, padding: 0 });
153
154    $('#menubar1 > li').each(function() {
155        var $desktopLi = $(this);
156        if ($desktopLi.hasClass('icon')) return;
157
158        var $link = $desktopLi.find('> a');
159        var $dropdown = $desktopLi.find('> .dropdown');
160
161        var $li = $('<li></li>');
162        var $item = $('<div class="mobile-menu-item"></div>');
163
164        var $a = $('<a></a>')
165            .attr('href', $link.attr('href') || '#')
166            .text($link.text().trim());
167        if ($link.hasClass('active')) $a.addClass('active');
168        $item.append($a);
169
170        if ($dropdown.length) {
171            var $btn = $('<button class="mobile-menu-toggle" aria-label="Отвори подмени"></button>');
172            $item.append($btn);
173        }
174
175        $li.append($item);
176
177        // — podmeni 1. nivo —
178        if ($dropdown.length) {
179            var $sub = $('<ul class="mobile-submenu"></ul>').css({ listStyle: 'none', margin: 0, padding: 0 });
180
181            $dropdown.find('> li').each(function() {
182                var $dli = $(this);
183                var $da = $dli.find('> a');
184                var $dropTwo = $dli.find('> .dropdown-two');
185
186                var $sli = $('<li></li>');
187                var $sitem = $('<div class="mobile-menu-item"></div>');
188
189                var $sa = $('<a></a>')
190                    .attr('href', $da.attr('href') || '#')
191                    .text($da.text().trim());
192                if ($da.hasClass('active')) $sa.addClass('active');
193                $sitem.append($sa);
194
195                if ($dropTwo.length) {
196                    var $sbtn = $('<button class="mobile-menu-toggle" aria-label="Отвори подмени"></button>');
197                    $sitem.append($sbtn);
198                }
199
200                $sli.append($sitem);
201
202                // — podmeni 2. nivo —
203                if ($dropTwo.length) {
204                    var $sub2 = $('<ul class="mobile-submenu-two"></ul>').css({ listStyle: 'none', margin: 0, padding: 0 });
205
206                    $dropTwo.find('> li').each(function() {
207                        var $d2li = $(this);
208                        var $d2a = $d2li.find('> a');
209                        var $dropThree = $d2li.find('> .dropdown-three');
210
211                        var $s2li = $('<li></li>');
212                        var $s2item = $('<div class="mobile-menu-item"></div>');
213
214                        var $s2a = $('<a></a>')
215                            .attr('href', $d2a.attr('href') || '#')
216                            .text($d2a.text().trim());
217                        if ($d2a.hasClass('active')) $s2a.addClass('active');
218                        $s2item.append($s2a);
219
220                        if ($dropThree.length) {
221                            var $s2btn = $('<button class="mobile-menu-toggle" aria-label="Отвори подмени"></button>');
222                            $s2item.append($s2btn);
223                        }
224
225                        $s2li.append($s2item);
226
227                        // — podmeni 3. nivo —
228                        if ($dropThree.length) {
229                            var $sub3 = $('<ul class="mobile-submenu-three"></ul>').css({ listStyle: 'none', margin: 0, padding: 0 });
230                            $dropThree.find('> li').each(function() {
231                                var $d3li = $(this);
232                                var $d3a = $d3li.find('> a');
233                                var $s3li = $('<li></li>');
234                                var $s3a = $('<a></a>')
235                                    .attr('href', $d3a.attr('href') || '#')
236                                    .text($d3a.text().trim());
237                                if ($d3a.hasClass('active')) $s3a.addClass('active');
238                                $s3li.append($s3a);
239                                $sub3.append($s3li);
240                            });
241                            $s2li.append($sub3);
242                        }
243
244                        $sub2.append($s2li);
245                    });
246
247                    $sli.append($sub2);
248                }
249
250                $sub.append($sli);
251            });
252
253            $li.append($sub);
254        }
255
256        $ul.append($li);
257    });

258
259    $mobileNav.append($ul);
260
261    function openMobileMenu() {
262        $('#mobileMenuPanel').addClass('active');
263        $('#mobileMenuOverlay').addClass('active');
264        $('body').addClass('menu-open');
265    }
266
267    function closeMobileMenu() {
268        $('#mobileMenuPanel').removeClass('active');
269        $('#mobileMenuOverlay').removeClass('active');
270        $('body').removeClass('menu-open');
271        $('.mobile-submenu, .mobile-submenu-two').removeClass('open');
272        $('.mobile-menu-toggle').removeClass('open');
273    }
274
275    $('.header-hamburger').on('click', openMobileMenu);
276    $('#mobileMenuClose').on('click', closeMobileMenu);
277    $('#mobileMenuOverlay').on('click', closeMobileMenu);
278
279    $(document).on('click', '.mobile-menu-toggle', function() {
280        var $btn = $(this);
281        var $li = $btn.closest('li');
282        var $sub = $li.find('> .mobile-submenu, > .mobile-submenu-two, > .mobile-submenu-three');
283        var isOpen = $sub.hasClass('open');
284
285        $btn.closest('ul').find('> li > .mobile-submenu, > li > .mobile-submenu-two, > li > .mobile-submenu-three').removeClass('open');
286        $btn.closest('ul').find('> li > .mobile-menu-item > .mobile-menu-toggle').removeClass('open');
287
288        if (!isOpen) {
289            $sub.addClass('open');
290            $btn.addClass('open');
291        }
292    });
293
294});