From ec4b4dabc3528edaa88eb0131f01f5e7e9b57fbf Mon Sep 17 00:00:00 2001 From: Jean-Francois Cere Date: Sun, 26 May 2024 11:54:32 -0400 Subject: [PATCH] feat!: remove clipboard button inline opacity transition (#523) --- README.md | 8 +++ demo/src/app/plugins/plugins.component.html | 60 ++++++++++++++++++--- demo/src/app/plugins/plugins.component.scss | 15 +++++- lib/src/markdown.service.ts | 8 ++- 4 files changed, 79 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index a2edf6ff..9dbd0471 100644 --- a/README.md +++ b/README.md @@ -406,6 +406,14 @@ Using `markdown` component and/or directive, you will be able to use the `clipbo The `clipboard` plugin provide an unstyled default button with a default behavior out of the box if no alternative is used. +#### Customize button toolbar + +The clipboard button is placed inside a wrapper element that can be customize using the `.markdown-clipboard-toolbar` CSS selector in your global `styles.css/scss` file. + +This allows to override the default positionning of the clipboard button and play with the visibility of the button using the `.hover` CSS selector that is applied on the toolbar when the mouse cursor enters and leaves the code block element. + +#### Customize default button + To customize the default button styling, use the `.markdown-clipboard-button` CSS selector in your global `styles.css/scss` file. You can also customized the "copied" state happening after the button is clicked using the `.copied` CSS selector. #### Using global configuration diff --git a/demo/src/app/plugins/plugins.component.html b/demo/src/app/plugins/plugins.component.html index eb14be17..431fb8ad 100644 --- a/demo/src/app/plugins/plugins.component.html +++ b/demo/src/app/plugins/plugins.component.html @@ -15,8 +15,10 @@

Emoji plugin

```javascript node_modules/emoji-toolkit/lib/js/joypixels.min.js ``` + #### Directive `emoji` - activate emoji plugin + ### Example @@ -53,10 +55,13 @@

Line Numbers plugin

node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js ``` + #### Directive `lineNumbers` - activate line numbers plugin + #### Attributes `start` - offset number for the first display line + ### Example @@ -117,11 +122,14 @@

Line Highlight plugin

node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js ``` + #### Directive `lineHighlight` - activate line highlight plugin + #### Attributes `line` - lines to highlight (i.e.: 6, 11-15)
- `lineOffset` - starting offset for line numbers + `lineOffset` - starting offset for line numbers
+ ### Example @@ -166,14 +174,17 @@

Command Line plugin

node_modules/prismjs/plugins/command-line/prism-command-line.css node_modules/prismjs/plugins/command-line/prism-command-line.min.js ``` + #### Directive `commandLine` - activate command-line display + #### Attributes `host` - host name
`output` - lines to be presented as output (optional)
`filterOutput` - prefix to automatically present lines as output (optional)
`prompt` - data prompt
`user` - user name
+ ### Example @@ -275,10 +286,13 @@

KaTeX plugin

node_modules/katex/dist/katex.min.js node_modules/katex/dist/contrib/auto-render.min.js ``` + #### Directive `katex` - activate KaTeX plugin + #### Attributes `katexOptions` - combine [KaTeX options](https://katex.org/docs/options.html) and [Auto-Renderer options](https://katex.org/docs/autorender.html#api)
+ ### Example @@ -331,10 +345,13 @@

Mermaid plugin

```javascript node_modules/mermaid/dist/mermaid.min.js ``` + #### Directive `mermaid` - activate mermaid plugin + #### Attributes `mermaidOptions` - mermaid [configuration options](https://mermaid.js.org/config/schema-docs/config.html#mermaid-config-properties)
+ ### Example @@ -387,14 +404,24 @@

Clipboard plugin

#### Clipboard file(s) to include + ```javascript node_modules/clipboard/dist/clipboard.min.js ``` + #### Directive `clipboard` - activate copy-to-clipboard plugin + #### Attributes - `clipboardButtonComponent` - component `Type<any>` to use as copy-to-clipboard button - `clipboardButtonTemplate` - template reference `TemplateRef<T>` to use as copy-to-clipboard button + `clipboardButtonComponent` - component `Type<any>` to use as copy-to-clipboard button
+ `clipboardButtonTemplate` - template reference `TemplateRef<T>` to use as copy-to-clipboard button
+ + #### CSS Selectors + `markdown-clipboard-toolbar` - toolbar wrapper
+ `markdown-clipboard-toolbar.hover` - toolbar wrapper during mouse hover
+ `markdown-clipboard-button` - default button
+ `markdown-clipboard-button.copied` - default button during "copied" state
+ ### Example @@ -404,14 +431,35 @@

Clipboard plugin

The `clipboard` plugin provide an unstyled default button with a default behavior out of the box if no alternative is used. ```javascript - const example = 'rollover me to see the default clipboard button appears!'; + const example = 'the default clipboard button with default behavior'; + ``` + + + + #### Customize toolbar + + The clipboard button is placed inside a wrapper element that can be customize using the `.markdown-clipboard-toolbar` CSS selector in your global `styles.css/scss` file. + + This allows to override the default positionning of the clipboard button and play with the visibility of the button using the `.hover` CSS selector that is applied on the toolbar when the mouse cursor enters and leaves the code block element. + + ```css + .markdown-clipboard-toolbar { + top: 16px; + right: 16px; + opacity: 0; + transition: opacity 250ms ease-out; + } + + .markdown-clipboard-toolbar.hover { + opacity: 1; + } ``` - + #### Customize default button - To customize the default button styling, use the `.markdown-clipboard-button` CSS selector in your global `styles.css/scss` file. You can also customized the "copied" state happening after the button is clicked using the `.copied` CSS selector. + The default button can be customized using the `.markdown-clipboard-button` CSS selector in your global `styles.css/scss` file. You can also customized the "copied" state happening after the button is clicked using the `.copied` CSS selector. ```css .markdown-clipboard-button { diff --git a/demo/src/app/plugins/plugins.component.scss b/demo/src/app/plugins/plugins.component.scss index 48cf0a89..69972216 100644 --- a/demo/src/app/plugins/plugins.component.scss +++ b/demo/src/app/plugins/plugins.component.scss @@ -6,7 +6,20 @@ textarea { min-height: 180px; } -// Clipboard default button +// Clipboard toolbar styling + +.btn-clipboard-toolbar ::ng-deep .markdown-clipboard-toolbar { + top: 16px; + right: 16px; + opacity: 0; + transition: opacity 250ms ease-out; + + &.hover { + opacity: 1; + } +} + +// Clipboard default button styling .btn-clipboard-default ::ng-deep .markdown-clipboard-button { background-color: rgba(255, 255, 255, 0.07); diff --git a/lib/src/markdown.service.ts b/lib/src/markdown.service.ts index ff894f50..4f6d6519 100644 --- a/lib/src/markdown.service.ts +++ b/lib/src/markdown.service.ts @@ -387,17 +387,16 @@ export class MarkdownService { // create toolbar element const toolbarWrapperElement = document.createElement('div'); + toolbarWrapperElement.classList.add('markdown-clipboard-toolbar'); toolbarWrapperElement.style.position = 'absolute'; toolbarWrapperElement.style.top = '.5em'; toolbarWrapperElement.style.right = '.5em'; - toolbarWrapperElement.style.opacity = '0'; - toolbarWrapperElement.style.transition = 'opacity 250ms ease-out'; toolbarWrapperElement.style.zIndex = '1'; preWrapperElement.insertAdjacentElement('beforeend', toolbarWrapperElement); // register listener to show/hide toolbar - preElement.onmouseover = () => toolbarWrapperElement.style.opacity = '1'; - preElement.onmouseout = () => toolbarWrapperElement.style.opacity = '0'; + preWrapperElement.onmouseenter = () => toolbarWrapperElement.classList.add('hover'); + preWrapperElement.onmouseleave = () => toolbarWrapperElement.classList.remove('hover'); // declare embeddedViewRef holding variable let embeddedViewRef: EmbeddedViewRef; @@ -425,7 +424,6 @@ export class MarkdownService { // attach clipboard.js to root node embeddedViewRef.rootNodes.forEach((node: HTMLElement) => { - node.onmouseover = () => toolbarWrapperElement.style.opacity = '1'; toolbarWrapperElement.appendChild(node); clipboardInstance = new ClipboardJS(node, { text: () => preElement.innerText }); });