isOnScreen

gistfile1.txt

AUI().use(
	'aui-base',
	'event-base',
	'transition',
	function(A) {
		var body = A.getBody();
		var WIN = A.getWin();

		var toggle = A.one('#toggle');
		var topNav = A.one('#topNavigation');

		var lazyLoadObj = A.all('.lazy-load');
		var onScreenHelper = A.all('.on-screen-helper');
		var menuToggle = A.all('.menu-toggle');

		var lazyLoad = function() {
			var currentScrollPos = WIN.get('docScrollY');

			var winHeight = WIN._node.innerHeight;

			lazyLoadObj.each(
				function(item, index, collection) {
					if (!item.hasClass('lazy-loaded')) {
						var loadPos = item.getY() - winHeight;

						if (currentScrollPos > loadPos) {
							var datasrc = item.attr('datasrc');
							var src = item.attr('src');

							if (src != datasrc) {
								item.attr('src', datasrc);
							}

							item.addClass('lazy-loaded');
						}
					}
				}
			);
		};

		var isOnScreen = function() {
			var currentScrollPos = WIN.get('docScrollY');

			var winHeight = WIN._node.innerHeight;

			onScreenHelper.each(
				function(item, index, collection) {
					var topEdge = item.getY();

					var bottomEdge = topEdge + item.get('clientHeight');

					var screenBottom = topEdge - winHeight;

					if ((currentScrollPos > topEdge) && (currentScrollPos <= bottomEdge)) {
						item.addClass('at-top');
					}
					else {
						item.removeClass('at-top');
					}

					if ((currentScrollPos > screenBottom) && (currentScrollPos <= bottomEdge)) {
						item.addClass('at-bottom');
					}
					else {
						item.removeClass('at-bottom');
					}
				}
			);
		};

		var onLoadScrollResize = function (nodes, action) {
			if (nodes.size()) {
				action();

				A.on('scroll', function() {
					action();
				});

				A.on('resize',function() {
					action();
				});
			}
		}

		onLoadScrollResize(lazyLoadObj, lazyLoad)
		onLoadScrollResize(onScreenHelper, isOnScreen)

		if (toggle) {
			toggle.on(
				'click',
				function(event) {
					var navHeight = A.one('#topNavContent').get('clientHeight');

					var height = 0;

					body.toggleClass('show-nav');

					if (body.hasClass('show-nav')) {
						height = navHeight + 55;
					}

					topNav.transition(
						{
							duration: 0.5,
							height: height
						}
					);

					topNav.setStyle('height', height);
				}
			);
		}

		if (menuToggle) {
			menuToggle.on(
				'click',
				function(event) {
					var childNavHeight = 37;
					var height = 37;

					var childNav = event.target.ancestor('#child-nav');

					var childMenuHeight = childNav.one('.child-menu').get('clientHeight');

					event.preventDefault();

					childNav.toggleClass('show-menu');

					if (childNav.hasClass('show-menu')) {
						height = childNavHeight + childMenuHeight + 21;
					}

					childNav.transition(
						{
							duration: 0.25,
							height: height
						}
					);

					childNav.setStyle('height', height);
				}
			);
		}

		var popClicks = A.all('.pop-click');

		var popClickHandle;

		var togglePopClick = function(event) {
			event.stopPropagation();

			var targetNode = event.target;

			if (targetNode.hasClass('pop-click-content') || targetNode.ancestor('.pop-click-content')) {
				return;
			}

			var activePopClick = A.one('.pop-click-active');

			if (activePopClick) {
				activePopClick.removeClass('pop-click-active');
			}

			var currentTargetNode = event.currentTarget;

			if (currentTargetNode.hasClass('pop-click') && (currentTargetNode != activePopClick)) {
				currentTargetNode.addClass('pop-click-active');
			}

			activePopClick = A.one('.pop-click-active');

			if (activePopClick && !popClickHandle) {
				popClickHandle = A.getDoc().on('click', togglePopClick);
			}
			else if (popClickHandle && !activePopClick) {
				popClickHandle.detach();

				popClickHandle = null;
			}
		};

		popClicks.on('click', togglePopClick);
	}
);