alienReyes
3/30/2018 - 8:57 PM
Product slider main
Product slide for
//@ts-check
$(document).ready(function(){
//Mobile Footer Nav Items Collapse
$(".footer h2").click(function(){
$(this).parent(".footer-nav").toggleClass("open");
$('html, body').animate({ scrollTop: $(this).offset().top - 170 }, 1500 );
});
/*
* Function to update the progress bars to match the carousel interval.
* Author: krievley
* Date: 1/16/18
*/
//Initialize variables progress bar
var counter = 0;
var progressBar;
var activeBar = $('.carousel-indicators > li.active').find('.progress-bar');
var activeIndicator = $('.carousel-indicators > li.active');
//Initialize the progress bar function.
progressBarRun(activeBar);
//Function to update progress bar.
function progressBarRun(activeBar) {
//Calculate the interval as carousel interval / 100
var interval = $('#quoteCarousel').data('interval') / 100;
progressBar = setInterval(function() {
counter += 1;
//Clear counter if full.
if (counter > 100) clearInterval(progressBar);
//Update the active progress bar with the counter value.
activeBar.css("width", counter + "%");
}, interval);
}
$('.carousel-indicators > li').on('click', function () {
$(this).find('.progress-bar').css("width", '0%');
counter = 0;
clearInterval(progressBar);
if($(this).is(':first-child')) {
activeIndicator = $('.carousel-indicators > li').last();
}
else {
activeIndicator = $(this).prev('.carousel-indicators > li');
}
});
//Function to run on slide change.
$('#quoteCarousel').on('slide.bs.carousel', function () {
//Check to see if the current indicator is the last of type.
if(activeIndicator.is(':last-child')) {
//Clear all the progress bars.
$('.progress-bar').css("width", 0);
//Reset the indicator.
activeIndicator = $('.carousel-indicators > li').first();
}
else {
//Else get the next sibling.
activeIndicator = activeIndicator.next('.carousel-indicators > li');
}
//Grab the closest progress bar.
activeBar = activeIndicator.find('.progress-bar');
counter = 0;
clearInterval(progressBar);
progressBarRun(activeBar);
});
/*
* Function match the heights of the selected elements.
* Author: krievley
* Date: 1/16/18
*/
$('.carousel-item').matchHeight({
byRow: false,
property: 'height',
target: null,
remove: false
});
/*
* Function match the heights of the selected elements.
* Author: krievley
* Date: 1/30/18
*/
$('.logo-wrapper').matchHeight({
byRow: false,
property: 'height',
target: null,
remove: false
});
/*
* Function for the sticky nav
* Author: krievley
* Date: 1/21/18
*/
//Get the sticky nav object.
var stickyNav = $('#productStickyNav');
//Compute it's height.
var navHeight = stickyNav.outerHeight();
//Create a negative margin equal to the height.
stickyNav.css('margin-bottom', -navHeight);
//Scroll function to change style.
$(document).scroll(function () {
stickyNav.toggleClass('scrolled', $(this).scrollTop() > navHeight);
$('#logoBlack').toggleClass('hide', $(this).scrollTop() < navHeight);
$('#logoWhite').toggleClass('hide', $(this).scrollTop() > navHeight);
clearTimeout();
setTimeout(setHeight, 500);
});
//Window resize function
function setHeight() {
//Get the sticky nav object.
//stickyNav = $('#productStickyNav');
//Compute it's height.
navHeight = stickyNav.outerHeight();
//Create a negative margin equal to the height.
stickyNav.css('margin-bottom', -navHeight);
}
$(window).resize(function() {
clearTimeout();
setTimeout(setHeight, 500);
}).trigger('resize');
/*
* Function for the filter tabs
* Author: krievley
* Date: 2/1/18
*/
$('.filter-link').on('click', function() {
//Remove the active class from all other filter links.
$('.filter-link').removeClass('active');
//Add the active class to this item.
$(this).addClass('active');
//Get the group to filter
var group = '.'+$(this).data('filter-group');
//Get the selected group.
var selected = $(this).data('filter-selector');
//If value is all...
if(selected == 'all') {
//Show all filter items.
$(group).show();
}
else {
selected = '.'+selected;
//Hide all of the items.
$(group).hide();
//Show the items with a class matching the selected element.
$(group + selected).show();
}
});
/*
* Function for the filter dropdown
* Author: krievley
* Date: 2/1/18
*/
$('.filter-select').on('change', function() {
//Get the group to filter
var group = '.'+$(this).data('filter-group');
//Get the selected group.
var selected = $(this).val();
//If value is all...
if(selected == 'all') {
//Show all filter items.
$(group).show();
}
else {
selected = '.'+selected;
//Hide all of the items.
$(group).hide();
//Show the items with a class matching the selected element.
$(group+selected).show();
}
});
/*
* Function for the form focus.
* Author: krievley
* Date: 2/8/18
*/
$('input, select, textarea').on('focus', function() {
//Add the focus class to the parent form group.
$(this).closest('.form-group').addClass('has-focus');
}).on('blur', function() {
//Remove existing focus class.
$(this).closest('.form-group').removeClass('has-focus');
});
/*
* Function to load the modal content.
* Author: krievley
* Date: 2/14/18
*/
$('.modal-link').on('click', function() {
// Call the add content function.
addModalContent(this);
});
/*
* Function to fade out the modal content.
* Author: krievley
* Date: 2/22/18
*/
function removeModalContent() {
//Remove the video.
jwplayer("videoPlayer").remove();
//Remove the video id.
$('.modal-content .feature-video').removeAttr('id');
//Unset the slider.
$('.feature-carousel').slick("unslick");
//Remove content.
$('#featureModal .modal-content .container').html('');
}
/*
* Function to fade in the modal content.
* Author: krievley
* Date: 2/22/18
*/
function addModalContent(obj) {
//Grab the hidden content.
var selector = $(obj).data('feature');
var content = $(selector).html();
//Insert this html into the modal content.
$('#featureModal .modal-content .container').append(content);
$('.feature-carousel').slick({
dots: false,
prevArrow: $('.control-left'),
nextArrow: $('.control-right'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
//Grab the video information.
var playerID = $('.modal-content .feature-video').attr('id', 'videoPlayer');
//Construct the video object.
var playerInstance = jwplayer("videoPlayer");
var video = $('#videoPlayer').data('video');
//Call the player setup function.
playerSetup(playerInstance, video);
//Method for carousel item click.
$('.feature').on('click', function() {
var obj = this;
//Fade out the modal content.
$('#featureModal .modal-content .container').fadeOut('slow', function() {
//Remove existing content.
removeModalContent();
//Add new content.
addModalContent(obj);
//Scroll to the top.
$("#featureModal").scrollTop(0);
//fadein animation.
$('#featureModal .modal-content .container').fadeIn('slow');
$('.feature-carousel').resize();
});
});
};
/*
* Function to destroy the modal content.
* Author: krievley
* Date: 2/14/18
*/
$('#featureModal').on('hidden.bs.modal', function() {
removeModalContent();
});
/*
* Function to resize the slider content.
* Author: krievley
* Date: 3/6/18
*/
$('#featureModal').on('shown.bs.modal', function() {
$('.feature-carousel').resize();
});
/*
* Function for form validation
* Author: krievley
* Date: 2/5/18
*/
// Setup form validation on trial form
if($.validate) {
$.validate({
form: '#trial',
modules: 'html5, date',
borderColorOnError: '',
onSuccess : function($form) {
//Hide the form.
$form.hide();
//Show the success message.
$('.form-thankyou').show();
//Stop the form submission.
return false;
},
inlineErrorMessageCallback: function ($input, errorMessage, config) {
if (errorMessage) {
if($input.attr('type') == 'checkbox' || $input.attr('type') == 'radio') {
//Get the form row
var row = $input.closest('.form-row');
//Attach the has-error class.
row.addClass('has-error');
//Get the label for the input.
var label = row.find(".label-wrapper>label");
}
else {
//Get the label for the input.
var label = $input.parent().find("label");
}
//console.log(label);
//Hide the field name.
label.find("span.fieldLabel").hide();
//Prepend the input with the error message.
label.find("span.error-msg").text(errorMessage);
}
else {
if($input.attr('type') == 'checkbox' || $input.attr('type') == 'radio') {
//Get the form row
var row = $input.closest('.form-row');
//Attach the has-error class.
row.removeClass('has-error');
//Get the label for the input.
var label = row.find(".label-wrapper>label");
}
else {
//Get the label for the input.
var label = $input.parent().find("label");
}
//Show the field name.
label.find("span.fieldLabel").show();
//Remove the error message.
label.find("span.error-msg").text("");
}
}
});
}
/*
* Function to only validate input fields with a value.
* Author: krievley
* Date: 2/5/18
*/
// Validation event listeners
$('input, select, textarea').on('beforeValidation', function(value, lang, config) {
if($(this).val() == "") {
$(this).attr('data-validation-skipped', 1);
}
else {
$(this).removeAttr('data-validation-skipped');
}
}).on('focus', function() {
//Get the parent.
var parent = $(this).parent()
//Remove the has error class.
parent.removeClass('has-error');
//Get the label for the input.
var label = parent.find("label");
//Show the field name.
label.find("span.fieldLabel").show();
//Remove the error message.
label.find("span.error-msg").text("");
});
/*
* Function to style the success messages for checkboxes.
* Author: krievley
* Date: 3/3/18
*/
$('input[type=checkbox]').on('change', function() {
//Get the form row
var row = $(this).closest('.form-row');
//Remove the has-success class.
row.removeClass('has-success');
if($(this).isValid() && $('input:checkbox:checked').length > 0) {
//Attach the has-success class.
row.addClass('has-success');
}
});
/*
* Function to style the success messages for radios.
* Author: krievley
* Date: 3/3/18
*/
$('input[type=radio]').on('change', function() {
//Get the form row
var row = $(this).closest('.form-row');
if($(this).isValid() && $('input:radio:checked').length > 0) {
//Attach the has-success class.
row.addClass('has-success');
}
});
/*
* Function for custom datepicker functions.
* Author: krievley
* Date: 3/3/18
*/
DatePicker = {
hideOldDays: function(){ // hide days for previous month
var x = $('.datepicker .datepicker-days tr td.old');
if(x.length > 0){
x.css('visibility', 'hidden');
if(x.length === 7){
x.parent().hide();
}
}
},
hideNewDays: function(){ // hide days for next month
var x = $('.datepicker .datepicker-days tr td.new');
if(x.length > 0){
x.hide();
}
},
hideOtherMonthDays: function(){ // hide days not for current month
DatePicker.hideOldDays();
DatePicker.hideNewDays();
}
};
/*
* Function for the default datepickers.
* Author: krievley
* Date: 3/3/18
*/
/*
$('.vw-datepicker').datepicker({
autoclose: true,
daysOfWeekDisabled: [0,6],
format: 'mm/dd/yyyy',
templates: {
leftArrow: '<i class="ico ico-chevron-lft"></i>',
rightArrow: '<i class="ico ico-chevron-rt"></i>'
}
}).on('show', function(e) {
DatePicker.hideOtherMonthDays();
});
*/
/*
* Function for jwplayer
* Author: krievley
* Date: 1/20/18
*/
if( $('#videoPlayer').length ) {
var playerInstance = jwplayer("videoPlayer");
var video = $('#videoPlayer').data('video');
playerSetup(playerInstance, video);
$('.header-button').on('click', function () {
playerInstance.play();
});
$('.btn-close').on('click', function () {
playerInstance.stop();
});
}
function playerSetup(playerInstance, video) {
playerInstance.setup({
file: video,
mediaid: "xxxxYYYY",
autostart: 'false'
});
}
/*
* Product slider
* author RSanchez
* Date: 0
*/
// panorama configuration objecct
var viewer;
var slides = $(".slide");
var cSlide;
var panoBtnLabel="Load 360 pano"
$('.close-full-screen ').hide();
function initProdSlider(){
console.log("init product slider");
$(".slide").each(function (index) {
var type = $(this).data('type');
var slideW = $(this).data('width');
$(this).css('width',slideW );
if (type==='image'){
var contentDiv = $(this).find('.slide-content');
var imageUrl = $(this).data('content');
contentDiv.css('background-image', 'url(img/' + imageUrl + '.jpg)');
}
else if (type === 'panorama') {
var contentDiv = $(this).find('.slide-content');
var imageUrl = $(this).data('content');
contentDiv.attr('id','pano'+index);
contentDiv.css('background-image', 'url(img/' + imageUrl + '.jpg)');
contentDiv.html("<iframe class='panoFrame disabled-cursor' src=''><iframe>");
contentDiv.append("<button class='vw-btn panoLoader'>"+panoBtnLabel+"</button >");
contentDiv.find('.close-full-screen').hide();
}
else if (type==='video'){
var slideVidCont = $(this).find('.slide-content');
var id ='video'+index;
slideVidCont.attr('id',id);
console.log(id)
var videoURL = $(this).data("content");
var posterIMG = $(this).data("poster");
console.log(videoURL);
jwplayer(id).setup({
"file": videoURL,
"image": posterIMG ,
"autostart": "false"
})
}
});
}
initProdSlider()
$(".product-slider").on("init", function (event, slick) {
cSlide=0
updateContent(cSlide);
});
// On before slide change
$(".product-slider").on("afterChange", function (
event,
slick,
currentSlide,
nextSlide
) {
cSlide = $(".product-slider").slick("slickCurrentSlide");
updateContent(cSlide);
});
$(".product-slider").on("beforeChange", function (
event,
slick,
currentSlide,
nextSlide
) {
var slideBefore = $(".product-slider").slick("slickCurrentSlide");
var targetSlide = slides.eq(slideBefore);
if (targetSlide.data("type") === "panorama") {
targetSlide.find('.panoLoader').show();
targetSlide.find('.panoFrame').attr('src', null);
}
if (targetSlide.data("type") === "video") {
var vidID= targetSlide.find('.slide-content').attr('id');
jwplayer(vidID).stop();
}
$(".photo-credit-cont").toggleClass("photo-credit-cont-transition")
});
function updateContent(cSlide) {
var targetSlide = slides.eq(cSlide);
var i = cSlide + 1;
if (targetSlide.data("type") === "panorama") {
}
else if (targetSlide.data("type") === "video"){
console.log ("set video")
}
$(".slide-counter").text(i + "/" + slides.length);
$(".product-slider-photoCredit").text(targetSlide.data("title"));
$(".photo-credit-cont").toggleClass("photo-credit-cont-transition")
}
$(".product-slider").slick({
centerMode: true,
infinite: true,
arrows: false,
centerPadding: "0",
slidesToShow: 3,
speed: 650,
draggable:false,
variableWidth: true,
adaptiveHeight: true,
useTransform: true,
autoplaySpeed: 5000,
responsive: [
{
breakpoint: 992,
settings: {
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false,
draggable: true
}
},
{
breakpoint: 576,
settings: {
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
draggable: true,
dots:true,
variableWidth: false
}
}
]
});
$(".next-slide").click(function (e) {
e.preventDefault();
$(".product-slider").slick("slickNext");
});
$(".prev-slide").click(function (e) {
e.preventDefault();
$(".product-slider").slick("slickPrev");
});
$('body').on('click', '.panoLoader', function () {
console.log($(this).text());
var targetSlide = slides.eq(cSlide);
var url = targetSlide.data('pano');
targetSlide.find('.panoFrame').attr('src', url);
$(this).hide();
});
$('body').on('click', '.close-full-screen', function () {
$(this).hide();
if (
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
/*end of document ready */
function goFullScreen(elem) {
var targetSlide = slides.eq(cSlide);
var id=targetSlide.find('.slide-content').attr('id');
// var elem = targetSlide.find('.panoFrame');
var elem = document.getElementById(id);
$(elem).find('.close-full-screen').show();
if (
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
if (
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
} else {
console.log('Fullscreen is not supported on your browser.');
}
}
});
$('#product-slide-modal').on('hidden.bs.modal', function (e) {
$("#panzoom").panzoom("reset");
})
// $('#product-slide-modal .modal-content .container').empty();