From 7ef74445e1d88c5337104eb986904315066eb95f Mon Sep 17 00:00:00 2001 From: Eugene Cheah Date: Fri, 19 Jun 2015 12:41:40 +0000 Subject: [PATCH 1/3] Major rewritting of original jquery.visible.js, to support more complex parent views. And/or offsets --- jquery.visible.js | 140 ++++++++++++++++++++++++++++++---------------- 1 file changed, 92 insertions(+), 48 deletions(-) diff --git a/jquery.visible.js b/jquery.visible.js index 745956a..f6b156e 100644 --- a/jquery.visible.js +++ b/jquery.visible.js @@ -2,67 +2,111 @@ /** * Copyright 2012, Digital Fusion + * Copyright 2015, picoded.com + * * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * - * @author Sam Sehnert + * @author (original) Sam Sehnert + * @author (refactored by) Eugene Cheah (eugene@picoded.com) + * * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ - var $w = $(window); - $.fn.visible = function(partial,hidden,direction){ + /// Gets the boundingClientRect() box value natively, or via jQuery of the first matched element. Returns false if no nodes in the list + $.fn.getBoundingClientRect = function() { + if (this.length < 1) + return false; + + var $t = this.length > 1 ? this.eq(0) : this; + var _t = $t.get(0); + + if (typeof _t.getBoundingClientRect === 'function') { + return _t.getBoundingClientRect(); + } else { + var offset = $t.offset(), + width = $t.width(), + height = $t.height(); + + return { + top: offset.top, + left: offset.left, + bottom: offset.top+height, + right: offset.left+width, + + width: width, + height: height + }; + } + } + + /// Does a visibility check within the parent object, and given offset. + $.fn.visibleFromParentAndOffset = function(parent,offset,partial,hidden,direction){ if (this.length < 1) return; var $t = this.length > 1 ? this.eq(0) : this, - t = $t.get(0), - vpWidth = $w.width(), - vpHeight = $w.height(), - direction = (direction) ? direction : 'both', - clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; - - if (typeof t.getBoundingClientRect === 'function'){ - - // Use this native browser method, if available. - var rec = t.getBoundingClientRect(), - tViz = rec.top >= 0 && rec.top < vpHeight, - bViz = rec.bottom > 0 && rec.bottom <= vpHeight, - lViz = rec.left >= 0 && rec.left < vpWidth, - rViz = rec.right > 0 && rec.right <= vpWidth, - vVisible = partial ? tViz || bViz : tViz && bViz, - hVisible = partial ? lViz || rViz : lViz && rViz; - - if(direction === 'both') - return clientSize && vVisible && hVisible; - else if(direction === 'vertical') - return clientSize && vVisible; - else if(direction === 'horizontal') - return clientSize && hVisible; - } else { + _t = $t.get(0); + + /// Does visibility check is needed? + if( !(hidden === true ? (_t.offsetWidth * _t.offsetHeight) > 0 : true) ) { + return false; + } - var viewTop = $w.scrollTop(), - viewBottom = viewTop + vpHeight, - viewLeft = $w.scrollLeft(), - viewRight = viewLeft + vpWidth, - offset = $t.offset(), - _top = offset.top, - _bottom = _top + $t.height(), - _left = offset.left, - _right = _left + $t.width(), - compareTop = partial === true ? _bottom : _top, - compareBottom = partial === true ? _top : _bottom, - compareLeft = partial === true ? _right : _left, - compareRight = partial === true ? _left : _right; - - if(direction === 'both') - return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); - else if(direction === 'vertical') - return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); - else if(direction === 'horizontal') - return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); + offset = (offset)? offset : {}; + direction = (direction) ? direction : 'both'; + + var $p = parent.length > 1 ? parent.eq(0) : parent, + + tBounding = $t.getBoundingClientRect(), + pBounding = $p.getBoundingClientRect(); + + if( !pBounding ) { + return false; } + + var tFullOffsets = { + top : parseInt(tBounding.top), + left : parseInt(tBounding.left), + + bottom: parseInt(tBounding.top) + parseInt(tBounding.height), + right : parseInt(tBounding.left) + parseInt(tBounding.width) + }, + oFullOffsets = { + top: parseInt(pBounding.top) + parseInt( (!isNaN(offset.top))? offset.top : 0 ), + left: parseInt(pBounding.left) + parseInt( (!isNaN(offset.left))? offset.left : 0 ), + + bottom: parseInt(pBounding.top) + parseInt( (!isNaN(offset.bottom))? offset.bottom : 0 ) + parseInt(pBounding.height), + right: parseInt(pBounding.left) + parseInt( (!isNaN(offset.right))? offset.right : 0 ) + parseInt(pBounding.width) + }, + + tViz = tFullOffsets.top >= oFullOffsets.top && tFullOffsets.top < oFullOffsets.bottom, + bViz = tFullOffsets.bottom >= oFullOffsets.top && tFullOffsets.bottom < oFullOffsets.bottom, + vVisible_large = tFullOffsets.top <= oFullOffsets.top && tFullOffsets.bottom >= oFullOffsets.bottom, //partial matching for dom, larger then the window + vVisible = partial? tViz || bViz || vVisible_large : tViz && bViz; + + if(direction === 'vertical') { //only checks vertical + return vVisible; + } + + var lViz = tFullOffsets.left >= oFullOffsets.left && tFullOffsets.left < oFullOffsets.right, + rViz = tFullOffsets.right >= oFullOffsets.right && tFullOffsets.right < oFullOffsets.right, + hVisible_large = tFullOffsets.left <= oFullOffsets.left && tFullOffsets.right >= oFullOffsets.right, //partial matching for dom, larger then the window + hVisible = partial? lViz || rViz || hVisible_large : lViz && rViz; + + if(direction === 'horizontal') { //only check horizontal + return hVisible; + } + + // Assumes check both + return vVisible && hVisible; + }; + + /// Original syntax support + $.fn.visible = function(partial,hidden,direction){ + return this.visibleFromParentAndOffset($("body"), null, partial,hidden,direction); }; -})(jQuery); +})(jQuery); \ No newline at end of file From cc58f74a46c71b5f7869dacd37c0474c51a2dec2 Mon Sep 17 00:00:00 2001 From: Eugene Cheah Date: Fri, 19 Jun 2015 12:52:37 +0000 Subject: [PATCH 2/3] Syntax cleanup --- jquery.visible.js | 133 ++++++++++++++++++++++++---------------------- 1 file changed, 68 insertions(+), 65 deletions(-) diff --git a/jquery.visible.js b/jquery.visible.js index f6b156e..4fd063a 100644 --- a/jquery.visible.js +++ b/jquery.visible.js @@ -1,45 +1,58 @@ (function($){ /** - * Copyright 2012, Digital Fusion - * Copyright 2015, picoded.com - * - * Licensed under the MIT license. - * http://teamdf.com/jquery-plugins/license/ - * - * @author (original) Sam Sehnert - * @author (refactored by) Eugene Cheah (eugene@picoded.com) - * - * @desc A small plugin that checks whether elements are within - * the user visible viewport of a web browser. - * only accounts for vertical position, not horizontal. - */ - - /// Gets the boundingClientRect() box value natively, or via jQuery of the first matched element. Returns false if no nodes in the list - $.fn.getBoundingClientRect = function() { + * Copyright 2012, Digital Fusion + * Copyright 2015, picoded.com + * + * Licensed under the MIT license. + * http://teamdf.com/jquery-plugins/license/ + * + * @author (original) Sam Sehnert + * @author (refactored by) Eugene Cheah (eugene@picoded.com) + * + * @desc A small plugin that checks whether elements are within + * the user visible viewport of a web browser. Adds the following functions + * + * + getFullOffsets : gets the full top,left,bottom,right offsets relative to + * the top,left corner of the browser. With an optional delta + * adjustment of results. Also returns object width / height. + * + * + visibleFromParentAndOffset : Extends the original visible function, to check + * relative to a parent view box, and its offsets + * + * + visible : original visible functionality by Sam Sehnert + */ + + /// gets the full top,left,bottom,right offsets relative to the top,left corner of the browser. + $.fn.getFullOffsets = function( delta ) { if (this.length < 1) return false; + + delta = (delta)? delta : {}; - var $t = this.length > 1 ? this.eq(0) : this; - var _t = $t.get(0); + var $t = this.length > 1 ? this.eq(0) : this, + _t = $t.get(0), + offset, width, height; if (typeof _t.getBoundingClientRect === 'function') { - return _t.getBoundingClientRect(); + offset = _t.getBoundingClientRect(); + width = offset.width; + height = offset.height; } else { - var offset = $t.offset(), - width = $t.width(), - height = $t.height(); - - return { - top: offset.top, - left: offset.left, - bottom: offset.top+height, - right: offset.left+width, - - width: width, - height: height - }; + offset = offset = $t.offset(); + width = $t.width(); + height = $t.height(); } + + return { + top: offset.top + (isNaN(delta.top)? 0 : parseFloat(delta.top) ), + left: offset.left + (isNaN(delta.left)? 0 : parseFloat(delta.left) ), + bottom: offset.top + height + (isNaN(delta.bottom)? 0 : parseFloat(delta.bottom) ), + right: offset.left + width + (isNaN(delta.right)? 0 : parseFloat(delta.right) ), + + width: width + (isNaN(delta.width)? 0 : parseFloat(delta.width) ), + height: height + (isNaN(delta.height)? 0 : parseFloat(delta.height) ) + }; } /// Does a visibility check within the parent object, and given offset. @@ -47,58 +60,48 @@ if (this.length < 1) return; - var $t = this.length > 1 ? this.eq(0) : this, - _t = $t.get(0); + var $t = this.length > 1 ? this.eq(0) : this, + _t = $t.get(0); /// Does visibility check is needed? if( !(hidden === true ? (_t.offsetWidth * _t.offsetHeight) > 0 : true) ) { return false; } - offset = (offset)? offset : {}; + offset = (offset)? offset : {}; direction = (direction) ? direction : 'both'; - var $p = parent.length > 1 ? parent.eq(0) : parent, - - tBounding = $t.getBoundingClientRect(), - pBounding = $p.getBoundingClientRect(); + var $p = parent.length > 1 ? parent.eq(0) : parent, + tFullOffsets = $t.getFullOffsets(), + pFullOffsets = $p.getFullOffsets( offset ); - if( !pBounding ) { + if( !tFullOffsets || !pFullOffsets ) { return false; } - var tFullOffsets = { - top : parseInt(tBounding.top), - left : parseInt(tBounding.left), - - bottom: parseInt(tBounding.top) + parseInt(tBounding.height), - right : parseInt(tBounding.left) + parseInt(tBounding.width) - }, - oFullOffsets = { - top: parseInt(pBounding.top) + parseInt( (!isNaN(offset.top))? offset.top : 0 ), - left: parseInt(pBounding.left) + parseInt( (!isNaN(offset.left))? offset.left : 0 ), - - bottom: parseInt(pBounding.top) + parseInt( (!isNaN(offset.bottom))? offset.bottom : 0 ) + parseInt(pBounding.height), - right: parseInt(pBounding.left) + parseInt( (!isNaN(offset.right))? offset.right : 0 ) + parseInt(pBounding.width) - }, - - tViz = tFullOffsets.top >= oFullOffsets.top && tFullOffsets.top < oFullOffsets.bottom, - bViz = tFullOffsets.bottom >= oFullOffsets.top && tFullOffsets.bottom < oFullOffsets.bottom, - vVisible_large = tFullOffsets.top <= oFullOffsets.top && tFullOffsets.bottom >= oFullOffsets.bottom, //partial matching for dom, larger then the window - vVisible = partial? tViz || bViz || vVisible_large : tViz && bViz; + var tViz = tFullOffsets.top >= pFullOffsets.top && tFullOffsets.top < pFullOffsets.bottom, + bViz = tFullOffsets.bottom >= pFullOffsets.top && tFullOffsets.bottom < pFullOffsets.bottom, + // + // partial matching for dom, larger then the parent dom + // + vVisible_large = tFullOffsets.top <= pFullOffsets.top && tFullOffsets.bottom >= pFullOffsets.bottom, + vVisible = partial? tViz || bViz || vVisible_large : tViz && bViz; if(direction === 'vertical') { //only checks vertical return vVisible; - } + } - var lViz = tFullOffsets.left >= oFullOffsets.left && tFullOffsets.left < oFullOffsets.right, - rViz = tFullOffsets.right >= oFullOffsets.right && tFullOffsets.right < oFullOffsets.right, - hVisible_large = tFullOffsets.left <= oFullOffsets.left && tFullOffsets.right >= oFullOffsets.right, //partial matching for dom, larger then the window - hVisible = partial? lViz || rViz || hVisible_large : lViz && rViz; + var lViz = tFullOffsets.left >= pFullOffsets.left && tFullOffsets.left < pFullOffsets.right, + rViz = tFullOffsets.right >= pFullOffsets.right && tFullOffsets.right < pFullOffsets.right, + // + // partial matching for dom, larger then the parent dom + // + hVisible_large = tFullOffsets.left <= pFullOffsets.left && tFullOffsets.right >= pFullOffsets.right, + hVisible = partial? lViz || rViz || hVisible_large : lViz && rViz; if(direction === 'horizontal') { //only check horizontal return hVisible; - } + } // Assumes check both return vVisible && hVisible; From ae245c24cb28decea851a44bae8537d0f8aa9cc5 Mon Sep 17 00:00:00 2001 From: Eugene Cheah Date: Fri, 19 Jun 2015 12:53:53 +0000 Subject: [PATCH 3/3] Added missing newline at end of js --- jquery.visible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.visible.js b/jquery.visible.js index 4fd063a..b181f96 100644 --- a/jquery.visible.js +++ b/jquery.visible.js @@ -112,4 +112,4 @@ return this.visibleFromParentAndOffset($("body"), null, partial,hidden,direction); }; -})(jQuery); \ No newline at end of file +})(jQuery);