https://www.barcelonaaldia.com/wp-content/themes/baskerville-2-wpcom/js/global.js?ver=7.1.3

1/**
2 * Theme functions file
3 *
4 *
5 */
6
7(function($) {
8
9	// posts block for Masonry
10	var $blocks = $('#posts');
11
12	$( document ).ready( function( $ ) {
13		/**
14		 * Initial Masonry setup
15		 */
16
17		// Determine text direction
18		var ltr = true;
19		if ( $('html' ).attr( 'dir' ) == 'rtl') {
20			ltr = false;
21		}
22
23		// fire up Masonry!
24		$blocks.imagesLoaded( function() {
25			$blocks.masonry({
26				columnWidth: 1,
27				itemSelector: '.post-container',
28				transitionDuration: 0,
29				isOriginLeft: ltr,
30			} ).masonry( 'layout' );
31
32			var masonryChild = $blocks.find( '.post-container' );
33
34			// Animating JS based off Huntt theme
35			masonryChild.each( function( i ) {
36				// Show content
37				setTimeout( function() {
38					masonryChild.eq( i ).addClass( 'post-loaded fade-in' );
39				}, 100 * ( i + 1 ) );
40			} );
41
42			$( '#spinner' ).fadeOut( 250, function() {
43				$( this ).remove();
44			} );
45		} );
46
47		// Flexslider for Gallery posts
48		$( ".flexslider" ).flexslider( {
49			animation: "slide",
50			controlNav: false,
51			prevText: "Previous",
52			nextText: "Next",
53			smoothHeight: false,
54			startAt : 1, // make sure order reflects order in gallery format
55		} );
56
57		/**
58		 * Masonry update after Infinte Scroll
59		 * JS based off Huntt theme
60		 */
61
62		$( document.body ).on( 'post-load', function() {
63
64			// make sure we're only grabbing new posts
65			var newEl = $blocks.children().not( '.post-loaded, span.infinite-loader' ).addClass( 'post-loaded' );
66
67			// create function for refreshing Masonry
68			function refreshMasonry() {
69				$blocks.masonry('reloadItems').masonry( 'layout' );
70			}
71
72			// check if images loaded in these new posts
73			newEl.imagesLoaded( function () {
74
75				console.log( newEl );
76
77				// if images loaded, add new posts and update masonry layout
78				$blocks.masonry( 'appended', newEl, true ).masonry('reloadItems').masonry( 'layout' );
79
80				// reinitialize flexslider for new posts, and re-run masonry when complete
81				$( ".flexslider" ).flexslider( {
82					animation: "slide",
83					controlNav: false,
84					prevText: "Previous",
85					nextText: "Next",
86					smoothHeight: false,
87					startAt : 1,
88					start: refreshMasonry, // reload masonry layout on finish, just in case flexslider was slow
89				} );
90
91
92				newEl.delay( 500 ).each( function( i ) {
93					// then have a small delay between displaying each post
94					setTimeout( function() {
95						newEl.eq( i ).addClass( 'fade-in' );
96					}, 200 * ( i + 1 ) );
97				} );
98
99			} );
100
101			// reloading masonry layout again, after delay
102			// fixes edge case issue with Facebook embed reloading and messing up layout
103			setTimeout( refreshMasonry, 3000 );
104		} );
105
106
107		/**
108		 * Enables menu toggle for small screens
109		 */
110
111		( function() {
112			var nav = $( '.navigation' ), button, menu;
113			if ( ! nav ) {
114				return;
115			}
116
117			button = nav.find( '.nav-toggle' );
118			if ( ! button ) {
119				return;
120			}
121
122			// Hide button if menu is missing or empty.
123			menu = nav.find( '.main-navigation' );
124			if ( ! menu || ! menu.children().length ) {
125				button.hide();
126				return;
127			}
128
129			button.on( 'click.baskerville', function() {
130				nav.toggleClass( 'toggled-on' );
131				$( this ).toggleClass( "active" );
132				$( ".main-navigation" ).slideToggle();
133			} );
134
135			// Fix sub-menus for touch devices.
136			if ( 'ontouchstart' in window ) {
137				menu.find( '.has-children > a, .page_item_has_children a' ).on( 'touchstart.baskerville', function( e ) {
138					var el = $( this ).parent( 'li' );
139
140					if ( ! el.hasClass( 'focus' ) ) {
141						e.preventDefault();
142						el.toggleClass( 'focus' );
143						el.siblings( '.focus' ).removeClass( 'focus' );
144					}
145				} );
146			}
147
148			// Better focus for hidden submenu items for accessibility.
149			menu.find( 'a' ).on( 'focus.baskerville blur.baskerville', function() {
150				$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
151			} );
152
153		} )();
154
155
156		// Makes "skip to content" link work correctly in IE9 and Chrome for better
157		// accessibility.
158
159		// @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
160
161		$( window ).on( 'hashchange.baskerville', function() {
162			var hash = location.hash.substring( 1 ), element;
163			if ( ! hash ) {
164				return;
165			}
166			element = document.getElementById( hash );
167			if ( element ) {
168				if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
169					element.tabIndex = -1;
170				}
171				element.focus();
172				// Repositions the window on jump-to-anchor to account for header height.
173				window.scrollBy( 0, -80 );
174			}
175		} );
176
177
178		// Toggle search form
179
180		var toggleSwitch = $( ".search-toggle" ),
181			slideContainer = $( '.header-search-block' ),
182			slideContainerOpen = false,
183			lastFocus = document.activeElement,
184			escapeKey = 27;
185
186		toggleSwitch.on( "click", function() {
187			$( this ).toggleClass( "active" );
188			$( ".header-search-block" ).slideToggle();
189			$( ".header-search-block .search-field" ).focus();
190			return false;

191		} );
192
193		// Smooth scroll to header
194		$( '.tothetop' ).click( function() {
195			$( 'html, body' ).animate( {
196				scrollTop: 0
197			}, 500 );
198			$( this ).unbind( "mouseenter mouseleave" );
199			return false;
200		} );
201
202
203		// Add 'focus' style to search bar and comment inputs
204		$('.wrapper .search-form input, .footer .search-form input').focus( function() {
205		  	$( this ).closest( 'form' ).addClass( 'focus' );
206		} ).blur( function() {
207			$( this ).closest( 'form' ).removeClass( 'focus' );
208		} );
209
210		$('.comment-form-author input, .comment-form-email input, .comment-form-url input').focus( function() {
211		  	$( this ).parent().addClass( 'focus' );
212		} ).blur( function() {
213			$( this ).parent().removeClass( 'focus' );
214		} );
215
216
217		// Detect CSS3 Transform support in browsers
218		var supports = ( function() {
219			var div = document.createElement( 'div' ),
220			    vendors = 'Khtml Ms O Moz Webkit'.split( ' ' ),
221			    len = vendors.length;
222
223			return function( prop ) {
224				if ( prop in div.style ) {
225					return true;
226				}
227
228				prop = prop.replace( /^[a-z]/, function( val ) {
229					return val.toUpperCase();
230				} );
231
232				while ( len-- ) {
233					if ( vendors[len] + prop in div.style ) {
234						return true;
235					}
236				}
237				return false;
238			};
239		} ) ();
240
241		if ( supports( 'transform' ) ) {
242			// Add a css-transform class to the html element
243			document.documentElement.className += ' css-transform';
244		}
245
246
247		// To add placeholder text to header search in IE9
248		// based on https://gist.github.com/samgro/823300
249		if ( navigator.appVersion.indexOf( "MSIE 9." ) !=-1 ) {
250			$( '[placeholder]' ).focus( function() {
251				var input = $( this );
252				if ( input.hasClass( 'placeholder' ) ) {
253					input.val( '' );
254					input.removeClass( 'placeholder' );
255				}
256			} ).blur( function() {
257				var input = $( this );
258				if ( input.val() === '' ) {
259					input.addClass( 'placeholder' );
260					input.val( input.attr( 'placeholder' ) );
261				}
262			} ).blur().parents( 'form' ).submit( function() {
263				$( this ).find( '[placeholder]' ).each( function() {
264					var input = $( this );
265					if ( input.hasClass( 'placeholder' ) ) {
266						input.val( '' );
267					}
268				} );
269			} );
270
271			// Clear input on refresh so that the placeholder class gets added back
272			$( window ).unload( function() {
273				$( '[placeholder]' ).val( '' );
274			} );
275		}
276	} );
277} )( jQuery );