event-onscreen.js

AUI().add(
	'event-onscreen',
	function(A) {
		A.Event.defineOnScreen = function(name) {
			var config = {
				detach: function(node, subscription, notifier) {
					var eventHandle = subscription._eventHandle;

					if (eventHandle) {
						eventHandle.detach();
					}
				},

				on: function(node, subscription, notifier) {
					var instance = this;

					if (node.attr('data-offset')) {
						var offsetObject = A.JSON.parse(node.attr('data-offset'));
					}

					if (offsetObject) {
						subscription._nodeOffset = offsetObject;
					}

					subscription._eventHandle = A.on(
						['load', 'resize', 'scroll'],
						function(event) {
							instance._processOnScreenEvent(node, subscription, notifier, event);
						}
					);
				},

				_findNodePosition: function(node, subscription, event) {
					if (!subscription.nodePosition) {
						subscription.nodePosition = {}
					}

					var nodePosition = subscription.nodePosition;

					if (!event || (event && (event.type != 'scroll'))) {
						nodePosition.top = node.getY();

						nodePosition.bottom = nodePosition.top + node.get('clientHeight');

						var offset = subscription._nodeOffset;

						if (offset && offset.top) {
							nodePosition.top += parseInt(offset.top);
						}

						if (offset && offset.bottom) {
							nodePosition.bottom += parseInt(offset.bottom);
						}
					}

					return nodePosition;
				},

				_findWindowPosition: function() {
					var WIN = A.getWin();

					var winPosition = {};

					winPosition.top = WIN.get('docScrollY');

					var winHeight = WIN.get('innerHeight');

					if (winHeight == undefined) {
						winHeight = document.documentElement.clientHeight;
					}

					winPosition.bottom = winPosition.top + winHeight;

					return winPosition;
				},

				_processOnScreenEvent: function(node, subscription, notifier, event) {
					var instance = this;

					var winPosition = instance._findWindowPosition();

					var nodePosition = instance._findNodePosition(node, subscription, event);

					var fireEvent = false;

					if (name == 'offscreenbottom') {
						fireEvent = winPosition.bottom < nodePosition.top;
					}
					else if (name == 'offscreentop') {
						fireEvent = winPosition.top > nodePosition.bottom;
					}
					else if (name == 'onscreenbottom') {
						fireEvent = (winPosition.bottom >= nodePosition.top) && (winPosition.bottom <= nodePosition.bottom);
					}
					else if (name == 'onscreentop') {
						fireEvent = (winPosition.top >= nodePosition.top) && (winPosition.top <= nodePosition.bottom);
					}
					else if (name == 'pastscreenbottom') {
						fireEvent = winPosition.bottom >= nodePosition.top;
					}
					else if (name == 'pastscreentop') {
						fireEvent = winPosition.top >= nodePosition.top;
					}
					else if (name == 'beforescreenbottom') {
						fireEvent = winPosition.bottom <= nodePosition.top;
					}
					else if (name == 'beforescreentop') {
						fireEvent = winPosition.top <= nodePosition.top;
					}
					else {
						fireEvent = (winPosition.bottom >= nodePosition.top) && (winPosition.top <= nodePosition.bottom);
					}

					if (fireEvent) {
						if (event) {
							event.currentTarget = node;
						}

						notifier.fire(node);
					}
				}
			};

			A.Event.define(name, config);
		};

		A.Event.defineOnScreen('onscreen');
		A.Event.defineOnScreen('onscreenbottom');
		A.Event.defineOnScreen('onscreentop');
		A.Event.defineOnScreen('offscreenbottom');
		A.Event.defineOnScreen('offscreentop');
		A.Event.defineOnScreen('pastscreenbottom');
		A.Event.defineOnScreen('pastscreentop');
		A.Event.defineOnScreen('beforescreenbottom');
		A.Event.defineOnScreen('beforescreentop');
	},
	'',
	{
		requires:['aui-base','event-synthetic', 'json-parse']
	}
);