NEW: Add Copy Download Link to Clipboard Button - fixes #41 - thanks @…

…alfredbuehler
aljawaid · Apr 15, 2023 · 3da7f96 · 3da7f96
1 parent 4758724
commit 3da7f96
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/Assets/css/plugin-manager.css b/Assets/css/plugin-manager.css
@@ -749,14 +749,14 @@ button.install-plugin-btn {
 a.download-archive, a.download-archive:link, a.download-archive:visited {
     color: var(--link-color-pm);
     font-weight: 600;
-    padding: 3px 5px;
+    padding: 5px 5px 3px 5px;
     border: 2px solid var(--pp-light-grey);
     border-radius: var(--border-radius-pm);
     transition: var(--transition-pm);
 }
 
 .download-archive svg {
-    vertical-align: bottom;
+    vertical-align: sub;
     margin-right: 4px;
     margin-left: 1px;
     pointer-events: none;
@@ -1443,3 +1443,15 @@ fieldset.manual-install {
 .file-url-form .form-actions {
     padding-top: 10px;
 }
+
+.copy-url-link-format {
+    padding: 2px 5px 2px 5px;
+    margin: auto 5px;
+    border: 2px solid var(--pp-light-grey);
+    border-radius: var(--border-radius-pm);
+    transition: var(--transition-pm);
+}
+
+.copy-url-link-format svg {
+    vertical-align: bottom;
+}
diff --git a/Assets/js/plugin-manager.js b/Assets/js/plugin-manager.js
@@ -101,3 +101,31 @@ $( document ).ready(function() {
         }, 3500);
     });
 });
+
+// INSTALLED PLUGIN LIST
+// COPY TO CLIPBOARD SCRIPT - INSTANTIATE SCRIPT - /// FORMATTED OUTPUT TO CLIPBOARD
+$( document ).ready(function() {
+    var clipboard = new ClipboardJS('.copy-url-link-format');
+
+    // COPY TO CLIPBOARD SCRIPT - SUCCESS/ERROR STATES
+    clipboard.on('success', function(e) {
+        $(e.trigger).html("<strong style='font-size:20px; line-height: 1.1;'>&#10004;</strong>");
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+        e.clearSelection();
+        setTimeout(function() {
+            $(e.trigger).html("<svg height='24px' class='clippy-icon' fill='currentColor' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path xmlns='http://www.w3.org/2000/svg' d='M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z'/></svg>");
+        }, 3500);
+    });
+    clipboard.on('error', function(e) {
+        $(e.trigger).html("<strong style='font-size:20px; line-height: 1.1;'>&#10008;</strong>");
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+        e.clearSelection();
+        setTimeout(function() {
+            $(e.trigger).html("<svg height='24px' class='clippy-icon' fill='currentColor' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'><path xmlns='http://www.w3.org/2000/svg' d='M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z'/></svg>");
+        }, 3500);
+    });
+});
diff --git a/Template/plugin/manual-plugins.php b/Template/plugin/manual-plugins.php
@@ -268,6 +268,12 @@
                                 <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                             </svg> <?= t('Download') ?>
                         </a>
+                        <span class="copy-url-link-format btn" title="<?= t('Copy download link') ?>" data-clipboard-text="<?= $plugin['download'] ?>">
+                            <svg height="24px" class="clippy-icon" fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                                <title><?= t('Copy to Clipboard') ?></title>
+                                <path xmlns="http://www.w3.org/2000/svg" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
+                            </svg>
+                        </span>
                     <?php else: ?>
                         <div class="cross">&#10008;</div> <?= t('Not available') ?>
                     <?php endif ?>