barista(scroll-top-button): Added scroll to top button.

apps/barista/src/app.html

@@ -16,5 +16,7 @@
     <ba-page-outlet [content]="_currentPage$ | async"></ba-page-outlet>
   </div>
 
+  <button ba-scroll-to-top></button>
+
   <ba-footer></ba-footer>
 </div>

apps/barista/src/app.module.ts

@@ -38,6 +38,7 @@ import { BaPageOutlet } from './pages/page-outlet';
 import { BaPageService } from './shared/page.service';
 import { BaRecentlyOrderedService } from './shared/recently-ordered.service';
 import { BaScrollSpyService } from './shared/scroll-spy.service';
+import { BaScrollToTop } from './layout/scroll-to-top/scroll-to-top';
 import { BaSearch } from './layout/search/search';
 import { BaSidenav } from './layout/sidenav/sidenav';
 import { BaSinglePage } from './pages/single-page/single-page';
@@ -98,6 +99,7 @@ import { DtExamplesModule } from '@dynatrace/barista-components/examples';
     BaSearch,
     BaToc,
     BaSidenav,
+    BaScrollToTop,
   ],
   providers: [
     BaPageService,

apps/barista/src/layout/scroll-to-top/scroll-to-top.html

@@ -0,0 +1,9 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="30"
+  height="30"
+  viewBox="0 0 23 23"
+>
+  <path d="M17.9 13.9l-5.1-5.1V19h-2.6V8.8l-5.1 5.1-1.8-1.8L11.5 4l8.2 8.1" />
+  <title>Scroll to top</title>
+</svg>

apps/barista/src/layout/scroll-to-top/scroll-to-top.scss

@@ -0,0 +1,38 @@
+@import '../../styles/global/variables';
+@import '../../styles/global/mixins';
+@import 'colors';
+
+:host {
+  @include iconButton();
+  border-color: $gray-300;
+  border-style: solid;
+  border-radius: 3px;
+  border-width: 1px;
+  z-index: 90;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out, background-color 150ms ease-in-out;
+  margin: 2rem;
+  fill: #fff;
+  text-align: center;
+  pointer-events: none;
+  background-color: $turquoise-600;
+  background-color: var(--ba-pagetheme);
+}
+
+:host:hover {
+  background-color: $turquoise-500;
+  background-color: var(--ba-pagetheme-light);
+}
+
+:host:focus {
+  @include focusStyle();
+}
+
+:host.ba-scroll-top-button-show {
+  opacity: 1;
+  cursor: pointer;
+  pointer-events: all;
+}

apps/barista/src/layout/scroll-to-top/scroll-to-top.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2019 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { Subscription, fromEvent, interval } from 'rxjs';
+import { throttle, pairwise, map, startWith } from 'rxjs/operators';
+
+@Component({
+  selector: 'button[ba-scroll-to-top]',
+  templateUrl: 'scroll-to-top.html',
+  styleUrls: ['scroll-to-top.scss'],
+  host: {
+    class: 'ba-scroll-top-button',
+    '[class.ba-scroll-top-button-show]': '_showScrollToTop',
+    '(click)': '_scrollToTop()',
+  },
+})
+export class BaScrollToTop implements AfterViewInit, OnDestroy {
+  /** @internal */
+  _showScrollToTop = false;
+
+  /** Subscription on scrolling */
+  private _scrollSubscription = Subscription.EMPTY;
+
+  private _throttleInterval = 200;
+
+  /** the threshold for the scroll position, before which the scroll to top button is not displayed */
+  private _threshold = 150;
+
+  ngAfterViewInit(): void {
+    this._scrollSubscription = fromEvent(window, 'scroll')
+      .pipe(
+        startWith(null),
+        throttle(() => interval(this._throttleInterval), { trailing: true }),
+        map(() => (window ? window.scrollY : 0)),
+        pairwise(),
+        map(
+          ([lastScrollPosition, currentScrollPosition]) =>
+            currentScrollPosition < lastScrollPosition &&
+            currentScrollPosition >= this._threshold,
+        ),
+      )
+      .subscribe(isVisible => {
+        this._showScrollToTop = isVisible;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._scrollSubscription.unsubscribe();
+  }
+
+  _scrollToTop(): void {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }
+}

apps/barista/src/pages/single-page/single-page.ts

@@ -55,6 +55,11 @@ export class BaSinglePage implements BaPage, AfterViewInit {
     }
   }
 
+  /** @internal Whether to display the table of contents on the page. */
+  _showTOC(): boolean {
+    return this.contents && this.contents.toc !== false;
+  }
+
   /** check if the url contains a hash and scroll to the matching headline */
   private _checkURL(): void {
     const hash = window.location.hash;
@@ -67,9 +72,4 @@ export class BaSinglePage implements BaPage, AfterViewInit {
       }
     }
   }
-
-  /** @internal Whether to display the table of contents on the page. */
-  _showTOC(): boolean {
-    return this.contents && this.contents.toc !== false;
-  }
 }