OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added clipboard integration

Browse Source
This commit is contained in:
squidfunk 2020-02-02 17:18:18 +01:00
parent 18c8c4c2ba
commit 4cc07912df
12 changed files with 208 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
material/assets/javascripts/bundle.js
View File

File diff suppressed because one or more lines are too long

2
material/assets/javascripts/bundle.js.map
View File

File diff suppressed because one or more lines are too long

67
material/assets/stylesheets/app.css
View File

@ -65,7 +65,6 @@ button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
outline-style: none;
background: transparent; background: transparent;
font-size: inherit; } font-size: inherit; }
@ -73,7 +72,7 @@ input {
border: 0; border: 0;
outline: 0; } outline: 0; }
.md-icon, .md-clipboard::before, .md-nav__title::before, .md-nav__button, .md-nav__link::after, .md-search-result__article--document::before, .md-source-file::before, .md-typeset .admonition > .admonition-title::before, .md-typeset details > .admonition-title::before, .md-typeset .admonition > summary::before, .md-typeset details > summary::before, .md-typeset .footnote-backref, .md-typeset .critic.comment::before, .md-typeset summary::after, .md-typeset .task-list-control .task-list-indicator::before { .md-icon, .md-nav__title::before, .md-nav__button, .md-nav__link::after, .md-search-result__article--document::before, .md-source-file::before, .md-typeset .admonition > .admonition-title::before, .md-typeset details > .admonition-title::before, .md-typeset .admonition > summary::before, .md-typeset details > summary::before, .md-typeset .footnote-backref, .md-typeset .critic.comment::before, .md-typeset summary::after, .md-typeset .task-list-control .task-list-indicator::before {
font-family: "Material Icons"; font-family: "Material Icons";
font-style: normal; font-style: normal;
font-variant: normal; font-variant: normal;
@ -494,64 +493,26 @@ hr {
right: 0.3rem; right: 0.3rem;
width: 1.4rem; width: 1.4rem;
height: 1.4rem; height: 1.4rem;
-webkit-transition: color 0.25s;
transition: color 0.25s;
border-radius: 0.1rem; border-radius: 0.1rem;
color: rgba(0, 0, 0, 0.07);
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; } backface-visibility: hidden; }
.md-clipboard::before { pre:hover .md-clipboard,
-webkit-transition: color 0.25s, opacity 0.25s; .codehilite:hover .md-clipboard,
transition: color 0.25s, opacity 0.25s; .md-typeset .highlight:hover .md-clipboard {
color: rgba(0, 0, 0, 0.07); color: rgba(0, 0, 0, 0.54); }
content: "\E14D"; } pre .md-clipboard:focus,
pre:hover .md-clipboard::before, pre .md-clipboard:hover,
.codehilite:hover .md-clipboard::before, .codehilite .md-clipboard:focus,
.md-typeset .highlight:hover .md-clipboard::before { .md-typeset .highlight .md-clipboard:focus,
color: rgba(0, 0, 0, 0.54); } .codehilite .md-clipboard:hover,
.md-clipboard:focus::before, .md-clipboard:hover::before { .md-typeset .highlight .md-clipboard:hover {
color: #536dfe; } color: #536dfe; }
.md-clipboard__message {
display: block;
position: absolute;
top: 0;
right: 1.7rem;
padding: 0.3rem 0.5rem;
-webkit-transform: translateX(0.4rem);
transform: translateX(0.4rem);
-webkit-transition: opacity 0.175s, -webkit-transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0);
transition: opacity 0.175s, -webkit-transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0);
transition: transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0), opacity 0.175s;
transition: transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0), opacity 0.175s, -webkit-transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0);
border-radius: 0.1rem;
background-color: rgba(0, 0, 0, 0.54);
color: white;
font-size: 0.64rem;
white-space: nowrap;
opacity: 0;
pointer-events: none; }
.md-clipboard__message--active {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity 0.175s 0.075s, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 0.175s 0.075s, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.175s 0.075s;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.175s 0.075s, -webkit-transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
pointer-events: initial; }
.md-clipboard__message::before {
content: attr(aria-label); }
.md-clipboard__message::after {
display: block;
position: absolute;
top: 50%;
right: -0.2rem;
width: 0;
margin-top: -0.2rem;
border-width: 0.2rem 0 0.2rem 0.2rem;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.54);
content: ""; }
.md-content__inner { .md-content__inner {
margin: 0 0.8rem 1.2rem; margin: 0 0.8rem 1.2rem;

2
material/assets/stylesheets/app.css.map
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/app.min.css.map
View File

File diff suppressed because one or more lines are too long

47
package-lock.json generated
View File

@ -234,6 +234,12 @@
"integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==", "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
"dev": true "dev": true
}, },
"@types/clipboard": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.1.tgz",
"integrity": "sha512-gJJX9Jjdt3bIAePQRRjYWG20dIhAgEqonguyHxXuqALxsoDsDLimihqrSg8fXgVTJ4KZCzkfglKtwsh/8dLfbA==",
"dev": true
},
"@types/escape-html": { "@types/escape-html": {
"version": "0.0.20", "version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/escape-html/-/escape-html-0.0.20.tgz", "resolved": "https://registry.npmjs.org/@types/escape-html/-/escape-html-0.0.20.tgz",
@ -2781,7 +2787,8 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -2805,13 +2812,15 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -2828,19 +2837,22 @@
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -2971,7 +2983,8 @@
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -2985,6 +2998,7 @@
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -3001,6 +3015,7 @@
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -3009,13 +3024,15 @@
"version": "0.0.8", "version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -3036,6 +3053,7 @@
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -3124,7 +3142,8 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -3138,6 +3157,7 @@
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -3233,7 +3253,8 @@
"version": "5.1.2", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -3275,6 +3296,7 @@
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -3296,6 +3318,7 @@
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -3344,13 +3367,15 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
"dev": true "dev": true,
"optional": true
} }
} }
}, },

