New Feature for developers: Copyable cells in grids (#4029)

Author: kiatng

app/code/core/Mage/Adminhtml/Block/Widget/Grid/Column.php

@@ -27,6 +27,8 @@
  * @method $this setFormat(string $value)
  * @method string getIndex()
  * @method bool getNoLink()
+ * @method bool getCopyable()
+ * @method $this setCopyable(bool $value)
  */
 class Mage_Adminhtml_Block_Widget_Grid_Column extends Mage_Adminhtml_Block_Widget
 {
@@ -162,6 +164,10 @@ public function getRowField(Varien_Object $row)
             $renderedValue = call_user_func($frameCallback, $renderedValue, $row, $this, false);
         }
 
+        if ($this->getCopyable() && $text = $this->getRenderer()->getCopyableText($row)) {
+            $renderedValue = '<span data-copy-text="' . $text . '">' . $renderedValue . '</span>';
+        }
+
         return $renderedValue;
     }
 

app/code/core/Mage/Adminhtml/Block/Widget/Grid/Column/Renderer/Abstract.php

@@ -163,4 +163,13 @@ public function renderCss()
     {
         return $this->getColumn()->getCssClass();
     }
+
+    /**
+     * @param Varien_Object $row
+     * @return string|null
+     */
+    public function getCopyableText(Varien_Object $row)
+    {
+        return $this->_getValue($row);
+    }
 }

js/mage/adminhtml/tools.js

@@ -731,3 +731,47 @@ function sortNumeric(val1, val2)
 {
     return val1 - val2;
 }
+
+/**
+ * Adds copy icons to elements that have the class 'copy-text'
+ */
+function addCopyIcons() {
+    if (navigator.clipboard === undefined) {
+        return;
+    }
+
+    const copyTexts = document.querySelectorAll('[data-copy-text]');
+    copyTexts.forEach(copyText => {
+        const iconElement = createCopyIconElement();
+        copyText.parentNode.appendChild(iconElement);
+    });
+}
+
+/**
+ * @return {HTMLElement} The created copy icon element
+ */
+function createCopyIconElement() {
+    const copyIcon = document.createElement('span');
+    copyIcon.classList.add('icon-copy');
+    copyIcon.setAttribute('onclick', 'copyText(event)');
+    copyIcon.setAttribute('title', Translator.translate('Copy text to clipboard'));
+
+    return copyIcon;
+}
+
+/**
+ * Copies the text from the data-text attribute of the clicked element to the clipboard
+ *
+ * @param {Event} event - The event object triggered by the click event
+ */
+function copyText(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const copyIcon = event.currentTarget;
+    const copyText = copyIcon.previousElementSibling.getAttribute('data-copy-text');
+    navigator.clipboard.writeText(copyText);
+    copyIcon.classList.add('icon-copy-copied');
+    setTimeout(() => {
+        copyIcon.classList.remove('icon-copy-copied');
+    }, 1000);
+}

js/varien/js.js

@@ -703,47 +703,3 @@ function buttonDisabler() {
         button.disabled = true;
     });
 }
-
-/**
- * Adds copy icons to elements that have the class 'copy-text'
- */
-function addCopyIcons() {
-    if (navigator.clipboard === undefined) {
-        return;
-    }
-
-    const copyTexts = document.querySelectorAll('[data-copy-text]');
-    copyTexts.forEach(copyText => {
-        const iconElement = createCopyIconElement();
-        copyText.parentNode.appendChild(iconElement);
-    });
-}
-
-/**
- * @return {HTMLElement} The created copy icon element
- */
-function createCopyIconElement() {
-    const copyIcon = document.createElement('span');
-    copyIcon.classList.add('icon-copy');
-    copyIcon.setAttribute('onclick', 'copyText(event)');
-    copyIcon.setAttribute('title', Translator.translate('Copy text to clipboard'));
-
-    return copyIcon;
-}
-
-/**
- * Copies the text from the data-text attribute of the clicked element to the clipboard
- *
- * @param {Event} event - The event object triggered by the click event
- */
-function copyText(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    const copyIcon = event.currentTarget;
-    const copyText = copyIcon.previousElementSibling.getAttribute('data-copy-text');
-    navigator.clipboard.writeText(copyText);
-    copyIcon.classList.add('icon-copy-copied');
-    setTimeout(() => {
-        copyIcon.classList.remove('icon-copy-copied');
-    }, 1000);
-}

skin/adminhtml/default/default/boxes.css

@@ -220,6 +220,21 @@ tr.dynamic-grid input.input-text { width:154px; }
 .available { color:#080; font-weight:bold; }
 .not-available { color:#800; }
 
+/* Grid - Copyable Cells */
+.icon-copy {
+    display: inline-block;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.07 122.88"><path d="M97.67 20.81h0l.01.02a13.38 13.38 0 0 1 9.46 3.93 13.32 13.32 0 0 1 3.9 9.42h.02v.02 75.28.01h-.02c-.01 3.68-1.51 7.03-3.93 9.46a13.32 13.32 0 0 1-9.42 3.9v.02h-.02-59.19-.01v-.02c-3.69-.01-7.04-1.5-9.46-3.93a13.37 13.37 0 0 1-3.91-9.42h0V34.2v-.01h.02c.01-3.69 1.52-7.04 3.94-9.46 2.41-2.4 5.73-3.9 9.42-3.91v-.02h.02l59.17.01h0zM.02 75.38L0 13.39v-.01h.02a13.44 13.44 0 0 1 3.93-9.46A13.37 13.37 0 0 1 13.37.01V0h.02 59.19c7.69 0 8.9 9.96.01 10.16H13.4h-.02v-.02c-.88 0-1.68.37-2.27.97-.59.58-.96 1.4-.96 2.27h.02v.01 3.17 58.81c0 8.26-10.15 8.72-10.15.01h0zm100.89 34.11V34.2v-.02h.02c0-.87-.37-1.68-.97-2.27-.59-.58-1.4-.96-2.28-.96v.02h-.01-59.19-.02v-.02c-.88 0-1.68.38-2.27.97-.59.58-.96 1.4-.96 2.27h.02v.01 75.28.02h-.02c0 .88.38 1.68.97 2.27s1.4.96 2.27.96v-.02h.01 59.19.02v.02c.87 0 1.68-.38 2.27-.97.59-.58.96-1.4.96-2.27h-.01 0 0 0z" fill-rule="evenodd"/></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    cursor: pointer;
+    width: 12px;
+    height: 12px;
+    margin: 2px 0 0 2px;
+}
+
+.entry-edit-head .icon-copy { width: 16px; height: 16px; margin: 8px 0 0 5px; }
+
+.icon-copy-copied { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 30 30"><path d="M26.98 5.99a1 1 0 0 0-.687.303L11 21.586l-6.293-6.293a1 1 0 1 0-1.414 1.414l7 7a1 1 0 0 0 1.414 0l16-16a1 1 0 0 0-.727-1.717z"/></svg>'); }
 
 /* ACCORDION
 *******************************************************************************/