https://imagenpoblana.com/js/main-script.js

1"use strict";
2
3//sidebar navigation close method.
4var closeNavigate = function (){
5	$('.overlay').hide();
6	$('.sidebar').removeClass('opened');
7	$('body').removeClass('fixed');
8}
9
10//sidebar navigation close method.
11var openNavigate = function (){
12	if ($(window).width() < 760)
13		$('body').addClass('fixed');
14	$('.overlay').show();
15	$('.sidebar').addClass('opened');
16}
17
18//creating mobile menu from header menu
19var createMobileMenu = function (){
20	var newMenu = '<ul class="sidebar-menu">';
21	var menuContent = $('[data-show-menu-on-mobile]').html();
22	menuContent = menuContent.replace(/<div class="header-submenu">/g , "");
23	menuContent = menuContent.replace(/<\/div>/g , "");
24	newMenu = newMenu + menuContent + '</ul>';
25	$('#mobileMenu').prepend(newMenu);
26
27	$('#mobileMenu li a').each(function(){
28		var t = $(this).text().trim();
29		
30		if ($(this).find('i').length)
31		{
32			$(this).html('<span class="menu-label">'+t.slice(0, -1)+'</span><span class="multimenu-icon"><i class="material-icons">&#xE313;</i></span>')
33		}
34		else
35			$(this).html('<span class="menu-label">'+t+'</span>');
36	});
37
38	
39}
40
41
42var scrollPos = 0, scrollTime;
43//show or hide header with scroll position.
44//~ var showHideHeader = function (e){
45	//~ clearTimeout(scrollTime);
46
47	//~ var currentScroll = $(this).scrollTop();
48
49    //~ if (currentScroll < 60) {
50        //~ $('header').removeClass('hide');
51    //~ } else {
52        //~ if (currentScroll <= scrollPos) {
53            //~ $('header').removeClass('hide');    
54        //~ }
55        //~ else {
56            //~ $('header').addClass('hide');
57            //~ $('.search-bar').removeClass('active');
58        //~ }
59    //~ }
60
61    //~ scrollTime = setTimeout(function() {
62        //~ scrollPos = $(window).scrollTop();
63    //~ }, 100);
64//~ }
65
66//add material wave effect to element
67var addWaveEffect = function (self, e){
68	var wave = '.wave-effect',
69		btnWidth = self.outerWidth(),
70		x = e.offsetX,
71		y = e.offsetY;
72
73	self.prepend('<span class="wave-effect"></span>')
74
75	$(wave).css({'top': y,'left': x}).animate({
76	  	opacity: '0',
77	  	width: btnWidth * 2,
78	  	height: btnWidth * 2
79	}, 500, function() {
80	 	self.find(wave).remove()
81	})
82}
83
84//making sidebars fix to screen top.
85var setStickySidebar = function(){
86	//if window screen < 960 sidebar hiding.
87	if (window.outerWidth > 960)
88	{
89		var sidebar = $('.sidebar_inner');
90		var sidebarHeight = sidebar.outerHeight();
91		var windowHeight = $(window).height();
92		var wrapperTopPos = $('.main-content').position().top;
93		var scrollTop = $(this).scrollTop();
94
95		if ((sidebarHeight+30) < windowHeight)
96		{
97			if ((scrollTop+30) > wrapperTopPos)
98				sidebar.css({'position':'fixed', 'top':30});
99			else
100				sidebar.css({'position':'absolute', 'top':0});
101		}
102		else
103		{
104			if (scrollTop > (wrapperTopPos+30+sidebarHeight-windowHeight))
105				sidebar.css({'position':'fixed', 'top':-(sidebarHeight+30-windowHeight)});
106			else
107				sidebar.css({'position':'absolute', 'top':0});
108
109		}
110
111		if ($('.article-left-box-inner').length)
112		{
113
114			var leftSidebar = $('.article-left-box-inner');
115			var leftSidebarH = leftSidebar.outerHeight();
116			var endOfTheArticlePos = $('#endOfTheArticle').offset().top;
117
118			if ((scrollTop+30) > wrapperTopPos)
119			{
120				if ((scrollTop+leftSidebarH+80) > endOfTheArticlePos)
121					leftSidebar.css({'position':'absolute', 'top':'auto', 'bottom':10});
122				else
123					leftSidebar.css({'position':'fixed', 'top':70, 'bottom':'auto'});
124			}
125			else
126				leftSidebar.css({'position':'absolute', 'top':0, 'bottom':'auto'});
127
128			
129		}
130	}
131}
132
133
134/*detail page parallax effect script */
135var makeParallax = function(){
136	var scrollTop = $(this).scrollTop();
137	if (scrollTop < 300)
138		$('.parallax-box .parallax-image').css({'transform': 'translate3d(0px, '+(scrollTop/2)+'px, 0px)'});
139
140	var opacity = 1;
141	if (scrollTop > 10 && scrollTop < 50)
142		opacity = 0.9;
143	else if (scrollTop >= 50 && scrollTop < 100)
144		opacity = 0.8;
145	else if (scrollTop >= 100 && scrollTop < 150)
146		opacity = 0.7;
147	else if (scrollTop >= 150 && scrollTop < 200)
148		opacity = 0.6;
149	else if (scrollTop >= 200 && scrollTop < 250)
150		opacity = 0.5;
151	else if (scrollTop >= 250 && scrollTop < 300)
152		opacity = 0.4;
153	else if (scrollTop >= 300 && scrollTop < 350)
154		opacity = 0.3;
155	else if (scrollTop >= 350 && scrollTop < 400)
156		opacity = 0.2;
157	else if (scrollTop >= 400)
158		opacity = 0;
159	
160	$('.parallax-box .post-overlay-inner').css({'opacity':opacity});
161}
162
163
164//Browser is IE check
165var GetIEVersion = function() {
166	var sAgent = window.navigator.userAgent;
167	var Idx = sAgent.indexOf("MSIE");
168
169	// If IE, return version number.
170	if (Idx > 0) 
171		return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
172	// If IE 11 then look for Updated user agent string.
173	else if (!!navigator.userAgent.match(/Trident\/7\./)) 
174		return 11;
175	else
176		return 0; //It is not IE
177}
178
179
180
181$(document).ready(function(){
182
183	//initialize zebra tooltip plugin.
184	new $.Zebra_Tooltips($('[data-zebra-tooltip]'),{
185		'animation_speed':50,
186		'animation_offset':10,
187		'hide_delay':0,
188		'show_delay':0
189	});
190
191	//first creating mobile menu for mobile screen sizes
192	createMobileMenu();
193
194	//first show header submenus
195	$('.header-submenu').show();
196
197	//close sidebar panel, clicked overlay and close sidebar button.
198	$('.overlay, .sidebar-toggle-button').on('click', function(){
199		closeNavigate();
200	});
201
202	//sidebar menu click event. open when clicked.
203	$('.toggle-sidebar').on('click', function(){
204		openNavigate();
205	});
206
207	//search panel toggler
208	$('.search-toggle').on('click', function(e){
209		e.preventDefault();
210		$('.search-bar').toggleClass('active');
211	});
212
213	//playerlist height setting. for internet explorer
214	if (GetIEVersion() > 0)
215	{
216		$('.playerlist').height($('.player-box').outerHeight());
217		$('.timeline-item').each(function(){
218			var rightH = $(this).find('.timeline-right').outerHeight();
219			$(this).find('.timeline-left-wrapper').height(rightH);
220		});
221	}
222
223	$('.header-submenu').parent().find('a:first').on('click', function(e){
224		e.stopPropagation();
225		e.preventDefault();
226		$(this).parents('.header-navigation').find('.header-submenu').not($(this).parents('li').find('.header-submenu')).removeClass('active');
227		$(this).parents('li').find('.header-submenu').show().toggleClass('active');
228		
229	});
230
231	$('.sidebar-menu > li > a').on('click', function(e){
232		var firstSubMenu = $(this).parent().find('ul:first');
233		var that = $(this);
234		if (firstSubMenu.length)
235		{
236			e.stopPropagation();
237			e.preventDefault();
238			that.parent().parent().find('li').removeClass('active');
239			if (firstSubMenu.css('display') == 'block')
240				that.parent().removeClass('active');
241			else
242				that.parent().addClass('active');
243
244			firstSubMenu.slideToggle(100);
245			
246		}
247	});
248
249	$('.article-left-box').css('height',$('.article-inner').outerHeight())
250
251	setStickySidebar.call($(window));
252
253	makeParallax.call($(window));
254
255	$('.material-button').on('click', function(e) {
256		addWaveEffect($(this), e);
257	});
258
259	$(document).on('click',function (event) {
260        //close submenu on anywhere
261        var clickover = $(event.target);
262        var _opened = $(".header-submenu").hasClass("active");
263        if (_opened === true && !clickover.hasClass("submenu-toggle")) {
264            $(".header-submenu").removeClass('active');
265        }
266

267        //close searchbar on click anywhere
268        if (clickover.parents('.search-bar').length < 1 && !clickover.hasClass("search-bar") && !clickover.parent().hasClass("search-toggle") && !clickover.hasClass("search-toggle"))
269        {
270        	$('.search-bar').removeClass('active');
271        }
272    });
273
274	//trigger scrollable elements actions
275    $(window).on('scroll',function () {
276    	//~ showHideHeader.call(this);
277    	setStickySidebar.call(this);
278    	makeParallax.call(this);
279    });
280
281    //sidebar boxed posts scripts    
282    $('.w-boxed-post ul li').on('mouseover', function(e){
283    	$(this).parent().find('li').removeClass();
284    });
285
286    $('.w-boxed-post ul li').on('mouseleave', function(e){
287    	$(this).addClass('active');
288    });
289
290    //article share emoticons action
291    $('.article-emoticons>li').on('mouseover', function(e){
292    	$(this).parent().addClass('active');
293    });
294    $('.article-emoticons>li').on('mouseleave', function(e){
295    	$(this).parent().removeClass('active');
296    });
297
298    
299    
300});
301
302
303/*live event triggers*/
304/*open popup modal from data attribute*/
305$(document).on('click', '[data-modal]', function(e){
306	e.preventDefault();
307	$('.m-modal-box').hide();
308	var modalId = $(this).attr('data-modal');
309	$('#'+modalId).show();
310});
311/*close popup modal clicked close button*/
312$(document).on('click', '.m-modal-close, .m-modal-overlay', function(e){
313	$(this).parents('.m-modal-box').hide();
314});