/* index.js ======== This file contains anything related to the home page for the edale theme. Anything animation specific is instead in js/global-animation.js or js/home-animation.js https://docs.google.com/document/d/19OR8ot3V48Xxy0T7NKPwuxVHY60Q5cejE3cCetNzZxQ/edit */ /* FUNCTIONS ========= fCorrectProductNamesHeight() - Sets the height of the product-name fSlideshowInit() - Initalises the slideshow fLoadNextSlide() - Loads the next slide in the slideshow */ /* VARIABLES ========= */ // Store all the slides (slideshow) var aSlideshowSlides = []; // Store the current slide var nCurrentSlide = 0; // Store the next slide index var nNextSlide = 0; // Store the slide timer in ms var nSlideTimeBeforeChange = 5000; /* On Document Loaded ================== Called by Jquery event handler when the document is ready (When content has been loaded) */ $( document ).ready( function() { // For some reason the basket inner has padding that fucks with the theme when only the slideshow is enabled. So fix this on the homepage by setting padding to 0, // we don't do this in the css as we don't want to fuck with the syling as it may be there for a reason $("#dialogAddToBasket_Inner").css( "padding", 0 ); // Initalise the slideshow fSlideshowInit(); // Set sizes of product-name div fCorrectProductNamesHeight(); fCorrectProductImageHeight(); // If we don't have the slideshow element if( !$(".slider-wrapper").length ) { // Set the height of the relative container $(".header-relative").css( { display : "block", height : $(".header").outerHeight(true) + "px" } ); } // On window resize $(window).resize(function() { // Set sizes of product-name div fCorrectProductNamesHeight(); fCorrectProductImageHeight(); }); }); /* fCorrectProductNamesHeight() ============================ */ function fCorrectProductNamesHeight() { // Store the product names var oProductNames = $(".product-name"); // If are are on a screen that is greater than bootstrap small if( $(window).width() > 767 ) { // Store the biggest height var nHeight = 0; // Loop through all product names oProductNames.each( function() { // Store this elements height var nElementHeight = $(this).outerHeight(true); // If this product's name is bigger than the store heigh if( nElementHeight > nHeight ) { // Set the elements height nHeight = nElementHeight; } }); // Loop through all product names oProductNames.each( function() { // Store this elements height var nElementHeight = $(this).outerHeight(true); // If the element height is not equal to the max height if( nElementHeight != nHeight ) { // Store the marin bottom amount var nElementMarginBottom = nHeight - nElementHeight; // Set the margin bottom to the required space $(this).css( { marginBottom : nElementMarginBottom + "px" } ); } }); } // If we are on bootstrap sm, then we don't need to adjust the size else { // Loop through all product names oProductNames.each( function() { // Set the margin bottom to the required space $(this).css( { marginBottom : "0px" } ); }); } } /* fCorrectProductImageHeight() ============================ */ function fCorrectProductImageHeight() { // If the global variable (Of which is set in home_inc-layout) is set to false, then // dont do any of the height adjustment calculations because everything should be square. if( !bShouldCorrectProductImageHeight) { return false; } // Store the product image wrappers var oProductImageWrapper = $(".product-image-wrapper"); // If are are on a screen that is greater than bootstrap small if( $(window).width() > 991 ) { // Store the max height, there is a max of 4 rows for this theem so initalise the valuesm this will store // the height of the biggest image on var aRowMaxHeights = [0, 0, 0, 0]; // Store the height index var nHeight_Index = 0; // Store the current product count var nProductCount = 0; // Loop through all the products oProductImageWrapper.each( function() { // Increment product count nProductCount++; // Store this elements height var nElementHeight = $(this).outerHeight(false); // If this product's name is bigger than the store heigh if( nElementHeight > aRowMaxHeights[nHeight_Index] ) { // Set the elements height aRowMaxHeights[nHeight_Index] = nElementHeight; } // If we are on the 3rd product if( nProductCount % 3 == 0 ) { // Move onto the next row nHeight_Index++; } }); // Reset everything nHeight_Index = 0; nProductCount = 0; // Loop through all the products again oProductImageWrapper.each( function() { // Increment product count nProductCount++; // Store this elements height var nElementHeight = $(this).outerHeight(false); // If the element height is not equal to the max height if( nElementHeight != aRowMaxHeights[nHeight_Index] || (nElementHeight - 20) != aRowMaxHeights[nHeight_Index] ) { // Store the marin bottom amount var nElementMarginBottom = aRowMaxHeights[nHeight_Index] - nElementHeight + 20; // Set the margin bottom to the required space $(this).first().css( { marginBottom : nElementMarginBottom + "px" } ); } // If we are on the 3rd product if( nProductCount % 3 == 0 ) { // Move onto the next row nHeight_Index++; } }); } // If we are on mobile else { // Loop through all the products again oProductImageWrapper.each( function() { // Set the margin bottom to the required space $(this).first().css( { marginBottom : "0px" } ); }); } } /* fSlideshowInit() ================ Initalises the slideshow by pre-loading images and storing all slideshow elements in an array */ function fSlideshowInit() { // Store itteration index var nIntterationIndex = 0; // Load all the slides $(".slide").each( function() { // Add this slide to the array aSlideshowSlides.push( $(this) ); // If this is the first slide if( nIntterationIndex == 0 ) { // Store the current slide nCurrentSlide = nIntterationIndex; // Add the active class to the slideshow $("#slide-" + nCurrentSlide ).addClass("slideshow-slide-active"); // Add the active class to the slideshow $("#slide-" + nCurrentSlide ).addClass("slide-initial"); } // Increment the index nIntterationIndex++; }); // If we have more than one slide in the slideshow the lets start it, otherwise we don't have to do anything if( nIntterationIndex > 1 ) { // Set timeout setTimeout(function () { // Load the next slide fLoadNextSlide(); }, nSlideTimeBeforeChange); } } /* fLoadNextSlide() ================= Loads the next slide in the slideshow sequence by adding / removing slideshow-slide-active */ function fLoadNextSlide() { // Store the new slide index nNextSlide = nCurrentSlide + 1; // If we are currently on the last slide if( nNextSlide >= aSlideshowSlides.length ) { // Show the first slide nNextSlide = 0; } // Set the opacity of the new slide $("#slide-" + nNextSlide ).css( { opacity : 0 } ); // Add the active class to the slideshow $("#slide-" + nNextSlide ).addClass("slideshow-slide-active"); // Fade the current slide out $("#slide-" + nCurrentSlide ).fadeTo(2000, 0); // Fade the new slide in $("#slide-" + nNextSlide ).fadeTo( 2000, 1, function() { // Remove the active status from the old slide $("#slide-" + nCurrentSlide ).removeClass("slideshow-slide-active"); // Update the index nCurrentSlide = nNextSlide; }); // Set timeout setTimeout(function () { // Load the next slide after time fLoadNextSlide(); }, nSlideTimeBeforeChange); }