Migrated changes from @facelessuser to code base [ci skip]

src/assets/javascripts/components/Material/Code.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2016-2017 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 Clipboard from "./Code/Clipboard"
+
+/* ----------------------------------------------------------------------------
+ * Module
+ * ------------------------------------------------------------------------- */
+
+export default {
+  Clipboard
+}

src/assets/javascripts/components/Material/Code/Clipboard.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2016-2017 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.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Clipboard {
+
+  /**
+   * Blur links within the table of contents above current page y-offset
+   *
+   * @constructor
+   *
+   * @property {NodeList<HTMLElement>} els_ - Table of contents links
+   * @property {Array<HTMLElement>} anchors_ - Referenced anchor nodes
+   * @property {number} index_ - Current link index
+   * @property {number} offset_ - Current page y-offset
+   * @property {boolean} dir_ - Scroll direction change
+   *
+   * @param {(string|NodeList<HTMLElement>)} els - Selector or HTML elements
+   */
+  constructor(els) {
+    this.els_ = (typeof els === "string")
+      ? document.querySelectorAll(els)
+      : els
+
+    /* Initialize index and page y-offset */
+    this.index_ = 0
+    this.offset_ = window.pageYOffset
+
+    /* Necessary state to correctly reset the index */
+    this.dir_ = false
+
+    /* Index anchor node offsets for fast lookup */
+    this.anchors_ = [].reduce.call(this.els_, (anchors, el) => {
+      return anchors.concat(
+        document.getElementById(el.hash.substring(1)) || [])
+    }, [])
+  }
+
+  /**
+   * Initialize copy buttons on all elements
+   */
+  update() {
+
+  }
+}

src/assets/stylesheets/base/_typeset.scss

@@ -214,43 +214,49 @@ kbd {
 
   // Unformatted code blocks
   pre {
+    position: relative;
     margin: 1em 0;
-    padding: 1rem 1.2rem;
     border-radius: 0.2rem;
     line-height: 1.4;
-    overflow: auto;
     -webkit-overflow-scrolling: touch;
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
       margin: 1em -1.6rem;
-      padding: 1rem 1.6rem;
       border-radius: 0;
     }
 
-    // Override native scrollbar styles
+    // Actual container with code, overflowing
-    &::-webkit-scrollbar {
-      width: 0.4rem;
-      height: 0.4rem;
-    }
-
-    // Style scrollbar thumb
-    &::-webkit-scrollbar-thumb {
-      background-color: $md-color-black--lighter;
-
-      // Hovered scrollbar thumb
-      &:hover {
-        background-color: $md-color-accent;
-      }
-    }
-
-    // Reset, if code is wrapped inside pre tag
     > code {
+      display: block;
       margin: 0;
+      padding: 1rem 1.2rem;
       background-color: transparent;
       font-size: inherit;
       box-shadow: none;
       box-decoration-break: none;
+      overflow: auto;
+
+      // [mobile -]: Increase padding to match text
+      @include break-to-device(mobile) {
+        padding: 1rem 1.6rem;
+      }
+
+      // Override native scrollbar styles
+      &::-webkit-scrollbar {
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+
+      // Style scrollbar thumb
+      &::-webkit-scrollbar-thumb {
+        background-color: $md-color-black--lighter;
+
+        // Hovered scrollbar thumb
+        &:hover {
+          background-color: $md-color-accent;
+        }
+      }
     }
   }
 

src/assets/stylesheets/extensions/_codehilite.scss

@@ -223,39 +223,33 @@ $codehilite-whitespace: transparent;
     background-color: $md-code-background;
     color: $md-code-color;
     line-height: 1.4;
-    overflow: visible;
     -webkit-overflow-scrolling: touch;
 
-    // Avoid current behaviour where all '[id]:before' are 
+    // Actual container with code, overflowing
-    // 'display: inline-block'. This becomes a problem when clipboard overlay
+    pre,
-    // is applied.
+    code {
-    &[id]::before {
+      display: block;
-      display: inline;
-    }
-
-    // Override native scrollbar styles
-    &::-webkit-scrollbar {
-      width: 0.4rem;
-      height: 0.4rem;
-    }
-
-    // Style scrollbar thumb
-    &::-webkit-scrollbar-thumb {
-      background-color: $md-color-black--lighter;
-
-      // Hovered scrollbar thumb
-      &:hover {
-        background-color: $md-color-accent;
-      }
-    }
-
-    pre {
-      min-width: 100%;
       margin: 0;
       padding: 1rem 1.2rem 0.8rem;
       background-color: transparent;
       overflow: auto;
       vertical-align: top;
+
+      // Override native scrollbar styles
+      &::-webkit-scrollbar {
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+
+      // Style scrollbar thumb
+      &::-webkit-scrollbar-thumb {
+        background-color: $md-color-black--lighter;
+
+        // Hovered scrollbar thumb
+        &:hover {
+          background-color: $md-color-accent;
+        }
+      }
     }
   }
 
@@ -343,8 +337,13 @@ $codehilite-whitespace: transparent;
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
       margin: 1em -1.6rem;
-      padding: 1rem 1.6rem 0.8rem;
       border-radius: 0;
+
+      // Actual container with code, overflowing
+      pre,
+      code {
+        padding: 1rem 1.6rem 0.8rem;
+      }
     }
   }
 
