Move jquery-minicolors to npm/webpack (#12305)

* Move jquery-minicolors to npm/webpack

- Unvendor and add as npm dependency
- Removed unneeded backend variable
- Fixed existing bug where picker would previously initizalize to the
  same green color when editing a label.

There was probably a version bump because the previous version was
over 3 years old but it seems to be compatible.

* use file-loader

* trailing comma and comment update

* misc tweaks

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

2 files changed, 14 insertions, 3 deletions

diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js
new file mode 100644
index 0000000000..11c5f26fa4
--- /dev/null
+++ b/web_src/js/features/colorpicker.js
@@ -0,0 +1,10 @@
+export default async function createColorPicker($els) {
+  if (!$els || !$els.length) return;
+
+  await Promise.all([
+    import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
+    import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'),
+  ]);
+
+  $els.minicolors();
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index cb1d39e62d..30a3d26ce4 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -15,6 +15,7 @@ import initServiceWorker from './features/serviceworker.js';
 import initMarkdownAnchors from './markdown/anchors.js';
 import renderMarkdownContent from './markdown/content.js';
 import attachTribute from './features/tribute.js';
+import createColorPicker from './features/colorpicker.js';
 import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
@@ -134,15 +135,15 @@ function initLabelEdit() {
     $newLabelPanel.hide();
   });
 
-  $('.color-picker').each(function () {
-    $(this).minicolors();
-  });
+  createColorPicker($('.color-picker'));
+
   $('.precolors .color').on('click', function () {
     const color_hex = $(this).data('color-hex');
     $('.color-picker').val(color_hex);
     $('.minicolors-swatch-color').css('background-color', color_hex);
   });
   $('.edit-label-button').on('click', function () {
+    $('.color-picker').minicolors('value', $(this).data('color'));
     $('#label-modal-id').val($(this).data('id'));
     $('.edit-label .new-label-input').val($(this).data('title'));
     $('.edit-label .new-label-desc-input').val($(this).data('description'));