From bc8457a143ab020eab321e2ee651d6c5e83ee1e5 Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Wed, 7 Jun 2017 11:51:40 -0400 Subject: [PATCH] adding js to control pause and play for the footer front page video the footer video needs to only play if the user can see the video in the viewport --- js/app.js | 300 +++++++++++------------------------------ js/custom/pageSetup.js | 300 +++++++++++------------------------------ 2 files changed, 154 insertions(+), 446 deletions(-) diff --git a/js/app.js b/js/app.js index 297849c..7578867 100644 --- a/js/app.js +++ b/js/app.js @@ -226,236 +226,90 @@ $(document).ready(function () { //console.log('ul = ' + menuImg); //console.log('menu-id = ' + menuNum); }); - // custom js / jquery / modules - console.log($("#wp-custom-header-video-button")); - var videos = document.getElementsByTagName("iframe"), fraction=0.8; -// $("#wp-custom-header-video-button").trigger("click"); - function checkScroll() { - console.log('working'); - for(var i = 0; i < videos.length; i++) { +// $(window).on("load", function(){ +// console.log( $("#wp-custom-header-video-button") ); +// $("#wp-custom-header-video-button").trigger('click'); +// +// +// var videos = document.getElementById("wp-custom-header"), fraction=0.1; +// console.log(videos); +// // $("#wp-custom-header-video-button").trigger("click"); +// function checkScroll() { +// +// +// var iframe = videos; +// +// var x = iframe.offsetLeft, y = iframe.offsetTop, w = iframe.offsetWidth, h = iframe.offsetHeight, r = x + w, //right +// b = y + h, //bottom +// visibleX, visibleY, visible; +// +// visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); +// visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); +// +// visible = visibleX * visibleY / (w * h); +// console.log(visible); +// if (visible > fraction) { +// +// $("#wp-custom-header-video-button").trigger('click'); +//// $("div.html5-video-player").removeClass("paused-mode").addClass("playing-mode"); +// console.log('Test 1'); +// } else { +// +//// $("div.html5-video-player").removeClass("playing-mode").addClass("paused-mode"); +// console.log('Test 2'); +// } +// } +// +// window.addEventListener('scroll', checkScroll, false); +// window.addEventListener('resize', checkScroll, false); +//}) + $.fn.isOnScreen = function(){ - var iframe = videos[i]; + var win = $(window); - var x = iframe.offsetLeft, y = iframe.offsetTop, w = iframe.offsetWidth, h = iframe.offsetHeight, r = x + w, //right - b = y + h, //bottom - visibleX, visibleY, visible; + var viewport = { + top : win.scrollTop(), + left : win.scrollLeft() + }; + viewport.right = viewport.left + win.width(); + viewport.bottom = viewport.top + win.height(); - visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); - visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); + var bounds = this.offset(); + bounds.right = bounds.left + this.outerWidth(); + bounds.bottom = bounds.top + this.outerHeight(); - visible = visibleX * visibleY / (w * h); + return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); - if (visible > fraction) { -// $("div.html5-video-player").removeClass("paused-mode").addClass("playing-mode"); - console.log('Test 1'); - } else { -// $("div.html5-video-player").removeClass("playing-mode").addClass("paused-mode"); - console.log('Test 2'); - } + }; + $(window).on("load", function(){ + var video_visible = $("#wp-custom-header").isOnScreen(); + var clicked = false; + var paused; + if(!video_visible){ + $("#wp-custom-header-video-button").trigger('click'); + paused = true; + } else { + paused = false; } - } - - window.addEventListener('scroll', checkScroll, false); - window.addEventListener('resize', checkScroll, false); -// var arrival_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function() { -// this.$arrive = $("#arrive"); -// this.$currentDate = 0; -// }, -// bindEvents: function () { -// this.$arrive.datepicker({ -// dateFormat: 'mm/dd/yy', -// minDate: 0, -// onSelect: function (date) { -// this.$currentDate = arrival_module.$arrive.datepicker('getDate'); -// this.$extraDay = arrival_module.$arrive.datepicker('getDate'); -// this.$extraDay.setDate(this.$extraDay.getDate() + 1); -// departure_module.$depart.datepicker("option", {minDate: new Date(this.$extraDay)}); -// } -// }); -// } -// }; -// var departure_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function (){ -// this.$depart = $("#depart"); -// this.$departure = 0; -// }, -// bindEvents: function () { -// this.$depart.datepicker({ -// onSelect: function (date) { -// this.$departure = departure_module.$depart.datepicker('getDate'); -// } -// }); -// } -// }; -// $("#arriveCal").click(function () { -// $("#arrive").datepicker("show"); -// }); -// $("#departCal").click(function () { -// $("#depart").datepicker("show"); -// }); -// var restab_module = { -// init: function (){ -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function () { -// this.$restab = $("#res-tab").children("li").children("a"); -// this.$resForm = $("#resForm"); -// this.$resContent = $("#resContent"); -// }, -// bindEvents: function () { -// this.$restab.on("click", function () { -// if (restab_module.$resContent.css("display") === "none") { -// restab_module.$resContent.slideDown(500); -// } else { -// restab_module.$resContent.slideUp(500); -// } -// }); -// } -// }; -// var search_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function () { -// this.$search = $("#search-icon"); -// this.$form = $(".searchformHeader"); -// this.$input = $(".searchformHeader input[type='text']"); -// this.$mag_glass = $("#magnifying-glass"); -// }, -// bindEvents: function () { -// this.$search.click( function () { -// search_module.$form.animate({width: 'toggle'}, 1000); -// search_module.$search.css("visibility", "hidden"); -// search_module.$input.focus(); -// }); -// this.$mag_glass.click( function () { -// search_module.$form.submit(); -// }); -// this.$input.blur(function () { -// search_module.$form.animate({width: 'toggle'}, 1000); -// search_module.$search.css("visibility", "visible"); -// }); -// } -// }; -// restab_module.init(); -// departure_module.init(); -// arrival_module.init(); -// search_module.init(); -// $(".search_result_context").children("br").remove(); -// -// var extraDay, end, arrival, currentDate, currentDate2, -// requiredDate, requiredDate1, minDays, departure, -// stay, d, dd, m, y; -// $(document).on('change', '#arriveOff', function () { -// currentDate = $("#arriveOff").val(); -// currentDate = new Date(currentDate); -// -// // this section is used to circumvent issues with selecting the last day of the month without a proper rollover to the following month. -// currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()); -// currentDate.setDate(currentDate.getDate()); -// -// dd = currentDate.getDate() + 1; -// if (dd <= 9) { -// dd = '0' + dd; -// } -// d = currentDate.getDate(); -// if (d <= 9) { -// d = '0' + d; -// } -// m = currentDate.getMonth() + 1; -// if (m <= 9) { -// m = '0' + m; -// } -// y = currentDate.getFullYear(); -// -// // this variable is for passing to booking site -// requiredDate = y + '-' + m + '-' + d; -// minDays = y + '-' + m + '-' + dd; -// $("#departOff").attr("min", minDays); -// if (requiredDate <= $("#arriveOff").attr("min")) { -// minDays = $("#arriveOff").attr("min"); -// $("#arriveOff").val(minDays); -// } -// }); -// // restrict departure date /////////////////////////////// -// $(document).on('change', '#departOff', function () { -// currentDate2 = $("#departOff").val(); -// currentDate2 = new Date(currentDate2); -// currentDate2 = new Date(currentDate2.getUTCFullYear(), currentDate2.getUTCMonth(),currentDate2.getUTCDate()); -// currentDate2.setDate(currentDate2.getDate()); -// if($("#departOff").val() <= requiredDate){ -// $("#departOff").val(minDays); -// } -// }); -// $('#block-1, #block-2, #block-3').bind('click tap', function(){ -// if($(window).width() <= 1024){ -// $(this).toggleClass('front-page-blocks'); -// } -// }); -// $('#block-1, #block-2, #block-3').on("mouseover", function (){ -// if($(window).width() > 1024){ -// $(this).addClass('front-page-blocks'); -// } -// }); -// $('#block-1, #block-2, #block-3').on("mouseout", function (){ -// if($(window).width() > 1024){ -// $(this).removeClass('front-page-blocks'); -// } -// }); -// $(".menu-icon").on("click", function () { -// window.scrollTo(0,0); -// }); -// var $topMenu = $("ul#menu-top-menu > li"); -// var $topMenuLink = $("ul#menu-top-menu li > a"); -// var $dropDown = $("ul#menu-top-menu li").find(".dropdown"); -// $("#headerLinks").children("ul#menu-top-menu").children("li").each(function () { -// $($topMenuLink).css("font-size", "16px"); -// $($topMenuLink).css("padding", "10px 5px"); -// }); -// $($topMenu).each(function () { -// $(this).removeClass("active") ; -// }); -// -// $("#menu-top-menu-1").children("li:nth-child(2)").children("a:nth-child(1)").addClass("offCanvasLinks"); -// -// -// $("a:contains('Exploring')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#exploring").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Golf')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#golf").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Hiking')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#hiking").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Water')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#water").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Birding')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#birding").offset().top - 165 -// }, 1000); -// }); + console.log( $("#wp-custom-header-video-button").text()); + $(window).on("scroll", function(){ +// console.log(clicked, paused, video_visible); + video_visible = $("#wp-custom-header").isOnScreen(); + if(video_visible && clicked === false && paused === true){ + $("#wp-custom-header-video-button").trigger('click'); + clicked = true; + paused = false; + console.log('PLAY'); + } + else if(!video_visible && paused === false ){ + paused = true; + $("#wp-custom-header-video-button").trigger('click'); + clicked = false; + console.log( "PAUSE"); + } + }) + }); }); diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index 3499e1d..9744199 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -23,236 +23,90 @@ $(document).ready(function () { //console.log('ul = ' + menuImg); //console.log('menu-id = ' + menuNum); }); - // custom js / jquery / modules - console.log($("#wp-custom-header-video-button")); - var videos = document.getElementsByTagName("iframe"), fraction=0.8; -// $("#wp-custom-header-video-button").trigger("click"); - function checkScroll() { - console.log('working'); - for(var i = 0; i < videos.length; i++) { +// $(window).on("load", function(){ +// console.log( $("#wp-custom-header-video-button") ); +// $("#wp-custom-header-video-button").trigger('click'); +// +// +// var videos = document.getElementById("wp-custom-header"), fraction=0.1; +// console.log(videos); +// // $("#wp-custom-header-video-button").trigger("click"); +// function checkScroll() { +// +// +// var iframe = videos; +// +// var x = iframe.offsetLeft, y = iframe.offsetTop, w = iframe.offsetWidth, h = iframe.offsetHeight, r = x + w, //right +// b = y + h, //bottom +// visibleX, visibleY, visible; +// +// visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); +// visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); +// +// visible = visibleX * visibleY / (w * h); +// console.log(visible); +// if (visible > fraction) { +// +// $("#wp-custom-header-video-button").trigger('click'); +//// $("div.html5-video-player").removeClass("paused-mode").addClass("playing-mode"); +// console.log('Test 1'); +// } else { +// +//// $("div.html5-video-player").removeClass("playing-mode").addClass("paused-mode"); +// console.log('Test 2'); +// } +// } +// +// window.addEventListener('scroll', checkScroll, false); +// window.addEventListener('resize', checkScroll, false); +//}) + $.fn.isOnScreen = function(){ - var iframe = videos[i]; + var win = $(window); - var x = iframe.offsetLeft, y = iframe.offsetTop, w = iframe.offsetWidth, h = iframe.offsetHeight, r = x + w, //right - b = y + h, //bottom - visibleX, visibleY, visible; + var viewport = { + top : win.scrollTop(), + left : win.scrollLeft() + }; + viewport.right = viewport.left + win.width(); + viewport.bottom = viewport.top + win.height(); - visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); - visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); + var bounds = this.offset(); + bounds.right = bounds.left + this.outerWidth(); + bounds.bottom = bounds.top + this.outerHeight(); - visible = visibleX * visibleY / (w * h); + return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); - if (visible > fraction) { -// $("div.html5-video-player").removeClass("paused-mode").addClass("playing-mode"); - console.log('Test 1'); - } else { -// $("div.html5-video-player").removeClass("playing-mode").addClass("paused-mode"); - console.log('Test 2'); - } + }; + $(window).on("load", function(){ + var video_visible = $("#wp-custom-header").isOnScreen(); + var clicked = false; + var paused; + if(!video_visible){ + $("#wp-custom-header-video-button").trigger('click'); + paused = true; + } else { + paused = false; } - } - - window.addEventListener('scroll', checkScroll, false); - window.addEventListener('resize', checkScroll, false); -// var arrival_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function() { -// this.$arrive = $("#arrive"); -// this.$currentDate = 0; -// }, -// bindEvents: function () { -// this.$arrive.datepicker({ -// dateFormat: 'mm/dd/yy', -// minDate: 0, -// onSelect: function (date) { -// this.$currentDate = arrival_module.$arrive.datepicker('getDate'); -// this.$extraDay = arrival_module.$arrive.datepicker('getDate'); -// this.$extraDay.setDate(this.$extraDay.getDate() + 1); -// departure_module.$depart.datepicker("option", {minDate: new Date(this.$extraDay)}); -// } -// }); -// } -// }; -// var departure_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function (){ -// this.$depart = $("#depart"); -// this.$departure = 0; -// }, -// bindEvents: function () { -// this.$depart.datepicker({ -// onSelect: function (date) { -// this.$departure = departure_module.$depart.datepicker('getDate'); -// } -// }); -// } -// }; -// $("#arriveCal").click(function () { -// $("#arrive").datepicker("show"); -// }); -// $("#departCal").click(function () { -// $("#depart").datepicker("show"); -// }); -// var restab_module = { -// init: function (){ -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function () { -// this.$restab = $("#res-tab").children("li").children("a"); -// this.$resForm = $("#resForm"); -// this.$resContent = $("#resContent"); -// }, -// bindEvents: function () { -// this.$restab.on("click", function () { -// if (restab_module.$resContent.css("display") === "none") { -// restab_module.$resContent.slideDown(500); -// } else { -// restab_module.$resContent.slideUp(500); -// } -// }); -// } -// }; -// var search_module = { -// init: function () { -// this.cacheDOM(); -// this.bindEvents(); -// }, -// cacheDOM: function () { -// this.$search = $("#search-icon"); -// this.$form = $(".searchformHeader"); -// this.$input = $(".searchformHeader input[type='text']"); -// this.$mag_glass = $("#magnifying-glass"); -// }, -// bindEvents: function () { -// this.$search.click( function () { -// search_module.$form.animate({width: 'toggle'}, 1000); -// search_module.$search.css("visibility", "hidden"); -// search_module.$input.focus(); -// }); -// this.$mag_glass.click( function () { -// search_module.$form.submit(); -// }); -// this.$input.blur(function () { -// search_module.$form.animate({width: 'toggle'}, 1000); -// search_module.$search.css("visibility", "visible"); -// }); -// } -// }; -// restab_module.init(); -// departure_module.init(); -// arrival_module.init(); -// search_module.init(); -// $(".search_result_context").children("br").remove(); -// -// var extraDay, end, arrival, currentDate, currentDate2, -// requiredDate, requiredDate1, minDays, departure, -// stay, d, dd, m, y; -// $(document).on('change', '#arriveOff', function () { -// currentDate = $("#arriveOff").val(); -// currentDate = new Date(currentDate); -// -// // this section is used to circumvent issues with selecting the last day of the month without a proper rollover to the following month. -// currentDate = new Date(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()); -// currentDate.setDate(currentDate.getDate()); -// -// dd = currentDate.getDate() + 1; -// if (dd <= 9) { -// dd = '0' + dd; -// } -// d = currentDate.getDate(); -// if (d <= 9) { -// d = '0' + d; -// } -// m = currentDate.getMonth() + 1; -// if (m <= 9) { -// m = '0' + m; -// } -// y = currentDate.getFullYear(); -// -// // this variable is for passing to booking site -// requiredDate = y + '-' + m + '-' + d; -// minDays = y + '-' + m + '-' + dd; -// $("#departOff").attr("min", minDays); -// if (requiredDate <= $("#arriveOff").attr("min")) { -// minDays = $("#arriveOff").attr("min"); -// $("#arriveOff").val(minDays); -// } -// }); -// // restrict departure date /////////////////////////////// -// $(document).on('change', '#departOff', function () { -// currentDate2 = $("#departOff").val(); -// currentDate2 = new Date(currentDate2); -// currentDate2 = new Date(currentDate2.getUTCFullYear(), currentDate2.getUTCMonth(),currentDate2.getUTCDate()); -// currentDate2.setDate(currentDate2.getDate()); -// if($("#departOff").val() <= requiredDate){ -// $("#departOff").val(minDays); -// } -// }); -// $('#block-1, #block-2, #block-3').bind('click tap', function(){ -// if($(window).width() <= 1024){ -// $(this).toggleClass('front-page-blocks'); -// } -// }); -// $('#block-1, #block-2, #block-3').on("mouseover", function (){ -// if($(window).width() > 1024){ -// $(this).addClass('front-page-blocks'); -// } -// }); -// $('#block-1, #block-2, #block-3').on("mouseout", function (){ -// if($(window).width() > 1024){ -// $(this).removeClass('front-page-blocks'); -// } -// }); -// $(".menu-icon").on("click", function () { -// window.scrollTo(0,0); -// }); -// var $topMenu = $("ul#menu-top-menu > li"); -// var $topMenuLink = $("ul#menu-top-menu li > a"); -// var $dropDown = $("ul#menu-top-menu li").find(".dropdown"); -// $("#headerLinks").children("ul#menu-top-menu").children("li").each(function () { -// $($topMenuLink).css("font-size", "16px"); -// $($topMenuLink).css("padding", "10px 5px"); -// }); -// $($topMenu).each(function () { -// $(this).removeClass("active") ; -// }); -// -// $("#menu-top-menu-1").children("li:nth-child(2)").children("a:nth-child(1)").addClass("offCanvasLinks"); -// -// -// $("a:contains('Exploring')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#exploring").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Golf')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#golf").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Hiking')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#hiking").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Water')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#water").offset().top - 165 -// }, 1000); -// }); -// $("a:contains('Birding')").on("click", function () { -// $('html, body').animate({ -// scrollTop: $("#birding").offset().top - 165 -// }, 1000); -// }); + console.log( $("#wp-custom-header-video-button").text()); + $(window).on("scroll", function(){ +// console.log(clicked, paused, video_visible); + video_visible = $("#wp-custom-header").isOnScreen(); + if(video_visible && clicked === false && paused === true){ + $("#wp-custom-header-video-button").trigger('click'); + clicked = true; + paused = false; + console.log('PLAY'); + } + else if(!video_visible && paused === false ){ + paused = true; + $("#wp-custom-header-video-button").trigger('click'); + clicked = false; + console.log( "PAUSE"); + } + }) + }); }); -- 2.17.1