Added dialog for copy-to-clipboard action

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.eb1b83da.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.c16ffcea.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.eb1b83da.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.c16ffcea.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0a5433f7.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.0a5433f7.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",
-  "assets/stylesheets/app.scss": "assets/stylesheets/app.eacd7e91.min.css"
+  "assets/stylesheets/app.scss": "assets/stylesheets/app.37150387.min.css"
 }

material/base.html

@@ -43,7 +43,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.eacd7e91.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/app.37150387.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.3f90c815.min.css' | url }}">
       {% endif %}
@@ -90,7 +90,7 @@
     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
     <label class="md-overlay" for="__drawer"></label>
     {% if page.toc | first is defined %}
-      <a href="{{ (page.toc | first).url }}" tabindex="0" class="md-skip">
+      <a href="{{ (page.toc | first).url }}" class="md-skip">
         {{ lang.t('skip.link.title') }}
       </a>
     {% endif %}
@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.eb1b83da.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.c16ffcea.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

src/assets/javascripts/index.ts

@@ -40,7 +40,8 @@ import {
   tap,
   filter,
   withLatestFrom,
-  observeOn
+  observeOn,
+  take
 } from "rxjs/operators"
 
 import {
@@ -77,6 +78,7 @@ import { mountClipboard } from "./integrations/clipboard"
 import { patchTables, patchDetails, patchScrollfix } from "patches"
 import { takeIf, not, isConfig } from "utilities"
 import { fetchSourceFacts } from "integrations/source"
+import { renderDialog } from "templates/dialog"
 
 /* ------------------------------------------------------------------------- */
 
@@ -208,7 +210,26 @@ export function initialize(config: unknown) {
 
   /* ----------------------------------------------------------------------- */
 
+  // must be in another scope!
+  const dialog = renderDialog("Copied to Clipboard")
+
+  // snackbar for copy to clipboard
   mountClipboard({ document$ })
+    .pipe(
+      switchMap(ev => {
+        ev.clearSelection()
+        return useComponent("container")
+          .pipe(
+            tap(el => el.appendChild(dialog)), // only set text on dialog... render once...
+            observeOn(animationFrameScheduler),
+            tap(() => dialog.dataset.mdState = "open"),
+            delay(2000),
+            tap(() => dialog.dataset.mdState = ""),
+            delay(400),
+            tap(() => dialog.remove())
+          )
+      })
+    )
     .subscribe()
 
   patchTables({ document$ })
@@ -294,6 +315,20 @@ export function initialize(config: unknown) {
         }
       })
 
+  // if we use a single tab outside of search, unhide all permalinks.
+  keyboard$
+    .pipe(
+      takeIf(not(toggle$.pipe(switchMap(watchToggle)))),
+      filter(key => ["Tab"].includes(key.type)),
+      take(1)
+    )
+    .subscribe(() => {
+      for (const link of getElements(".headerlink"))
+        link.style.visibility = "visible"
+    })
+
+  // build a notification component! feed txt into it...
+
   /* ----------------------------------------------------------------------- */
 
   // TODO: WIP repo rendering

src/assets/javascripts/templates/dialog/index.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { h } from "utilities"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * CSS classes
+ */
+const css = {
+  container: "md-dialog md-typeset"
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Render a dismissable dialog
+ *
+ * @param text - Dialog text
+ *
+ * @return Element
+ */
+export function renderDialog(
+  text: string
+): HTMLElement {
+  return (
+    <div class={css.container}>
+      {text}
+    </div>
+  )
+}

src/assets/javascripts/templates/index.ts

@@ -21,6 +21,7 @@
  */
 
 export * from "./clipboard"
+export * from "./dialog"
 export * from "./search"
 export * from "./source"
 export * from "./table"

src/assets/stylesheets/app.scss

@@ -45,6 +45,7 @@
 @import "layout/announce";
 @import "layout/clipboard";
 @import "layout/content";
+@import "layout/dialog";
 @import "layout/header";
 @import "layout/hero";
 @import "layout/footer";

src/assets/stylesheets/layout/_base.scss

@@ -196,8 +196,6 @@ hr {
 // Skip link
 .md-skip {
   position: fixed;
-  width: px2rem(1px);
-  height: px2rem(1px);
   margin: px2rem(10px);
   padding: px2rem(6px) px2rem(10px);
   transform: translateY(px2rem(8px));
@@ -206,14 +204,10 @@ hr {
   color: $md-color-white;
   font-size: ms(-1);
   opacity: 0;
-  overflow: hidden;
 
   // Show skip link on focus
   &:focus {
-    width: auto;
+    transform: translateY(0);
-    height: auto;
-    clip: auto;
-    transform: translateX(0);
     transition:
       transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
       opacity   175ms 75ms;

src/assets/stylesheets/layout/_dialog.scss

@@ -0,0 +1,63 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Rules
+// ----------------------------------------------------------------------------
+
+// Dialog rendered as snackbar
+.md-dialog {
+  @include z-depth(2);
+
+  display: block;
+  position: fixed;
+  right: px2rem(16px);
+  bottom: px2rem(16px);
+  left: initial;
+  min-width: px2rem(222px);
+  padding: px2rem(8px) px2rem(12px);
+  transform: translateY(100%);
+  transition:
+    transform 0ms   400ms,
+    opacity   400ms;
+  border: none;
+  border-radius: px2rem(2px);
+  background: $md-color-black;
+  color: $md-color-white;
+  font-size: px2rem(14px);
+  opacity: 0;
+  z-index: 2;
+
+  // Show open dialog
+  &[data-md-state="open"] {
+    transform: translateY(0);
+    transition:
+      transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
+      opacity   400ms;
+    opacity: 1;
+  }
+
+  // Hide for print
+  @media print {
+    display: none;
+  }
+}

src/assets/stylesheets/layout/_nav.scss

@@ -218,7 +218,7 @@
         // Main lists
         ~ .md-nav__list {
           background-color: $md-color-white;
-          box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
+          box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
           overflow-y: auto;
           scroll-snap-type: y mandatory;
 

src/assets/stylesheets/layout/_search.scss

@@ -419,7 +419,7 @@ $md-toggle__search--checked:
   &__scrollwrap {
     height: 100%;
     background-color: $md-color-white;
-    box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset;
+    box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
     overflow-y: auto;
     scroll-snap-type: y mandatory;
     -webkit-overflow-scrolling: touch;

src/base.html

@@ -212,7 +212,7 @@
 
     <!-- Link to skip to content -->
     {% if page.toc | first is defined %}
-      <a href="{{ (page.toc | first).url }}" tabindex="0" class="md-skip">
+      <a href="{{ (page.toc | first).url }}" class="md-skip">
         {{ lang.t('skip.link.title') }}
       </a>
     {% endif %}