1/* 2 * Bones Scripts File 3 * Author: Eddie Machado 4 * 5 * This file should contain any js scripts you want to add to the site. 6 * Instead of calling it in the header or throwing it inside wp_head() 7 * this file will be called automatically in the footer so as not to 8 * slow the page load. 9 * 10 * There are a lot of example functions and tools in here. If you don't 11 * need any of it, just remove it. They are meant to be helpers and are 12 * not required. It's your world baby, you can do whatever you want. 13*/ 14 15 16/* 17 * Get Viewport Dimensions 18 * returns object with viewport dimensions to match css in width and height properties 19 * ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript ) 20*/ 21function updateViewportDimensions() { 22 var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight; 23 return { width:x,height:y }; 24} 25// setting the viewport width 26var viewport = updateViewportDimensions(); 27 28 29/* 30 * Throttle Resize-triggered Events 31 * Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile. 32 * ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed ) 33*/ 34var waitForFinalEvent = (function () { 35 var timers = {}; 36 return function (callback, ms, uniqueId) { 37 if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; } 38 if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); } 39 timers[uniqueId] = setTimeout(callback, ms); 40 }; 41})(); 42 43// how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok. 44var timeToWaitForLast = 100; 45 46 47/* 48 * Here's an example so you can see how we're using the above function 49 * 50 * This is commented out so it won't work, but you can copy it and 51 * remove the comments. 52 * 53 * 54 * 55 * If we want to only do it on a certain page, we can setup checks so we do it 56 * as efficient as possible. 57 * 58 * if( typeof is_home === "undefined" ) var is_home = $('body').hasClass('home'); 59 * 60 * This once checks to see if you're on the home page based on the body class 61 * We can then use that check to perform actions on the home page only 62 * 63 * When the window is resized, we perform this function 64 * $(window).resize(function () { 65 * 66 * // if we're on the home page, we wait the set amount (in function above) then fire the function 67 * if( is_home ) { waitForFinalEvent( function() { 68 * 69 * // update the viewport, in case the window size has changed 70 * viewport = updateViewportDimensions(); 71 * 72 * // if we're above or equal to 768 fire this off 73 * if( viewport.width >= 768 ) { 74 * console.log('On home page and window sized to 768 width or more.'); 75 * } else { 76 * // otherwise, let's do this instead 77 * console.log('Not on home page, or window sized to less than 768.'); 78 * } 79 * 80 * }, timeToWaitForLast, "your-function-identifier-string"); } 81 * }); 82 * 83 * Pretty cool huh? You can create functions like this to conditionally load 84 * content and other stuff dependent on the viewport. 85 * Remember that mobile devices and javascript aren't the best of friends. 86 * Keep it light and always make sure the larger viewports are doing the heavy lifting. 87 * 88*/ 89 90/* 91 * We're going to swap out the gravatars. 92 * In the functions.php file, you can see we're not loading the gravatar 93 * images on mobile to save bandwidth. Once we hit an acceptable viewport 94 * then we can swap out those images since they are located in a data attribute. 95*/ 96function loadGravatars() { 97 // set the viewport using the function above 98 viewport = updateViewportDimensions(); 99 // if the viewport is tablet or larger, we load in the gravatars 100 if (viewport.width >= 768) { 101 jQuery('.comment img[data-gravatar]').each(function(){ 102 jQuery(this).attr('src',jQuery(this).attr('data-gravatar')); 103 }); 104 } 105} // end function 106 107 108/* 109 * Put all your regular jQuery in here. 110*/ 111jQuery(document).ready(function($) { 112 113 /* 114 * Let's fire off the gravatar function 115 * You can remove this if you don't need it 116 */ 117 loadGravatars(); 118 119 // ---------------------------- 120 // Responsive menu 121 // ---------------------------- 122 $('.btn-menu').on('click', function (ev) { 123 ev.preventDefault(); 124 var width_page = $(document).width(); 125 if(width_page <= 992) { 126 $("#menu").slideToggle('slow'); 127 $("#menu").toggleClass('open'); 128 } 129 }); 130 $('.menu-item-has-children > a').on('click', function (ev) { 131 ev.preventDefault(); 132 var width_page = $(document).width(); 133 if(width_page <= 992) { 134 $(this).siblings('ul').slideToggle('slow'); 135 $(this).siblings('ul').toggleClass('open'); 136 } 137 }); 138 // -------- Ends Responsive menu ----------- 139 140 /* Galeria */ 141 $( "#gallery-2 a img" ).each(function() { 142 var url_img = $(this).attr('src'); 143 $(this).parents('.gallery-item').attr('style', 'background: url(' + url_img + ') center no-repeat; background-size: cover; height: 300px;'); 144 $(this).parents('.gallery-item').wrap( "<a href='" + url_img + "' class='thumbnail' rel='img-galeria'></a>" ); 145 $(this).parents('dt').remove(); 146 $("#gallery-2 br").remove(); 147 }); 148 $('.gallery').slick({ 149 dots: true, 150 infinite: false, 151 slidesToShow: 3, 152 slidesToScroll: 3, 153 dots: false, 154 responsive: [ 155 { 156 breakpoint: 1024, 157 settings: { 158 slidesToShow: 2, 159 slidesToScroll: 2, 160 infinite: true, 161 dots: true 162 } 163 }, 164 { 165 breakpoint: 768, 166 settings: { 167 slidesToShow: 1, 168 slidesToScroll: 1 169 } 170 } 171 ] 172 }); 173 174}); /* end of as page load scripts */
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.