feat: ajout fonction copie vers presse-papier sur les classes et les attributs

Author: olivier3lanc

assets/css/dsg_colors.css

@@ -0,0 +1,10 @@
+
+.c-quaternary-200\:hover:hover {
+    color: var(--dsg-colors-quaternary-200);
+}
+.c-secondary-200\:hover:hover {
+    color: var(--dsg-colors-secondary-200);
+}
+.c-tertiary-200\:hover:hover {
+    color: var(--dsg-colors-tertiary-200);
+}

assets/js/dsg.js

@@ -344,11 +344,19 @@ const dsg = {
                     <div class="d-flex fd-column gap-1 | w-6t">
                         <span class="d-flex fd-column">
                             <span class="ff-lead-400 fs-1 tt-uppercase | c-secondary-700">CSS Classes</span>
-                            <code class="ff-mono fs-3 | c-secondary-500">${classes}</code>
+                            <code class="ff-mono fs-3 | c-secondary-500 c-secondary-200:hover | cur-pointer"
+                                title="Click to copy \n${classes} \nto clipboard"
+                                onclick="ui.copyToClipboard(this.innerText, true)">
+                                ${classes}
+                            </code>
                         </span>
                         <span class="d-flex fd-column">
                             <span class="ff-lead-400 fs-1 tt-uppercase | c-tertiary-700">Attribute</span>
-                            <code class="ff-mono fs-3 | c-tertiary-300">${attribute}</code>
+                            <code class="ff-mono fs-3 | c-tertiary-300 c-tertiary-200:hover | cur-pointer"
+                                title="Click to copy \n${attribute.replaceAll('"', '&quot;')} \nto clipboard"
+                                onclick="ui.copyToClipboard(this.innerText, true)">
+                                ${attribute}
+                            </code>
                         </span>
                     </div>
                     <span class="d-flex fd-column ai-end | w-6t">
@@ -360,7 +368,11 @@ const dsg = {
         docClassValueItem: function({className, value}) {
             return `
                 <li class="d-flex ai-center jc-space-between gap-5 | fs-3">
-                    <code class="c-quaternary-500">${className}</code>
+                    <code class="c-quaternary-500 c-quaternary-200:hover | cur-pointer"
+                        title="Click to copy \n${className} \nto clipboard"
+                        onclick="ui.copyToClipboard(this.innerText, true)">
+                        ${className}
+                    </code>
                     <hr class="fg-1 | m-0 bb-0 bl-0 br-0 btwidth-1 btstyle-solid bcolor-primary-600">
                     <strong class="ff-mono ta-right ws-nowrap | c-tertiary-500">${value}</strong>
                 </li>

assets/js/ui.js

@@ -10,12 +10,13 @@ window.ui = {
         return id;
     },
 
-    copyToClipboard: function(textToCopy) {
+    copyToClipboard: function(textToCopy, displayCopiedTextToNotif = false) {
+        const notifText = displayCopiedTextToNotif ? `<div class="d-flex fd-column"><code class="fs-1">${textToCopy}</code><span>was copied to clipboard</span></div>` : `Copied to clipboard` ;
         if (navigator.clipboard !== undefined) {
             navigator.clipboard.writeText(textToCopy).then(
                 function() {
                   /* clipboard successfully set */
-                  ui.notifications.add('Copied to clipboard');
+                  ui.notifications.add(notifText);
                 }
             )
         } else {
@@ -32,7 +33,7 @@ window.ui = {
             document.execCommand("copy");
             // Remove it from the body
             document.body.removeChild(aux);
-            ui.notifications.add('Copied to clipboard');
+            ui.notifications.add(notifText);
         }
     },
     notifications: {

index.html

@@ -62,6 +62,7 @@
     <link rel="stylesheet" href="./assets/css/dsg_ellipsis.css">
     <link rel="stylesheet" href="./assets/css/dsg_forms.css">
     <link rel="stylesheet" href="./assets/css/dsg_animations.css">
+    <link rel="stylesheet" href="./assets/css/dsg_colors.css">
     <link rel="stylesheet" href="./assets/css/monokai-sublime-customized.css">
 </head>
 <body class="m-0 | ff-lead-400 | bc-primary-700 c-primary-200">