https://fena.ba/assets/js/custom-new.js

1function slider(el) {
2	/**
3	 * length INT the number of items in slider
4	 *
5	 * Important for further code. If there is more than one item in slider,
6	 * the slider will be initialized, otherwise we will how only the image,
7	 * without the slider
8	 */
9	let length = el.querySelectorAll(".slider-item").length;
10
11	/**
12	 *
13	 * @returns nodeElement that will hold the dots navigation for slider
14	 */
15	function createDotsHolder() {
16		let dotsHolder = document.createElement("div");
17		dotsHolder.classList.add("flex", "dots-holder");
18		return dotsHolder;
19	}
20
21	/**
22	 * If there is more than one item in slider create dots and append them to dotsHolder
23	 */
24	let dotsHolder = length > 1 ? createDotsHolder() : undefined;
25
26	/**
27	 * @returns multiple nodeElements (dots) that will be used for navigation
28	 * @param {i} is the number of items in slider
29	 */
30	function createDots(i) {
31		let dot = document.createElement("div");
32		dot.classList.add("slider-dot");
33		dot.setAttribute("data-index", i);
34		dot.addEventListener("click", dotClick, false);
35		dotsHolder.appendChild(dot);
36	}
37
38	/**
39	 * This function will create arrows for slider navigation
40	 */
41	function createArrows() {
42		let rightArrow = document.createElement("img");
43		rightArrow.setAttribute("src", "/assets/images/arrow.svg");
44		rightArrow.classList.add("slider-arrow", "arrow-right");
45		rightArrow.addEventListener("click", nextItem, false);
46		el.appendChild(rightArrow);
47
48		let leftArrow = document.createElement("img");
49		leftArrow.setAttribute("src", "/assets/images/arrow.svg");
50		leftArrow.classList.add("slider-arrow", "arrow-left");
51		leftArrow.addEventListener("click", prevItem, false);
52		el.appendChild(leftArrow);
53	}
54
55	/**
56	 * If {dotsHolder} variable is not undefined careate dots navigation and append them to {dotsHolder}
57	 * Set all items to "display:none" and set the first item to "display:flex"
58	 * Add "active-dot" class to the first dot
59	 */
60	if (dotsHolder) {
61		for (let i = 0; i < length; i++) {
62			let currElement = el.querySelectorAll(".slider-item")[i];
63			currElement.style.display = "none";
64			currElement.setAttribute("data-index", i);
65			createDots(i);
66			el.appendChild(dotsHolder);
67		}
68		el.getElementsByClassName("slider-item")[0].style.display = "flex";
69		el.getElementsByClassName("slider-item")[0].classList.add(
70			"active-slider-item"
71		);
72		el.getElementsByClassName("slider-dot")[0].classList.add("active-dot");
73		createArrows();
74
75		/**
76		 * Start autoSlide()
77		 */
78
79		autoSlide();
80	}
81
82	/**
83	 * This is used for the animation of slider so that it doesn't overflow
84	 */
85	function resizeElement() {
86		let sliderWidth = el.parentNode.clientWidth;
87		let sliderHeight = el.parentNode.clientWidth * 0.66666;
88
89		el.setAttribute(
90			"style",
91			`width: ${sliderWidth}px; height: ${sliderHeight}px; overflow: hidden;`
92		);
93	}
94
95	resizeElement();
96	window.addEventListener(
97		"resize",
98		function () {
99			resizeElement();
100		},
101		false
102	);
103
104	/**
105	 * Create a function that will make slider move to the next item
106	 */
107
108	function nextItem() {
109		let currentItem = el.getElementsByClassName("active-slider-item")[0];
110		let currentDot = el.getElementsByClassName("active-dot")[0];
111		let nextItem = currentItem.nextElementSibling.classList.contains(
112			"slider-item"
113		)
114			? currentItem.nextElementSibling
115			: el.getElementsByClassName("slider-item")[0];
116		let nextDot = currentDot.nextElementSibling
117			? currentDot.nextElementSibling
118			: el.getElementsByClassName("slider-dot")[0];
119
120		currentItem.style.display = "none";
121		currentItem.classList.remove("active-slider-item");
122		currentDot.classList.remove("active-dot");
123		nextItem.style.display = "flex";
124		nextDot.classList.add("active-dot");
125		nextItem.classList.add("active-slider-item");
126	}
127
128	/**
129	 * Create a function that will make slider move to the previous item
130	 */
131
132	function prevItem() {
133		let currentItem = el.getElementsByClassName("active-slider-item")[0];
134		let currentDot = el.getElementsByClassName("active-dot")[0];
135		let prevItem = currentItem.previousElementSibling
136			? currentItem.previousElementSibling
137			: el.getElementsByClassName("slider-item")[length - 1];
138		let prevDot = currentDot.previousElementSibling
139			? currentDot.previousElementSibling

140			: el.getElementsByClassName("slider-dot")[length - 1];
141		currentItem.style.display = "none";
142		currentItem.classList.remove("active-slider-item");
143		currentDot.classList.remove("active-dot");
144		prevItem.style.display = "flex";
145		prevDot.classList.add("active-dot");
146		prevItem.classList.add("active-slider-item");
147	}
148
149	/**
150	 * Click on dot and change slider item
151	 */
152
153	function dotClick(e) {
154		let currentItem = el.getElementsByClassName("active-slider-item")[0];
155		let currentDot = el.getElementsByClassName("active-dot")[0];
156		let dotIndex = e.target.getAttribute("data-index");
157		let nextItem = el.getElementsByClassName("slider-item")[dotIndex];
158		let nextDot = el.getElementsByClassName("slider-dot")[dotIndex];
159		currentItem.style.display = "none";
160		currentItem.classList.remove("active-slider-item");
161		currentDot.classList.remove("active-dot");
162		nextItem.style.display = "flex";
163		nextDot.classList.add("active-dot");
164		nextItem.classList.add("active-slider-item");
165	}
166
167	/**
168	 * Create timer for slider
169	 */
170
171	function autoSlide() {
172		let timer = setInterval(nextItem, 5000);
173		el.addEventListener("mouseover", function () {
174			clearInterval(timer);
175		});
176		el.addEventListener("mouseout", function () {
177			timer = setInterval(nextItem, 5000);
178		});
179	}
180
181	/**
182	 * If resolution changes, rerun resizeElement()
183	 */
184}
185
186if (document.getElementById("main-slider")) {
187	slider(document.querySelector("#main-slider"));
188}
189if (document.getElementById("article-slider")) {
190	slider(document.querySelector("#article-slider"));
191}
192
193/**
194 * Create a sticky header element
195 */
196
197// When the user scrolls the page, execute myFunction
198window.onscroll = function () {
199	stickyHeader();
200};
201
202window.onresize = function () {
203	stickyHeader();
204	adjustSidebar();
205};
206
207// Get the header
208let header = document.getElementById("bottom-header");
209
210// Get the offset position of the navbar
211let sticky = header.offsetTop;
212let body = document.getElementsByTagName("body")[0];
213
214// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
215function stickyHeader() {
216	if (window.pageYOffset > sticky) {
217		header.classList.add("sticky");
218		body.style.paddingTop = header.clientHeight + "px";
219	} else {
220		header.classList.remove("sticky");
221		body.style.paddingTop = "0px";
222	}
223}
224
225/**
226 * Height of the sidebar depending on the height of the image
227 */
228
229function adjustSidebar() {
230	let headingHeight =
231		document.getElementById("sidebar-desk-title").clientHeight;
232	let buttonHeight =
233		document.getElementById("sidebar-button-holder").clientHeight + 10;
234	let imageHeight = document.getElementById("main-slider").clientHeight;
235
236	let sidebarNewsHolder = document.getElementById("sidebar-news-holder");
237
238	sidebarNewsHolder.style.height =
239		imageHeight - headingHeight - buttonHeight + "px";
240}
241
242if (document.getElementById("sidebar-desk-title")) {
243	adjustSidebar();
244}
245
246/**
247 * Create a function that will make mobile menu working
248 * @param {HTMLElement} #hamburger-menu
249 * @param {HTMLElement} #main-menu
250 */
251let hamburgerButton = document.getElementById("hamburger-menu");
252let mainMenu = document.getElementById("main-menu");
253function mobileMenu(hamburgerButton, mainMenu) {
254	hamburgerButton.addEventListener("click", function () {
255		mainMenu.classList.toggle("mobile-menu-active");
256	});
257}
258
259mobileMenu(hamburgerButton, mainMenu);
260
261/**
262 * Get all galleries
263 */
264function generateGalleries(num = 0, q = "") {
265	window.location.hash = parseInt(num);
266	let holder = document.getElementById("galleries-holder");
267	let pagination_holder = document.getElementById("pagination-holder");
268	holder.classList.add("text-center");
269	holder.innerHTML =
270		'<img src="/assets/images/loader.svg" alt="Plavi loader koji označava da se čeka povratni odgovor sa servera">';
271	let link = `/galleries/${num}`;
272	if (q != "") {
273		link = link + "/" + encodeURIComponent(q);
274	}
275	let data = new FormData();
276	data.append("query", q);
277	fetch(link, {
278		method: "post",
279		body: data,
280	})
281		.then((res) => res.json())
282		.then((data) => {
283			if (data.success == 0) {
284				alert("NEÅ¡to nije uredu");
285			} else {
286				holder.classList.remove("text-center");
287				holder.innerHTML = data.payload;
288				pagination_holder.innerHTML = data.pagination;
289
290				let pages = document
291					.getElementById("pagination-holder")
292					.getElementsByTagName("a");
293
294				for (let i = 0; i < pages.length; i++) {
295					let number = pages[i].textContent;
296					pages[i].addEventListener("click", function () {
297						generateGalleries(number);
298					});
299				}
300			}
301		})
302		.catch((err) => console.log(err));
303}
304
305if (document.getElementById("galleries-holder")) {
306	generateGalleries();
307}
308
309if (document.getElementById("search-galleries")) {
310	document
311		.getElementById("search-galleries")
312		.addEventListener("click", function (e) {
313			e.preventDefault();
314			let value = document.getElementById("search-term").value;
315
316			if (value.length >= 3) {
317				generateGalleries(0, value);
318			} else {
319				alert("Minimalan broj karaktera za pretragu je 3 (tri)");
320			}
321		});
322}
323
324/**
325 * Get all videos
326 */
327
328function generateVideos(num = 0, q = "") {
329	window.location.hash = parseInt(num);
330	let holder = document.getElementById("videos-holder");
331	let pagination_holder = document.getElementById("pagination-holder");
332	holder.classList.add("text-center");
333	holder.innerHTML =
334		'<img src="/assets/images/loader.svg" alt="Plavi loader koji označava da se čeka povratni odgovor sa servera">';
335	let link = `/videos/${num}`;
336
337	if (q != "") {
338		link = link + "/" + q;
339	}
340	let data = new FormData();
341	data.append("query", q);
342	fetch(link, {
343		method: "post",
344		data: data,
345	})
346		.then((res) => res.json())
347		.then((data) => {
348			if (data.success == 0) {
349				alert("NEÅ¡to nije uredu");
350			} else {
351				holder.classList.remove("text-center");
352				holder.innerHTML = data.payload;
353				pagination_holder.innerHTML = data.pagination;
354
355				let pages = document
356					.getElementById("pagination-holder")
357					.getElementsByTagName("a");
358
359				for (let i = 0; i < pages.length; i++) {
360					let number = pages[i].textContent;
361					pages[i].addEventListener("click", function () {
362						console.log("AAAAAA");
363						generateVideos(number);
364					});
365				}
366			}
367		})
368		.catch((err) => console.log(err));
369}
370
371if (document.getElementById("videos-holder")) {
372	generateVideos();
373}
374
375if (document.getElementById("search-videos")) {
376	document
377		.getElementById("search-videos")
378		.addEventListener("click", function (e) {
379			e.preventDefault();
380			let value = document.getElementById("search-term").value;
381
382			if (value.length >= 3) {
383				generateVideos(0, value);
384			} else {
385				alert("Minimalan broj karaktera za pretragu je 3 (tri)");
386			}
387		});
388}