move clipboard.js to npm/webpack (go-gitea#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 <[email protected]>

.eslintrc

@@ -18,7 +18,6 @@ env:
 
 globals:
   __webpack_public_path__: true
-  Clipboard: false
   CodeMirror: false
   Dropzone: false
   emojify: false

package.json

@@ -5,6 +5,7 @@
     "node": ">=10"
   },
   "dependencies": {
+    "clipboard": "2.0.4",
     "fomantic-ui": "2.8.3",
     "highlight.js": "9.18.1",
     "jquery": "3.4.1",

public/vendor/librejs.html

@@ -41,9 +41,9 @@
           <td><a href="https://github.com/go-gitea/gitea/tree/master/web_src/js">*.js</a></td>
         </tr>
         <tr>
-          <td><a href="./plugins/clipboard/clipboard.min.js">clipboard.min.js</a></td>
+          <td><a href="../js/clipboard.js">clipboard.js</a></td>
           <td><a href="http://www.freebsd.org/copyright/freebsd-license.html">Expat</a></td>
-          <td><a href="https://github.com/zenorocha/clipboard.js/archive/v1.5.9.tar.gz">clipboard-1.5.9.tar.gz</a></td>
+          <td><a href="https://github.com/zenorocha/clipboard.js/archive/v2.0.4.tar.gz">clipboard-2.0.4.tar.gz</a></td>
         </tr>
         <tr>
           <td><a href="../js/gitgraph.js">gitgraph.js</a></td>

templates/base/footer.tmpl

@@ -108,7 +108,6 @@
 	</script>
 {{end}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js"></script>
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js"></script>
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>

templates/pwa/serviceworker_js.tmpl

@@ -2,12 +2,12 @@ var STATIC_CACHE = 'static-cache-v1';
 var urlsToCache = [
   // js
   '{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/clipboard.js',
   '{{StaticUrlPrefix}}/js/gitgraph.js',
   '{{StaticUrlPrefix}}/js/highlight.js',
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
-  '{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
   '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',

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'));
+  });
+}

web_src/js/index.js

@@ -10,6 +10,7 @@ import './vendor/semanticDropdown.js';
 import initContextPopups from './features/contextPopup.js';
 import initHighlight from './features/highlight.js';
 import initGitGraph from './features/gitGraph.js';
+import initClipboard from './features/clipboard.js';
 
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -2453,24 +2454,6 @@ $(document).ready(async () => {
     }
   }
 
-  // Clipboard JS
-  const clipboard = new Clipboard('.clipboard');
-  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'));
-  });
-
   // Helpers.
   $('.delete-button').click(showDeletePopup);
   $('.add-all-button').click(showAddAllPopup);
@@ -2579,7 +2562,6 @@ $(document).ready(async () => {
   initRepoStatusChecker();
   initTemplateSearch();
   initContextPopups(suburl);
-  initGitGraph();
 
   // Repo clone url.
   if ($('#repo-clone-url').length > 0) {
@@ -2616,8 +2598,11 @@ $(document).ready(async () => {
     }
   });
 
+  // parallel init of lazy-loaded features
   [hljs] = await Promise.all([
     initHighlight(),
+    initGitGraph(),
+    initClipboard(),
   ]);
 });