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

Responsive sidemenu

Browse Source
This commit is contained in:
Roman Hotsiy 2016-01-21 17:26:54 +02:00
parent ccac2ee15c
commit 825bf111f8
7 changed files with 192 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>ReDoc</title> <title>ReDoc</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<nav> <nav>
@ -10,7 +11,6 @@
<input id="schema-url-input" value='swagger.json'> <input id="schema-url-input" value='swagger.json'>
<button id="load-button"> Explore </button> <button id="load-button"> Explore </button>
</nav> </nav>
</nav>
<redoc scroll-y-offset="body > nav" spec-url='swagger.json'> <redoc scroll-y-offset="body > nav" spec-url='swagger.json'>
Loading... Loading...

2
lib/common/styles/_variables.scss
View File

@ -16,3 +16,5 @@ $sample-panel-headers-color: #8A9094;
$sample-panel-color: #CFD2D3; $sample-panel-color: #CFD2D3;
$tree-lines-color: #7D97CE; $tree-lines-color: #7D97CE;
$side-menu-mobile-breakpoint: 1000px;

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

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

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

@ -49,17 +49,48 @@ api-info {
api-logo { api-logo {
display: block; display: block;
text-align: center; text-align: center;
@media (max-width: $side-menu-mobile-breakpoint) {
display: none;
}
} }
[sticky-sidebar] { [sticky-sidebar] {
width: $side-bar-width; width: $side-bar-width;
background-color: $side-bar-bg-color;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: $side-bar-bg-color;
@media (max-width: $side-menu-mobile-breakpoint) {
z-index: 1;
width: 100%;
bottom: auto !important;
}
} }
#api-content { #api-content {
margin-left: $side-bar-width; margin-left: $side-bar-width;
@media (max-width: $side-menu-mobile-breakpoint) {
padding-top: 3em;
margin-left: 0;
}
}
#api-content:after {
content: "";
position: absolute;;
left:0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
transition: all 0.3s ease;
display: none;
}
#api-content.menu-opened:after {
display: block;;
} }
footer { footer {

11
lib/components/SideMenu/side-menu.html
View File

@ -1,4 +1,12 @@
<h2 class="menu-header"> Api reference </h2> <div class="mobile-nav" (click)="toggleMobileNav()">
<span class="menu-header"> API Reference: </span>
<span class="selected-item-info">
<span class="selected-tag"> {{activeCatCaption}} </span>
<span class="selected-endpoint">{{activeItemCaption}}</span>
</span>
</div>
<div id="resources-nav">
<h2 class="menu-header"> API reference </h2>
<div *ngFor="var cat of data.menu; #idx = index" class="menu-cat"> <div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label> <label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>
@ -11,3 +19,4 @@
</ul> </ul>
</div> </div>
</div>

45
lib/components/SideMenu/side-menu.js
View File

@ -3,7 +3,7 @@
import {RedocComponent, BaseComponent} from '../base'; import {RedocComponent, BaseComponent} from '../base';
import {redocEvents} from '../../events'; import {redocEvents} from '../../events';
import {NgZone, ChangeDetectionStrategy} from 'angular2/core'; import {NgZone, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
import {document} from 'angular2/src/facade/browser'; import {document} from 'angular2/src/facade/browser';
import {BrowserDomAdapter} from 'angular2/platform/browser'; import {BrowserDomAdapter} from 'angular2/platform/browser';
import {global} from 'angular2/src/facade/lang'; import {global} from 'angular2/src/facade/lang';
@ -27,13 +27,15 @@ const INVIEW_POSITION = {
changeDetection: ChangeDetectionStrategy.Default changeDetection: ChangeDetectionStrategy.Default
}) })
export default class SideMenu extends BaseComponent { export default class SideMenu extends BaseComponent {
constructor(schemaMgr, adapter, zone, redoc) { constructor(schemaMgr, elementRef, adapter, zone, redoc) {
super(schemaMgr); super(schemaMgr);
this.zone = zone; this.zone = zone;
this.adapter = adapter; this.adapter = adapter;
this.redoc = redoc; this.redoc = redoc;
this.scrollParent = this.redoc.scrollParent; this.scrollParent = this.redoc.scrollParent;
this.mobileNav = adapter.querySelector(elementRef.nativeElement, '.mobile-nav');
this.resourcesNav = adapter.querySelector(elementRef.nativeElement, '#resources-nav');
// for some reason constructor is not run inside zone // for some reason constructor is not run inside zone
// as workaround running it manually // as workaround running it manually
@ -45,6 +47,9 @@ export default class SideMenu extends BaseComponent {
this.prevOffsetY = null; this.prevOffsetY = null;
redocEvents.bootstrapped.subscribe(() => this.hashScroll()); redocEvents.bootstrapped.subscribe(() => this.hashScroll());
this.activeCatCaption = '';
this.activeItemCaption = '';
} }
scrollY() { scrollY() {
@ -65,7 +70,12 @@ export default class SideMenu extends BaseComponent {
bindEvents() { bindEvents() {
this.prevOffsetY = this.scrollY(); this.prevOffsetY = this.scrollY();
this.scrollYOffset = this.redoc.options.scrollYOffset;
//decorate option.scrollYOffset to account mobile nav
this.scrollYOffset = () => {
let mobileNavOffset = this.mobileNav.clientHeight;
return this.redoc.options.scrollYOffset() + mobileNavOffset;
};
this._cancel = {}; this._cancel = {};
this._cancel.scroll = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.scrollHandler(); }); 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.hash = this.adapter.onAndCancel(global, 'hashchange', evt => this.hashScroll(evt));
@ -77,6 +87,9 @@ export default class SideMenu extends BaseComponent {
} }
activateAndScroll(idx, methodIdx) { activateAndScroll(idx, methodIdx) {
if (this.mobileMode()) {
this.toggleMobileNav();
}
this.activate(idx, methodIdx); this.activate(idx, methodIdx);
this.scrollToActive(); this.scrollToActive();
} }
@ -98,6 +111,10 @@ export default class SideMenu extends BaseComponent {
activate(catIdx, methodIdx) { activate(catIdx, methodIdx) {
let menu = this.data.menu; let menu = this.data.menu;
this.activeCatCaption = '';
this.activeItemCaption = '';
menu[this.activeCatIdx].active = false; menu[this.activeCatIdx].active = false;
if (menu[this.activeCatIdx].methods.length) { if (menu[this.activeCatIdx].methods.length) {
if (this.activeMethodIdx >= 0) { if (this.activeMethodIdx >= 0) {
@ -108,11 +125,13 @@ export default class SideMenu extends BaseComponent {
this.activeCatIdx = catIdx; this.activeCatIdx = catIdx;
this.activeMethodIdx = methodIdx; this.activeMethodIdx = methodIdx;
menu[catIdx].active = true; menu[catIdx].active = true;
this.activeCatCaption = menu[catIdx].name;
this.activeMethodPtr = null; this.activeMethodPtr = null;
if (menu[catIdx].methods.length && (methodIdx > -1)) { if (menu[catIdx].methods.length && (methodIdx > -1)) {
let currentItem = menu[catIdx].methods[methodIdx]; let currentItem = menu[catIdx].methods[methodIdx];
currentItem.active = true; currentItem.active = true;
this.activeMethodPtr = currentItem.pointer; this.activeMethodPtr = currentItem.pointer;
this.activeItemCaption = currentItem.summary;
} }
} }
@ -199,8 +218,26 @@ export default class SideMenu extends BaseComponent {
); );
} }
mobileMode() {
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');
} 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');
}
}
init() { init() {
this.changeActive(CHANGE.INITIAL); this.changeActive(CHANGE.INITIAL);
} }
} }
SideMenu.parameters = SideMenu.parameters.concat([[BrowserDomAdapter], [NgZone]]); SideMenu.parameters = SideMenu.parameters.concat([[ElementRef], [BrowserDomAdapter], [NgZone]]);

93
lib/components/SideMenu/side-menu.scss
View File

@ -1,4 +1,5 @@
@import '../../common/styles/variables'; @import '../../common/styles/variables';
$mobile-menu-compact-breakpoint: 550px;
.menu-header { .menu-header {
text-transform: uppercase; text-transform: uppercase;
@ -24,6 +25,11 @@
background-color: $side-menu-even-bg-color; background-color: $side-menu-even-bg-color;
} }
.menu-cat .menu-cat-header.active {
background-color: $side-menu-active-bg-color;
font-weight: bold;
}
.menu-subitems { .menu-subitems {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -61,7 +67,90 @@
} }
} }
.menu-cat-header.active, .menu-subitems li.active { .menu-cat .menu-subitems {
background-color: $side-menu-active-bg-color !important; li.active, li.active:nth-of-type(even) {
background-color: $side-menu-active-bg-color;
font-weight: bold; font-weight: bold;
} }
}
.mobile-nav {
display: none;
height: 3em;
line-height: 3em;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
cursor: pointer;
&:after {
content: "";
display: inline-block;
width: 3em;
height: 3em;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
float: right;
vertical-align: middle;
}
.menu-header {
padding: 0 10px;
font-size: 0.95em;
@media (max-width: $mobile-menu-compact-breakpoint) {
display: none;
}
}
}
@media (max-width: $side-menu-mobile-breakpoint) {
.mobile-nav {
display: block;
}
#resources-nav {
height: 0;
overflow-y: auto;
transition: all 0.3s ease;
}
#resources-nav .menu-header {
display: none;
}
.menu-subitems {
height: auto;
}
}
.selected-tag {
text-transform: capitalize;
}
.selected-endpoint:before {
content: "/";
padding: 0 2px;
color: #ccc;
}
.selected-endpoint:empty:before {
display: none;
}
.selected-item-info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
max-width: 350px;
@media (max-width: $mobile-menu-compact-breakpoint) {
display: inline-block;
padding: 0 10px;
max-width: 80%;
max-width: calc(100% - 4em);
}
}