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'; 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) { clipboard.on('success', function(e) {
/* /*
console.info('Action:', e.action); console.info('Action:', e.action);
console.info('Text:', e.text); console.info('Text:', e.text);

View File

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

View File

@ -50,44 +50,79 @@ body.dark .toggle-dark {
display: none; display: none;
} }
.btn-clipboard { pre {
position: relative;
}
@include media-breakpoint-down(md) {
.btn-copy {
display: none; 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) { @include media-breakpoint-up(md) {
.doks-clipboard { pre:hover .btn-copy {
position: relative; opacity: 1;
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;
} }
} }
.copy-status::after { .btn-copy::after {
content: "Copy"; content: "Copy";
display: block; display: block;
color: $body-color; color: $color-btn-text;
} }
.copy-status:hover::after { .btn-copy:hover::after {
content: "Copy"; content: "Copy";
display: block; display: block;
color: $pink-500; color: $color-btn-text;
} }
.copy-status:focus::after, .btn-copy:focus::after,
.copy-status:active::after { .btn-copy:active::after {
content: "Copied"; content: "Copied";
display: block; display: block;
color: $pink-500; color: $color-btn-text;
} }
.collapsible-sidebar { .collapsible-sidebar {

View File

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

View File

@ -19,8 +19,6 @@ toc: true
Create new content for your site: Create new content for your site:
{{< btn-copy text="npm run create" >}}
```bash ```bash
npm run create [path] [flags] 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: Check scripts, styles, and markdown for errors:
{{< btn-copy text="npm run lint" >}}
```bash ```bash
npm run lint npm run lint
``` ```
@ -41,8 +37,6 @@ npm run lint
Check scripts for errors: Check scripts for errors:
{{< btn-copy text="npm run lint:scripts" >}}
```bash ```bash
npm run lint:scripts [-- --fix] npm run lint:scripts [-- --fix]
``` ```
@ -51,8 +45,6 @@ npm run lint:scripts [-- --fix]
Check styles for errors: Check styles for errors:
{{< btn-copy text="npm run lint:styles" >}}
```bash ```bash
npm run lint:styles [-- --fix] npm run lint:styles [-- --fix]
``` ```
@ -61,8 +53,6 @@ npm run lint:styles [-- --fix]
Check markdown for errors: Check markdown for errors:
{{< btn-copy text="npm run lint:markdown" >}}
```bash ```bash
npm run lint:markdown [-- --fix] npm run lint:markdown [-- --fix]
``` ```
@ -71,8 +61,6 @@ npm run lint:markdown [-- --fix]
Delete temporary directories: Delete temporary directories:
{{< btn-copy text="npm run clean" >}}
```bash ```bash
npm run clean npm run clean
``` ```
@ -81,8 +69,6 @@ npm run clean
Start local development server: Start local development server:
{{< btn-copy text="npm run start" >}}
```bash ```bash
npm run start npm run start
``` ```
@ -91,8 +77,6 @@ npm run start
Build production website: Build production website:
{{< btn-copy text="npm run build" >}}
```bash ```bash
npm run build npm run build
``` ```
@ -101,8 +85,6 @@ npm run build
Build Lambda functions: Build Lambda functions:
{{< btn-copy text="npm run build:functions" >}}
```bash ```bash
npm run build:functions npm run build:functions
``` ```
@ -111,8 +93,6 @@ npm run build:functions
Build production website including draft and future content: Build production website including draft and future content:
{{< btn-copy text="npm run build:preview" >}}
```bash ```bash
npm run build:preview npm run build:preview
``` ```

View File

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