highlightjs-copy - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/highlightjs-copy.min.js

@@ -1,1 +0,1 @@
-class CopyButtonPlugin{constructor(options={}){self.hook=options.hook;self.callback=options.callback;self.lang=options.lang||document.documentElement.lang||"en"}"after:highlightElement"({el,text}){let button=Object.assign(document.createElement("button"),{innerHTML:locales[lang]?.[0]||"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(button);el.parentElement.style.setProperty("--hljs-theme-background",window.getComputedStyle(el).backgroundColor);button.onclick=function(){if(!navigator.clipboard)return;let newText=text;if(hook&&typeof hook==="function"){newText=hook(text,el)||text}navigator.clipboard.writeText(newText).then(function(){button.innerHTML=locales[lang]?.[1]||"Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:locales[lang]?.[2]||"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML=locales[lang]?.[0]||"Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}if(typeof module!="undefined"){module.exports=CopyButtonPlugin}const locales={en:["Copy","Copied!","Copied to clipboard"],es:["Copiar","¡Copiado!","Copiado al portapapeles"],fr:["Copier","Copié !","Copié dans le presse-papier"],de:["Kopieren","Kopiert!","In die Zwischenablage kopiert"],ja:["コピー","コピーしました！","クリップボードにコピーしました"],ko:["복사","복사됨!","클립보드에 복사됨"],ru:["Копировать","Скопировано!","Скопировано в буфер обмена"],zh:["复制","已复制!","已复制到剪贴板"],"zh-tw":["複製","已複製!","已複製到剪貼簿"]};
+class CopyButtonPlugin{constructor(options={}){this.hook=options.hook;this.callback=options.callback;this.lang=options.lang||document.documentElement.lang||"en";this.autohide=typeof options.autohide!=="undefined"?options.autohide:true}"after:highlightElement"({el,text}){if(el.parentElement.querySelector(".hljs-copy-button"))return;let{hook,callback,lang,autohide}=this;let container=Object.assign(document.createElement("div"),{className:"hljs-copy-container"});container.dataset.autohide=autohide;let button=Object.assign(document.createElement("button"),{innerHTML:locales[lang]?.[0]||"Copy",className:"hljs-copy-button"});button.dataset.copied=false;el.parentElement.classList.add("hljs-copy-wrapper");el.parentElement.appendChild(container);container.appendChild(button);container.style.setProperty("--hljs-theme-background",window.getComputedStyle(el).backgroundColor);container.style.setProperty("--hljs-theme-color",window.getComputedStyle(el).color);container.style.setProperty("--hljs-theme-padding",window.getComputedStyle(el).padding);button.onclick=function(){if(!navigator.clipboard)return;let newText=text;if(hook&&typeof hook==="function"){newText=hook(text,el)||text}navigator.clipboard.writeText(newText).then(function(){button.innerHTML=locales[lang]?.[1]||"Copied!";button.dataset.copied=true;let alert=Object.assign(document.createElement("div"),{role:"status",className:"hljs-copy-alert",innerHTML:locales[lang]?.[2]||"Copied to clipboard"});el.parentElement.appendChild(alert);setTimeout(()=>{button.innerHTML=locales[lang]?.[0]||"Copy";button.dataset.copied=false;el.parentElement.removeChild(alert);alert=null},2e3)}).then(function(){if(typeof callback==="function")return callback(newText,el)})}}}if(typeof module!="undefined"){module.exports=CopyButtonPlugin}const locales={en:["Copy","Copied!","Copied to clipboard"],es:["Copiar","¡Copiado!","Copiado al portapapeles"],"pt-BR":["Copiar","Copiado!","Copiado para a área de transferência"],fr:["Copier","Copié !","Copié dans le presse-papier"],de:["Kopieren","Kopiert!","In die Zwischenablage kopiert"],ja:["コピー","コピーしました！","クリップボードにコピーしました"],ko:["복사","복사됨!","클립보드에 복사됨"],ru:["Копировать","Скопировано!","Скопировано в буфер обмена"],zh:["复制","已复制!","已复制到剪贴板"],"zh-tw":["複製","已複製!","已複製到剪貼簿"]};

index.js

 /**
  *  @file highlight-copy.js
  *  @author Arron Hunt <[e-mail]>
- *  @copyright Copyright 2021. All rights reserved.
+ *  @copyright Copyright 2021-2024. All rights reserved.
  */
@@ -17,10 +17,23 @@
    * @param {String} [options.lang] Defaults to the document body's lang attribute and falls back to "en"
+   * @param {Boolean} [options.autohide=true] Automatically hides the copy button until a user hovers the code block. Defaults to False
    */
   constructor(options = {}) {
-    self.hook = options.hook;
-    self.callback = options.callback;
-    self.lang = options.lang || document.documentElement.lang || "en";
+    this.hook = options.hook;
+    this.callback = options.callback;
+    this.lang = options.lang || document.documentElement.lang || "en";
+    this.autohide =
+      typeof options.autohide !== "undefined" ? options.autohide : true;
   }
   "after:highlightElement"({ el, text }) {
+    // If the code block already has a copy button, return.
+    if (el.parentElement.querySelector(".hljs-copy-button")) return;
+
+    let { hook, callback, lang, autohide } = this;
+
     // Create the copy button and append it to the codeblock.
+    let container = Object.assign(document.createElement("div"), {
+      className: "hljs-copy-container",
+    });
+    container.dataset.autohide = autohide;
+
     let button = Object.assign(document.createElement("button"), {
@@ -31,10 +44,20 @@ innerHTML: locales[lang]?.[0] || "Copy",
     button.dataset.copied = false;
+
     el.parentElement.classList.add("hljs-copy-wrapper");
-    el.parentElement.appendChild(button);
+    el.parentElement.appendChild(container);
+    container.appendChild(button);
 
-    // Add a custom proprety to the code block so that the copy button can reference and match its background-color value.
-    el.parentElement.style.setProperty(
+    // Add a custom proprety to the container so that the copy button can reference and match its theme values.
+    container.style.setProperty(
       "--hljs-theme-background",
       window.getComputedStyle(el).backgroundColor
     );
+    container.style.setProperty(
+      "--hljs-theme-color",
+      window.getComputedStyle(el).color
+    );
+    container.style.setProperty(
+      "--hljs-theme-padding",
+      window.getComputedStyle(el).padding
+    );
 
@@ -89,2 +112,3 @@ button.onclick = function () {
   es: ["Copiar", "¡Copiado!", "Copiado al portapapeles"],
+  "pt-BR": ["Copiar", "Copiado!", "Copiado para a área de transferência"],
   fr: ["Copier", "Copié !", "Copié dans le presse-papier"],
@@ -91,0 +115,0 @@ de: ["Kopieren", "Kopiert!", "In die Zwischenablage kopiert"],

package.json

 {
   "name": "highlightjs-copy",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A simple, accessible highlightjs plugin to add a copy button to your codeblocks.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -42,2 +42,14 @@ # highlightjs-copy
 
+### Autohide
+
+By default, the copy button is hidden until a user hovers the code block. Set this to `false` to have the copy button always visible.
+
+```javascript
+hljs.addPlugin(
+  new CopyButtonPlugin({
+    autohide: false, // Always show the copy button
+  })
+);
+```
+
 ### With a callback
@@ -122,7 +134,8 @@
 
-| CSS selector           | Details                                                                                                                                                                                        |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.hljs-copy-wrapper`   | Applied to the parent `<pre>` element that wraps the .hljs code.                                                                                                                               |
-| `.hljs-copy-button`    | The copy button itself.<br /><br />The variable `--hljs-theme-background` is automatically applied to the parent element. This allows the button to inherit the code block's background color. |
-| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed.                                                                      |
-| `.hljs-copy-alert`     | A visually hidden status element that announces the copy confirmation to screen readers.                                                                                                       |
+| CSS selector           | Details                                                                                                                                                                                                                             |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.hljs-copy-wrapper`   | Applied to the parent `<pre>` element that wraps the .hljs code.                                                                                                                                                                    |
+| `.hljs-copy-container` | A parent element to the button, in charge of absolute positioning and animating the button when hovering.                                                                                                                           |
+| `.hljs-copy-button`    | The copy button itself.<br /><br />The variables `--hljs-theme-background` and `--hljs-theme-color` are automatically applied to the parent element. This allows the button to inherit the code block's text and background colors. |
+| `[data-copied='true']` | This data attribute is applied to the copy button and is set to `true` for two seconds when the copy action is performed.                                                                                                           |
+| `.hljs-copy-alert`     | A visually hidden status element that announces the copy confirmation to screen readers.                                                                                                                                            |

No alert changes

Improved metrics

Total package byte prevSize

38527

increased by7.32%

Number of lines in readme file

140

increased by10.24%

Worsened metrics

Lines of code

316

decreased by-8.14%

No dependency changes