Refactor initCopyContent using the new registerGlobalEventFunc

Author: kerwin612

templates/repo/view_file.tmpl

@@ -55,7 +55,7 @@
 					{{end}}
 				</div>
 				<a download class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.download_file"}}" href="{{$.RawFileLink}}">{{svg "octicon-download"}}</a>
-				<a id="copy-content" class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}"{{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
+				<a class="btn-octicon {{if not .CanCopyContent}} disabled{{end}}" data-global-click="onCopyContentButtonClick" {{if or .IsImageFile (and .HasSourceRenderedToggle (not .IsDisplayingSource))}} data-link="{{$.RawFileLink}}"{{end}} data-tooltip-content="{{if .CanCopyContent}}{{ctx.Locale.Tr "copy_content"}}{{else}}{{ctx.Locale.Tr "copy_type_unsupported"}}{{end}}">{{svg "octicon-copy"}}</a>
 				{{if .EnableFeed}}
 				<a class="btn-octicon" href="{{$.RepoLink}}/rss/{{$.RefTypeNameSubURL}}/{{PathEscapeSegments .TreePath}}" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 					{{svg "octicon-rss"}}

web_src/js/features/copycontent.ts

@@ -2,24 +2,22 @@ import {clippie} from 'clippie';
 import {showTemporaryTooltip} from '../modules/tippy.ts';
 import {convertImage} from '../utils.ts';
 import {GET} from '../modules/fetch.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
 
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.querySelector('#copy-content');
-  if (!btn || btn.classList.contains('disabled')) return;
-
-  btn.addEventListener('click', async () => {
-    if (btn.classList.contains('is-loading')) return;
+  registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (el: HTMLInputElement) => {
+    if (el.classList.contains('is-loading')) return;
     let content;
     let isRasterImage = false;
-    const link = btn.getAttribute('data-link');
+    const link = el.getAttribute('data-link');
 
     // when data-link is present, we perform a fetch. this is either because
     // the text to copy is not in the DOM or it is an image which should be
     // fetched to copy in full resolution
     if (link) {
-      btn.classList.add('is-loading', 'loading-icon-2px');
+      el.classList.add('is-loading', 'loading-icon-2px');
       try {
         const res = await GET(link, {credentials: 'include', redirect: 'follow'});
         const contentType = res.headers.get('content-type');
@@ -31,9 +29,9 @@ export function initCopyContent() {
           content = await res.text();
         }
       } catch {
-        return showTemporaryTooltip(btn, i18n.copy_error);
+        return showTemporaryTooltip(el, i18n.copy_error);
       } finally {
-        btn.classList.remove('is-loading', 'loading-icon-2px');
+        el.classList.remove('is-loading', 'loading-icon-2px');
       }
     } else { // text, read from DOM
       const lineEls = document.querySelectorAll('.file-view .lines-code');
@@ -43,13 +41,13 @@ export function initCopyContent() {
     // try copy original first, if that fails and it's an image, convert it to png
     const success = await clippie(content);
     if (success) {
-      showTemporaryTooltip(btn, i18n.copy_success);
+      showTemporaryTooltip(el, i18n.copy_success);
     } else {
       if (isRasterImage) {
         const success = await clippie(await convertImage(content as Blob, 'image/png'));
-        showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
+        showTemporaryTooltip(el, success ? i18n.copy_success : i18n.copy_error);
       } else {
-        showTemporaryTooltip(btn, i18n.copy_error);
+        showTemporaryTooltip(el, i18n.copy_error);
       }
     }
   });