diff --git a/demos/demo.css b/demos/demo.css index 67b6305..cffed04 100644 --- a/demos/demo.css +++ b/demos/demo.css @@ -93,28 +93,28 @@ html, body { -o-transform: translate(0, 0); transform: translate(0, 0); } -.contained.onScreen:nth-child(1) { +.contained:nth-child(1) { background-color: #F44336; } -.contained.onScreen:nth-child(2) { +.contained:nth-child(2) { background-color: #E91E63; } -.contained.onScreen:nth-child(3) { +.contained:nth-child(3) { background-color: #9C27B0; } -.contained.onScreen:nth-child(4) { +.contained:nth-child(4) { background-color: #673AB7; } -.contained.onScreen:nth-child(5) { +.contained:nth-child(5) { background-color: #3F51B5; } -.contained.onScreen:nth-child(6) { +.contained:nth-child(6) { background-color: #2196F3; } -.contained.onScreen:nth-child(7) { +.contained:nth-child(7) { background-color: #009688; } -.contained.onScreen:nth-child(8) { +.contained:nth-child(8) { background-color: #8BC34A; } .pusher { diff --git a/lib/index.js b/lib/index.js index 5368559..cbe10bb 100644 --- a/lib/index.js +++ b/lib/index.js @@ -15,33 +15,44 @@ import observeDOM from './helpers/observeDOM'; * @param {object} options The configuration object */ function OnScreen(options = { tolerance: 0, debounce: 100, container: window }) { - this.options = options; + this.options = {}; this.trackedElements = {}; - if (!this.options.tolerance) { - this.options.tolerance = 0; - } - if (!this.options.debounce) { - this.options.debounce = 100; - } - if (!this.options.container) { - this.options.container = window; - } - if (typeof this.options.container === 'string') { - this.options.container = document.querySelector(this.options.container); - } - if (this.options.container instanceof HTMLElement) { - const style = window.getComputedStyle(this.options.container); - if (style.position === 'static') { - this.options.container.style.position = 'relative'; - } - } + Object.defineProperties(this.options, { + container: { + configurable: false, + enumerable: false, + get() { + let container; - observeDOM(document.querySelector('body'), () => { - Object.keys(this.trackedElements).forEach((element) => { - this.on('enter', element); - this.on('leave', element); - }); + if (typeof options.container === 'string') { + container = document.querySelector(options.container); + } else if (options.container instanceof HTMLElement) { + container = options.container; + } + + return container || window; + }, + set(value) { + options.container = value; + } + }, + debounce: { + get() { + return parseInt(options.debounce, 10) || 100; + }, + set(value) { + options.debounce = value; + } + }, + tolerance: { + get() { + return parseInt(options.tolerance, 10) || 0; + }, + set(value) { + options.tolerance = value; + } + } }); Object.defineProperty(this, '_scroll', { @@ -51,21 +62,47 @@ function OnScreen(options = { tolerance: 0, debounce: 100, container: window }) value: this._debouncedScroll.call(this) }); + observeDOM(document.querySelector('body'), () => { + Object.keys(this.trackedElements).forEach((element) => { + this.on('enter', element); + this.on('leave', element); + }); + }); + this.attach(); } -OnScreen.prototype = { - attach, - destroy, - off, - on -}; - -Object.defineProperty(OnScreen.prototype, '_debouncedScroll', { - enumerable: false, - configurable: false, - writable: false, - value: debouncedScroll +Object.defineProperties(OnScreen.prototype, { + _debouncedScroll: { + configurable: false, + writable: false, + enumerable: false, + value: debouncedScroll + }, + attach: { + configurable: false, + writable: false, + enumerable: false, + value: attach + }, + destroy: { + configurable: false, + writable: false, + enumerable: false, + value: destroy + }, + off: { + configurable: false, + writable: false, + enumerable: false, + value: off + }, + on: { + configurable: false, + writable: false, + enumerable: false, + value: on + } }); export default OnScreen; diff --git a/lib/methods/attach.js b/lib/methods/attach.js index 9d8628a..f183f07 100644 --- a/lib/methods/attach.js +++ b/lib/methods/attach.js @@ -4,7 +4,17 @@ * @return {void} */ function attach() { - this.options.container.addEventListener('scroll', this._scroll); + const container = this.options.container; + + if (container instanceof HTMLElement) { + const style = window.getComputedStyle(container); + + if (style.position === 'static') { + container.style.position = 'relative'; + } + } + + container.addEventListener('scroll', this._scroll); window.addEventListener('resize', this._scroll); this._scroll(); this.attached = true;