https://civicus.org/templates/shaper_helixultimate/js/main.js

1/**
2 * @package Helix Ultimate Framework
3 * @author JoomShaper https://www.joomshaper.com
4 * @copyright Copyright (c) 2010 - 2023 JoomShaper
5 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
6 */
7
8// Preloader
9jQuery(window).on('load', function () {
10	if (jQuery('.sp-loader-with-logo').length > 0) {
11		move();
12	}
13	jQuery('.sp-pre-loader').fadeOut(500, function () {
14		jQuery(this).remove();
15	});
16});
17
18/**
19 * Move the progress bar
20 */
21function move() {
22	var elem = document.getElementById('line-load');
23	var width = 1;
24	var id = setInterval(frame, 10);
25	function frame() {
26		if (width >= 100) {
27			clearInterval(id);
28		} else {
29			width++;
30			elem.style.width = width + '%';
31		}
32	}
33}
34
35jQuery(function ($) {
36	/**
37	 * Helix settings data
38	 *
39	 */
40	var settings = Joomla.getOptions('data') || {};
41
42	/**
43	 * sticky header
44	 *
45	 * @param {string} className the header className
46	 */
47	var handleStickiness = function (className, offsetTop) {
48		if ($('body:not(.layout-edit-iframe)').hasClass(className)) {
49			var $header = $('#sp-header');
50			var headerHeight = $header.outerHeight();
51			var $stickyHeaderPlaceholder = $('.sticky-header-placeholder');
52			let $stickyOffset = '100';
53
54			if (settings.header !== undefined && settings.header.stickyOffset !== undefined) {
55				$stickyOffset = settings.header .stickyOffset || '100';
56			}
57
58			var stickyHeader = function () {
59				var scrollTop = $(window).scrollTop();
60				if (scrollTop >= offsetTop + Number($stickyOffset)) {
61					$header.addClass('header-sticky');
62					$stickyHeaderPlaceholder.height(headerHeight);
63				} else {
64					if ($header.hasClass('header-sticky')) {
65						$header.removeClass('header-sticky');
66						$stickyHeaderPlaceholder.height('inherit');
67					}
68				}
69			};
70
71			stickyHeader();
72			$(window).scroll(function () {
73				stickyHeader();
74			});
75
76			if ($('body').hasClass('layout-boxed')) {
77				var windowWidth = $header.parent().outerWidth();
78				$header.css({ 'max-width': windowWidth, left: 'auto' });
79			}
80		} else {
81			var $header = $('#sp-header');
82			if ($header.hasClass('header-sticky')) {
83				$header.removeClass('header-sticky');
84			}
85			$(window).off('scroll');
86		}
87	};
88
89	/**
90	 * Calculate the header offset based on the
91	 * backend preview iframe site and real site.
92	 *
93	 * @return  integer The offset value
94	 */
95	function getHeaderOffset() {
96		/**
97		 * Real site header offset top
98		 *
99		 */
100		let $header = $('#sp-header');
101		let stickyHeaderTop = $header.offset().top;
102
103		/**
104		 * Backend edit preview iframe header offset top
105		 *
106		 */
107		let $backHeader = $('body.back-panel').find('#sp-header');
108		let backPanelStickyHeaderTop = null;
109
110		/**
111		 * If the class .back-panel exists,
112		 * that means this is from backend preview frame,
113		 * then get the offset top, as it varies with the original one.
114		 *
115		 */
116		if ($backHeader.length > 0) {
117			backPanelStickyHeaderTop = $backHeader.offset().top;
118		}
119
120		// By Default the header offset is the original header top
121		let headerOffset = stickyHeaderTop;
122
123		/**
124		 * If back panel sticky header top has value rather than null
125		 * that means the device type is changes from desktop to table or mobile or vice-versa.
126		 * If value found then subtract the settings topbar height from the offset top.
127		 *
128		 */
129		if (backPanelStickyHeaderTop !== null) {
130			headerOffset = backPanelStickyHeaderTop - settings.topbarHeight;
131			headerOffset = headerOffset < 0 ? stickyHeaderTop : headerOffset;
132		}
133
134		return headerOffset;
135	}
136
137	const headerExist = $('#sp-header');
138	if(headerExist.length>0) {
139		handleStickiness('sticky-header', getHeaderOffset());
140	}
141
142	// go to top
143	$(window).scroll(function () {
144		if ($(this).scrollTop() > 100) {
145			$('.sp-scroll-up').fadeIn();
146		} else {
147			$('.sp-scroll-up').fadeOut(400);
148		}
149	});
150
151	$('.sp-scroll-up').click(function () {
152		$('html, body').animate(
153			{
154				scrollTop: -60,
155			},
156			600
157		);
158		return false;
159	});
160
161	//mega menu
162	$('.sp-megamenu-wrapper').parent().parent().css('position', 'static').parent().css('position', 'relative');
163	$('.sp-menu-full').each(function () {
164		$(this).parent().addClass('menu-justify');
165	});
166
167	// Offcanvs
168	$('#offcanvas-toggler').on('click', function (event) {
169		event.preventDefault();
170		$('.offcanvas-init').addClass('offcanvas-active');
171	});
172
173	$('.offcanvas-toggler-secondary').on('click', function (event) {
174		event.preventDefault();
175		$('.offcanvas-init').addClass('offcanvas-active');
176	});
177
178	$('.offcanvas-toggler-full').on('click', function (event) {
179		event.preventDefault();
180		$('.offcanvas-init').addClass('offcanvas-active full-offcanvas');
181	});
182
183	$('.close-offcanvas, .offcanvas-overlay').on('click', function (event) {
184		event.preventDefault();
185		$('.offcanvas-init').removeClass('offcanvas-active full-offcanvas');
186	});
187
188	$(document).on('click', '.offcanvas-inner .menu-toggler', function (event) {
189		event.preventDefault();
190		$(this).closest('.menu-parent').toggleClass('menu-parent-open').find('>.menu-child').slideToggle(400);
191	});
192
193	// Modal Menu

194	if ($('#modal-menu').length > 0) {
195		let $modalToggler = $('#modal-menu-toggler');
196		let $modalMenu = $('#modal-menu');
197		let $body = $('body');
198
199		$modalToggler.on('click', function (e) {
200			e.preventDefault();
201			$modalMenu.toggleClass('active');
202			$body.toggleClass('modal-menu-active');
203			$(this).toggleClass('active');
204		});
205
206		// modal menu close with escape
207		$(document).keyup(function (e) {
208			if (e.key == 'Escape') {
209				$modalMenu.removeClass('active');
210				$modalToggler.removeClass('active');
211				$body.removeClass('modal-menu-active');
212			}
213		});
214	}
215
216	// Tooltip
217	const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], .hasTooltip'));
218	tooltipTriggerList.map(function (tooltipTriggerEl) {
219		return new bootstrap.Tooltip(tooltipTriggerEl,{
220			html: true
221		  });
222	});
223
224	// Popover
225	const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"], .hasPopover'));
226	popoverTriggerList.map(function (popoverTriggerEl) {
227		return new bootstrap.Popover(popoverTriggerEl);
228	});
229
230	// Article Ajax voting
231	$('.article-ratings .rating-star').on('click', function (event) {
232		event.preventDefault();
233		var $parent = $(this).closest('.article-ratings');
234
235		var request = {
236			option: 'com_ajax',
237			template: template,
238			action: 'rating',
239			rating: $(this).data('number'),
240			article_id: $parent.data('id'),
241			format: 'json',
242		};
243
244		$.ajax({
245			type: 'POST',
246			data: request,
247			beforeSend: function () {
248				$parent.find('.fa-spinner').show();
249			},
250			success: function (response) {
251				var data = $.parseJSON(response);
252				$parent.find('.ratings-count').text(data.message);
253				$parent.find('.fa-spinner').hide();
254
255				if (data.status) {
256					$parent.find('.rating-symbol').html(data.ratings);
257				}
258
259				setTimeout(function () {
260					$parent.find('.ratings-count').text('(' + data.rating_count + ')');
261				}, 3000);
262			},
263		});
264	});
265
266	//  Cookie consent
267	$('.sp-cookie-allow').on('click', function (event) {
268		event.preventDefault();
269
270		var date = new Date();
271		date.setTime(date.getTime() + 30 * 24 * 60 * 60 * 1000);
272		var expires = '; expires=' + date.toGMTString();
273		document.cookie = 'spcookie_status=ok' + expires + '; path=/';
274
275		$(this).closest('.sp-cookie-consent').fadeOut();
276	});
277
278	$('.btn-group label:not(.active)').click(function () {
279		var label = $(this);
280		var input = $('#' + label.attr('for'));
281
282		if (!input.prop('checked')) {
283			label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
284			if (input.val() === '') {
285				label.addClass('active btn-primary');
286			} else if (input.val() == 0) {
287				label.addClass('active btn-danger');
288			} else {
289				label.addClass('active btn-success');
290			}
291			input.prop('checked', true);
292			input.trigger('change');
293		}
294		var parent = $(this).parents('#attrib-helix_ultimate_blog_options');
295		if (parent) {
296			showCategoryItems(parent, input.val());
297		}
298	});
299	$('.btn-group input[checked=checked]').each(function () {
300		if ($(this).val() == '') {
301			$('label[for=' + $(this).attr('id') + ']').addClass('active btn btn-primary');
302		} else if ($(this).val() == 0) {
303			$('label[for=' + $(this).attr('id') + ']').addClass('active btn btn-danger');
304		} else {
305			$('label[for=' + $(this).attr('id') + ']').addClass('active btn btn-success');
306		}
307		var parent = $(this).parents('#attrib-helix_ultimate_blog_options');
308		if (parent) {
309			parent.find('*[data-showon]').each(function () {
310				$(this).hide();
311			});
312		}
313	});
314
315	function showCategoryItems(parent, value) {
316		var controlGroup = parent.find('*[data-showon]');
317
318		controlGroup.each(function () {
319			var data = $(this).attr('data-showon');
320			data = typeof data !== 'undefined' ? JSON.parse(data) : [];
321			if (data.length > 0) {
322				if (typeof data[0].values !== 'undefined' && data[0].values.includes(value)) {
323					$(this).slideDown();
324				} else {
325					$(this).hide();
326				}
327			}
328		});
329	}
330
331	$(window).on('scroll', function () {
332		var scrollBar = $('.sp-reading-progress-bar');
333		if (scrollBar.length > 0) {
334			var s = $(window).scrollTop(),
335				d = $(document).height(),
336				c = $(window).height();
337			var scrollPercent = (s / (d - c)) * 100;
338			const position = scrollBar.data('position');
339			if (position === 'top') {
340				// var sticky = $('.header-sticky');
341				// if( sticky.length > 0 ){
342				//     sticky.css({ top: scrollBar.height() })
343				// }else{
344				//     sticky.css({ top: 0 })
345				// }
346			}
347			scrollBar.css({ width: `${scrollPercent}%` });
348		}
349	});
350
351	// Error Alert close issue fix for Joomla 3
352	var observer = new MutationObserver(function(mutations) {
353		$('#system-message-container .alert .close').attr('data-bs-dismiss', 'alert');
354	});
355	var target = document.querySelector('#system-message-container');
356	observer.observe(target, {
357		attributes: true
358	});
359	
360	
361});