@@ -358,7 +357,8 @@ $codehilite-whitespace: transparent;
       border-radius: 0;
 
       // Increase spacing
-      .codehilite,
+      .codehilite > pre,
+      .codehilite > code,
       .linenodiv {
         padding: 1rem 1.6rem;
       }

src/assets/stylesheets/extensions/_permalinks.scss

@@ -49,39 +49,8 @@
     }
   }
 
-  // All headers with permalinks have ids
-  [id] {
-
-    // Add spacing to anchor for offset
-    &::before {
-      display: inline-block;
-      content: "";
-    }
-
-    // Targeted anchor
-    &:target::before {
-      margin-top: -(5.6rem + 2.4rem + 1.8rem);
-      padding-top: (5.6rem + 2.4rem + 1.8rem);
-    }
-
-    // Make permalink visible on hover
-    &:hover  .headerlink,
-    &:target .headerlink,
-    & .headerlink:focus {
-      transform: translate(0, 0);
-      opacity: 1;
-    }
-
-    // Active or targeted permalink
-    &:hover  .headerlink:hover,
-    &:target .headerlink,
-    & .headerlink:focus {
-      color: $md-color-accent;
-    }
-  }
-
   // Hide anchor for top-level heading, as it makes no sense
-  h1 .headerlink {
+  h1[id] .headerlink {
     display: none;
   }
 
@@ -93,18 +62,36 @@
     h5: 1.1rem,
     h6: 1.1rem
   ) {
+    #{$level}[id] {
 
-    // Un-targeted anchor
+      // Un-targeted anchor
-    #{$level}[id]::before {
+      &::before {
-      display: block;
+        display: block;
-      margin-top: -$delta;
+        margin-top: -$delta;
-      padding-top: $delta;
+        padding-top: $delta;
-    }
+        content: "";
+      }
 
-    // Targeted anchor (56px from header, 24px from sidebar offset)
+      // Targeted anchor (56px from header, 24px from sidebar offset)
-    #{$level}[id]:target::before {
+      &:target::before {
-      margin-top: -(5.6rem + 2.4rem + $delta);
+        margin-top: -(5.6rem + 2.4rem + $delta);
-      padding-top: (5.6rem + 2.4rem + $delta);
+        padding-top: (5.6rem + 2.4rem + $delta);
+      }
+
+      // Make permalink visible on hover
+      &:hover  .headerlink,
+      &:target .headerlink,
+      & .headerlink:focus {
+        transform: translate(0, 0);
+        opacity: 1;
+      }
+
+      // Active or targeted permalink
+      &:hover  .headerlink:hover,
+      &:target .headerlink,
+      & .headerlink:focus {
+        color: $md-color-accent;
+      }
     }
   }
 }