https://www.manhattanchristian.org/pro/themes/wycliffe/js/custom.js

1// Custom JS for Wycliffe Signature Theme
2
3// search icon
4
5if ($(window).width() < 767){
6	$('.search_icon').click(function(){
7		
8		$('.info_icon').children('a').removeClass('active');
9		$('.info_dropdown').removeClass('active');
10		
11		$('.search_form_container').toggleClass('open');
12		$(this).toggleClass('open');
13	});
14}
15
16// mobile togglemenu 
17$('.togglemenu').click(function(){
18	$('#topnav').slideToggle();
19	$('html').toggleClass('open_nav');
20});
21
22$('.subnav_toggle').click(function(){
23	$(this).parent().siblings().find('.drop_level2_wrapper').slideUp();
24	$(this).parent().siblings().find('.subnav_toggle').removeClass('open');
25	$(this).parent().children('.drop_level2_wrapper').slideToggle();
26	$(this).toggleClass('open');
27});
28
29// open info dropdown on mobile
30if ( $(window).width() < 767 ){
31	$('.info_icon').children('a').click(function(){
32		
33		$('.search_form_container').removeClass('open');
34		$('.search_icon').removeClass('open');
35		
36		$('.info_dropdown').toggleClass('active');
37		$(this).toggleClass('active');
38	});
39}
40
41// Meta (Facebook) plugin embeds
42// Facebook renders these iframes server side at the pixel size in the src query
43// string and clips to it, so unlike YouTube they cannot be made fluid with CSS -
44// widening the frame only reveals dead space, narrowing it crops the video.
45// Ask Facebook for a render at the container width instead, which keeps the
46// iframe's layout box and the video Facebook draws inside it the same size.
47(function(){
48	var MIN_WIDTH = 220;	// Meta's supported range for the video plugin
49	var MAX_WIDTH = 1280;
50	var TOLERANCE = 20;		// don't reload the frame over a few pixels
51
52	var $frames = $('.inside_page iframe[src*="facebook.com/plugins"]');
53	if ( !$frames.length ){ return; }
54
55	// Embeds inside a collapsed expand/collapse tool measure 0, so walk up to
56	// the first ancestor that has actually been laid out.
57	function availableWidth(frame){
58		var el = frame.parentNode;
59		while ( el && el.clientWidth === 0 ){ el = el.parentNode; }
60		if ( !el || !el.clientWidth ){ return 0; }
61
62		var style = window.getComputedStyle(el);
63		return Math.floor(el.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight));
64	}
65
66	// Re-request the plugin at the given width. This reloads the frame, so it
67	// only runs when the size is actually wrong by more than TOLERANCE.
68	function render(frame){
69		var $frame = $(frame);
70		var natural = $frame.data('metaNatural');
71		var width = Math.min(Math.max(availableWidth(frame) || natural.w, MIN_WIDTH), MAX_WIDTH);
72
73		if ( Math.abs(width - (parseInt($frame.attr('width'), 10) || 0)) <= TOLERANCE ){ return; }
74
75		var height = Math.round(width * natural.h / natural.w);
76
77		$frame.attr({width: width, height: height})
78			.attr('src', $frame.attr('src')
79				.replace(/([?&]width=)\d+/, '$1' + width)
80				.replace(/([?&]height=)\d+/, '$1' + height));
81	}
82
83	$frames.each(function(){
84		$(this).data('metaNatural', {
85			w: parseInt($(this).attr('width'), 10) || 560,
86			h: parseInt($(this).attr('height'), 10) || 314
87		});
88		render(this);
89	});
90
91	var resizeTimer;
92	$(window).on('resize', function(){
93		clearTimeout(resizeTimer);
94		resizeTimer = setTimeout(function(){
95			$frames.each(function(){ render(this); });
96		}, 250);
97	});
98}());