componentize core utility functions

jlmakes · jlmakes · commit f55b4ec1947d · 2018-01-04T21:23:06.000+01:00
diff --git a/src/instance/constructor.js b/src/instance/constructor.js
@@ -13,7 +13,7 @@ import transformSupported from '../utils/transform-supported'
 import transitionSupported from '../utils/transition-supported'
 
 import deepAssign from '../utils/deep-assign'
-import { logger } from '../utils/core'
+import logger from '../utils/logger'
 import $ from 'tealight'
 
 import { version } from '../../package.json'
diff --git a/src/instance/functions/delegate.js b/src/instance/functions/delegate.js
@@ -3,7 +3,9 @@ import sequence from './sequence'
 import mathSign from '../../polyfills/math-sign'
 import raf from '../../polyfills/raf'
 import each from '../../utils/each'
-import { getGeometry, getScrolled, isElementVisible } from '../../utils/core'
+import getGeometry from '../../utils/get-geometry'
+import getScrolled from '../../utils/get-scrolled'
+import isElementVisible from '../../utils/is-element-visible'
 
 export default function delegate (
 	event = { type: 'init' },
diff --git a/src/instance/methods/clean.js b/src/instance/methods/clean.js
@@ -1,6 +1,6 @@
 import $ from 'tealight'
 import each from '../../utils/each'
-import { logger } from '../../utils/core'
+import logger from '../../utils/logger'
 import rinse from '../functions/rinse'
 
 export default function clean (target) {
diff --git a/src/instance/methods/reveal.js b/src/instance/methods/reveal.js
@@ -5,7 +5,7 @@ import { Sequence } from '../functions/sequence'
 import $ from 'tealight'
 import each from '../../utils/each'
 import deepAssign from '../../utils/deep-assign'
-import { logger } from '../../utils/core'
+import logger from '../../utils/logger'
 import nextUniqueId from '../../utils/next-unique-id'
 import isMobile from '../../utils/is-mobile'
 
diff --git a/src/utils/core.js b/src/utils/core.js
diff --git a/src/utils/get-geometry.js b/src/utils/get-geometry.js
@@ -0,0 +1,33 @@
+export default function getGeometry (target, isContainer) {
+	/**
+	 * We want to ignore padding and scrollbars for container elements.
+	 * More information here: https://goo.gl/vOZpbz
+	 */
+	const height = isContainer ? target.node.clientHeight : target.node.offsetHeight
+	const width = isContainer ? target.node.clientWidth : target.node.offsetWidth
+
+	let offsetTop = 0
+	let offsetLeft = 0
+	let node = target.node
+
+	do {
+		if (!isNaN(node.offsetTop)) {
+			offsetTop += node.offsetTop
+		}
+		if (!isNaN(node.offsetLeft)) {
+			offsetLeft += node.offsetLeft
+		}
+		node = node.offsetParent
+	} while (node)
+
+	return {
+		bounds: {
+			top: offsetTop,
+			right: offsetLeft + width,
+			bottom: offsetTop + height,
+			left: offsetLeft,
+		},
+		height,
+		width,
+	}
+}
diff --git a/src/utils/get-scrolled.js b/src/utils/get-scrolled.js
@@ -0,0 +1,11 @@
+export default function getScrolled (container) {
+	return container.node === document.documentElement
+		? {
+			top: window.pageYOffset,
+			left: window.pageXOffset,
+		}
+		: {
+			top: container.node.scrollTop,
+			left: container.node.scrollLeft,
+		}
+}
diff --git a/src/utils/is-element-visible.js b/src/utils/is-element-visible.js
@@ -0,0 +1,28 @@
+export default function isElementVisible (element) {
+	const container = this.store.containers[element.containerId]
+	const viewFactor = Math.max(0, Math.min(1, element.config.viewFactor))
+	const viewOffset = element.config.viewOffset
+
+	const elementBounds = {
+		top: element.geometry.bounds.top + element.geometry.height * viewFactor,
+		right: element.geometry.bounds.right - element.geometry.width * viewFactor,
+		bottom: element.geometry.bounds.bottom - element.geometry.height * viewFactor,
+		left: element.geometry.bounds.left + element.geometry.width * viewFactor,
+	}
+
+	const containerBounds = {
+		top: container.geometry.bounds.top + container.scroll.top + viewOffset.top,
+		right: container.geometry.bounds.right + container.scroll.left - viewOffset.right,
+		bottom:
+			container.geometry.bounds.bottom + container.scroll.top - viewOffset.bottom,
+		left: container.geometry.bounds.left + container.scroll.left + viewOffset.left,
+	}
+
+	return (
+		(elementBounds.top < containerBounds.bottom &&
+			elementBounds.right > containerBounds.left &&
+			elementBounds.bottom > containerBounds.top &&
+			elementBounds.left < containerBounds.right) ||
+		element.styles.position === 'fixed'
+	)
+}
diff --git a/src/utils/logger.js b/src/utils/logger.js
@@ -0,0 +1,7 @@
+export default function logger (message, ...details) {
+	if (this.constructor.debug && console) {
+		let report = `%cScrollReveal: ${message}`
+		details.forEach(detail => (report += `\n — ${detail}`))
+		console.log(report, 'color: #ea654b;') // eslint-disable-line no-console
+	}
+}
diff --git a/test/utils/logger.spec.js b/test/utils/logger.spec.js
@@ -1,6 +1,6 @@
-import { logger } from '../../src/utils/core'
+import logger from '../../src/utils/logger'
 
-describe('Core Utilities', () => {
+describe('Utilities', () => {
 	describe('logger()', () => {
 		const mock = { constructor: { debug: true } }
 
