From ccac2ee15c47fe9e8d521ec82f6d470e449d7875 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Thu, 21 Jan 2016 00:09:42 +0200
Subject: [PATCH] refactor sticky-sidebar as directive

---
 .../StickySidebar/sticky-sidebar.js           | 36 ++++++++-----------
 .../StickySidebar/sticky-sidebar.spec.js      |  8 ++---
 lib/components/Redoc/redoc.html               |  4 +--
 lib/components/Redoc/redoc.scss               |  2 +-
 tests/helpers.js                              |  7 ++++
 5 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/lib/common/components/StickySidebar/sticky-sidebar.js b/lib/common/components/StickySidebar/sticky-sidebar.js
index 345d1d8e..c0f2cd1b 100644
--- a/lib/common/components/StickySidebar/sticky-sidebar.js
+++ b/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() {
diff --git a/lib/common/components/StickySidebar/sticky-sidebar.spec.js b/lib/common/components/StickySidebar/sticky-sidebar.spec.js
index 96bc5b3a..d77ea9eb 100644
--- a/lib/common/components/StickySidebar/sticky-sidebar.spec.js
+++ b/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>`
 
diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html
index 504d783e..3bb99055 100644
--- a/lib/components/Redoc/redoc.html
+++ b/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>
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss
index b62d179b..c02efc8f 100644
--- a/lib/components/Redoc/redoc.scss
+++ b/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;
diff --git a/tests/helpers.js b/tests/helpers.js
index ce7d6c97..3ce7c4ca 100644
--- a/tests/helpers.js
+++ b/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 => {