From 2cb9ac299d10a5a913fae5287ff0de92c212f525 Mon Sep 17 00:00:00 2001 From: Florian Wegscheider Date: Wed, 20 Jul 2016 09:10:23 +0200 Subject: [PATCH 1/2] allow binding on different viewports apart from window --- CHANGELOG | 1 + README.md | 7 +- jquery.appear.js | 238 ++++++++++++++++++++++++++--------------------- 3 files changed, 137 insertions(+), 109 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 63167e7..4315526 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,4 @@ +0.3.7 allow binding on different viewports apart from window 0.3.3 IE8 compatibility fix. 0.3.2 Code cleanups. Appear now supports not only jQuery selectors but also raw DOM nodes wrapped in jQuery. 0.3.1 Added "disappear" event. Removed first argument (callback function) from $.fn.appear function. "appear" event is now triggered for each appeared element (before it was triggered only for a first element in selector). diff --git a/README.md b/README.md index c24e0cf..67c8168 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,12 @@ This plugin can be used to prevent unnecessary processeing for content that is h It implements a custom *appear*/*disappear* events which are fired when an element became visible/invisible in the browser viewport. - $('someselector').appear(); // It supports optional hash with "force_process" and "interval" keys. Check source code for details. + $('someselector').appear(); // It supports optional Object with options: + { + interval: 250 // delay between event-binding and actual processing of the elements + force_process: false // trigger processing after binding (after the delay) + scroll_selector: window // element that triggers appear on scroll + } $('
test
').appear(); // It also supports raw DOM nodes wrapped in jQuery. diff --git a/jquery.appear.js b/jquery.appear.js index 00b722a..c4a6bf7 100644 --- a/jquery.appear.js +++ b/jquery.appear.js @@ -6,112 +6,134 @@ * * https://github.com/morr/jquery.appear/ * - * Version: 0.3.6 + * Version: 0.3.7 */ -(function($) { - var selectors = []; - - var check_binded = false; - var check_lock = false; - var defaults = { - interval: 250, - force_process: false - }; - var $window = $(window); - - var $prior_appeared = []; - - function appeared(selector) { - return $(selector).filter(function() { - return $(this).is(':appeared'); - }); - } - - function process() { - check_lock = false; - for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) { - var $appeared = appeared(selectors[index]); - - $appeared.trigger('appear', [$appeared]); - - if ($prior_appeared[index]) { - var $disappeared = $prior_appeared[index].not($appeared); - $disappeared.trigger('disappear', [$disappeared]); - } - $prior_appeared[index] = $appeared; - } - } - - function add_selector(selector) { - selectors.push(selector); - $prior_appeared.push(); - } - - // "appeared" custom filter - $.expr[':'].appeared = function(element) { - var $element = $(element); - if (!$element.is(':visible')) { - return false; - } - - var window_left = $window.scrollLeft(); - var window_top = $window.scrollTop(); - var offset = $element.offset(); - var left = offset.left; - var top = offset.top; - - if (top + $element.height() >= window_top && - top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && - left + $element.width() >= window_left && - left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { - return true; - } else { - return false; - } - }; - - $.fn.extend({ - // watching for element's appearance in browser viewport - appear: function(options) { - var opts = $.extend({}, defaults, options || {}); - var selector = this.selector || this; - if (!check_binded) { - var on_check = function() { - if (check_lock) { - return; - } - check_lock = true; - - setTimeout(process, opts.interval); - }; - - $(window).scroll(on_check).resize(on_check); - check_binded = true; - } - - if (opts.force_process) { - setTimeout(process, opts.interval); - } - add_selector(selector); - return $(selector); - } - }); - - $.extend({ - // force elements's appearance check - force_appear: function() { - if (check_binded) { - process(); - return true; - } - return false; - } - }); -})(function() { - if (typeof module !== 'undefined') { - // Node - return require('jquery'); - } else { - return jQuery; - } -}()); +(function ($) { + var selectors = []; + var check_binded = []; + var check_lock = false; + var defaults = { + interval: 250, + force_process: false, + /** + * @type {Object} to which the scroll-event is bound, default 'window' + */ + scroll_selector: window + }; + + var $prior_appeared = []; + + function process() { + check_lock = false; + for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) { + var $appeared = $(selectors[index]).filter(function () { + return $(this).is(':appeared'); + }); + + $appeared.trigger('appear', [$appeared]); + + if ($prior_appeared[index]) { + var $disappeared = $prior_appeared[index].not($appeared); + $disappeared.trigger('disappear', [$disappeared]); + } + $prior_appeared[index] = $appeared; + } + } + + function add_selector(selector) { + selectors.push(selector); + $prior_appeared.push(); + } + + // "appeared" custom filter + $.expr[':']['appeared'] = function (element) { + var $element = $(element); + if (!$element.is(':visible')) { + return false; + } + + /** + * @type {jQuery} scrollable container + */ + var $scroll_selector = $element.data('scroll_selector'); + + var window_left = $scroll_selector.scrollLeft(); + var window_top = $scroll_selector.scrollTop(); + var offset = $element.offset(); + var left = offset.left; + var top = offset.top; + + if (top + $element.height() >= window_top && + top - ($element.data('appear-top-offset') || 0) <= window_top + $scroll_selector.height() && + left + $element.width() >= window_left && + left - ($element.data('appear-left-offset') || 0) <= window_left + $scroll_selector.width()) { + return true; + } else { + return false; + } + }; + + $.fn.extend({ + // watching for element's appearance in browser viewport + appear: function (options) { + var opts = $.extend({}, defaults, options || {}); + /** + * @type {jQuery} scrollable container + */ + var $scrollSelector = $(opts.scroll_selector); + var scrollSelectorName = $scrollSelector.selector || 'default'; + + // add the scroll selector to each element, so it is accessable in the :appeared check + this.each(function () { + $(this).data('scroll_selector', $scrollSelector); + }); + + var selector = this.selector || this; + // no binding on it yet + if ($.inArray(scrollSelectorName, check_binded) == -1) { + var on_check = function () { + if (check_lock) { + return; + } + check_lock = true; + + setTimeout(process, opts.interval); + }; + + $scrollSelector.on('scroll', on_check); + + // no resize-binding on window yet + if (check_binded.length == 0) { + $(window).on('resize', on_check); + } + + // mark it as bound + check_binded.push(scrollSelectorName); + } + + if (opts.force_process) { + setTimeout(process, opts.interval); + } + add_selector(selector); + return $(selector); + } + }); + + $.extend({ + // force elements's appearance check + force_appear: function () { + if (check_binded.length > 0) { + process(); + return true; + } + return false; + } + }); +})(function () { + if (typeof module !== 'undefined') { + // Node + return require('jquery'); + } else { + return jQuery; + } +}()); \ No newline at end of file From fe8cc5ad2da452db3cde487c7a8f0668f2cdd411 Mon Sep 17 00:00:00 2001 From: Florian Wegscheider Date: Wed, 20 Jul 2016 09:42:39 +0200 Subject: [PATCH 2/2] use 2 spaces instead of tabs --- jquery.appear.js | 252 +++++++++++++++++++++++------------------------ 1 file changed, 126 insertions(+), 126 deletions(-) diff --git a/jquery.appear.js b/jquery.appear.js index c4a6bf7..e6c85d6 100644 --- a/jquery.appear.js +++ b/jquery.appear.js @@ -9,131 +9,131 @@ * Version: 0.3.7 */ (function ($) { - var selectors = []; - var check_binded = []; - var check_lock = false; - var defaults = { - interval: 250, - force_process: false, - /** - * @type {Object} to which the scroll-event is bound, default 'window' - */ - scroll_selector: window - }; - - var $prior_appeared = []; - - function process() { - check_lock = false; - for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) { - var $appeared = $(selectors[index]).filter(function () { - return $(this).is(':appeared'); - }); - - $appeared.trigger('appear', [$appeared]); - - if ($prior_appeared[index]) { - var $disappeared = $prior_appeared[index].not($appeared); - $disappeared.trigger('disappear', [$disappeared]); - } - $prior_appeared[index] = $appeared; - } - } - - function add_selector(selector) { - selectors.push(selector); - $prior_appeared.push(); - } - - // "appeared" custom filter - $.expr[':']['appeared'] = function (element) { - var $element = $(element); - if (!$element.is(':visible')) { - return false; - } - - /** - * @type {jQuery} scrollable container - */ - var $scroll_selector = $element.data('scroll_selector'); - - var window_left = $scroll_selector.scrollLeft(); - var window_top = $scroll_selector.scrollTop(); - var offset = $element.offset(); - var left = offset.left; - var top = offset.top; - - if (top + $element.height() >= window_top && - top - ($element.data('appear-top-offset') || 0) <= window_top + $scroll_selector.height() && - left + $element.width() >= window_left && - left - ($element.data('appear-left-offset') || 0) <= window_left + $scroll_selector.width()) { - return true; - } else { - return false; - } - }; - - $.fn.extend({ - // watching for element's appearance in browser viewport - appear: function (options) { - var opts = $.extend({}, defaults, options || {}); - /** - * @type {jQuery} scrollable container - */ - var $scrollSelector = $(opts.scroll_selector); - var scrollSelectorName = $scrollSelector.selector || 'default'; - - // add the scroll selector to each element, so it is accessable in the :appeared check - this.each(function () { - $(this).data('scroll_selector', $scrollSelector); - }); - - var selector = this.selector || this; - // no binding on it yet - if ($.inArray(scrollSelectorName, check_binded) == -1) { - var on_check = function () { - if (check_lock) { - return; - } - check_lock = true; - - setTimeout(process, opts.interval); - }; - - $scrollSelector.on('scroll', on_check); - - // no resize-binding on window yet - if (check_binded.length == 0) { - $(window).on('resize', on_check); - } - - // mark it as bound - check_binded.push(scrollSelectorName); - } - - if (opts.force_process) { - setTimeout(process, opts.interval); - } - add_selector(selector); - return $(selector); - } - }); - - $.extend({ - // force elements's appearance check - force_appear: function () { - if (check_binded.length > 0) { - process(); - return true; - } - return false; - } - }); + var selectors = []; + var check_binded = []; + var check_lock = false; + var defaults = { + interval: 250, + force_process: false, + /** + * @type {Object} to which the scroll-event is bound, default 'window' + */ + scroll_selector: window + }; + + var $prior_appeared = []; + + function process() { + check_lock = false; + for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) { + var $appeared = $(selectors[index]).filter(function () { + return $(this).is(':appeared'); + }); + + $appeared.trigger('appear', [$appeared]); + + if ($prior_appeared[index]) { + var $disappeared = $prior_appeared[index].not($appeared); + $disappeared.trigger('disappear', [$disappeared]); + } + $prior_appeared[index] = $appeared; + } + } + + function add_selector(selector) { + selectors.push(selector); + $prior_appeared.push(); + } + + // "appeared" custom filter + $.expr[':']['appeared'] = function (element) { + var $element = $(element); + if (!$element.is(':visible')) { + return false; + } + + /** + * @type {jQuery} scrollable container + */ + var $scroll_selector = $element.data('scroll_selector'); + + var window_left = $scroll_selector.scrollLeft(); + var window_top = $scroll_selector.scrollTop(); + var offset = $element.offset(); + var left = offset.left; + var top = offset.top; + + if (top + $element.height() >= window_top && + top - ($element.data('appear-top-offset') || 0) <= window_top + $scroll_selector.height() && + left + $element.width() >= window_left && + left - ($element.data('appear-left-offset') || 0) <= window_left + $scroll_selector.width()) { + return true; + } else { + return false; + } + }; + + $.fn.extend({ + // watching for element's appearance in browser viewport + appear: function (options) { + var opts = $.extend({}, defaults, options || {}); + /** + * @type {jQuery} scrollable container + */ + var $scrollSelector = $(opts.scroll_selector); + var scrollSelectorName = $scrollSelector.selector || 'default'; + + // add the scroll selector to each element, so it is accessable in the :appeared check + this.each(function () { + $(this).data('scroll_selector', $scrollSelector); + }); + + var selector = this.selector || this; + // no binding on it yet + if ($.inArray(scrollSelectorName, check_binded) == -1) { + var on_check = function () { + if (check_lock) { + return; + } + check_lock = true; + + setTimeout(process, opts.interval); + }; + + $scrollSelector.on('scroll', on_check); + + // no resize-binding on window yet + if (check_binded.length == 0) { + $(window).on('resize', on_check); + } + + // mark it as bound + check_binded.push(scrollSelectorName); + } + + if (opts.force_process) { + setTimeout(process, opts.interval); + } + add_selector(selector); + return $(selector); + } + }); + + $.extend({ + // force elements's appearance check + force_appear: function () { + if (check_binded.length > 0) { + process(); + return true; + } + return false; + } + }); })(function () { - if (typeof module !== 'undefined') { - // Node - return require('jquery'); - } else { - return jQuery; - } + if (typeof module !== 'undefined') { + // Node + return require('jquery'); + } else { + return jQuery; + } }()); \ No newline at end of file