From 4f7a5d5d40cc529e963cd33ee0865f92e1e07567 Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Tue, 30 Aug 2016 13:37:35 +0000 Subject: [PATCH] done #598 @2.5 --- js/209-scrollify.js | 429 +++++++++++++++++++++++--------------------- js/210-home.js | 28 +-- 2 files changed, 234 insertions(+), 223 deletions(-) diff --git a/js/209-scrollify.js b/js/209-scrollify.js index 15b3928..a341ff4 100644 --- a/js/209-scrollify.js +++ b/js/209-scrollify.js @@ -34,22 +34,22 @@ then value to scroll to is current position plus height of interstitialSection */ -(function (global,factory) { +(function (global, factory) { "use strict"; if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. - define(['jquery'], function($) { + define(['jquery'], function ($) { return factory($, global, global.document); }); } else if (typeof module === 'object' && module.exports) { // Node/CommonJS - module.exports = function( root, jQuery ) { - if ( jQuery === undefined ) { + module.exports = function (root, jQuery) { + if (jQuery === undefined) { // require('jQuery') returns a factory that requires window to // build a jQuery instance, we normalize how we use modules // that require this pattern but the window provided is a noop // if it's defined (how jquery works) - if ( typeof window !== 'undefined' ) { + if (typeof window !== 'undefined') { jQuery = require('jquery'); } else { @@ -96,29 +96,34 @@ interstitialSection: "", easing: "easeOutExpo", scrollSpeed: 1100, - offset : 0, + offset: 0, scrollbars: true, - axis:"y", - target:"html,body", + axis: "y", + target: "html,body", standardScrollElements: false, setHeights: true, - overflowScroll:true, - before:function() {}, - after:function() {}, - afterResize:function() {}, - afterRender:function() {} + overflowScroll: true, + before: function () { + }, + after: function () { + }, + afterResize: function () { + }, + afterRender: function () { + } }; - function animateScroll(index,instant,callbacks) { - if(currentIndex===index) { + + function animateScroll(index, instant, callbacks) { + if (currentIndex === index) { callbacks = false; } - if(disabled===true) { + if (disabled === true) { return true; } - if(names[index]) { + if (names[index]) { scrollable = false; - if(callbacks) { - settings.before(index,elements); + if (callbacks) { + settings.before(index, elements); } interstitialIndex = 1; @@ -139,14 +144,14 @@ // } - if(instant) { + if (instant) { $(settings.target).stop().scrollTop(heights[index]); - if(callbacks) { - settings.after(index,elements); + if (callbacks) { + settings.after(index, elements); } } else { locked = true; - if( $().velocity ) { + if ($().velocity) { $(settings.target).stop().velocity('scroll', { duration: settings.scrollSpeed, easing: settings.easing, @@ -157,26 +162,29 @@ //console.info(index + ' -- Scrolling to: ' + heights[index] + ' | ' + settings.scrollSpeed + ' | ' + settings.easing); + $(settings.target).stop().animate({ - scrollTop: heights[index] - }, settings.scrollSpeed,settings.easing); + scrollTop: heights[index], skipGSAP: true + }, settings.scrollSpeed, settings.easing, function () { + $(window).scrollTop(heights[index]); + }); } - if(window.location.hash.length && settings.sectionName && window.console) { + if (window.location.hash.length && settings.sectionName && window.console) { try { - if($(window.location.hash).length) { + if ($(window.location.hash).length) { console.warn("Scrollify warning: There are IDs on the page that match the hash value - this will cause the page to anchor."); } } catch (e) { console.warn("Scrollify warning:", window.location.hash, "is not a valid jQuery expression."); } } - $(settings.target).promise().done(function(){ + $(settings.target).promise().done(function () { currentIndex = index; locked = false; firstLoad = false; - if(callbacks) { - settings.after(index,elements); + if (callbacks) { + settings.after(index, elements); } }); } @@ -190,57 +198,58 @@ var lastElements = samples.slice(Math.max(samples.length - num, 1)); - for(var i = 0; i < lastElements.length; i++){ + for (var i = 0; i < lastElements.length; i++) { sum += lastElements[i]; } - return Math.ceil(sum/num); + return Math.ceil(sum / num); } var avEnd = average(10); var avMiddle = average(70); - if(avEnd >= avMiddle) { + if (avEnd >= avMiddle) { return true; } else { return false; } } - $.scrollify = function(options) { + + $.scrollify = function (options) { initialised = true; - $.easing['easeOutExpo'] = function(x, t, b, c, d) { - return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; + $.easing['easeOutExpo'] = function (x, t, b, c, d) { + return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; }; manualScroll = { - handleMousedown:function() { - if(disabled===true) { + handleMousedown: function () { + if (disabled === true) { return true; } scrollable = false; scrolled = false; }, - handleMouseup:function() { - if(disabled===true) { + handleMouseup: function () { + if (disabled === true) { return true; } scrollable = true; - if(scrolled) { + if (scrolled) { manualScroll.calculateNearest(); } }, - handleScroll:function() { - if(disabled===true) { + handleScroll: function () { + if (disabled === true) { return true; } - if(timeoutId){ + if (timeoutId) { clearTimeout(timeoutId); } - timeoutId = setTimeout(function(){ + timeoutId = setTimeout(function () { scrolled = true; - if(scrollable===false) { + if (scrollable === false) { return false; } scrollable = false; @@ -248,87 +257,85 @@ }, 200); }, - calculateNearest:function() { + calculateNearest: function () { top = $window.scrollTop(); - var i =1, + var i = 1, max = heights.length, closest = 0, prev = Math.abs(heights[0] - top), diff; - for(;i 149){ + if (scrollSamples.length > 149) { scrollSamples.shift(); } //scrollSamples.push(Math.abs(delta*10)); scrollSamples.push(Math.abs(value)); - if((currentScrollTime-scrollTime) > 200){ + if ((currentScrollTime - scrollTime) > 200) { scrollSamples = []; } scrollTime = currentScrollTime; - if(locked) { + if (locked) { return false; } - if(delta<0) { - if(index0) { - if(index>0) { - if(atTop()) { - if(isAccelerating(scrollSamples)) { + } else if (delta > 0) { + if (index > 0) { + if (atTop()) { + if (isAccelerating(scrollSamples)) { e.preventDefault(); index--; locked = true; - animateScroll(index,false,true); + animateScroll(index, false, true); } else { return false } @@ -337,67 +344,67 @@ } }, - keyHandler:function(e) { - if(disabled===true) { + keyHandler: function (e) { + if (disabled === true) { return true; } - if(locked===true) { + if (locked === true) { return false; } - if(e.keyCode==38) { - if(index>0) { - if(atTop()) { + if (e.keyCode == 38) { + if (index > 0) { + if (atTop()) { e.preventDefault(); index--; - animateScroll(index,false,true); + animateScroll(index, false, true); } } - } else if(e.keyCode==40) { - if(indexMath.abs(swipeScroll.touches.touchstart.x-swipeScroll.touches.touchmove.x))) { + if (swipeScroll.touches.touchstart.y !== swipeScroll.touches.touchmove.y && (Math.abs(swipeScroll.touches.touchstart.y - swipeScroll.touches.touchmove.y) > Math.abs(swipeScroll.touches.touchstart.x - swipeScroll.touches.touchmove.x))) { //if(!overflow[index]) { event.preventDefault(); //} swipeScroll.touches.direction = "y"; - if((swipeScroll.options.timeStamp+swipeScroll.options.timeGap)<(new Date().getTime()) && swipeScroll.touches.touchend == false) { + if ((swipeScroll.options.timeStamp + swipeScroll.options.timeGap) < (new Date().getTime()) && swipeScroll.touches.touchend == false) { swipeScroll.touches.touchend = true; if (swipeScroll.touches.touchstart.y > -1) { - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + if (Math.abs(swipeScroll.touches.touchmove.y - swipeScroll.touches.touchstart.y) > swipeScroll.options.distance) { + if (swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { swipeScroll.up(); @@ -438,12 +445,12 @@ } break; case 'touchend': - if(swipeScroll.touches[event.type]===false) { + if (swipeScroll.touches[event.type] === false) { swipeScroll.touches[event.type] = true; - if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction==="y") { + if (swipeScroll.touches.touchstart.y > -1 && swipeScroll.touches.touchmove.y > -1 && swipeScroll.touches.direction === "y") { - if(Math.abs(swipeScroll.touches.touchmove.y-swipeScroll.touches.touchstart.y)>swipeScroll.options.distance) { - if(swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { + if (Math.abs(swipeScroll.touches.touchmove.y - swipeScroll.touches.touchstart.y) > swipeScroll.options.distance) { + if (swipeScroll.touches.touchstart.y < swipeScroll.touches.touchmove.y) { swipeScroll.up(); } else { @@ -462,41 +469,41 @@ } } }, - down: function() { - if(index<=heights.length-1) { + down: function () { + if (index <= heights.length - 1) { - if(atBottom() && indexinterstitialIndex) { + if (Math.floor(elements[index].height() / $window.height()) > interstitialIndex) { // interstitialScroll(parseInt(heights[index])+($window.height()*interstitialIndex)); - interstitialScroll(Math.round(heights[index])+($window.height()*interstitialIndex)); + interstitialScroll(Math.round(heights[index]) + ($window.height() * interstitialIndex)); interstitialIndex += 1; } else { // interstitialScroll(parseInt(heights[index])+(elements[index].height()-$window.height())); - interstitialScroll(Math.round(heights[index])+(elements[index].height()-$window.height())); + interstitialScroll(Math.round(heights[index]) + (elements[index].height() - $window.height())); } } } }, - up: function() { - if(index>=0) { - if(atTop() && index>0) { + up: function () { + if (index >= 0) { + if (atTop() && index > 0) { index--; - animateScroll(index,false,true); + animateScroll(index, false, true); } else { - if(interstitialIndex>2) { + if (interstitialIndex > 2) { interstitialIndex -= 1; // interstitialScroll(parseInt(heights[index])+($window.height()*interstitialIndex)); - interstitialScroll(Math.round(heights[index])+($window.height()*interstitialIndex)); + interstitialScroll(Math.round(heights[index]) + ($window.height() * interstitialIndex)); } else { @@ -508,7 +515,7 @@ } }, - init: function() { + init: function () { if (document.addEventListener) { document.addEventListener('touchstart', swipeScroll.touchHandler, false); document.addEventListener('touchmove', swipeScroll.touchHandler, false); @@ -519,20 +526,20 @@ util = { - refresh:function(withCallback) { + refresh: function (withCallback) { clearTimeout(timeoutId2); - timeoutId2 = setTimeout(function() { + timeoutId2 = setTimeout(function () { sizePanels(); calculatePositions(true); - if(withCallback) { + if (withCallback) { settings.afterResize(); } - },400); + }, 400); }, - handleUpdate:function() { + handleUpdate: function () { util.refresh(false); }, - handleResize:function() { + handleResize: function () { util.refresh(true); } }; @@ -542,24 +549,24 @@ calculatePositions(false); - if(true===hasLocation) { - animateScroll(index,false,true); + if (true === hasLocation) { + animateScroll(index, false, true); } else { - setTimeout(function() { - animateScroll(0,false,true); - },200); + setTimeout(function () { + animateScroll(0, false, true); + }, 200); } - if(heights.length) { + if (heights.length) { manualScroll.init(); swipeScroll.init(); - $window.bind("resize",util.handleResize); + $window.bind("resize", util.handleResize); if (document.addEventListener) { window.addEventListener("orientationchange", util.handleResize, false); } } function interstitialScroll(pos) { - if( $().velocity ) { + if ($().velocity) { $(settings.target).stop().velocity('scroll', { duration: settings.scrollSpeed, easing: settings.easing, @@ -569,32 +576,32 @@ } else { $(settings.target).stop().animate({ scrollTop: pos - }, settings.scrollSpeed,settings.easing); + }, settings.scrollSpeed, settings.easing); } } function sizePanels() { var selector = settings.section; overflow = []; - if(settings.interstitialSection.length) { + if (settings.interstitialSection.length) { selector += "," + settings.interstitialSection; } - $(selector).each(function(i) { + $(selector).each(function (i) { - if(settings.setHeights) { - if($(this).is(settings.interstitialSection)) { + if (settings.setHeights) { + if ($(this).is(settings.interstitialSection)) { overflow[i] = false; } else { - if(($(this).css("height","auto").outerHeight()<$window.height()) || $(this).css("overflow")==="hidden") { - $(this).css({"height":$window.height()}); + if (($(this).css("height", "auto").outerHeight() < $window.height()) || $(this).css("overflow") === "hidden") { + $(this).css({"height": $window.height()}); overflow[i] = false; } else { - $(this).css({"height":$(this).height()}); + $(this).css({"height": $(this).height()}); - if(settings.overflowScroll) { + if (settings.overflowScroll) { overflow[i] = true; } else { overflow[i] = false; @@ -605,7 +612,7 @@ } else { - if(($(this).outerHeight()<$window.height()) || (settings.overflowScroll===false)) { + if (($(this).outerHeight() < $window.height()) || (settings.overflowScroll === false)) { overflow[i] = false; } else { overflow[i] = true; @@ -613,78 +620,81 @@ } }); } + function calculatePositions(resize) { var selector = settings.section; - if(settings.interstitialSection.length) { + if (settings.interstitialSection.length) { selector += "," + settings.interstitialSection; } heights = []; names = []; elements = []; - $(selector).each(function(i){ - if(i>0) { + $(selector).each(function (i) { + if (i > 0) { // heights[i] = parseInt($(this).offset().top) + settings.offset; heights[i] = Math.round($(this).offset().top) + settings.offset; } else { // heights[i] = parseInt($(this).offset().top); - heights[i] = Math.round($(this).offset().top); + heights[i] = Math.round($(this).offset().top) + 1; } - if(settings.sectionName && $(this).data(settings.sectionName)) { - names[i] = "#" + $(this).data(settings.sectionName).replace(/ /g,"-"); + if (settings.sectionName && $(this).data(settings.sectionName)) { + names[i] = "#" + $(this).data(settings.sectionName).replace(/ /g, "-"); } else { - if($(this).is(settings.interstitialSection)===false) { + if ($(this).is(settings.interstitialSection) === false) { names[i] = "#" + (i + 1); } else { names[i] = "#"; - if(i===$(selector).length-1 && i>1) { // If it's the last element, we will add its height so scroll goes right to the bottom + if (i === $(selector).length - 1 && i > 1) { // If it's the last element, we will add its height so scroll goes right to the bottom //--------- // ## PATCHED by Stephen to take into account the CSS scaled size of the element... //heights[i] = heights[i-1]+parseInt($(this).height()); // Original code - heights[i] = heights[i-1] + Math.round($(this)[0].getBoundingClientRect().height); + heights[i] = heights[i - 1] + Math.round($(this)[0].getBoundingClientRect().height); //--------- } } } elements[i] = $(this); try { - if($(names[i]).length && window.console) { + if ($(names[i]).length && window.console) { console.warn("Scrollify warning: Section names can't match IDs on the page - this will cause the browser to anchor."); } - } catch (e) {} + } catch (e) { + } - if(window.location.hash===names[i]) { + if (window.location.hash === names[i]) { index = i; hasLocation = true; } }); - if(true===resize) { - animateScroll(index,false,false); + if (true === resize) { + animateScroll(index, false, false); } else { settings.afterRender(); } } function atTop() { - if(!overflow[index]) { + if (!overflow[index]) { return true; } top = $window.scrollTop(); - if(top>parseInt(heights[index])) { + if (top > parseInt(heights[index])) { return false; } else { return true; } } + function atBottom() { - if(!overflow[index]) { + if (!overflow[index]) { return true; } top = $window.scrollTop(); - if(top=0;z--) { - if(typeof panel === 'string') { - if (names[z]===panel) { + for (; z >= 0; z--) { + if (typeof panel === 'string') { + if (names[z] === panel) { index = z; - animateScroll(z,instant,true); + animateScroll(z, instant, true); } } else { - if(z===panel) { + if (z === panel) { index = z; - animateScroll(z,instant,true); + animateScroll(z, instant, true); } } } } - $.scrollify.move = function(panel) { - if(panel===undefined) { + + $.scrollify.move = function (panel) { + if (panel === undefined) { return false; } - if(panel.originalEvent) { + if (panel.originalEvent) { panel = $(this).attr("href"); } - move(panel,false); + move(panel, false); }; - $.scrollify.instantMove = function(panel) { - if(panel===undefined) { + $.scrollify.instantMove = function (panel) { + if (panel === undefined) { return false; } - move(panel,true); + move(panel, true); }; - $.scrollify.next = function() { - if(index0) { + $.scrollify.previous = function () { + if (index > 0) { index -= 1; - animateScroll(index,false,true); + animateScroll(index, false, true); } }; - $.scrollify.instantNext = function() { - if(index0) { + $.scrollify.instantPrevious = function () { + if (index > 0) { index -= 1; - animateScroll(index,true,true); + animateScroll(index, true, true); } }; - $.scrollify.destroy = function() { - if(!initialised) { + $.scrollify.destroy = function () { + if (!initialised) { return false; } - if(settings.setHeights) { - $(settings.section).each(function() { - $(this).css("height","auto"); + if (settings.setHeights) { + $(settings.section).each(function () { + $(this).css("height", "auto"); }); } - $window.unbind("resize",util.handleResize); - if(settings.scrollbars) { + $window.unbind("resize", util.handleResize); + if (settings.scrollbars) { $window.unbind('mousedown', manualScroll.handleMousedown); $window.unbind('mouseup', manualScroll.handleMouseup); $window.unbind('scroll', manualScroll.handleScroll); } - $(document).unbind(wheelEvent,manualScroll.wheelHandler); + $(document).unbind(wheelEvent, manualScroll.wheelHandler); $(document).unbind('keydown', manualScroll.keyHandler); if (document.addEventListener) { @@ -777,35 +788,35 @@ elements = []; overflow = []; }; - $.scrollify.update = function() { - if(!initialised) { + $.scrollify.update = function () { + if (!initialised) { return false; } util.handleUpdate(); }; - $.scrollify.current = function() { + $.scrollify.current = function () { return elements[index]; }; - $.scrollify.disable = function() { + $.scrollify.disable = function () { disabled = true; }; - $.scrollify.enable = function() { + $.scrollify.enable = function () { disabled = false; if (typeof manualScroll !== 'undefined') { manualScroll.calculateNearest(); } }; - $.scrollify.isDisabled = function() { + $.scrollify.isDisabled = function () { return disabled; }; - $.scrollify.setOptions = function(updatedOptions) { - if(!initialised) { + $.scrollify.setOptions = function (updatedOptions) { + if (!initialised) { return false; } - if(typeof updatedOptions === "object") { + if (typeof updatedOptions === "object") { settings = $.extend(settings, updatedOptions); util.handleUpdate(); - } else if(window.console) { + } else if (window.console) { console.warn("Scrollify warning: Options need to be in an object."); } }; diff --git a/js/210-home.js b/js/210-home.js index ef70aef..18d9a54 100644 --- a/js/210-home.js +++ b/js/210-home.js @@ -6,13 +6,13 @@ function load_home() { // Bouncing scroll down arrow // Show scroll-down arrow after a small delay - setTimeout(function() { + setTimeout(function () { $('.scroll-arrow').fadeIn(1000); // Animate arrow TweenMax.to($('.scroll-arrow'), 1, {bottom: "+=15px", yoyo: true, repeat: -1, ease: Linear.easeNone}); }, 2500); - $(document).on('click', '.scroll-arrow', function(e) { + $(document).on('click', '.scroll-arrow', function (e) { $('html,body').animate({ scrollTop: $('#contentWrapper section:nth-of-type(2)').offset().top }, 1100, 'easeOutExpo'); @@ -20,16 +20,16 @@ function load_home() { }); // Handle clicks on pagination dots - $(".pagination li").on("click",function() { + $(".pagination li").on("click", function () { $.scrollify.move($(this).data('section')); }); // Handle clicks to AJAX popups and disable scrollify when they open // because it interferes with internal popup scrolling - $(document).on('click', '.popup', function() { + $(document).on('click', '.popup', function () { disableScrollify(); }); - $(document).on('click', '.closePopup', function() { + $(document).on('click', '.closePopup', function () { resizeHome(); // Update layout and re-enable scrollify if space requirements are met }); } @@ -46,8 +46,8 @@ function resizeHome() { calculateZoom(); // Resize sections, allowing for scale factor that will be applied to parent element - var wh = Math.ceil($(window).outerHeight() / zoom); - var ww = Math.ceil($(window).outerWidth() / zoom); + var wh = $(window).outerHeight() / zoom; + var ww = $(window).outerWidth() / zoom; resizeHomeContact(ww, wh); resizeHomeReferences(ww, wh); @@ -57,7 +57,7 @@ function resizeHome() { disableScrollify(); } else if (!isTallEnough()) { // Size each section according to its content and background image ratio - sections.each(function() { + sections.each(function () { var bgHolder = $(this).find('[data-bg-ratio]'), bgHeight = 0, @@ -90,7 +90,7 @@ function isTallEnough() { var contentHeight; var sectionHeight; - $('section .content-wrapper').each(function() { + $('section .content-wrapper').each(function () { // First, check if the section has a background image that forces a minimum ratio for the size if ($(this).data('bg-ratio')) { @@ -121,7 +121,7 @@ function initScrollify() { scrollbars: true, interstitialSection: '.auto-height', setHeights: false, - before: function(index, sections) { + before: function (index, sections) { //fb("before: #" + index, sections.length); // Handle scrolling to last (footer) section @@ -138,7 +138,7 @@ function initScrollify() { } else { - setTimeout(function() { + setTimeout(function () { $('#h').css({ 'background-color': 'transparent', 'box-shadow': '0 0 0 rgba(0,0,0,0)' @@ -156,10 +156,10 @@ function initScrollify() { $(".pagination .active").css('color', '').removeClass('active'); $(".pagination").find('[data-section="#' + ref + '"]').css('color', color).addClass('active'); }, - afterRender:function() { + afterRender: function () { var pagination = '
    '; - $('[data-section-name]').each(function(i) { + $('[data-section-name]').each(function (i) { pagination += '
  • ' + $(this).attr('data-section-name').charAt(0).toUpperCase() + $(this).attr('data-section-name').slice(1) + '
    • '; }); @@ -189,7 +189,7 @@ function disableScrollify() { fullPages = false; $.scrollify.disable(); setHeaderAnimation(); // Update header animation settings for normal scrolling - $('html,body').animate({scrollTop: $(window).scrollTop() + 1 }, 0); // Scroll down 1px to trigger header animation update + $('html,body').animate({scrollTop: $(window).scrollTop() + 1}, 0); // Scroll down 1px to trigger header animation update } } -- 2.39.5