https://ramallah.ps/public/assets2/js/pages/home/section.js

1// remap jQuery to $
2(function($){
3
4	$(document).ready(function () {
5
6		// // Hurricane Relief Button
7		// var mariaRelief = document.querySelector('.maria-relief');
8		// var mariaReliefClose = document.querySelector('.maria-relief-close');
9
10		// mariaReliefClose.onclick = function(e) {
11		// 	e.preventDefault();
12		// 	mariaRelief.classList.add('hidden');
13		// };
14
15		// Some Global Variables
16		var $backToTop = $('#backToTop');
17		var $dropDown = $('.drop-down');
18		var width = $(window).width();
19		var $noScroll = false;
20
21
22		// Hide elements on page load
23		$('section header, section .content-container').addClass('hidden');
24
25		
26		// Toggle the Mobile Menu
27		$('.toggle-menu, #overlay').on('click', function() {
28
29			if ( $('body').hasClass('showMenu') ) {
30				$('body, html, #main-menu').removeClass('showMenu');
31				$('.toggle-menu').removeClass('active');
32			} else {
33				$('body, html, #main-menu').addClass('showMenu');
34				$('.toggle-menu').addClass('active');
35			}
36
37			// Close Sub-menus
38			if ( $('#main-menu > ul > li').hasClass('open') ) {
39				$('li').removeClass('open');
40				$('.drop-down').slideUp();
41				$('nav#main-menu').removeClass('open-ie');
42			}
43		});
44
45		
46		// Toggle the .drop-down menu "Desktop" & "Mobile"
47		$('#main-menu > ul > li:not(#nav-home) > a').on('click', function(e) {
48
49			$('#socialmedialist').removeClass('open');
50
51			// remove Ajax search box
52			//if (srch.kgb.active == false) srch.mod.reset();
53
54			if ( $(this).parent().hasClass('open') ) {
55				$(this).next('.drop-down').slideUp(240);
56				$(this).parent().removeClass('open');
57				$('nav#main-menu').removeClass('open-ie');
58			} else {
59				// slideUp ALL the other Menus
60				$('#main-menu > ul li .drop-down').slideUp(240);
61
62				if ( width >= 769 ) {
63					$('nav#main-menu').addClass('open-ie');
64				}
65				
66				// DELAY the .drop-down slideDown IF ("desktop" AND there's already an open menu)
67				if ( width > 768 && $('#main-menu > ul > li:not(#nav-home)').hasClass('open') ) {
68					$(this).next('.drop-down').delay(420).slideDown();
69				// otherwise just slide down the drop-down
70				} else {
71					$(this).next('.drop-down').slideDown();
72				}
73
74				// remove .open class from all Menus
75				$('#main-menu > ul li').removeClass('open');
76				// ADD .open class to this Menu
77				$(this).parent().addClass('open');
78			}
79			if($(this).parent().hasClass("hasSub"))
80				e.preventDefault();
81		});
82
83
84		/* //////////////////////
85		RESIZE WINDOW / page LOAD
86		////////////////////// */
87		$(window).on('resize load', function() {
88
89			width = $(window).width(); // reset the 'width' variable
90			height = $(window).height(); // reset the 'height' variable
91
92
93			// prevent ios Scrolling the webview on search focus
94			if ( width <= 768 ) {
95				$('#searchField').on('focus', function(e) {
96					$noScroll = true;
97				});
98			}
99
100			// if > Tablet width
101			if ( width > 768 ) {
102				// Shut down the mobile nav stuff
103				$('body, html').removeClass('showMenu');
104				$('#main-menu > ul li .drop-down').slideUp();
105				$('#main-menu > ul li').removeClass('open');
106				$('nav#main-menu').removeClass('open-ie');
107			}
108
109		
110
111			/* //////////////////////
112			SCROLLING
113			////////////////////// */
114
115			$('#goToCity').on('click', function() {
116				$(this).fadeOut('slow');
117				$('html, body').animate({scrollTop: $('#locals').offset().top}, 1200);
118			});
119			
120
121			// Home Page Section Navigation
122			$('.section-nav a').on('click', function(e) {
123				e.preventDefault();
124
125				var theSectionID = $(this).attr('href');
126				
127				$('html, body').animate({
128					scrollTop: $(theSectionID).offset().top
129				}, 600);
130
131				$('.section-nav a').removeClass('active');
132				$(this).addClass('active');
133			});
134			
135			var scrollTimeout;  // global for any pending scrollTimeout
136			var lastScrollTop = 0; // set to detect scroll direction
137			
138			$(window).scroll(function () {
139				if (scrollTimeout) {
140					// clear the timeout, if one is pending
141					clearTimeout(scrollTimeout);
142					scrollTimeout = null;
143				}
144				scrollTimeout = setTimeout(scrollHandler, 120);
145			});
146			
147			
148			scrollHandler = function () {
149
150				var $viewport = $('body, html');
151				
152				//the current scroll position
153				var $y = $(window).scrollTop();
154
155
156				// Close Sub-menus
157				if ( $('#main-menu > ul > li:not(#nav-home)').hasClass('open') && $noScroll == false ) {
158					$('li').removeClass('open');

159					$('.drop-down').slideUp();
160					$('nav#main-menu').removeClass('open-ie');
161				}
162
163				// Close the "Share this page links"
164				$('#socialmedialist').removeClass('open');
165
166				// Hide the settings div
167				if ( $(window).scrollTop() > 55 ) {
168					$('#settings, #socialmedialist').removeClass('open');
169					$('body > header nav').removeClass('settingsOpen');
170				}
171
172				// Reset Section nav highlight
173				if ( $y < 400 ) {
174					$('.section-nav a').removeClass('active');
175				}
176
177				// Shrink-ify Header on scroll
178				if ( $y > 32 ) {
179					//$('#main-header').addClass('toTop');
180				} else {
181					//$('#main-header').removeClass('toTop');
182				}
183
184				// Show the backToTop link
185				if ( $y > 400) {
186					$backToTop.addClass('show');
187				} else {
188					$backToTop.removeClass('show');
189				}
190
191				
192
193
194				/* //////////////////////
195				Scroll to HOME PAGE <SECTIONS>
196				////////////////////// */
197				
198					// highlight search section in .section-nav
199					if ( $y < 100 ) {
200						$('.section-nav a.search').addClass('active');
201					}
202					
203					// loop through the home page sections
204					$('section').each(function() {
205
206						// get y-position for each home page section 
207						var thisTop = $(this).offset().top;
208
209						// Highlight the current section in the .section-nav
210						var theSection = $(this).attr('id');
211							
212						$viewHeight = $(this).height();
213						
214						// Add .scrolled class to section to fire CSS animations/transitions
215						if ( $y + 128 > thisTop ) {
216							$(this).addClass('scrolled');
217							$(this).children('header, .content-container').removeClass('hidden');
218						} //else if ( $y < thisTop ) {
219						// 	$(this).removeClass('scrolled');
220						// 	$(this).children('header, .content-container').addClass('hidden');
221						// }
222
223						// animate scroll to top of section
224						
225						// Based on viewport height
226						var yDetect;
227
228						// if the viewport is tall
229						if (height >= 700) {
230							yDetect = 640;
231						// if the viewport is short
232						} else {
233							yDetect = 380;
234						}
235
236						// if scrolling DOWN the page
237						if ( $y > lastScrollTop && $y > (thisTop - yDetect) && $y <= (thisTop) ) {
238							//$viewport.animate({ scrollTop: thisTop }, 500);
239							
240							// highlight the current section in .section-nav
241							$('.section-nav a').removeClass('active');
242							$('.section-nav a.' + theSection).addClass('active');
243
244						// if scrolling UP the page
245						} else if ( $y < lastScrollTop && $y < (thisTop + yDetect) && $y >= (thisTop) ) {
246							//$viewport.animate({ scrollTop: thisTop }, 500);
247
248							// highlight the current section in .section-nav
249							$('.section-nav a').removeClass('active');
250							$('.section-nav a.' + theSection).addClass('active');
251						}
252
253					});// /for each section
254			
255				
256
257				// reset "last scroll" position for scroll DIRECTION detection
258				lastScrollTop = $y;
259			
260			}; // /scrollHandler
261
262		}); // /window.load.resize
263		
264
265		$('#backToTop').click(function(e) {
266			$('body,html').animate({scrollTop: 0}, 1200);
267			$('.section-nav a').removeClass('active');
268			// e.preventDefault();
269		});
270
271
272		// Share show #socialmedialist
273		$('#socialShare').click(function(e) {
274			$('#socialmedialist').toggleClass('open');
275			e.preventDefault();
276		});
277
278
279		/* SETTINGS
280		///////////////////////////////////// */
281		var settings = localStorage.getItem('settings');
282
283		if (settings==null) {
284			localStorage.setItem('settings', 'default');
285			settings = 'default';
286		}
287
288		if (settings == 'highContrast') {
289			$('html').addClass('highContrast');
290		} else if (settings == 'textOnly') {
291			$('html').addClass('textOnly');
292		}
293
294
295		// Show Settings (Location, Style Switcher & Font Sizer)
296		$('a#toggleSettings, a#toggleLocation').click(function(e) {
297			
298			var $nav = $('body > header nav');
299			var $settings = $('#settings');
300
301			// Click location
302			if ( $(this).attr('title') == 'Location' && !$settings.hasClass('open') && !$settings.hasClass('settings') ) {
303				$settings.addClass('location open');
304				$nav.addClass('settingsOpen');
305			
306			} else if ( $(this).attr('title') == 'Location' && $settings.hasClass('open') && $settings.hasClass('settings') ) {
307				$settings.removeClass('settings').addClass('location');
308			
309			} else if ( $(this).attr('title') == 'Location' && $settings.hasClass('open') && $settings.hasClass('location') ) {
310				console.log("settings is open with the class of location");
311				$settings.removeClass('open location');
312				$nav.removeClass('settingsOpen');
313			
314			// Click settings
315			} else if ( $(this).attr('title') == 'Settings' && !$settings.hasClass('open') && !$settings.hasClass('location') ) {
316				$settings.addClass('open settings');
317				$nav.addClass('settingsOpen');
318			
319			} else if ( $(this).attr('title') == 'Settings' && $settings.hasClass('open') && $settings.hasClass('location') ) {
320				$settings.removeClass('location').addClass('settings');
321
322			} else if ( $(this).attr('title') == 'Settings' && $settings.hasClass('open') && $settings.hasClass('settings') ) {
323				$settings.removeClass('open settings');
324				$nav.removeClass('settingsOpen');
325			}
326			
327			e.preventDefault();
328		});
329
330
331		// Settings Style Switcher
332		$('.settings a').on('click', function(e) {
333			var setting = $(this).attr('class');
334			
335			$('html').removeClass('textOnly highContrast');
336			$('html').addClass(setting);
337			localStorage.setItem('settings', setting);
338
339			$('#settings a').removeClass('active');
340			$(this).addClass('active');
341			
342			e.preventDefault();
343		});
344
345
346
347		// Local Storage for Font size settings
348		var settings = localStorage.getItem('settings');
349
350		// If Default size
351		if (settings=='undefined' || settings=='default') {
352			$('#fontSizer .fontsize').removeClass('active');
353			$('#fontSizer .fontsize.default').addClass('active');
354			localStorage.setItem('settings', 'default');
355			settings = 'default';
356		}
357
358		// If Small size
359		if (settings == 'smallFont') {
360			$('#fontSizer .fontsize').removeClass('active');
361			$('#fontSizer .fontsize.small').addClass('active');
362			$('html').addClass('smallFont');
363		
364		// If Large size
365		} else if (settings == 'largeFont') {
366			$('#fontSizer .fontsize').removeClass('active');
367			$('#fontSizer .fontsize.large').addClass('active');
368			$('html').addClass('largeFont');
369		}
370
371		// Change/Set Font Size
372		$('#fontSizer .fontsize').on('click', function(e) {
373			var size = $(this).data('size');
374			
375			$('#fontSizer .fontsize').removeClass('active');
376			$(this).addClass('active');
377			
378			$('html').removeClass('largeFont smallFont');
379			$('html').addClass(size);
380			
381			localStorage.setItem('settings', size);
382			e.preventDefault();
383		});
384
385
386		// Click Outside Menu to close .drop-down
387		$(document).on('click', function(event) {
388			if (!$(event.target).closest('#main-header').length && $dropDown.parent('li').hasClass('open')) {
389				$dropDown.parent('li').removeClass('open');
390				$dropDown.slideUp();
391				$('nav#main-menu').removeClass('open-ie');
392			}
393		});
394
395
396		// Open Section Transparency Donut Chart
397		$('.transparency-donut path').on('click', function(e) {
398			var className = $(this).attr('class');
399			var theColor = $(this).attr('fill');
400			var listItem = $('li.' + className);
401
402			$('.transItem').removeClass('active').css('background', '');
403			listItem.addClass('active').css('background', theColor);
404		});
405
406	});// /(document).ready
407
408
409})(window.jQuery);
410
411
412//GET URL POST WORD (ANY) - Just pass getURLpost(anyterm) to retrieve from URL
413function getURLpost(term) {
414	var sPageURL = window.location.search.substring(1);
415	var sURLVariables = sPageURL.split('&');
416
417	for (var i = 0; i < sURLVariables.length; i++) {
418		var kword = sURLVariables[i].split('=');
419		if (kword[0] == term) return kword[1];
420	}
421}
422
423
424/*
425#### SHARING/SOCIAL MEDIA ####
426*/
427
428$(function(){
429	//GET AND MAKE PAGE TITLE URL FRIENDLY
430	var getPageTitle = $('html title').text();
431	var sharingTitle = encodeURIComponent(getPageTitle);
432	//console.log(sharingTitle);
433	$('#socialmedialist a').each(function() {
434		var sharelink = $(this).attr('href');
435		var sharelinkwithtitle = sharelink.replace('PAGE_TITLE', sharingTitle, 'g');
436		$(this).attr('href', sharelinkwithtitle);
437	});
438});