mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-29 12:03:44 +03:00
Various refactoring
- renam DOM elements variables to start from $ - use DI for OptionsManager - move loading styles into separate CSS file - minor other refactors
This commit is contained in:
Roman Hotsiy
parent
e68054553d
commit
5485df84fe
|
|
@ -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, 'top', '0');
|
||||
this.dom.setStyle(this.element, 'bottom', '0');
|
||||
this.dom.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() {
|
||||
|
|
@ -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, 'top', this.scrollYOffset() + 'px');
|
||||
this.dom.setStyle(this.$element, 'position', 'fixed');
|
||||
this.dom.setStyle(this.$element, 'top', this.scrollYOffset() + 'px');
|
||||
}
|
||||
|
||||
unstick() {
|
||||
this.dom.setStyle(this.element, 'position', 'absolute');
|
||||
this.dom.setStyle(this.element, 'top', 0);
|
||||
this.dom.setStyle(this.$element, 'position', 'absolute');
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
if (element.querySelector('.discriminator')) {
|
||||
// skip caching view with tabs inside (discriminator) as it needs attached controller
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
while(el && el.tagName !== 'JSON-SCHEMA' && el.tagName !== 'REDOC') {
|
||||
el = el.parentElement;
|
||||
let $el = this.$element.parentElement;
|
||||
while($el && $el.tagName !== 'JSON-SCHEMA' && $el.tagName !== 'REDOC') {
|
||||
$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';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
37
lib/components/Redoc/redoc-loading-styles.scss
Normal file
37
lib/components/Redoc/redoc-loading-styles.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
this.parseOptions();
|
||||
this.options = Object.assign({}, optionsMgr.options, this.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;
|
||||
optionsMgr.parseOptions( this.element );
|
||||
optionsMgr.options.$scrollParent = detectScollParent( this.element );
|
||||
this.options = optionsMgr.options;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
'use strict';
|
||||
|
||||
import {NgZone, ChangeDetectionStrategy, ElementRef, forwardRef} from 'angular2/core';
|
||||
import Redoc from '../Redoc/redoc';
|
||||
import {NgZone, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
|
||||
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.adapter = adapter;
|
||||
this.redoc = redoc;
|
||||
|
||||
this.scrollParent = this.redoc.scrollParent;
|
||||
this.mobileNav = adapter.querySelector(elementRef.nativeElement, '.mobile-nav');
|
||||
this.resourcesNav = adapter.querySelector(elementRef.nativeElement, '#resources-nav');
|
||||
this.dom = dom;
|
||||
this.options = optionsMgr.options;
|
||||
this.$scrollParent = this.options.$scrollParent;
|
||||
this.$mobileNav = dom.querySelector(elementRef.nativeElement, '.mobile-nav');
|
||||
this.$resourcesNav = dom.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;
|
||||
return this.redoc.options.scrollYOffset() + mobileNavOffset;
|
||||
let mobileNavOffset = this.$mobileNav.clientHeight;
|
||||
return this.options.scrollYOffset() + mobileNavOffset;
|
||||
};
|
||||
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));
|
||||
this._cancel.scroll = this.dom.onAndCancel(this.$scrollParent, 'scroll', () => { this.scrollHandler(); });
|
||||
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) {
|
||||
this.scrollParent.scrollTo(0, offset);
|
||||
if (this.$scrollParent.scrollTo) {
|
||||
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) {
|
||||
if (Math.floor(el.getBoundingClientRect().top) > this.scrollYOffset()) {
|
||||
getElementInViewPos($el) {
|
||||
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();
|
||||
if (!activeMethodHost) return;
|
||||
var elementInViewPos = this.getElementInViewPos(activeMethodHost);
|
||||
let $activeMethodHost = this.getCurrentMethodEl();
|
||||
if (!$activeMethodHost) return;
|
||||
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 overflowParent = (this.scrollParent === global) ? dom.defaultDoc().body : this.scrollParent;
|
||||
if (dom.hasStyle(this.resourcesNav, 'height')) {
|
||||
dom.removeStyle(this.resourcesNav, 'height');
|
||||
dom.removeStyle(overflowParent, 'overflow-y');
|
||||
let dom = this.dom;
|
||||
let $overflowParent = (this.$scrollParent === global) ? dom.defaultDoc().body : this.$scrollParent;
|
||||
if (dom.hasStyle(this.$resourcesNav, 'height')) {
|
||||
dom.removeStyle(this.$resourcesNav, 'height');
|
||||
dom.removeStyle($overflowParent, 'overflow-y');
|
||||
} else {
|
||||
let viewportHeight = this.scrollParent.innerHeight || this.scrollParent.clientHeight;
|
||||
let height = viewportHeight - this.mobileNav.getBoundingClientRect().bottom;
|
||||
dom.setStyle(overflowParent, 'overflow-y', 'hidden');
|
||||
dom.setStyle(this.resourcesNav, 'height', height + 'px');
|
||||
let viewportHeight = this.$scrollParent.innerHeight || this.$scrollParent.clientHeight;
|
||||
let height = viewportHeight - this.$mobileNav.getBoundingClientRect().bottom;
|
||||
dom.setStyle($overflowParent, 'overflow-y', 'hidden');
|
||||
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)] ]);
|
||||
|
|
|
|||
|
|
@ -1,28 +1,20 @@
|
|||
'use strict';
|
||||
|
||||
export var options = {
|
||||
scrollYOffset: 0
|
||||
};
|
||||
import {Inject} from 'angular2/core';
|
||||
import {isFunction, isString} from 'angular2/src/facade/lang';
|
||||
import {BrowserDomAdapter} from 'angular2/platform/browser';
|
||||
|
||||
// singleton
|
||||
export default class OptionsManager {
|
||||
constructor() {
|
||||
if (OptionsManager.prototype._instance) {
|
||||
return OptionsManager.prototype._instance;
|
||||
}
|
||||
|
||||
OptionsManager.prototype._instance = this;
|
||||
|
||||
this._defaults = {
|
||||
var defaults = {
|
||||
scrollYOffset: 0,
|
||||
disableLazySchemas: false
|
||||
};
|
||||
};
|
||||
|
||||
this._options = {};
|
||||
}
|
||||
|
||||
static instance() {
|
||||
return new OptionsManager();
|
||||
@Reflect.metadata('parameters', [[new Inject('OPTION_NAMES')], [BrowserDomAdapter]])
|
||||
export default class OptionsManager {
|
||||
constructor(optionNames, dom) {
|
||||
this._options = defaults;
|
||||
this.optionNames = optionNames;
|
||||
this.dom = dom;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user