diff --git a/src/assets/javascripts/components/Material/Code.js b/src/assets/javascripts/components/Material/Code.js new file mode 100644 index 000000000..9d9a89369 --- /dev/null +++ b/src/assets/javascripts/components/Material/Code.js @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2016-2017 Martin Donath + * + * 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 +} diff --git a/src/assets/javascripts/components/Material/Code/Clipboard.js b/src/assets/javascripts/components/Material/Code/Clipboard.js new file mode 100644 index 000000000..98a8510a2 --- /dev/null +++ b/src/assets/javascripts/components/Material/Code/Clipboard.js @@ -0,0 +1,67 @@ +/* + * Copyright (c) 2016-2017 Martin Donath + * + * 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} els_ - Table of contents links + * @property {Array} 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)} 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() { + + } +} diff --git a/src/assets/stylesheets/base/_typeset.scss b/src/assets/stylesheets/base/_typeset.scss index 27569b27c..62771342c 100644 --- a/src/assets/stylesheets/base/_typeset.scss +++ b/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 - &::-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 + // Actual container with code, overflowing > 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; + } + } } } diff --git a/src/assets/stylesheets/extensions/_codehilite.scss b/src/assets/stylesheets/extensions/_codehilite.scss index 18d8ac2d9..e0910f682 100644 --- a/src/assets/stylesheets/extensions/_codehilite.scss +++ b/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 - // 'display: inline-block'. This becomes a problem when clipboard overlay - // is applied. - &[id]::before { - 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%; + // Actual container with code, overflowing + pre, + code { + display: block; 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; } diff --git a/src/assets/stylesheets/extensions/_permalinks.scss b/src/assets/stylesheets/extensions/_permalinks.scss index b9c06d28e..981a75361 100644 --- a/src/assets/stylesheets/extensions/_permalinks.scss +++ b/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 - #{$level}[id]::before { - display: block; - margin-top: -$delta; - padding-top: $delta; - } + // Un-targeted anchor + &::before { + display: block; + margin-top: -$delta; + padding-top: $delta; + content: ""; + } - // Targeted anchor (56px from header, 24px from sidebar offset) - #{$level}[id]:target::before { - margin-top: -(5.6rem + 2.4rem + $delta); - padding-top: (5.6rem + 2.4rem + $delta); + // Targeted anchor (56px from header, 24px from sidebar offset) + &:target::before { + margin-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; + } } } } diff --git a/src/assets/stylesheets/clipboardjs/_clipboardjs.scss b/src/assets/stylesheets/layout/_clipboard.scss similarity index 100% rename from src/assets/stylesheets/clipboardjs/_clipboardjs.scss rename to src/assets/stylesheets/layout/_clipboard.scss