Various refactoring

- renam DOM elements variables to start from $
- use DI for OptionsManager
- move loading styles into separate CSS file
- minor other refactors

lib/common/components/StickySidebar/sticky-sidebar.js

@@ -10,14 +10,14 @@ import {BrowserDomAdapter} from 'angular2/platform/browser';
 @Reflect.metadata('parameters', [[ElementRef], [BrowserDomAdapter]])
 export default class StickySidebar {
   constructor(elementRef, dom) {
-    this.element = elementRef.nativeElement;
+    this.$element = elementRef.nativeElement;
     this.dom = dom;
 
     // initial styling
-    this.dom.setStyle(this.element, 'position', 'absolute');
+    this.dom.setStyle(this.$element, 'position', 'absolute');
-    this.dom.setStyle(this.element, 'top', '0');
+    this.dom.setStyle(this.$element, 'top', '0');
-    this.dom.setStyle(this.element, 'bottom', '0');
+    this.dom.setStyle(this.$element, 'bottom', '0');
-    this.dom.setStyle(this.element, 'max-height', '100%');
+    this.dom.setStyle(this.$element, 'max-height', '100%');
   }
 
   bind() {
@@ -30,7 +30,7 @@ export default class StickySidebar {
   }
 
   updatePosition() {
-    if ( this.scrollY + this.scrollYOffset() >= this.redocEl.offsetTop) {
+    if ( this.scrollY + this.scrollYOffset() >= this.$redocEl.offsetTop) {
       this.stick();
     } else {
       this.unstick();
@@ -38,13 +38,13 @@ export default class StickySidebar {
   }
 
   stick() {
-    this.dom.setStyle(this.element, 'position', 'fixed');
+    this.dom.setStyle(this.$element, 'position', 'fixed');
-    this.dom.setStyle(this.element, 'top', this.scrollYOffset() + 'px');
+    this.dom.setStyle(this.$element, 'top', this.scrollYOffset() + 'px');
   }
 
   unstick() {
-    this.dom.setStyle(this.element, 'position', 'absolute');
+    this.dom.setStyle(this.$element, 'position', 'absolute');
-    this.dom.setStyle(this.element, 'top', 0);
+    this.dom.setStyle(this.$element, 'top', 0);
   }
 
   get scrollY() {
@@ -52,7 +52,8 @@ export default class StickySidebar {
   }
 
   ngOnInit() {
-    this.redocEl = this.element.offsetParent;
+    // FIXME use more reliable code
+    this.$redocEl = this.$element.offsetParent;
     this.bind();
   }
 

lib/components/JsonSchema/json-schema-lazy.js

@@ -20,21 +20,23 @@ var cache = {};
   template: '',
   directives: [CORE_DIRECTIVES]
 })
-@Reflect.metadata('parameters', [[ElementRef], [DynamicComponentLoader]])
+@Reflect.metadata('parameters', [[SchemaManager], [ElementRef], [DynamicComponentLoader], [OptionsManager]])
 export default class JsonSchemaLazy {
 
-  constructor(elementRef, dcl) {
+  constructor(schemaMgr, elementRef, dcl, optionsMgr) {
     this.elementRef = elementRef;
     this.dcl = dcl;
+    this.optionsMgr = optionsMgr;
+    this.schemaMgr = schemaMgr;
   }
 
   normalizePointer() {
-    let schema = SchemaManager.instance().byPointer(this.pointer);
+    let schema = this.schemaMgr.byPointer(this.pointer);
     return schema && schema.$ref || this.pointer;
   }
 
   load() {
-    if (OptionsManager.instance().options.disableLazySchemas) return;
+    if (this.optionsMgr.options.disableLazySchemas) return;
     if (this.loaded) return;
     if (this.pointer) {
       this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => {
@@ -50,17 +52,17 @@ export default class JsonSchemaLazy {
     if (cache[this.pointer]) {
       cache[this.pointer].then((compRef) => {
         setTimeout( ()=> {
-          let element = compRef.location.nativeElement;
+          let $element = compRef.location.nativeElement;
 
-          // skip caching view with discriminator as it needs attached controller
+          // skip caching view with tabs inside (discriminator) as it needs attached controller
-          if (element.querySelector('.discriminator')) {
+          if ($element.querySelector('tabs')) {
             this.dcl.loadNextToLocation(JsonSchema, this.elementRef).then((compRef) => {
               compRef.instance.pointer = this.pointer;
               compRef.hostView.changeDetectorRef.markForCheck();
             });
             return;
           }
-          insertAfter(element.cloneNode(true), this.elementRef.nativeElement);
+          insertAfter($element.cloneNode(true), this.elementRef.nativeElement);
         } );
       });
     } else {
@@ -76,6 +78,11 @@ export default class JsonSchemaLazy {
     if (!this.auto) return;
     this.loadCached();
   }
+
+  ngOnDestroy() {
+    // clear cache
+    cache = {};
+  }
 }
 
 function insertAfter(newNode, referenceNode) {

lib/components/JsonSchema/json-schema.js

@@ -17,7 +17,7 @@ import JsonPointer from '../../utils/JsonPointer';
 export default class JsonSchema extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
-    this.element = elementRef.nativeElement;
+    this.$element = elementRef.nativeElement;
     this.final = false;
   }
 
@@ -86,20 +86,6 @@ export default class JsonSchema extends BaseComponent {
     this.data.properties = props;
   }
 
-  adjustNameColumnWidth() {
-    // TODO handle internal schemes differently
-    let names = [].slice.call(this.element.querySelectorAll('.param-name-content'));
-    let widths = [144];//names.map(el => el.offsetWidth);
-    let maxWidth = Math.max(...widths);
-    if (!maxWidth) return;
-    names.forEach(el => {
-      el.parentNode.style.minWidth = maxWidth + 'px';
-    });
-
-    let discrValues = this.element.querySelector('tabs ul');
-    if (discrValues) discrValues.style.paddingLeft = maxWidth + 'px';
-  }
-
   static injectPropData(propData, propName, propPointer, requiredMap, schema) {
     let propEnum;
 
@@ -145,12 +131,27 @@ export default class JsonSchema extends BaseComponent {
 
   ngAfterViewInit() {
     // adjust widht only on parent level
-    let el = this.element.parentElement;
+    let $el = this.$element.parentElement;
-    while(el && el.tagName !== 'JSON-SCHEMA' && el.tagName !== 'REDOC') {
+    while($el && $el.tagName !== 'JSON-SCHEMA' && $el.tagName !== 'REDOC') {
-      el = el.parentElement;
+      $el = $el.parentElement;
     }
-    if (el && el.tagName === 'REDOC' ) {
+    if ($el && $el.tagName === 'REDOC' ) {
       this.adjustNameColumnWidth();
     }
   }
+
+  adjustNameColumnWidth() {
+    // TODO handle internal schemes differently
+
+    let names = [].slice.call(this.$element.querySelectorAll('.param-name-content'));
+    let widths = [144];//names.map(el => el.offsetWidth);
+    let maxWidth = Math.max(...widths);
+    if (!maxWidth) return;
+    names.forEach(el => {
+      el.parentNode.style.minWidth = maxWidth + 'px';
+    });
+
+    let discrValues = this.$element.querySelector('tabs ul');
+    if (discrValues) discrValues.style.paddingLeft = maxWidth + 'px';
+  }
 }

lib/components/Redoc/redoc-loading-styles.scss

@@ -0,0 +1,37 @@
+redoc.loading {
+  position: relative;
+  display: block;
+  min-height:350px;
+}
+
+@keyframes move {
+  0% {transform: translateY(10px)}
+  25% {transform: translateY(0px)}
+  50% {transform: translateY(10px)}
+  75% {transform: translateY(20px)}
+  100% {transform: translateY(10px)}
+}
+
+redoc.loading:before {
+  content: "Loading...";
+  font-size: 28px;
+  text-align: center;
+  padding-top: 40px;
+  color: #3F5C9C;
+  font-weight: bold;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  z-index: 9999;
+  opacity: 1;
+  transition: all 0.6s ease-out;
+  animation: 2s move linear infinite;
+}
+
+redoc.loading-remove:before {
+  opacity: 0;
+}

lib/components/Redoc/redoc.html

@@ -1,5 +1,5 @@
 <div class="redoc-wrap">
-  <div class="menu-content" sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
+  <div class="menu-content" sticky-sidebar [scrollParent]="options.$scrollParent" [scrollYOffset]="options.scrollYOffset">
       <api-logo> </api-logo>
       <side-menu> </side-menu>
   </div>

lib/components/Redoc/redoc.js

@@ -1,12 +1,10 @@
 'use strict';
 
-import {ChangeDetectionStrategy} from 'angular2/core';
+import {ChangeDetectionStrategy, provide} from 'angular2/core';
 import {ElementRef} from 'angular2/core';
 import {BrowserDomAdapter, bootstrap} from 'angular2/platform/browser';
 import detectScollParent from 'scrollparent';
 
-import {isFunction, isString} from 'angular2/src/facade/lang';
-
 import {RedocComponent, BaseComponent} from '../base';
 import SchemaManager from '../../utils/SchemaManager';
 
@@ -18,119 +16,36 @@ import StickySidebar from '../../common/components/StickySidebar/sticky-sidebar'
 import OptionsManager from '../../options';
 import {redocEvents} from '../../events';
 
-let optionNames = new Set(['scrollYOffset', 'disableLazySchemas']);
+import './redoc-loading-styles.css!css';
 
 let dom = new BrowserDomAdapter();
 
 @RedocComponent({
   selector: 'redoc',
-  providers: [SchemaManager, BrowserDomAdapter, OptionsManager],
+  providers: [
+    SchemaManager,
+    BrowserDomAdapter,
+    provide('OPTION_NAMES', {useValue: new Set(['scrollYOffset', 'disableLazySchemas'])}),
+    provide(OptionsManager, {useClass: OptionsManager})
+  ],
   templateUrl: './lib/components/Redoc/redoc.html',
   styleUrls: ['./lib/components/Redoc/redoc.css'],
   directives: [ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar],
   changeDetection: ChangeDetectionStrategy.Default
 })
-@Reflect.metadata('parameters', [[SchemaManager], [OptionsManager], [ElementRef], [BrowserDomAdapter]])
+@Reflect.metadata('parameters', [
+  [SchemaManager], [OptionsManager], [ElementRef]])
 export default class Redoc extends BaseComponent {
-  constructor(schemaMgr, optionsMgr, elementRef, dom) {
+  constructor(schemaMgr, optionsMgr, elementRef) {
     super(schemaMgr);
     this.element = elementRef.nativeElement;
-
-    this.dom = dom;
-    let el = this.element;
-
     //parse options (top level component doesn't support inputs)
-    this.scrollParent = detectScollParent(el);
+    optionsMgr.parseOptions( this.element );
-    this.parseOptions();
+    optionsMgr.options.$scrollParent = detectScollParent( this.element );
-    this.options = Object.assign({}, optionsMgr.options, this.options);
+    this.options = optionsMgr.options;
-    this.normalizeOptions();
-    optionsMgr.options = this.options;
-  }
-
-  parseOptions() {
-    let attributesMap = this.dom.attributeMap(this.element);
-    this.options = {};
-    Array.from(attributesMap.keys())
-      //camelCasify
-      .map(k => ({
-        attrName: k,
-        name: k.replace(/-(.)/g,  (m, $1) => $1.toUpperCase())
-        })
-      )
-      .filter(option => optionNames.has(option.name))
-      .forEach(option => {
-        this.options[option.name] = attributesMap.get(option.attrName);
-      });
-  }
-
-  normalizeOptions() {
-    // modify scrollYOffset to always be a function
-    if (!isFunction(this.options.scrollYOffset)) {
-      if (isFinite(this.options.scrollYOffset)) {
-        // if number specified create function that returns this value
-        let numberOffset = parseFloat(this.options.scrollYOffset);
-        this.options.scrollYOffset = () => numberOffset;
-      } else {
-        // if selector or node function that returns bottom offset of this node
-        let el = this.options.scrollYOffset;
-        if (!(el instanceof Node)) {
-          el = this.dom.query(el);
-        }
-        if (!el) {
-          this.options.scrollYOffset = () => 0;
-        } else {
-          this.options.scrollYOffset = () => el.offsetTop + el.offsetHeight;
-        }
-      }
-    }
-
-    if (isString(this.options.disableLazySchemas)) this.options.disableLazySchemas = true;
   }
 
   static showLoadingAnimation() {
-    if (!dom.query('#redoc-loading-style')) {
-      let animStyle = dom.createStyleElement(`
-        redoc.loading {
-          position: relative;
-          display: block;
-          min-height:350px;
-        }
-
-        @keyframes move {
-          0% {transform: translateY(10px)}
-          25% {transform: translateY(0px)}
-          50% {transform: translateY(10px)}
-          75% {transform: translateY(20px)}
-          100% {transform: translateY(10px)}
-        }
-
-        redoc.loading:before {
-          content: "Loading...";
-          font-size: 28px;
-          text-align: center;
-          padding-top: 40px;
-          color: #3F5C9C;
-          font-weight: bold;
-          display: block;
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          background-color: white;
-          z-index: 9999;
-          opacity: 1;
-          transition: all 0.6s ease-out;
-          animation: 2s move linear infinite;
-        }
-
-        redoc.loading-remove:before {
-          opacity: 0;
-        }
-      `);
-      animStyle.id = 'redoc-loading-style';
-      dom.appendChild(dom.defaultDoc().head, animStyle);
-    }
     let elem = dom.query('redoc');
     dom.addClass(elem, 'loading');
   }
@@ -158,6 +73,7 @@ export default class Redoc extends BaseComponent {
       (appRef) => {
         Redoc.hideLoadingAnimation();
         Redoc.appRef = appRef;
+        // setTimeout to allow cached elements to init
         setTimeout(() => redocEvents.bootstrapped.next());
         console.log('ReDoc bootstrapped!');
       },
@@ -170,7 +86,6 @@ export default class Redoc extends BaseComponent {
 
   static autoInit() {
     const specUrlAttributeName = 'spec-url';
-    let dom = new BrowserDomAdapter();
     let redocEl = dom.query('redoc');
     if (!redocEl) return;
     if (dom.hasAttribute(redocEl, specUrlAttributeName)) {
@@ -180,7 +95,6 @@ export default class Redoc extends BaseComponent {
   }
 
   static dispose() {
-    let dom = new BrowserDomAdapter();
     let el = dom.query('redoc');
     let elClone;
     let parent;

lib/components/ResponsesList/responses-list.js

@@ -6,7 +6,6 @@ import JsonSchema from '../JsonSchema/json-schema';
 import JsonSchemaLazy from '../JsonSchema/json-schema-lazy';
 import Zippy from '../../common/components/Zippy/zippy';
 import {statusCodeType} from '../../utils/helpers';
-import OptionsManager from '../../options';
 
 function isNumeric(n) {
   return (!isNaN(parseFloat(n)) && isFinite(n));
@@ -26,7 +25,6 @@ export default class ResponsesList extends BaseComponent {
   prepareModel() {
     this.data = {};
     this.data.responses = [];
-    this.enabledLazy = !OptionsManager.instance().options.disableLazySchemas;
 
     let responses = this.componentSchema;
     if (!responses) return;

lib/components/SideMenu/side-menu.js

@@ -1,13 +1,13 @@
 'use strict';
 
-import {NgZone, ChangeDetectionStrategy, ElementRef, forwardRef} from 'angular2/core';
+import {NgZone, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
-import Redoc from '../Redoc/redoc';
 import {document} from 'angular2/src/facade/browser';
 import {BrowserDomAdapter} from 'angular2/platform/browser';
 import {global} from 'angular2/src/facade/lang';
 
 import {RedocComponent, BaseComponent, SchemaManager} from '../base';
 import {redocEvents} from '../../events';
+import OptionsManager from '../../options';
 
 const CHANGE = {
   NEXT : 1,
@@ -28,21 +28,19 @@ const INVIEW_POSITION = {
   changeDetection: ChangeDetectionStrategy.Default
 })
 @Reflect.metadata('parameters', [[SchemaManager], [ElementRef],
-  [BrowserDomAdapter], [NgZone], [forwardRef(() => Redoc)]])
+  [BrowserDomAdapter], [NgZone], OptionsManager])
 export default class SideMenu extends BaseComponent {
-  constructor(schemaMgr, elementRef, adapter, zone, redoc) {
+  constructor(schemaMgr, elementRef, dom, zone, optionsMgr) {
     super(schemaMgr);
-    this.zone = zone;
+    this.dom = dom;
-    this.adapter = adapter;
+    this.options = optionsMgr.options;
-    this.redoc = redoc;
+    this.$scrollParent = this.options.$scrollParent;
-
+    this.$mobileNav = dom.querySelector(elementRef.nativeElement, '.mobile-nav');
-    this.scrollParent = this.redoc.scrollParent;
+    this.$resourcesNav = dom.querySelector(elementRef.nativeElement, '#resources-nav');
-    this.mobileNav = adapter.querySelector(elementRef.nativeElement, '.mobile-nav');
-    this.resourcesNav = adapter.querySelector(elementRef.nativeElement, '#resources-nav');
 
     // for some reason constructor is not run inside zone
     // as workaround running it manually
-    this.zone.run(() => {
+    zone.run(() => {
       this.bindEvents();
     });
     this.activeCatIdx = 0;
@@ -56,26 +54,26 @@ export default class SideMenu extends BaseComponent {
   }
 
   scrollY() {
-    return (this.scrollParent.pageYOffset != null) ? this.scrollParent.pageYOffset : this.scrollParent.scrollTop;
+    return (this.$scrollParent.pageYOffset != null) ? this.$scrollParent.pageYOffset : this.$scrollParent.scrollTop;
   }
 
   hashScroll(evt) {
-    let hash = this.adapter.getLocation().hash;
+    let hash = this.dom.getLocation().hash;
     if (!hash) return;
 
-    let el;
+    let $el;
     hash = hash.substr(1);
     let namespace = hash.split('/')[0];
     let ptr = hash.substr(namespace.length + 1);
     if (namespace === 'operation') {
-      el = this.getMethodElByOperId(ptr);
+      $el = this.getMethodElByOperId(ptr);
     } else if (namespace === 'tag') {
       let tag = ptr.split('/')[0];
       ptr = ptr.substr(tag.length);
-      el = this.getMethodElByPtr(ptr, tag);
+      $el = this.getMethodElByPtr(ptr, tag);
     }
 
-    if (el) this.scrollTo(el);
+    if ($el) this.scrollTo($el);
     if (evt) evt.preventDefault();
   }
 
@@ -84,12 +82,12 @@ export default class SideMenu extends BaseComponent {
 
     //decorate option.scrollYOffset to account mobile nav
     this.scrollYOffset = () => {
-      let mobileNavOffset = this.mobileNav.clientHeight;
+      let mobileNavOffset = this.$mobileNav.clientHeight;
-      return this.redoc.options.scrollYOffset() + mobileNavOffset;
+      return this.options.scrollYOffset() + mobileNavOffset;
     };
     this._cancel = {};
-    this._cancel.scroll = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.scrollHandler(); });
+    this._cancel.scroll = this.dom.onAndCancel(this.$scrollParent, 'scroll', () => { this.scrollHandler(); });
-    this._cancel.hash = this.adapter.onAndCancel(global, 'hashchange',  evt => this.hashScroll(evt));
+    this._cancel.hash = this.dom.onAndCancel(global, 'hashchange',  evt => this.hashScroll(evt));
   }
 
   destroy() {
@@ -105,14 +103,14 @@ export default class SideMenu extends BaseComponent {
     this.scrollToActive();
   }
 
-  scrollTo(el) {
+  scrollTo($el) {
     // TODO: rewrite this to use offsetTop as more reliable solution
-    let subjRect = el.getBoundingClientRect();
+    let subjRect = $el.getBoundingClientRect();
     let offset = this.scrollY() + subjRect.top - this.scrollYOffset() + 1;
-    if (this.scrollParent.scrollTo) {
+    if (this.$scrollParent.scrollTo) {
-      this.scrollParent.scrollTo(0, offset);
+      this.$scrollParent.scrollTo(0, offset);
     } else {
-      this.scrollParent.scrollTop = offset;
+      this.$scrollParent.scrollTop = offset;
     }
   }
 
@@ -196,12 +194,12 @@ export default class SideMenu extends BaseComponent {
   }
 
   /* returns 1 if element if above the view, 0 if in view and -1 below the view */
-  getElementInViewPos(el) {
+  getElementInViewPos($el) {
-    if (Math.floor(el.getBoundingClientRect().top) > this.scrollYOffset()) {
+    if (Math.floor($el.getBoundingClientRect().top) > this.scrollYOffset()) {
       return INVIEW_POSITION.ABOVE;
     }
 
-    if (el.getBoundingClientRect().bottom <= this.scrollYOffset()) {
+    if ($el.getBoundingClientRect().bottom <= this.scrollYOffset()) {
       return INVIEW_POSITION.BELLOW;
     }
     return INVIEW_POSITION.INVIEW;
@@ -212,9 +210,9 @@ export default class SideMenu extends BaseComponent {
     this.prevOffsetY = this.scrollY();
     let stable = false;
     while(!stable) {
-      let activeMethodHost = this.getCurrentMethodEl();
+      let $activeMethodHost = this.getCurrentMethodEl();
-      if (!activeMethodHost) return;
+      if (!$activeMethodHost) return;
-      var elementInViewPos = this.getElementInViewPos(activeMethodHost);
+      var elementInViewPos = this.getElementInViewPos($activeMethodHost);
       if(isScrolledDown && elementInViewPos === INVIEW_POSITION.BELLOW) {
         stable = this.changeActive(CHANGE.NEXT);
         continue;
@@ -235,20 +233,20 @@ export default class SideMenu extends BaseComponent {
   }
 
   mobileMode() {
-    return this.mobileNav.clientHeight > 0;
+    return this.$mobileNav.clientHeight > 0;
   }
 
   toggleMobileNav() {
-    let dom = this.adapter;
+    let dom = this.dom;
-    let overflowParent = (this.scrollParent === global) ? dom.defaultDoc().body : this.scrollParent;
+    let $overflowParent = (this.$scrollParent === global) ? dom.defaultDoc().body : this.$scrollParent;
-    if (dom.hasStyle(this.resourcesNav, 'height')) {
+    if (dom.hasStyle(this.$resourcesNav, 'height')) {
-      dom.removeStyle(this.resourcesNav, 'height');
+      dom.removeStyle(this.$resourcesNav, 'height');
-      dom.removeStyle(overflowParent, 'overflow-y');
+      dom.removeStyle($overflowParent, 'overflow-y');
     } else {
-      let viewportHeight = this.scrollParent.innerHeight || this.scrollParent.clientHeight;
+      let viewportHeight = this.$scrollParent.innerHeight || this.$scrollParent.clientHeight;
-      let height = viewportHeight - this.mobileNav.getBoundingClientRect().bottom;
+      let height = viewportHeight - this.$mobileNav.getBoundingClientRect().bottom;
-      dom.setStyle(overflowParent, 'overflow-y', 'hidden');
+      dom.setStyle($overflowParent, 'overflow-y', 'hidden');
-      dom.setStyle(this.resourcesNav, 'height', height + 'px');
+      dom.setStyle(this.$resourcesNav, 'height', height + 'px');
     }
   }
 
@@ -256,5 +254,3 @@ export default class SideMenu extends BaseComponent {
     this.changeActive(CHANGE.INITIAL);
   }
 }
-//SideMenu.parameters = SideMenu.parameters.concat([[ElementRef],
-//  [BrowserDomAdapter], [NgZone], [forwardRef(() => Redoc)] ]);

lib/options.js

@@ -1,28 +1,20 @@
 'use strict';
 
-export var options = {
+import {Inject} from 'angular2/core';
-  scrollYOffset: 0
+import {isFunction, isString} from 'angular2/src/facade/lang';
+import {BrowserDomAdapter} from 'angular2/platform/browser';
+
+var defaults = {
+  scrollYOffset: 0,
+  disableLazySchemas: false
 };
 
-// singleton
+@Reflect.metadata('parameters',  [[new Inject('OPTION_NAMES')], [BrowserDomAdapter]])
 export default class OptionsManager {
-  constructor() {
+  constructor(optionNames, dom) {
-    if (OptionsManager.prototype._instance) {
+    this._options = defaults;
-      return OptionsManager.prototype._instance;
+    this.optionNames = optionNames;
-    }
+    this.dom = dom;
-
-    OptionsManager.prototype._instance = this;
-
-    this._defaults = {
-      scrollYOffset: 0,
-      disableLazySchemas: false
-    };
-
-    this._options = {};
-  }
-
-  static instance() {
-    return new OptionsManager();
   }
 
   get options() {
@@ -30,6 +22,50 @@ export default class OptionsManager {
   }
 
   set options(opts) {
-    this._options = Object.assign({}, this._defaults, opts);
+    this._options = Object.assign(this._options, opts);
+  }
+
+  parseOptions(el) {
+    let parsedOpts;
+    let attributesMap = this.dom.attributeMap(el);
+    parsedOpts = {};
+    Array.from(attributesMap.keys())
+      //camelCasify
+      .map(k => ({
+        attrName: k,
+        name: k.replace(/-(.)/g,  (m, $1) => $1.toUpperCase())
+        })
+      )
+      .filter(option => this.optionNames.has(option.name))
+      .forEach(option => {
+        parsedOpts[option.name] = attributesMap.get(option.attrName);
+      });
+
+    this.options = parsedOpts;
+    this._normalizeOptions();
+  }
+
+  _normalizeOptions() {
+    // modify scrollYOffset to always be a function
+    if (!isFunction(this._options.scrollYOffset)) {
+      if (isFinite(this._options.scrollYOffset)) {
+        // if number specified create function that returns this value
+        let numberOffset = parseFloat(this._options.scrollYOffset);
+        this.options.scrollYOffset = () => numberOffset;
+      } else {
+        // if selector or node function that returns bottom offset of this node
+        let el = this._options.scrollYOffset;
+        if (!(el instanceof Node)) {
+          el = this.dom.query(el);
+        }
+        if (!el) {
+          this._options.scrollYOffset = () => 0;
+        } else {
+          this._options.scrollYOffset = () => el.offsetTop + el.offsetHeight;
+        }
+      }
+    }
+
+    if (isString(this._options.disableLazySchemas)) this._options.disableLazySchemas = true;
   }
 }