make container and prototype methods read-only to avoid issues with i…

…mproper usage

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 {

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;

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;