1
package.json
View File

@ -41,6 +41,7 @@
}, },
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free": "^5.12.0", "@fortawesome/fontawesome-free": "^5.12.0",
"@types/clipboard": "^2.0.1",
"@types/escape-html": "0.0.20", "@types/escape-html": "0.0.20",
"@types/lunr": "^2.3.2", "@types/lunr": "^2.3.2",
"@types/lz-string": "^1.3.33", "@types/lz-string": "^1.3.33",

34
src/assets/javascripts/index.ts
View File

@ -23,6 +23,7 @@
// TODO: remove this after we finished refactoring // TODO: remove this after we finished refactoring
// tslint:disable // tslint:disable
import * as Clipboard from "clipboard"
import { identity, values } from "ramda" import { identity, values } from "ramda"
import { import {
EMPTY, EMPTY,
@ -88,6 +89,7 @@ import {
} from "./workers" } from "./workers"
import { renderSource } from "templates" import { renderSource } from "templates"
import { switchMapIf, not, takeIf } from "extensions" import { switchMapIf, not, takeIf } from "extensions"
import { renderClipboard } from "templates/clipboard"
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
* Types * Types
@ -557,7 +559,7 @@ export function initialize(config: unknown) {
fromEvent(window, "beforeprint") // IE, FF fromEvent(window, "beforeprint") // IE, FF
) )
.subscribe(() => { .subscribe(() => {
const details = document.querySelectorAll("details") const details = getElements("details")
Array.prototype.forEach.call(details, detail => { Array.prototype.forEach.call(details, detail => {
detail.setAttribute("open", "") detail.setAttribute("open", "")
}) })
@ -566,11 +568,39 @@ export function initialize(config: unknown) {
// Close drawer and search on hash change // Close drawer and search on hash change
agent.location.hash$.subscribe(() => { agent.location.hash$.subscribe(() => {
setToggle(drawer, false) setToggle(drawer, false)
setToggle(search, false) setToggle(search, false) // we probably need to delay the anchor jump for search
}) })
/* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */
/* Clipboard integration */
if (Clipboard.isSupported()) {
const blocks = getElements(".codehilite > pre, .highlight> pre, pre > code")
Array.prototype.forEach.call(blocks, (block, index) => {
const id = `__code_${index}`
/* Create button with message container */
const button = renderClipboard(id)
/* Link to block and insert button */
const parent = block.parentNode
parent.id = id
parent.insertBefore(button, block)
})
/* Initialize Clipboard listener */
const copy = new Clipboard(".md-clipboard")
/* Success handler */
copy.on("success", action => {
alert("Copied to clipboard") // TODO: integrate snackbar
// TODO: add a snackbar/notification
})
}
/* ----------------------------------------------------------------------- */
const state = { const state = {
search: { search: {
query$, query$,

58
src/assets/javascripts/templates/clipboard/index.tsx Normal file
View File

@ -0,0 +1,58 @@
/*
* Copyright (c) 2016-2019 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 "extensions"
import { translate } from "utilities"
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* CSS classes
*/
const css = {
container: "md-clipboard md-icon"
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Render clipboard
*
* @param id - Unique identifier
*
* @return HTML element
*/
export function renderClipboard(
id: string
): HTMLElement {
return (
<button
class={css.container}
title={translate("clipboard.copy")}
data-clipboard-target={`#${id} pre, #${id} code`}
>&#xE14D;</button>
)
}

1
src/assets/stylesheets/base/_reset.scss
View File

@ -120,7 +120,6 @@ button {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
outline-style: none;
background: transparent; background: transparent;
font-size: inherit; font-size: inherit;
} }

117
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -31,7 +31,9 @@
right: px2rem(6px); right: px2rem(6px);
width: px2rem(28px); width: px2rem(28px);
height: px2rem(28px); height: px2rem(28px);
transition: color 0.25s;
border-radius: px2rem(2px); border-radius: px2rem(2px);
color: $md-color-black--lightest;
font-size: px2rem(16px); font-size: px2rem(16px);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
@ -43,75 +45,66 @@
display: none; display: none;
} }
// Icon // Show on container hover
&::before { pre:hover &,
@extend %md-icon; .codehilite:hover & {
color: $md-color-black--light;
transition:
color 0.25s,
opacity 0.25s;
color: $md-color-black--lightest;
content: "\E14D"; // content_copy
// Show on container hover
pre:hover &,
.codehilite:hover & {
color: $md-color-black--light;
}
} }
// Focused or hovered icon // Focused or hovered icon
&:focus::before, pre &:focus,
&:hover::before { pre &:hover,
.codehilite &:focus,
.codehilite &:hover {
color: $md-color-accent; color: $md-color-accent;
} }
// Message // // Message
&__message { // &__message {
display: block; // display: block;
position: absolute; // position: absolute;
top: 0; // top: 0;
right: px2rem(34px); // right: px2rem(34px);
padding: px2rem(6px) px2rem(10px); // padding: px2rem(6px) px2rem(10px);
transform: translateX(px2rem(8px)); // transform: translateX(px2rem(8px));
transition: // transition:
transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0), // transform 0.25s cubic-bezier(0.9, 0.1, 0.9, 0),
opacity 0.175s; // opacity 0.175s;
border-radius: px2rem(2px); // border-radius: px2rem(2px);
background-color: $md-color-black--light; // background-color: $md-color-black--light;
color: $md-color-white; // color: $md-color-white;
font-size: ms(-1); // font-size: ms(-1);
white-space: nowrap; // white-space: nowrap;
opacity: 0; // opacity: 0;
pointer-events: none; // pointer-events: none;
// Active message // // Active message
&--active { // &--active {
transform: translateX(0); // transform: translateX(0);
transition: // transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), // transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.175s 0.075s; // opacity 0.175s 0.075s;
opacity: 1; // opacity: 1;
pointer-events: initial; // pointer-events: initial;
} // }
// Inject content from ARIA label // // Inject content from ARIA label
&::before { // &::before {
content: attr(aria-label); // content: attr(aria-label);
} // }
// Paint a nice speech bubble // // Paint a nice speech bubble
&::after { // &::after {
display: block; // display: block;
position: absolute; // position: absolute;
top: 50%; // top: 50%;
right: px2rem(-4px); // right: px2rem(-4px);
width: 0; // width: 0;
margin-top: px2rem(-4px); // margin-top: px2rem(-4px);
border-width: px2rem(4px) 0 px2rem(4px) px2rem(4px); // border-width: px2rem(4px) 0 px2rem(4px) px2rem(4px);
border-style: solid; // border-style: solid;
border-color: transparent $md-color-black--light; // border-color: transparent $md-color-black--light;
content: ""; // content: "";
} // }
} // }
} }