https://teul.gob.mx/js/custom.js

1/* JS Document */
2
3/******************************
4
5[Table of Contents]
6
71. Vars and Inits
82. Init Menu
93. InitHeader
104. Init Header Search
115. Init Home Slider
12
13
14******************************/
15
16$(document).ready(function()
17{
18	"use strict";
19
20	/* 
21
22	1. Vars and Inits
23
24	*/
25
26	var menu = $('.menu');
27	var burger = $('.hamburger');
28	var menuActive = false;
29	var ctrl = new ScrollMagic.Controller();
30
31	initMenu();
32	initHeader();
33	initHeaderSearch();
34	initHomeSlider();
35
36	/* 
37
38	2. Init Menu
39
40	*/
41
42	function initMenu()
43	{
44		if(menu.length)
45		{
46			if($('.hamburger').length)
47			{
48				burger.on('click', function()
49				{
50					if(menuActive)
51					{
52						closeMenu();
53					}
54					else
55					{
56						openMenu();
57
58						$(document).one('click', function cls(e)
59						{
60							if($(e.target).hasClass('menu_mm'))
61							{
62								$(document).one('click', cls);
63							}
64							else
65							{
66								closeMenu();
67							}
68						});
69					}
70				});
71			}
72		}
73	}
74
75	function openMenu()
76	{
77		menu.addClass('active');
78		menuActive = true;
79	}
80
81	function closeMenu()
82	{
83		menu.removeClass('active');
84		menuActive = false;
85	}
86
87	/* 
88
89	3. InitHeader
90
91	*/
92
93	function initHeader()
94	{
95		var headerScene = new ScrollMagic.Scene(
96		{
97			triggerElement: "#header", // point of execution
98			triggerHook: 'onLeave', // don't trigger until #pinned-trigger1 hits the top of the viewport
99			pushFollowers: false
100		})
101		.setPin("#header") // the element we want to pin
102		.setClassToggle('#header', 'scrolled')
103		.addTo(ctrl);
104	}
105
106	/* 
107
108	4. Init Header Search
109
110	*/
111
112	function initHeaderSearch()
113	{
114		if($('.header_search_activation').length)
115		{
116			var search = $('.header_search_activation');
117			var headerSearch = $('.header_search');
118			search.on('click', function()
119			{
120				headerSearch.toggleClass('active');
121			});
122		}
123	}
124
125	/* 
126
127	5. Init Home Slider
128
129	*/
130
131	function initHomeSlider()
132	{
133		if($('.home_slider').length)
134		{
135			var homeSlider = $('.home_slider');
136			homeSlider.owlCarousel(
137			{
138				items:1,
139				loop:true,
140				autoplay:true,
141				autoplayTimeout: 8000,
142				dots:false,
143				nav:false,
144				smartSpeed:1200
145			});
146
147			// Prev Navigation
148			if($('.home_slider_prev').length)
149			{
150				var prev = $('.home_slider_prev');
151				prev.on('click', function()
152				{
153					homeSlider.trigger('prev.owl.carousel');
154				});
155			}
156
157			// Next Navigation
158			if($('.home_slider_next').length)
159			{
160				var next = $('.home_slider_next');
161				next.on('click', function()
162				{
163					homeSlider.trigger('next.owl.carousel');
164				});
165			}
166
167			// add animate.css class(es) to the elements to be animated
168			function setAnimation ( _elem, _InOut )
169			{
170				// Store all animationend event name in a string.
171				// cf animate.css documentation
172				var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
173
174				_elem.each ( function ()
175				{
176					var $elem = $(this);
177					var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );
178
179					$elem.addClass($animationType).one(animationEndEvent, function ()
180					{
181						$elem.removeClass($animationType); // remove animate.css Class at the end of the animations
182					});
183				});
184			}
185
186			// Fired before current slide change
187			homeSlider.on('change.owl.carousel', function(event)
188			{
189				var $currentItem = $('.home_slider_item', homeSlider).eq(event.item.index);
190				var $elemsToanim = $currentItem.find("[data-animation-out]");
191				setAnimation ($elemsToanim, 'out');
192			});
193
194			// Fired after current slide has been changed
195			homeSlider.on('changed.owl.carousel', function(event)
196			{
197				var $currentItem = $('.home_slider_item', homeSlider).eq(event.item.index);
198				var $elemsToanim = $currentItem.find("[data-animation-in]");
199				setAnimation ($elemsToanim, 'in');
200			})
201		}
202	}
203
204});