feat: autoscroll menu

implements #88
Redocly · Feb 14, 2017 · b43a87d · b43a87d
1 parent 4d14c01
commit b43a87d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/lib/components/SideMenu/side-menu.ts b/lib/components/SideMenu/side-menu.ts
@@ -51,8 +51,6 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
   private $resourcesNav: any;
   private $scrollParent: any;
 
-  private firstChange = true;
-
   constructor(specMgr:SpecManager, elementRef:ElementRef,
   private scrollService:ScrollService, private menuService:MenuService,
   optionsService:OptionsService, private detectorRef:ChangeDetectorRef, private marker:Marker) {
@@ -84,15 +82,12 @@ export class SideMenu extends BaseComponent implements OnInit, OnDestroy {
 
     //safari doesn't update bindings if not run changeDetector manually :(
     this.detectorRef.detectChanges();
-    if (this.firstChange) {
-      this.scrollActiveIntoView();
-      this.firstChange = false;
-    }
+    this.scrollActiveIntoView();
   }
 
   scrollActiveIntoView() {
     let $item = this.$element.querySelector('li.active, label.active');
-    if ($item) $item.scrollIntoView();
+    if ($item) $item.scrollIntoViewIfNeeded();
   }
 
   activateAndScroll(item) {

diff --git a/lib/polyfills.ts b/lib/polyfills.ts
@@ -28,3 +28,35 @@ if (!IS_PRODUCTION) {
   Error.stackTraceLimit = Infinity;
   require('zone.js/dist/long-stack-trace-zone');
 }
+
+interface Element {
+  scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
+};
+
+if (!(<any>Element).prototype.scrollIntoViewIfNeeded) {
+  (<any>Element).prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
+    centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
+
+    var parent = this.parentNode,
+        parentComputedStyle = window.getComputedStyle(parent, null),
+        parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
+        parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
+        overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
+        overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
+        overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
+        overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
+        alignWithTop = overTop && !overBottom;
+
+    if ((overTop || overBottom) && centerIfNeeded) {
+      parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+    }
+
+    if ((overLeft || overRight) && centerIfNeeded) {
+      parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+    }
+
+    if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
+      this.scrollIntoView(alignWithTop);
+    }
+  };
+}