feat: auto copy button code

This commit is contained in:
Henk Verlinde 2021-06-17 11:20:48 +02:00
parent b902cb7071
commit d71ccaa66d
7 changed files with 79 additions and 58 deletions

View File

@ -1,8 +1,23 @@
import Clipboard from 'clipboard';
var clipboard = new Clipboard('.btn-clipboard');
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; ++ i)
{
var element = pre[i];
element.insertAdjacentHTML('afterbegin', '<button class="btn btn-copy"></button>');
}
var clipboard = new Clipboard('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
},
});
clipboard.on('success', function(e) {
/*
console.info('Action:', e.action);
console.info('Text:', e.text);

View File

@ -24,6 +24,10 @@ $pink-500: #d32e9d;
$primary: $purple;
$color-btn-bg: $pink-500;
$color-btn-border: darken($pink-500, 5%);
$color-btn-text: $white;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.

View File

@ -50,44 +50,79 @@ body.dark .toggle-dark {
display: none;
}
.btn-clipboard {
pre {
position: relative;
}
@include media-breakpoint-down(md) {
.btn-copy {
display: none;
}
}
.btn-copy {
transition: opacity 0.3s ease-in-out;
opacity: 0;
position: absolute;
right: 0.25rem;
top: 0.25rem;
z-index: 10;
font-family: $font-family-sans-serif;
font-size: $font-size-sm;
padding: 0.25rem 0.5rem;
color: $color-btn-text;
background-color: $color-btn-bg;
border-color: $color-btn-border;
}
.btn-copy:hover {
color: $color-btn-text;
background-color: lighten($color-btn-bg, 5%);
border-color: lighten($color-btn-border, 15%);
}
.btn-copy:focus {
color: $color-btn-text;
background-color: $color-btn-bg;
border-color: lighten($color-btn-border, 15%);
box-shadow: none;
}
.btn-copy:active,
.btn-copy.active {
color: $color-btn-text;
background-color: $color-btn-bg;
border-color: lighten($color-btn-border, 15%);
}
.btn-copy:active:focus,
.btn-copy.active:focus {
box-shadow: none;
}
@include media-breakpoint-up(md) {
.doks-clipboard {
position: relative;
float: right;
}
.btn-clipboard {
position: absolute;
top: 1rem;
right: 0.25rem;
z-index: 10;
display: block;
padding: 0.25rem 0.5rem;
font-size: $font-size-sm;
pre:hover .btn-copy {
opacity: 1;
}
}
.copy-status::after {
.btn-copy::after {
content: "Copy";
display: block;
color: $body-color;
color: $color-btn-text;
}
.copy-status:hover::after {
.btn-copy:hover::after {
content: "Copy";
display: block;
color: $pink-500;
color: $color-btn-text;
}
.copy-status:focus::after,
.copy-status:active::after {
.btn-copy:focus::after,
.btn-copy:active::after {
content: "Copied";
display: block;
color: $pink-500;
color: $color-btn-text;
}
.collapsible-sidebar {

View File

@ -18,7 +18,9 @@ module.exports = {
'tr',
'th',
'td',
'h5',
...whitelister([
'./assets/scss/components/_buttons.scss',
'./assets/scss/components/_code.scss',
'./assets/scss/components/_syntax.scss',
'./assets/scss/components/_search.scss',

View File

@ -19,8 +19,6 @@ toc: true
Create new content for your site:
{{< btn-copy text="npm run create" >}}
```bash
npm run create [path] [flags]
```
@ -31,8 +29,6 @@ See also the Hugo docs: [hugo new](https://gohugo.io/commands/hugo_new/).
Check scripts, styles, and markdown for errors:
{{< btn-copy text="npm run lint" >}}
```bash
npm run lint
```
@ -41,8 +37,6 @@ npm run lint
Check scripts for errors:
{{< btn-copy text="npm run lint:scripts" >}}
```bash
npm run lint:scripts [-- --fix]
```
@ -51,8 +45,6 @@ npm run lint:scripts [-- --fix]
Check styles for errors:
{{< btn-copy text="npm run lint:styles" >}}
```bash
npm run lint:styles [-- --fix]
```
@ -61,8 +53,6 @@ npm run lint:styles [-- --fix]
Check markdown for errors:
{{< btn-copy text="npm run lint:markdown" >}}
```bash
npm run lint:markdown [-- --fix]
```
@ -71,8 +61,6 @@ npm run lint:markdown [-- --fix]
Delete temporary directories:
{{< btn-copy text="npm run clean" >}}
```bash
npm run clean
```
@ -81,8 +69,6 @@ npm run clean
Start local development server:
{{< btn-copy text="npm run start" >}}
```bash
npm run start
```
@ -91,8 +77,6 @@ npm run start
Build production website:
{{< btn-copy text="npm run build" >}}
```bash
npm run build
```
@ -101,8 +85,6 @@ npm run build
Build Lambda functions:
{{< btn-copy text="npm run build:functions" >}}
```bash
npm run build:functions
```
@ -111,8 +93,6 @@ npm run build:functions
Build production website including draft and future content:
{{< btn-copy text="npm run build:preview" >}}
```bash
npm run build:preview
```

View File

@ -34,40 +34,30 @@ Not quite sure? Use the Doks child theme.
#### Doks child theme
{{< btn-copy text="git clone https://github.com/h-enk/doks-child-theme.git my-doks-site" >}}
```bash
git clone https://github.com/h-enk/doks-child-theme.git my-doks-site
```
#### Doks starter theme
{{< btn-copy text="git clone https://github.com/h-enk/doks.git my-doks-site" >}}
```bash
git clone https://github.com/h-enk/doks.git my-doks-site
```
### Change directories
{{< btn-copy text="cd my-doks-site" >}}
```bash
cd my-doks-site
```
### Install dependencies
{{< btn-copy text="npm install" >}}
```bash
npm install
```
### Start development server
{{< btn-copy text="npm run start" >}}
```bash
npm run start
```

View File

@ -1,5 +0,0 @@
{{ if .Site.Params.options.clipBoard -}}
<div class="doks-clipboard">
<button class="btn-clipboard btn btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
</div>
{{ end -}}