refactor sticky-sidebar as directive

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

@@ -1,34 +1,26 @@
 'use strict';
 
-import {Component, View, OnInit, OnDestroy, ElementRef} from 'angular2/core';
+import {Directive, ElementRef} from 'angular2/core';
 import {BrowserDomAdapter} from 'angular2/platform/browser';
 
-@Component({
-  selector: 'sticky-sidebar',
+@Directive({
+  selector: '[sticky-sidebar]',
   inputs: ['scrollParent', 'scrollYOffset']
 })
-@View({
-  template: `
-    <div class="sticky-sidebar">
-      <ng-content></ng-content>
-    </div>
-  `,
-  lifecycle: [OnInit, OnDestroy]
-})
 export default class StickySidebar {
-  constructor(elementRef, adapter) {
+  constructor(elementRef, dom) {
     this.element = elementRef.nativeElement;
-    this.adapter = adapter;
+    this.dom = dom;
 
     // initial styling
-    this.adapter.setStyle(this.element, 'position', 'absolute');
-    this.adapter.setStyle(this.element, 'top', '0');
-    this.adapter.setStyle(this.element, 'bottom', '0');
-    this.adapter.setStyle(this.element, 'max-height', '100%');
+    this.dom.setStyle(this.element, 'position', 'absolute');
+    this.dom.setStyle(this.element, 'top', '0');
+    this.dom.setStyle(this.element, 'bottom', '0');
+    this.dom.setStyle(this.element, 'max-height', '100%');
   }
 
   bind() {
-    this.cancelScrollBinding = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.updatePosition(); });
+    this.cancelScrollBinding = this.dom.onAndCancel(this.scrollParent, 'scroll', () => { this.updatePosition(); });
     this.updatePosition();
   }
 
@@ -45,13 +37,13 @@ export default class StickySidebar {
   }
 
   stick() {
-    this.adapter.setStyle(this.element, 'position', 'fixed');
-    this.adapter.setStyle(this.element, 'top', this.scrollYOffset() + 'px');
+    this.dom.setStyle(this.element, 'position', 'fixed');
+    this.dom.setStyle(this.element, 'top', this.scrollYOffset() + 'px');
   }
 
   unstick() {
-    this.adapter.setStyle(this.element, 'position', 'absolute');
-    this.adapter.setStyle(this.element, 'top', 0);
+    this.dom.setStyle(this.element, 'position', 'absolute');
+    this.dom.setStyle(this.element, 'top', 0);
   }
 
   get scrollY() {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-import { getChildDebugElement } from 'tests/helpers';
+import { getChildDebugElementByType } from 'tests/helpers';
 import {Component, View, provide} from 'angular2/core';
 import {BrowserDomAdapter} from 'angular2/platform/browser';
 
@@ -29,7 +29,7 @@ describe('Common components', () => {
     beforeEach((done) => {
       builder.createAsync(TestApp).then(_fixture => {
         fixture = _fixture;
-        let debugEl = getChildDebugElement(fixture.debugElement, 'sticky-sidebar');
+        let debugEl = getChildDebugElementByType(fixture.debugElement, StickySidebar);
         component = debugEl.componentInstance;
         done();
       }, err => done.fail(err));
@@ -67,8 +67,8 @@ describe('Common components', () => {
       `<div style="padding-top: 20px">
         <div style="height: 20px; position: fixed; top: 0;"> </div>
         <div style="position: relative">
-          <sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
-          </sticky-sidebar>
+          <div sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
+          </div>
         </div>
       </div>`
 

lib/components/Redoc/redoc.html

@@ -1,8 +1,8 @@
 <div class="redoc-wrap">
-  <sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
+  <div sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
     <api-logo> </api-logo>
     <side-menu> </side-menu>
-  </sticky-sidebar>
+  </div>
   <div id="api-content">
     <api-info> </api-info>
     <methods-list> </methods-list>

lib/components/Redoc/redoc.scss

@@ -51,7 +51,7 @@ api-logo {
   text-align: center;
 }
 
-sticky-sidebar {
+[sticky-sidebar] {
   width: $side-bar-width;
   overflow-y: auto;
   overflow-x: hidden;

tests/helpers.js

@@ -10,6 +10,13 @@ export function getChildDebugElement(parent, tagName) {
   });
 }
 
+/** Gets a child DebugElement by Component Type. */
+export function getChildDebugElementByType(parent, type) {
+  return parent.query(debugEl => {
+    return debugEl.componentInstance instanceof type;
+  });
+}
+
 /** Gets a child DebugElements by tag name. */
 export function getChildDebugElementAll(parent, tagName) {
   return parent.queryAll(debugEl => {