Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-23 00:56:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor sticky-sidebar as directive

Browse Source
This commit is contained in:
Roman Hotsiy 2016-01-21 00:09:42 +02:00
parent dd72d42285
commit ccac2ee15c
5 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
lib/common/components/StickySidebar/sticky-sidebar.js
View File

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

8
lib/common/components/StickySidebar/sticky-sidebar.spec.js
View File

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

4
lib/components/Redoc/redoc.html
View File

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

2
lib/components/Redoc/redoc.scss
View File

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

7
tests/helpers.js
View File

@ -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. */ /** Gets a child DebugElements by tag name. */
export function getChildDebugElementAll(parent, tagName) { export function getChildDebugElementAll(parent, tagName) {
return parent.queryAll(debugEl => { return parent.queryAll(debugEl => {