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 <[email protected]>
Co-authored-by: techknowlogick <[email protected]>

Author: 3 people

.gitignore

@@ -79,6 +79,7 @@ coverage.all
 /public/serviceworker.js
 /public/css
 /public/fonts
+/public/img/webpack
 /web_src/fomantic/build
 /VERSION
 /.air

Makefile

@@ -96,7 +96,7 @@ FOMANTIC_DEST_DIR := web_src/fomantic/build
 WEBPACK_SOURCES := $(shell find web_src/js web_src/less -type f) $(FOMANTIC_DEST)
 WEBPACK_CONFIGS := webpack.config.js
 WEBPACK_DEST := public/js/index.js public/css/index.css
-WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/serviceworker.js
+WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/img/webpack public/serviceworker.js
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))

package-lock.json

@@ -10,6 +10,7 @@
     "@babel/plugin-transform-runtime": "7.10.5",
     "@babel/preset-env": "7.10.4",
     "@babel/runtime": "7.10.5",
+    "@claviska/jquery-minicolors": "2.3.5",
     "@primer/octicons": "10.0.0",
     "babel-loader": "8.1.0",
     "clipboard": "2.0.6",

package.json

@@ -202,7 +202,6 @@ func DeleteWebhook(ctx *context.Context) {
 func Labels(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.labels")
 	ctx.Data["PageIsOrgSettingsLabels"] = true
-	ctx.Data["RequireMinicolors"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["LabelTemplates"] = models.LabelTemplates
 	ctx.HTML(200, tplSettingsLabels)

public/vendor/plugins/jquery.minicolors/LICENSE

@@ -23,7 +23,6 @@ func Labels(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.labels")
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["PageIsLabels"] = true
-	ctx.Data["RequireMinicolors"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["LabelTemplates"] = models.LabelTemplates
 	ctx.HTML(200, tplLabels)

public/vendor/plugins/jquery.minicolors/jquery.minicolors.css

@@ -30,9 +30,6 @@
 	{{end}}
 {{end}}
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
-{{if .RequireMinicolors}}
-	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js"></script>
-{{end}}
 {{template "custom/footer" .}}
 </body>
 </html>

public/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js

@@ -66,7 +66,6 @@
 			UseServiceWorker: {{UseServiceWorker}},
 			csrf: '{{.CsrfToken}}',
 			HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
-			Minicolors: {{if .RequireMinicolors}}true{{else}}false{{end}},
 			SimpleMDE: {{if .RequireSimpleMDE}}true{{else}}false{{end}},
 			Tribute: {{if .RequireTribute}}true{{else}}false{{end}},
 			U2F: {{if .RequireU2F}}true{{else}}false{{end}},
@@ -101,9 +100,6 @@
 			.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
 		</style>
 	</noscript>
-{{if .RequireMinicolors}}
-	<link rel="stylesheet" href="{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css">
-{{end}}
 	<style class="list-search-style"></style>
 {{if .PageIsUserProfile}}
 	<meta property="og:title" content="{{.Owner.Name}}" />

public/vendor/plugins/jquery.minicolors/jquery.minicolors.png

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

routers/org/setting.go

@@ -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'));