Add scroll to top button (pulumi#3152)

Sodki · May 15, 2020 · 2eaef8f · 2eaef8f
1 parent 319de9c
commit 2eaef8f
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 4 deletions.
diff --git a/assets/config/postcss.config.js b/assets/config/postcss.config.js
@@ -61,7 +61,7 @@ module.exports = {
             ],
 
             // Whitelist specific classes that were being removed.
-            whitelist: ["supported-cicd-platforms", ":not", ":target", "md:max-w-lg", "blink", "typing", "char", "resource-deprecated"],
+            whitelist: ["supported-cicd-platforms", ":not", ":target", "md:max-w-lg", "blink", "typing", "char", "resource-deprecated", "btn-scroll-top"],
 
             // Whitelist custom parent selectors and their children.
             whitelistPatterns: [/^fa-/, /^hs-/, /^highlight$/, /^pagination$/, /^code-/, /^copy-/, /^carousel/],

diff --git a/assets/sass/_buttons.scss b/assets/sass/_buttons.scss
@@ -83,3 +83,7 @@
         @apply border-gray-700 text-gray-700 bg-transparent;
     }
 }
+
+.btn-scroll-top {
+    @apply text-white text-center opacity-75 rounded-sm bg-gray-500 mt-8 w-8 h-4;
+}
diff --git a/assets/sass/_on-this-page.scss b/assets/sass/_on-this-page.scss
@@ -2,12 +2,11 @@
     @apply mt-4 py-4 hidden;
 
     h4 {
-        @apply text-blue-800 uppercase tracking-wide font-bold text-sm;
+        @apply text-blue-800 uppercase tracking-wide font-bold text-sm cursor-pointer;
     }
 
     ul {
         @apply p-0 list-none;
-
         // Extra padding for H3s.
         li {
             @apply truncate;

diff --git a/components/src/components.d.ts b/components/src/components.d.ts
@@ -37,6 +37,7 @@ export namespace Components {
   interface PulumiExample {}
   interface PulumiExamples {}
   interface PulumiRoot {}
+  interface PulumiTopButton {}
 }
 
 declare global {
@@ -71,12 +72,19 @@ declare global {
     prototype: HTMLPulumiRootElement;
     new (): HTMLPulumiRootElement;
   };
+
+  interface HTMLPulumiTopButtonElement extends Components.PulumiTopButton, HTMLStencilElement {}
+  var HTMLPulumiTopButtonElement: {
+    prototype: HTMLPulumiTopButtonElement;
+    new (): HTMLPulumiTopButtonElement;
+  };
   interface HTMLElementTagNameMap {
     'pulumi-choosable': HTMLPulumiChoosableElement;
     'pulumi-chooser': HTMLPulumiChooserElement;
     'pulumi-example': HTMLPulumiExampleElement;
     'pulumi-examples': HTMLPulumiExamplesElement;
     'pulumi-root': HTMLPulumiRootElement;
+    'pulumi-top-button': HTMLPulumiTopButtonElement;
   }
 }
 
@@ -100,13 +108,15 @@ declare namespace LocalJSX {
   interface PulumiRoot {
     'onRendered'?: (event: CustomEvent<any>) => void;
   }
+  interface PulumiTopButton {}
 
   interface IntrinsicElements {
     'pulumi-choosable': PulumiChoosable;
     'pulumi-chooser': PulumiChooser;
     'pulumi-example': PulumiExample;
     'pulumi-examples': PulumiExamples;
     'pulumi-root': PulumiRoot;
+    'pulumi-top-button': PulumiTopButton;
   }
 }
 
@@ -121,6 +131,7 @@ declare module "@stencil/core" {
       'pulumi-example': LocalJSX.PulumiExample & JSXBase.HTMLAttributes<HTMLPulumiExampleElement>;
       'pulumi-examples': LocalJSX.PulumiExamples & JSXBase.HTMLAttributes<HTMLPulumiExamplesElement>;
       'pulumi-root': LocalJSX.PulumiRoot & JSXBase.HTMLAttributes<HTMLPulumiRootElement>;
+      'pulumi-top-button': LocalJSX.PulumiTopButton & JSXBase.HTMLAttributes<HTMLPulumiTopButtonElement>;
     }
   }
 }

diff --git a/components/src/components/top-button/top-button.scss b/components/src/components/top-button/top-button.scss
@@ -0,0 +1,3 @@
+pulumi-top-button {
+
+}
diff --git a/components/src/components/top-button/top-button.spec.ts b/components/src/components/top-button/top-button.spec.ts
@@ -0,0 +1,7 @@
+import { TopButton } from './top-button';
+
+describe('pulumi-top-button', () => {
+    it('builds', () => {
+        expect(new TopButton()).toBeTruthy();
+    });
+});
diff --git a/components/src/components/top-button/top-button.tsx b/components/src/components/top-button/top-button.tsx
@@ -0,0 +1,33 @@
+import { Component, Listen, State, h } from "@stencil/core";
+
+// Scroll to top button.
+@Component({
+    tag: "pulumi-top-button",
+    styleUrl: "top-button.scss",
+    shadow: false
+})
+export class TopButton {
+
+    @State()
+    visible: string;
+
+    @Listen("scroll", { target: "window" })
+    handleScroll() {
+        this.setVisibility();
+    }
+
+    componentWillRender() {
+        this.setVisibility();
+    }
+
+    render() {
+        let buttonClass = `btn-scroll-top fas fa-chevron-up ${this.visible}`
+        return (
+                <a class={buttonClass} title="Scroll to top" href="#"></a>
+        );
+    }
+
+    setVisibility() {
+        this.visible = window.scrollY > 2500 ? "visible" : "hidden";
+    }
+}
diff --git a/layouts/partials/docs/right-nav.html b/layouts/partials/docs/right-nav.html
@@ -1,7 +1,9 @@
 {{ with .File }}
     {{ if not $.Page.Params.no_on_this_page }}
         <div class="on-this-page">
-            <h4 class="no-anchor">On This Page</h4>
+            <h4 class="no-anchor">
+                <a href="#">On This Page</a>
+            </h4>
             <ul class="text-sm">
                 {{/* This will be populated dynamically with all H2s and H3s on the page; see assets/js/main.js */}}
             </ul>
@@ -25,3 +27,4 @@ <h4 class="no-anchor">On This Page</h4>
         </li>
     </ul>
 {{ end }}
+<pulumi-top-button></pulumi-top-button>