move clipboard.js to npm/webpack (#10183)

- created lazy-loaded webpack chunk for clipboard.js
- upgraded clipboard.js from 1.5.9 to 2.0.4
- parallelize initialization of all lazy-loaded features

Co-authored-by: Antoine GIRARD <sapk@users.noreply.github.com>

1 files changed, 23 insertions, 0 deletions

diff --git a/web_src/js/features/clipboard.js b/web_src/js/features/clipboard.js
new file mode 100644
index 0000000000..bd4a664c7a
--- /dev/null
+++ b/web_src/js/features/clipboard.js
@@ -0,0 +1,23 @@
+export default async function initClipboard() {
+  const els = document.querySelectorAll('.clipboard');
+  if (!els || !els.length) return;
+
+  const { default: ClipboardJS } = await import(/* webpackChunkName: "clipboard" */'clipboard');
+
+  const clipboard = new ClipboardJS(els);
+  clipboard.on('success', (e) => {
+    e.clearSelection();
+
+    $(`#${e.trigger.getAttribute('id')}`).popup('destroy');
+    e.trigger.setAttribute('data-content', e.trigger.getAttribute('data-success'));
+    $(`#${e.trigger.getAttribute('id')}`).popup('show');
+    e.trigger.setAttribute('data-content', e.trigger.getAttribute('data-original'));
+  });
+
+  clipboard.on('error', (e) => {
+    $(`#${e.trigger.getAttribute('id')}`).popup('destroy');
+    e.trigger.setAttribute('data-content', e.trigger.getAttribute('data-error'));
+    $(`#${e.trigger.getAttribute('id')}`).popup('show');
+    e.trigger.setAttribute('data-content', e.trigger.getAttribute('data-original'));
+  });
+}