diff --git a/lib/components/Method/method.html b/lib/components/Method/method.html
index 73552a09..2d0f1daf 100644
--- a/lib/components/Method/method.html
+++ b/lib/components/Method/method.html
@@ -1,6 +1,8 @@
-
+
{{data.method}}
{{data.apiUrl}} {{data.path}}
diff --git a/lib/components/Method/method.js b/lib/components/Method/method.js
index c2581389..1cc01986 100644
--- a/lib/components/Method/method.js
+++ b/lib/components/Method/method.js
@@ -11,7 +11,8 @@ import SchemaSample from '../SchemaSample/schema-sample';
selector: 'method',
templateUrl: './lib/components/Method/method.html',
styleUrls: ['./lib/components/Method/method.css'],
- directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample]
+ directives: [ParamsList, ResponsesList, ResponsesSamples, SchemaSample],
+ inputs: ['tag']
})
export default class Method extends BaseComponent {
constructor(schemaMgr) {
diff --git a/lib/components/Method/method.scss b/lib/components/Method/method.scss
index 7ad3e3c4..4f5a4a3d 100644
--- a/lib/components/Method/method.scss
+++ b/lib/components/Method/method.scss
@@ -10,6 +10,30 @@ responses-list, params-list {
color: $method-headers-color;
}
+.method-link {
+ cursor: pointer;
+ margin-left: -15px;
+ padding: 0;
+ line-height: 1;
+ width: 15px;
+ display: inline-block;
+}
+.method-link:before {
+ content: "";
+ width: 15px;
+ height: 15px;
+ background-size: contain;
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDEwMTAxIiBkPSJNNDU5LjcgMjMzLjRsLTkwLjUgOTAuNWMtNTAgNTAtMTMxIDUwLTE4MSAwIC03LjktNy44LTE0LTE2LjctMTkuNC0yNS44bDQyLjEtNDIuMWMyLTIgNC41LTMuMiA2LjgtNC41IDIuOSA5LjkgOCAxOS4zIDE1LjggMjcuMiAyNSAyNSA2NS42IDI0LjkgOTAuNSAwbDkwLjUtOTAuNWMyNS0yNSAyNS02NS42IDAtOTAuNSAtMjQuOS0yNS02NS41LTI1LTkwLjUgMGwtMzIuMiAzMi4yYy0yNi4xLTEwLjItNTQuMi0xMi45LTgxLjYtOC45bDY4LjYtNjguNmM1MC01MCAxMzEtNTAgMTgxIDBDNTA5LjYgMTAyLjMgNTA5LjYgMTgzLjQgNDU5LjcgMjMzLjR6TTIyMC4zIDM4Mi4ybC0zMi4yIDMyLjJjLTI1IDI0LjktNjUuNiAyNC45LTkwLjUgMCAtMjUtMjUtMjUtNjUuNiAwLTkwLjVsOTAuNS05MC41YzI1LTI1IDY1LjUtMjUgOTAuNSAwIDcuOCA3LjggMTIuOSAxNy4yIDE1LjggMjcuMSAyLjQtMS40IDQuOC0yLjUgNi44LTQuNWw0Mi4xLTQyYy01LjQtOS4yLTExLjYtMTgtMTkuNC0yNS44IC01MC01MC0xMzEtNTAtMTgxIDBsLTkwLjUgOTAuNWMtNTAgNTAtNTAgMTMxIDAgMTgxIDUwIDUwIDEzMSA1MCAxODEgMGw2OC42LTY4LjZDMjc0LjYgMzk1LjEgMjQ2LjQgMzkyLjMgMjIwLjMgMzgyLjJ6Ii8+PC9zdmc+Cg==');
+ opacity: 0.5;
+ visibility: hidden;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.method-link:hover:before {
+ visibility: visible;
+}
+
.method-endpoint {
margin: 0;
font-weight: 200;
diff --git a/lib/components/MethodsList/methods-list.html b/lib/components/MethodsList/methods-list.html
index 5e610f26..a89cfa95 100644
--- a/lib/components/MethodsList/methods-list.html
+++ b/lib/components/MethodsList/methods-list.html
@@ -6,6 +6,6 @@
+ [attr.tag]="method.tag" [tag]="method.tag">
diff --git a/lib/components/SideMenu/side-menu.js b/lib/components/SideMenu/side-menu.js
index fc8a0a42..61de0973 100644
--- a/lib/components/SideMenu/side-menu.js
+++ b/lib/components/SideMenu/side-menu.js
@@ -3,6 +3,7 @@
import {RedocComponent, BaseComponent} from '../base';
import SchemaManager from '../../utils/SchemaManager';
import {NgZone} from 'angular2/angular2';
+import {redocEvents} from '../../events';
const CHANGE = {
NEXT : 1,
@@ -35,6 +36,20 @@ export default class SideMenu extends BaseComponent {
this.activeCatIdx = 0;
this.activeMethodIdx = -1;
this.prevOffsetY = null;
+
+ redocEvents.bootstrapped.subscribe(() => this.hashScroll());
+ }
+
+ hashScroll() {
+ let hash = window.location.hash;
+ if (!hash) return;
+
+ hash = hash.substr(1);
+ let tag = hash.split('/')[0];
+ let ptr = hash.substr(tag.length);
+ console.log(tag, ptr);
+ let el = this.getMethodEl(ptr, tag);
+ if (el) this.scrollTo(el);
}
bindScroll() {
@@ -49,12 +64,16 @@ export default class SideMenu extends BaseComponent {
this.scrollToActive();
}
- scrollToActive() {
- let subjRect = this.getMethodEl().getBoundingClientRect();
+ scrollTo(el) {
+ let subjRect = el.getBoundingClientRect();
let offset = window.scrollY + subjRect.top - this.viewBoxTop;
window.scrollTo(0, offset);
}
+ scrollToActive() {
+ this.scrollTo(this.getCurrentMethodEl());
+ }
+
activate(catIdx, methodIdx) {
let menu = this.data.menu;
menu[this.activeCatIdx].active = false;
@@ -110,13 +129,15 @@ export default class SideMenu extends BaseComponent {
return (methodIdx === 0 && catIdx === 0);
}
- getMethodEl() {
- let ptr = this.activeMethodPtr;
- let tag = this.data.menu[this.activeCatIdx].name;
+ getMethodEl(ptr, tag) {
let selector = ptr ? `[pointer="${ptr}"][tag="${tag}"]` : `[tag="${tag}"]`;
return document.querySelector(selector);
}
+ getCurrentMethodEl() {
+ return this.getMethodEl(this.activeMethodPtr, this.data.menu[this.activeCatIdx].name);
+ }
+
/* 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.viewBoxTop) {
@@ -134,7 +155,7 @@ export default class SideMenu extends BaseComponent {
this.prevOffsetY = window.scrollY;
let stable = false;
while(!stable) {
- let activeMethodHost = this.getMethodEl();
+ let activeMethodHost = this.getCurrentMethodEl();
if (!activeMethodHost) return;
var elementInViewPos = this.getElementInViewPos(activeMethodHost);
if(isScrolledDown && elementInViewPos === INVIEW_POSITION.BELLOW) {
diff --git a/lib/events.js b/lib/events.js
new file mode 100644
index 00000000..b2e67d18
--- /dev/null
+++ b/lib/events.js
@@ -0,0 +1,8 @@
+'use strict';
+
+import {EventEmitter} from 'angular2/angular2';
+
+var bootsrEmmiter = new EventEmitter();
+export var redocEvents = {
+ bootstrapped: bootsrEmmiter
+};
diff --git a/lib/index.js b/lib/index.js
index 2bee56b1..e30dcc5f 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -3,14 +3,19 @@
import {bootstrap} from 'angular2/angular2';
import {Redoc} from './components/index';
import SchemaManager from './utils/SchemaManager';
-
+import {redocEvents} from './events';
export * from './components/index';
+
+
export function init(schemaUrl) {
SchemaManager.instance().load(schemaUrl)
.then(() => bootstrap(Redoc))
.then(
- () => console.log('ReDoc bootstrapped!'),
+ () => {
+ redocEvents.bootstrapped.next();
+ console.log('ReDoc bootstrapped!');
+ },
error => console.log(error)
);
}