diff --git a/src/definitions/behaviors/visibility.js b/src/definitions/behaviors/visibility.js index f5df2a3c0..0d2fb6534 100644 --- a/src/definitions/behaviors/visibility.js +++ b/src/definitions/behaviors/visibility.js @@ -11,6 +11,8 @@ ;(function ( $, window, document, undefined ) { +"use strict"; + $.fn.visibility = function(parameters) { var $allModules = $(this), @@ -120,11 +122,8 @@ $.fn.visibility = function(parameters) { $window .on('resize' + eventNamespace, module.event.refresh) ; - // rudimentary pub/sub $context - .off('scroll' + eventNamespace, module.event.publish) - .on('scroll' + eventNamespace, module.event.publish) - .on('scrollchange' + eventNamespace, module.event.subscribe) + .on('scroll' + eventNamespace, module.event.scroll) ; }, @@ -132,24 +131,21 @@ $.fn.visibility = function(parameters) { refresh: function() { requestAnimationFrame(module.refresh); }, - publish: function() { - // one event and one animation frame for all visibility checks + scroll: function() { + module.verbose('Scroll position changed'); if(settings.throttle) { clearTimeout(module.timer); module.timer = setTimeout(function() { - $context.trigger('scrollchange', $context.scrollTop() + settings.offset); + settings.onScroll.call(element); + module.checkVisibility(); }, settings.throttle); } else { requestAnimationFrame(function() { - scroll = $context.scrollTop() + settings.offset - $context.trigger('scrollchange', $context.scrollTop() + settings.offset); + settings.onScroll.call(element); + module.checkVisibility(); }); } - }, - subscribe: function(event, scroll) { - module.verbose('Scroll position changed', scroll); - module.checkVisibility(scroll); } }, @@ -181,16 +177,14 @@ $.fn.visibility = function(parameters) { }, should: { - trackChanges: function() { if(methodInvoked && queryArguments.length > 0) { module.debug('One time query, no need to bind events'); return false; } - module.debug('Query is attaching callbacks, watching for changes with scroll'); + module.debug('Callbacks being attached'); return true; } - }, setup: { @@ -205,51 +199,44 @@ $.fn.visibility = function(parameters) { var src = $module.data('src') ; - if(!src) { - module.error(error.noSRC); - return; - } - module.verbose('Lazy loading image', src); - settings.observeChanges = false; - settings.once = true; - settings.onTopVisible = function() { - module.debug('Image top visible', element); - module.precache(src, function() { - module.set.image(src); + if(src) { + module.verbose('Lazy loading image', src); + settings.observeChanges = false; + // show when top visible + module.topVisible(function() { + module.debug('Image top visible', element); + module.precache(src, function() { + module.set.image(src); + settings.onTopVisible = false; + }); }); - }; + } }, fixed: function() { module.verbose('Setting up fixed on element pass'); - $module - .visibility({ - once: false, - continuous: false, - onTopPassed: function() { - $module - .addClass(className.fixed) - .css({ - position: 'fixed', - top: settings.offset + 'px' - }) - ; - if(settings.transition) { - if($.fn.transition !== undefined) { - $module.transition(settings.transition, settings.duration); - } - } - }, - onTopPassedReverse: function() { - $module - .removeClass(className.fixed) - .css({ - position: '', - top: '' - }) - ; + settings.once = false; + settings.onTopPassed = function() { + $module + .addClass(className.fixed) + .css({ + top: settings.offset + 'px' + }) + ; + if(settings.transition) { + if($.fn.transition !== undefined) { + $module.transition(settings.transition, settings.duration); } - }) - ; + } + }; + settings.onTopPassedReverse = function() { + $module + .removeClass(className.fixed) + .css({ + position: '', + top: '' + }) + ; + }; } }, @@ -284,7 +271,7 @@ $.fn.visibility = function(parameters) { is: { visible: function() { if(module.cache && module.cache.element) { - return (module.cache.element.height > 0 && module.cache.element.width > 0); + return (module.cache.element.width > 0); } return false; } @@ -306,13 +293,9 @@ $.fn.visibility = function(parameters) { } }, - checkVisibility: function(scroll) { + checkVisibility: function() { module.verbose('Checking visibility of element', module.cache.element); - module.save.calculations(scroll); - module.checkCallbacks(); - }, - - checkCallbacks: function() { + module.save.calculations(); if( module.is.visible() ) { // percentage module.passed(); @@ -613,9 +596,9 @@ $.fn.visibility = function(parameters) { }, save: { - calculations: function(scroll) { + calculations: function() { module.verbose('Saving all calculations necessary to determine positioning'); - module.save.scroll(scroll); + module.save.scroll(); module.save.direction(); module.save.screenCalculations(); module.save.elementCalculations(); @@ -628,14 +611,8 @@ $.fn.visibility = function(parameters) { } } }, - scroll: function(scroll) { - if(scroll === undefined) { - //debugger; - } - module.cache.scroll = (scroll !== undefined) - ? scroll - : $context.scrollTop() + settings.offset - ; + scroll: function() { + module.cache.scroll = $context.scrollTop() + settings.offset; }, direction: function() { var @@ -662,9 +639,6 @@ $.fn.visibility = function(parameters) { ; module.verbose('Saving element position'); // (quicker than $.extend) - element.margin = {}; - element.margin.top = parseInt($module.css('margin-top'), 10); - element.margin.bottom = parseInt($module.css('margin-bottom'), 10); element.fits = (element.height < screen.height); element.offset = $module.offset(); element.width = $module.outerWidth(); @@ -680,6 +654,9 @@ $.fn.visibility = function(parameters) { ; // offset if(settings.includeMargin) { + element.margin = {}; + element.margin.top = parseInt($module.css('margin-top'), 10); + element.margin.bottom = parseInt($module.css('margin-bottom'), 10); element.top = element.offset.top - element.margin.top; element.bottom = element.offset.top + element.height + element.margin.bottom; } @@ -712,16 +689,11 @@ $.fn.visibility = function(parameters) { }, screenCalculations: function() { var - scroll = $context.scrollTop() + settings.offset + scroll = module.get.scroll() ; - if(module.cache.scroll === undefined) { - module.cache.scroll = $context.scrollTop() + settings.offset; - } module.save.direction(); - $.extend(module.cache.screen, { - top : scroll, - bottom : scroll + module.cache.screen.height - }); + module.cache.screen.top = scroll; + module.cache.screen.bottom = scroll + module.cache.screen.height; return module.cache.screen; }, screenSize: function() { @@ -982,7 +954,7 @@ $.fn.visibility.settings = { fixed: 'fixed' }, - observeChanges : false, + observeChanges : true, debug : false, verbose : false, @@ -1031,7 +1003,6 @@ $.fn.visibility.settings = { onScroll : function(){}, error : { - noSRC : 'Image preloading requires a data-src value', method : 'The method you called is not defined.' }