From cdeee6740d73c0886300db92a03a8794b0898d67 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 23 Apr 2017 16:10:32 +0300 Subject: [PATCH] feat: add perfect-scrollbar for side menu --- lib/components/Redoc/redoc.scss | 2 +- lib/components/SideMenu/side-menu.html | 2 +- lib/components/SideMenu/side-menu.scss | 10 ++++- lib/components/SideMenu/side-menu.ts | 14 +++++-- .../PerfectScrollbar/perfect-scrollbar.ts | 37 +++++++++++++++++++ lib/shared/components/index.ts | 5 ++- 6 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index be398b83..38c6b3f3 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -45,7 +45,7 @@ } side-menu { - overflow-y: auto; + overflow: hidden; } [sticky-sidebar] { diff --git a/lib/components/SideMenu/side-menu.html b/lib/components/SideMenu/side-menu.html index 25fc0940..301cd443 100644 --- a/lib/components/SideMenu/side-menu.html +++ b/lib/components/SideMenu/side-menu.html @@ -8,7 +8,7 @@ -
+
    diff --git a/lib/components/SideMenu/side-menu.scss b/lib/components/SideMenu/side-menu.scss index f894233d..09ee79f7 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -2,10 +2,14 @@ $mobile-menu-compact-breakpoint: 550px; :host { - display: block; + display: flex; box-sizing: border-box; } +#resources-nav { + position: relative; +} + ul.menu-root { margin: 0; padding: 0; @@ -35,6 +39,10 @@ ul.menu-root { } @media (max-width: $side-menu-mobile-breakpoint) { + :host { + display: block; + } + .mobile-nav { display: block; } diff --git a/lib/components/SideMenu/side-menu.ts b/lib/components/SideMenu/side-menu.ts index a30f5aa1..774e4465 100644 --- a/lib/components/SideMenu/side-menu.ts +++ b/lib/components/SideMenu/side-menu.ts @@ -6,12 +6,14 @@ import { Component, Output, ElementRef, ChangeDetectorRef, + ViewChild, OnInit, OnDestroy } from '@angular/core'; import { trigger, state, animate, transition, style } from '@angular/core'; import { ScrollService, MenuService, OptionsService, MenuItem } from '../../services/'; +import { PerfectScrollbar } from '../../shared/components'; import { BrowserDomAdapter as DOM } from '../../utils/browser-adapter'; const global = window; @@ -51,6 +53,7 @@ export class SideMenu implements OnInit, OnDestroy { activeItemCaption: string; menuItems: Array; @Input() itemsTemplate; + @ViewChild(PerfectScrollbar) PS:PerfectScrollbar; private options: any; private $element: any; @@ -77,7 +80,7 @@ export class SideMenu implements OnInit, OnDestroy { this.changedActiveSubscription = this.menuService.changedActiveItem.subscribe((evt) => this.changed(evt)); this.changedSubscription = this.menuService.changed.subscribe((evt) => { - this.detectorRef.detectChanges() + this.update(); }); } @@ -95,11 +98,16 @@ export class SideMenu implements OnInit, OnDestroy { this.activeItemCaption = ''; } - //safari doesn't update bindings if not run changeDetector manually :( - this.detectorRef.detectChanges(); + // safari doesn't update bindings if not run changeDetector manually :( + this.update(); this.scrollActiveIntoView(); } + update() { + this.detectorRef.detectChanges(); + this.PS && this.PS.update(); + } + scrollActiveIntoView() { let $item = this.$element.querySelector('li.active, label.active'); if ($item) $item.scrollIntoViewIfNeeded(); diff --git a/lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts b/lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts new file mode 100644 index 00000000..5ef6fc0d --- /dev/null +++ b/lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts @@ -0,0 +1,37 @@ +'use strict'; + +import 'perfect-scrollbar/dist/css/perfect-scrollbar.css'; + +import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; +import { BrowserDomAdapter as DOM } from '../../../utils/browser-adapter'; + +import * as PS from 'perfect-scrollbar'; + +@Directive({ + selector: '[perfect-scrollbar]' +}) +export class PerfectScrollbar implements OnInit, OnDestroy { + $element: any; + subscription: any; + + constructor(elementRef:ElementRef) { + this.$element = elementRef.nativeElement; + } + + update() { + PS.update(this.$element); + } + + ngOnInit() { + requestAnimationFrame(() => PS.initialize(this.$element, { + wheelSpeed: 2, + wheelPropagation: false, + minScrollbarLength: 20, + suppressScrollX: true + })); + } + + ngOnDestroy() { + PS.destroy(this.$element); + } +} diff --git a/lib/shared/components/index.ts b/lib/shared/components/index.ts index fe8a1392..e208d16d 100644 --- a/lib/shared/components/index.ts +++ b/lib/shared/components/index.ts @@ -7,10 +7,11 @@ import { CopyButton } from './CopyButton/copy-button.directive'; import { SelectOnClick } from './SelectOnClick/select-on-click.directive'; import { DynamicNg2Viewer, DynamicNg2Wrapper } from './DynamicNg2Viewer/dynamic-ng2-viewer.component'; import { LazyFor, LazyTasksService, LazyTasksServiceSync } from './LazyFor/lazy-for'; +import { PerfectScrollbar } from './PerfectScrollbar/perfect-scrollbar'; export const REDOC_COMMON_DIRECTIVES = [ - DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor + PerfectScrollbar, DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor ]; export { DropDown, StickySidebar, Tabs, Tab, Zippy, CopyButton, SelectOnClick, DynamicNg2Viewer, DynamicNg2Wrapper, LazyFor } -export { LazyTasksService, LazyTasksServiceSync } +export { LazyTasksService, LazyTasksServiceSync, PerfectScrollbar }