options and options parsing mechanism

demo/index.html

@@ -12,7 +12,7 @@
     </nav>
     </nav>
 
-    <redoc scroll-y-offset='50'>
+    <redoc scroll-y-offset="50">
       Loading...
     </redoc>
 

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

@@ -5,7 +5,7 @@ import {BrowserDomAdapter} from 'angular2/platform/browser';
 
 @Component({
   selector: 'sticky-sidebar',
-  inputs: ['scrollParent', 'scrollOffsetY']
+  inputs: ['scrollParent', 'scrollYOffset']
 })
 @View({
   template: `
@@ -37,7 +37,7 @@ export default class StickySidebar {
   }
 
   updatePosition() {
-    if ( this.scrollY + this.scrollOffsetY >= this.redocEl.offsetTop) {
+    if ( this.scrollY + this.scrollYOffset >= this.redocEl.offsetTop) {
       this.stick();
     } else {
       this.unstick();
@@ -46,7 +46,7 @@ export default class StickySidebar {
 
   stick() {
     this.adapter.setStyle(this.element, 'position', 'fixed');
-    this.adapter.setStyle(this.element, 'top', this.scrollOffsetY);
+    this.adapter.setStyle(this.element, 'top', this.scrollYOffset);
   }
 
   unstick() {
@@ -60,7 +60,7 @@ export default class StickySidebar {
 
   ngOnInit() {
     this.redocEl = this.element.offsetParent;
-    this.scrollOffsetY = parseInt(this.scrollOffsetY);
+    this.scrollYOffset = parseInt(this.scrollYOffset);
     this.bind();
   }
 

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

@@ -46,7 +46,7 @@ describe('Common components', () => {
       expect(component.stick).not.toHaveBeenCalled();
     });
 
-    it('should stick if scrolled more than scrollOffsetY', () => {
+    it('should stick if scrolled more than scrollYOffset', () => {
       spyOn(component, 'stick').and.callThrough();
       fixture.detectChanges();
       window.scrollY = 40;
@@ -65,7 +65,7 @@ describe('Common components', () => {
       `<div style="padding-top: 20px">
         <div style="height: 20px; position: fixed; top: 0;"> </div>
         <div style="position: relative">
-          <sticky-sidebar [scrollParent]="options.scrollParent" [scrollOffsetY]="options.scrollOffsetY">
+          <sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
           </sticky-sidebar>
         </div>
       </div>`
@@ -74,7 +74,7 @@ describe('Common components', () => {
 class TestApp {
   constructor() {
     this.options = {};
-    this.options.scrollParent = window;
+    this.scrollParent = window;
-    this.options.scrollOffsetY = 20;
+    this.options.scrollYOffset = 20;
   }
 }

lib/components/Redoc/redoc.html

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

lib/components/Redoc/redoc.js

@@ -8,12 +8,14 @@ import ApiLogo from '../ApiLogo/api-logo';
 import MethodsList from '../MethodsList/methods-list';
 import SideMenu from '../SideMenu/side-menu';
 import StickySidebar from '../../common/components/StickySidebar/sticky-sidebar';
+import {options as defaultOptions} from '../../index';
 
 import {ChangeDetectionStrategy} from 'angular2/core';
 import {ElementRef} from 'angular2/core';
 import {BrowserDomAdapter} from 'angular2/platform/browser';
 import detectScollParent from 'scrollparent';
 
+let optionNames = new Set(['scrollYOffset']);
 
 @RedocComponent({
   selector: 'redoc',
@@ -24,20 +26,39 @@ import detectScollParent from 'scrollparent';
   changeDetection: ChangeDetectionStrategy.Default
 })
 export default class Redoc extends BaseComponent {
-  constructor(schemaMgr, elementRef) {
+  constructor(schemaMgr, elementRef, dom) {
     super(schemaMgr);
     this.element = elementRef.nativeElement;
 
-    let DOM = new BrowserDomAdapter();
+    this.dom = dom;
     let el = this.element;
-    this.options = {};
 
     //parse options (top level component doesn't support inputs)
-    this.options.scrollParent = detectScollParent(el);
+    this.scrollParent = detectScollParent(el);
-    this.options.scrollOffsetTop = parseInt(DOM.getAttribute(el, 'scroll-y-offset')) || 0;
+    this.parseOptions();
+    this.options = Object.assign({}, defaultOptions, 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);
+      });
+
+    // post-process options
+    this.options.scrollYOffset = parseInt(this.options.scrollYOffset);
   }
 }
-Redoc.parameters = Redoc.parameters.concat([[ElementRef]]);
+Redoc.parameters = Redoc.parameters.concat([[ElementRef], [BrowserDomAdapter]]);
 
 // this doesn't work in side-menu.js because of some circular references issue
 SideMenu.parameters = SideMenu.parameters.concat([[Redoc]]);

lib/components/Redoc/redoc.spec.js

@@ -49,8 +49,7 @@ describe('Redoc components', () => {
       builder.createAsync(TestApp).then(fixture => {
         let component = getChildDebugElement(fixture.debugElement, 'redoc').componentInstance;
         fixture.detectChanges();
-        console.log(component.options.scrollOffsetTop);
+        component.options.scrollYOffset.should.be.equal(50);
-        component.options.scrollOffsetTop.should.be.equal(50);
         fixture.destroy();
         done();
       }, err => done.fail(err));

lib/components/SideMenu/side-menu.js

@@ -33,7 +33,7 @@ export default class SideMenu extends BaseComponent {
     this.adapter = adapter;
     this.redoc = redoc;
 
-    this.scrollParent = this.redoc.options.scrollParent;
+    this.scrollParent = this.redoc.scrollParent;
 
     // for some reason constructor is not run inside zone
     // as workaround running it manually
@@ -65,7 +65,7 @@ export default class SideMenu extends BaseComponent {
 
   bindEvents() {
     this.prevOffsetY = this.scrollY();
-    this.scrollOffsetY = this.redoc.options.scrollOffsetTop || 0;
+    this.scrollYOffset = this.redoc.options.scrollYOffset;
     this._cancel = {};
     this._cancel.scroll = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.scrollHandler(); });
     this._cancel.hash = this.adapter.onAndCancel(global, 'hashchange',  evt => this.hashScroll(evt));
@@ -84,7 +84,7 @@ export default class SideMenu extends BaseComponent {
   scrollTo(el) {
     // TODO: rewrite this to use offsetTop as more reliable solution
     let subjRect = el.getBoundingClientRect();
-    let offset = this.scrollY() + subjRect.top - this.scrollOffsetY + 1;
+    let offset = this.scrollY() + subjRect.top - this.scrollYOffset + 1;
     if (this.scrollParent.scrollTo) {
       this.scrollParent.scrollTo(0, offset);
     } else {
@@ -162,11 +162,11 @@ 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) {
-    if (Math.floor(el.getBoundingClientRect().top) > this.scrollOffsetY) {
+    if (Math.floor(el.getBoundingClientRect().top) > this.scrollYOffset) {
       return INVIEW_POSITION.ABOVE;
     }
 
-    if (el.getBoundingClientRect().bottom <= this.scrollOffsetY) {
+    if (el.getBoundingClientRect().bottom <= this.scrollYOffset) {
       return INVIEW_POSITION.BELLOW;
     }
     return INVIEW_POSITION.INVIEW;

lib/components/SideMenu/side-menu.spec.js

@@ -20,9 +20,9 @@ import SchemaManager from 'lib/utils/SchemaManager';
 
 let _mockRedoc = {
   options: {
-    scrollOffsetTop: 0,
+    scrollYOffset: 0
+  },
   scrollParent: window
-  }
 };
 describe('Redoc components', () => {
   describe('SideMenu Component', () => {

lib/index.js

@@ -6,7 +6,9 @@ import SchemaManager from './utils/SchemaManager';
 import {redocEvents} from './events';
 export * from  './components/index';
 
-
+export var options = {
+  scrollYOffset: 0
+};
 
 export function init(schemaUrl) {
   var promise = new Promise(function(resolve, reject) {