https://wvtourism.com/wp-content/themes/wvto-2019/js/scripts.js?ver=1790610733

1
2
3//Handle jQuery ready/load
4(function( root, $, undefined ) {
5	
6	// Force strict mode in the JS below
7	// More here - https://www.w3schools.com/js/js_strict.asp
8	"use strict";
9
10	// According to jQuery, the DOM is ready
11	$(function () {	
12		
13		
14		
15		//There are some elements we end up touching a lot, so let's make them global variables 
16		//This limits hitting the DOM over and over		
17		var htmlObject = $("html");		
18		var bodyObject = $("body");				
19		
20		if(navigator.userAgent.indexOf('MSIE')!==-1
21		|| navigator.appVersion.indexOf('Trident/') > -1){
22		   /* Microsoft Internet Explorer detected in. */
23			htmlObject.addClass("ie");
24			htmlObject.addClass("ie11");		   
25		}		
26		
27		$.fn.shuffleChildren = function() {
28			$.each(this.get(), function(index, el) {
29				var $el = $(el);
30				var $find = $el.children();
31		
32				$find.sort(function() {
33					return 0.5 - Math.random();
34				});
35		
36				$el.empty();
37				$find.appendTo($el);
38			});
39		};	
40		
41		$(".shuffle").shuffleChildren();	
42		
43		// Clean indication on the front-end that jQuery ran/loaded		
44		htmlObject.addClass("jquery");
45		
46		var h2List = $(".wp-block-group__inner-container h2:contains(#AlmostHeaven)");
47		if(h2List.length != 0){
48			if(!h2List[0].innerHTML.includes("</em>")){
49				h2List[0].innerHTML = h2List[0].innerHTML.replace("#AlmostHeaven", "<em>#AlmostHeaven</em>");				
50			}			
51		}
52	
53		$(".seasons video").hover(function(e){
54			var source = $(this).find("source");
55			var oldSource = source.attr("data-src");
56			source.attr("src",oldSource);
57			$(this).trigger("play");
58		});
59		
60		
61		var h1List = $(".home .hero-content h1, body.page-template-template-events .page-title h1")
62		if(h1List.length != 0){
63			if(h1List[0].innerHTML.includes("West Virginia")){
64				h1List[0].innerHTML = h1List[0].innerHTML.replace("West Virginia", '<span class="outline"a>West Virginia</span>');				
65			}			
66		}
67				
68		
69		// Simple JS wrapper for toggle classes on the body
70		// Anything with the [data-toggle] attribute will toggle the value of that attribute as a class on the <html>
71		$("*[data-toggle]").click(function(e){
72			e.preventDefault();
73			var classToToggle = $(this).attr("data-toggle");
74			htmlObject.toggleClass(classToToggle);
75		});
76		
77		//We usually start working here 
78		
79		//pageAssistance
80	    var toggles = $("#pageAssistance > a");
81	    toggles.click(function(e){
82	        e.preventDefault();
83	        toggles.removeClass("current");
84	        $(this).addClass("current");
85	        var scale = $(this).attr("data-size");
86	        bodyObject.css("zoom",scale);
87	        bodyObject.css("-moz-transform","scale("+scale+")");
88	    });
89	    
90/*
91		//If this is not a touch device, show the menus on hover
92	    var hoverToggles = $("html .header .lower .menu li");	
93	    hoverToggles.mouseenter(function(e){
94		    var hoveredItem = $(this);
95		    handle_menu_open(hoveredItem.attr("id"));
96	    });
97*/
98	    
99		//If this is a touch device, show the menus on click
100	    var touchToggles = $("html .header .lower .menu li");		        
101	    touchToggles.click(function(e){
102		    //e.preventDefault();
103		    var clickedItem = $(this);
104		    handle_menu_open(clickedItem.attr("id"));
105	    });	  
106	    
107		        
108	    $("main,footer,.header .upper").mouseenter(function(e){
109		    $("body").removeClass("menu-open");
110		    $("body").removeClass("mobile-panel-open");		    
111		    $("body").attr("menu-open",null);		    
112	    });	 
113	    
114	    //$("<div class='shadow shadow__left'></div><div class='shadow shadow__right'></div>").insertBefore(".cr__grid");
115	    //var listing_load_more = $(".listings-wall .arrow-cont a.button__arrow--load");
116	    var listing_load_more = document.querySelectorAll(".listings-wall .arrow-cont a.button__arrow--load");
117	    if(listing_load_more){
118		    $(listing_load_more).click(function(e){
119			   e.preventDefault();
120			   var listings_parent_list = $(this).closest(".listings-wall");
121			   var show_me = listings_parent_list.find(".cell.hidden").slice( 0, 6 );		   
122			   show_me.removeClass("hidden");
123			   var show_me_all = listings_parent_list.find(".cell.hidden");		   
124			   if(show_me_all.length==0){
125				   $(this).hide();
126			   }
127		    });	 		    
128	    }
129   	    
130   	    
131		var listing_slick = document.querySelectorAll('.slick-pics');
132		if(listing_slick){
133			$(listing_slick).slick({
134				infinite: true,

135				arrows: false,
136				dots: false,
137				autoplay: true,				
138/*
139				autoplay: true,
140				fade: true,
141				cssEase: 'linear'				
142				autoplaySpeed: 2000,
143*/				
144			});
145		}
146   	    
147
148		var post_slick = document.querySelectorAll('.pst-grid.slick');
149		if(post_slick){
150			$(post_slick).slick({
151				//dots: true,
152				infinite: true,
153				//speed: 300,
154// 				centerMode: true,
155				slidesToShow: 3,
156				slidesToScroll: 3,
157				prevArrow: '<button aria-label="Previous"><i class="fa lazyload" data-fa="long-arrow-left-light"></i></button>',
158				nextArrow: '<button aria-label="Next"><i class="fa lazyload" data-fa="long-arrow-right-light"></i></button>',
159				responsive: [
160				{
161				  breakpoint: 1000,
162				  settings: {
163				    slidesToShow: 3,
164				    slidesToScroll: 2,
165				  }
166				},
167				{
168				  breakpoint: 840,
169				  settings: {
170				    slidesToShow: 2,
171				    slidesToScroll: 2
172				  }
173				},
174				{
175				  breakpoint: 500,
176				  settings: {
177				    slidesToShow: 1,
178				    slidesToScroll: 1
179				  }
180				}]
181			});			
182		}
183
184		
185		var trans_arrow_buttons = document.querySelectorAll(".button__trans--arrow");
186		if(trans_arrow_buttons){
187			$(trans_arrow_buttons).append('<i class="lazyload" data-fa="long-arrow-right-light"></i>');			
188// 			$(trans_arrow_buttons).append('<img alt="" class="lazyload" data-src="/wp-content/themes/wvto-2019/img/long-arrow-right-light.svg"/>');			
189		}
190
191		$(".mobile-nav-left ul li a").click(function(e){
192			e.preventDefault();
193			
194			var currentPanel = $(this).attr("data-slide");
195			var linkHref = $(this).attr("data-link");			
196			var panelTitle = $(".mobile-nav-right .title span");
197			var panelTitleLink = $(".mobile-nav-right .title a");	
198			
199			panelTitleLink.attr("href",	linkHref);	
200			
201			htmlObject.addClass("mobile-panel-open");
202			htmlObject.attr("current-panel",currentPanel);		
203			
204			if(currentPanel=="do"){
205				panelTitle.text("Things to Do");
206			}
207			else if(currentPanel=="events"){
208				panelTitle.text("Road Trips");				
209			}
210			else if(currentPanel=="stay"){
211				panelTitle.text("Places to Stay");				
212			}
213			else if(currentPanel=="go"){
214				panelTitle.text("Places to Go");				
215			}
216			else if(currentPanel=="seasons"){
217				panelTitle.text("Seasons");				
218			}	
219			
220			play_visible_videos();														
221			
222		});
223		
224
225		
226		var post_slick = document.querySelectorAll('.listing-wall-container');
227		if(post_slick){
228			$(post_slick).slick({
229				infinite: true,
230				centerMode: true,
231			    slidesToShow: 3,
232			    slidesToScroll: 1,				
233				prevArrow: '<button aria-label="Previous"><i class="fa lazyload" data-fa="long-arrow-left-light"></i></button>',
234				nextArrow: '<button aria-label="Next"><i class="fa lazyload" data-fa="long-arrow-right-light"></i></button>',
235				responsive: [
236				// {
237				//   breakpoint: 3700,
238				//   settings: {
239				// 	infinite: true,
240				// 	centerMode: true,					  
241				//     slidesToShow: 5,
242				//     slidesToScroll: 1
243				//   }
244				// },					
245				// {
246				//   breakpoint: 1200,
247				//   settings: {
248				// 	infinite: true,
249				// 	centerMode: true,					  
250				//     slidesToShow: 2,
251				//     slidesToScroll: 1
252				//   }
253				// },
254				{
255				  breakpoint: 640,
256				  settings: {
257					infinite: true,
258					centerMode: true,					  					  
259				    slidesToShow: 1,
260				    slidesToScroll: 1
261				  }
262				}]
263			});	
264			
265			//$(post_slick).find(".slick-slide").css("opacity","1");
266			if($(post_slick).find(".slick-active").length > 1){
267				$(post_slick).find(".slick-active").first().css("opacity",".1");
268				$(post_slick).find(".slick-active").last().css("opacity",".1");								
269			}
270
271			
272			$(post_slick).on('afterChange', function(event, slick, currentSlide, nextSlide){
273				if($(post_slick).find(".slick-active").length > 1){
274					$(post_slick).find(".slick-active").css("opacity","1");
275					$(post_slick).find(".slick-active").first().css("opacity",".1");
276					$(post_slick).find(".slick-active").last().css("opacity",".1");						
277				}
278			
279			});
280						
281					
282		}
283		
284		$("video.hover").hover(function(){
285			var singleVideo = $(this)[0];
286			singleVideo.play();				
287		});
288		
289		$("video.hover").mouseout(function(){
290			var singleVideo = $(this)[0];
291			singleVideo.pause();				
292		});
293	
294
295	
296		window.checksize();
297		
298		
299		$(".schema-faq-section strong").click(function(e){
300			$(this).parent().toggleClass("open");
301		});		
302		
303		
304		var listingBlockSelects = $(".form-cont select");
305		listingBlockSelects.change(function(e){
306			
307			$(".form-cont select.active").removeClass("active");
308			$(this).addClass("active");
309			
310			$(".form-cont select").not(".active").val(0);
311			
312			
313			
314			var currentID = $(this).attr("id");
315			window.listingQuery = $(this).val();
316			// console.log(window.listingQuery);
317			
318			$(".listings-wall .card-cont").removeClass("hidden");	
319			// console.log(window.markers);
320			if(window.markers){

321				window.markers.forEach(function(pin){
322					pin.setVisible(true);
323				});			
324			}
325
326
327			
328			if(window.listingQuery != 0){				
329				
330				if(currentID == "city-select"){
331					$(".listings-wall .card-cont").not('[data-city="'+window.listingQuery+'"]').addClass("hidden");
332					
333					if(window.mapListings){
334
335						window.markers.forEach(function(pin){
336							pin.setVisible(false);
337						})
338						
339						window.markers.forEach(function(pin){
340							if(pin.city==window.listingQuery){
341								pin.setVisible(true);
342							}
343						})						
344						
345					}
346					
347				}
348				if(currentID == "county-select"){
349					$(".listings-wall .card-cont").not('[data-county="'+window.listingQuery+'"]').addClass("hidden");
350					
351					if(window.mapListings){
352					
353						window.markers.forEach(function(pin){
354							pin.setVisible(false);
355						})
356						
357						window.markers.forEach(function(pin){
358							if(pin.county==window.listingQuery){
359								pin.setVisible(true);
360							}
361						})					
362						
363					}					
364					
365				}
366				if(currentID == "region-select"){
367					$(".listings-wall .card-cont").not('[data-region="'+window.listingQuery+'"]').addClass("hidden");
368					
369					if(window.mapListings){
370					
371						window.markers.forEach(function(pin){
372							pin.setVisible(false);
373						})
374						
375						window.markers.forEach(function(pin){
376							if(pin.region==window.listingQuery){
377								// pin.map = window.mapListings;
378								pin.setVisible(true);
379							}
380						})						
381						
382					}						
383					
384				}					
385				
386			}
387			
388		
389			
390			
391		});
392			
393
394	});
395
396} ( this, jQuery ));
397
398window.cr_handled = false;
399
400window.setupCR = function(){
401	
402	var crowdriff_script = document.querySelectorAll('body.home #cr__app.cr__gallery');
403
404	if(crowdriff_script.length > 0 && !$(crowdriff_script).hasClass("loaded")){		
405		
406		$(crowdriff_script).addClass("loaded");			
407		
408		$(crowdriff_script).parent().prepend('<div class="cr-controls"><i class="lazyload" data-fa="long-arrow-left-light"></i><i class="lazyload" data-fa="long-arrow-right-light"></i></div>');
409
410
411		var grid_obj = $("article #cr__app .cr__grid");
412		grid_obj.data("margin-left",0);
413		
414		var nudge = window.innerWidth/3;
415
416		$('.cr-controls i[data-fa="long-arrow-left-light"]').click(function(){
417			
418			var current_left = grid_obj.data("margin-left");
419			
420			if(current_left!=0){
421				var new_left = current_left+nudge;		
422				$("article #cr__app .cr__grid").css("margin-left",new_left+"px");
423				grid_obj.data("margin-left",new_left);					
424			}
425			else{
426				var arrow_obj = $(this);
427				arrow_obj.addClass("negative");
428				setTimeout(function(){ 
429					arrow_obj.removeClass("negative");
430				}, 200);						
431			}
432
433		});
434		$('.cr-controls i[data-fa="long-arrow-right-light"]').click(function(){
435			
436			var current_left = grid_obj.data("margin-left");		
437			
438			if(Math.abs(current_left-nudge) < window.innerWidth*3){
439				var new_left = current_left-nudge;					
440				$("article #cr__app .cr__grid").css("margin-left",new_left+"px");
441				grid_obj.data("margin-left",new_left);								
442			}
443			else{
444				var arrow_obj = $(this);
445				arrow_obj.addClass("negative");
446				setTimeout(function(){ 
447					arrow_obj.removeClass("negative");
448				}, 200);						
449			}			
450			
451
452			
453									
454		});		
455		
456	}	
457	
458	
459		
460}
461
462function throttle(fn, wait) {
463	
464	var time = Date.now();
465	
466	return function() {
467		if ((time + wait - Date.now()) < 0) {
468			fn();
469			time = Date.now();
470		}
471	}
472	
473}
474
475
476window.html_element = $("html");
477window.body_element = $("body");
478window.checksize = function(){	
479
480	//Desktop
481	if(window.innerWidth > 1023){
482		
483		
484		if(html_element.hasClass("mobile-menu")){
485			window.html_element.removeClass("mobile-menu");
486			window.html_element.removeClass("mobile-panel-open");			
487			window.html_element.attr("current-panel","");					
488		}
489		
490		window.html_element.addClass("desktop");
491		window.html_element.removeClass("mobile");					
492
493	}
494	else{
495		//Mobile			
496		window.html_element.removeClass("desktop");
497		window.html_element.addClass("mobile");			
498		window.body_element.attr("menu-open",0);	
499		
500	}
501	
502}
503window.addEventListener('resize', throttle(window.checksize, 75));	
504
505
506
507window.addEventListener('cr__tracking', function(){
508	window.addEventListener('scroll', throttle(window.setupCR, 1000));	
509});
510
511
512function play_visible_videos(){
513	
514	//Draw focus to the first A tag to allow use via keyboard	
515	var videosToPlay = $(".mega-menu div:visible").find("video");
516	
517	if(videosToPlay){
518		
519		
520		
521		//Autoplay everything
522		if($("html").hasClass("mobile")){
523			videosToPlay.each(function(e){
524				var singleVideo = $(this)[0];
525				singleVideo.play();				
526			});			
527		}
528		else{
529			videosToPlay.each(function(e){
530				if(!$(this).hasClass("hover")){
531					var singleVideo = $(this)[0];
532					singleVideo.play();				
533				}
534			});				
535		}
536		
537		
538	}
539
540}
541
542
543function handle_menu_open(id){
544	
545	var body_object = document.getElementsByTagName("body");
546	$(body_object).addClass("menu-open");
547	$(body_object).attr("menu-open",id);	
548	play_visible_videos();
549
550}
551
552function setup_map(){
553
554	console.log("setup_map");
555	
556	var region_name = $(".mega-menu .map h4");
557	console.log(region_name);
558	
559	var region_array = {
560		mc : "Mountaineer Country",
561		np : "Northern Panhandle",

562		ml : "Mountain Lakes",
563		mo : "Mid-Ohio Valley",
564		mv : "Metro Valley",
565		hm : "Hatfield-Mccoy Mountains",		
566		ep : "Eastern Panhandle",
567		nr : "New River / Greenbrier Valley",
568		ph : "Potomac Highlands"																								
569	};	
570	console.log("region_array");	
571	
572	
573	jQuery(".mobile .mega-menu .map svg path").click(function(e){
574
575		var hovered_d = $(this).attr("id");
576
577		var go = jQuery(".mobile .mega-menu .map a");
578
579		jQuery('.map h4').text(region_array[hovered_d]);
580			
581		switch(hovered_d) {
582			case "hm":
583				// code block
584				go.attr("href",'/places-to-go/travel-regions/hatfield-mccoy-mountains/');
585				break;				
586			case "mc":
587				// code block
588				go.attr("href","/places-to-go/travel-regions/mountaineer-country/");
589				break;
590			case "np":
591				// code block
592				go.attr("href","/places-to-go/travel-regions/northern-panhandle/");				
593				break;
594			case "ml":
595				// code block
596				go.attr("href","/places-to-go/travel-regions/mountain-lakes/");				
597				break;
598			case "mo":
599				// code block
600				go.attr("href",'/places-to-go/travel-regions/mid-ohio-valley/');				
601				break;
602			case "mv":
603				// code block
604				go.attr("href",'/places-to-go/travel-regions/metro-valley/');								
605				break;
606			case "ep":
607				// code block
608				go.attr("href",'/places-to-go/travel-regions/eastern-panhandle/');												
609				break;
610			case "nr":
611				// code block
612				go.attr("href",'/places-to-go/travel-regions/new-river-greenbrier-valley/');																
613				break;
614			case "ph":
615				// code block
616				go.attr("href",'/places-to-go/travel-regions/potomac-highlands/');																				
617				break;												
618			default:
619				// code block				
620		}	
621		
622		console.log("mobile");			
623		
624					
625	});	 	
626	
627	jQuery(".desktop .mega-menu .map svg path").hover(function(e){
628		var hovered_d = $(this).attr("id");
629
630		
631		// conditionall to correct inconsistent data
632										
633		jQuery('.map h4').text(region_array[hovered_d]);
634
635
636						
637	});	 
638	
639	jQuery(".desktop .mega-menu .map svg path").click(function(e){
640		
641		var hovered_d = $(this).attr("id");
642		
643		switch(hovered_d) {
644			case "hm":
645				// code block
646				window.location = '/places-to-go/travel-regions/hatfield-mccoy-mountains/';
647				break;				
648			case "mc":
649				// code block
650				window.location = "/places-to-go/travel-regions/mountaineer-country/";
651				break;
652			case "np":
653				// code block
654				window.location = "/places-to-go/travel-regions/northern-panhandle/";				
655				break;
656			case "ml":
657				// code block
658				window.location = "/places-to-go/travel-regions/mountain-lakes/";					
659				break;
660			case "mo":
661				// code block
662				window.location = '/places-to-go/travel-regions/mid-ohio-valley/';				
663				break;
664			case "mv":
665				// code block
666				window.location = '/places-to-go/travel-regions/metro-valley/';								
667				break;
668			case "ep":
669				// code block
670				window.location = '/places-to-go/travel-regions/eastern-panhandle/';												
671				break;
672			case "nr":
673				// code block
674				window.location = '/places-to-go/travel-regions/new-river-greenbrier-valley/';																
675				break;
676			case "ph":
677				// code block
678				window.location = '/places-to-go/travel-regions/potomac-highlands/';																				
679				break;												
680			default:
681				// code block				
682		}		
683					
684		
685	});	 	
686	
687}
688
689// Lazyload background images
690// Requires the LazySizes library, which should be loaded in functions.php
691document.addEventListener('lazybeforeunveil', function(e){
692	
693    var bg = e.target.getAttribute('data-bg');
694    if(bg){
695        e.target.style.backgroundImage = 'url(' + bg + ')';
696    }
697    
698    var fa = e.target.getAttribute('data-fa');
699    if(fa){
700		var request = new XMLHttpRequest();
701		request.open('GET', '/wp-content/themes/wvto-2019/img/'+fa+".svg", true);
702		
703		request.onload = function() {
704		  if (this.status >= 200 && this.status < 400) {
705		    // Success!
706		    e.target.innerHTML = this.response;
707		    //console.log(this.response);
708		    var callback = e.target.getAttribute("callback");
709		    if(callback){
710			    window[callback].call();
711		    }
712		  } else {
713		    // We reached our target server, but it returned an error
714		  }
715		};
716		
717		request.onerror = function() {
718		  // There was a connection error of some sort
719		};
720		

721		request.send();        
722    }     
723    
724    var loader = e.target.getAttribute('data-load');
725    if(loader){
726		var request = new XMLHttpRequest();
727		request.open('GET', loader, true);
728		
729		request.onload = function() {
730		  if (this.status >= 200 && this.status < 400) {
731		    // Success!
732		    e.target.innerHTML = this.response;
733		    var callback = e.target.getAttribute("callback");
734		    if(callback){
735			    window[callback].call();
736		    }
737		  } else {
738		    // We reached our target server, but it returned an error
739		  }
740		};
741		
742		request.onerror = function() {
743		  // There was a connection error of some sort
744		};
745		
746		request.send();        
747    }    
748    
749});