From d6eefbccee5b21e04b2e3bb30b7aa42fb9df6c43 Mon Sep 17 00:00:00 2001
From: Joshua Taillon <jat255@gmail.com>
Date: Sat, 17 Nov 2018 21:34:11 -0500
Subject: [PATCH] encapsulate in if blocks so no errors on non-tag pages; added
 support for edit tags page

---
 overrides/tag_colour_preview.js | 75 +++++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 17 deletions(-)

diff --git a/overrides/tag_colour_preview.js b/overrides/tag_colour_preview.js
index a265f247e..a4efa7907 100644
--- a/overrides/tag_colour_preview.js
+++ b/overrides/tag_colour_preview.js
@@ -3,24 +3,65 @@
 // color as the drop-down value is changed. Copy and paste it into
 // ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects.
 
-let colour;
-let colour_num;
+if (django.jQuery("#id_colour").length) {
 
-colour_num = django.jQuery("#id_colour").val() - 1;
-colour = django.jQuery('#id_colour')[0][colour_num].text;
-django.jQuery('#id_colour').after('<div id="colour_square"></div>')
+    let colour;
+    let colour_num;
 
-django.jQuery('#colour_square').css({
-    'float': 'left',
-    'width': '20px',
-    'height': '20px',
-    'margin': '5px',
-    'border': '1px solid rgba(0, 0, 0, .2)',
-    'background': colour
-});
-
-django.jQuery('#id_colour').change(function () {
     colour_num = django.jQuery("#id_colour").val() - 1;
     colour = django.jQuery('#id_colour')[0][colour_num].text;
-    django.jQuery('#colour_square').css({'background': colour});
-});
+    django.jQuery('#id_colour').after('<div class="colour_square"></div>')
+
+    django.jQuery('.colour_square').css({
+        'float': 'left',
+        'width': '20px',
+        'height': '20px',
+        'margin': '5px',
+        'border': '1px solid rgba(0, 0, 0, .2)',
+        'background': colour
+    });
+
+    django.jQuery('#id_colour').change(function () {
+        colour_num = django.jQuery("#id_colour").val() - 1;
+        colour = django.jQuery('#id_colour')[0][colour_num].text;
+        django.jQuery('.colour_square').css({'background': colour});
+    });
+}
+
+// The following jQuery snippet will add a small square next to each selection
+// drop-down on the `Edit tags` page that will update to show the selected tag
+// color as the drop-down value is changed. Copy and paste it into
+// ``PAPERLESS_MEDIADIR/overrides.js`` to see the effects.
+
+if (django.jQuery('select[id*="-colour"]').length) {
+    django.jQuery('select[id*="-colour"]').each(function (index, element) {
+        let id;
+        let loop_colour_num
+        let loop_colour
+
+        id = "colour_square_" + index;
+        django.jQuery(element).after('<div class="colour_square" id="' + id + '"></div>')
+
+        loop_colour_num = django.jQuery(element).val() - 1;
+        loop_colour = django.jQuery(element)[0][loop_colour_num].text;
+
+        django.jQuery("<style type='text/css'>\
+                        .colour_square{ \
+                            float: left; \
+                            width: 20px; \
+                            height: 20px; \
+                            margin: 5px; \
+                            border: 1px solid rgba(0,0,0,.2); \
+                        } </style>").appendTo("head");
+        django.jQuery('#' + id).css({'background': loop_colour});
+
+        console.log(id, loop_colour_num, loop_colour)
+
+        django.jQuery(element).change(function () {
+            loop_colour_num = django.jQuery(element).val() - 1;
+            loop_colour = django.jQuery(element)[0][loop_colour_num].text;
+            django.jQuery('#' + id).css({'background': loop_colour});
+            console.log('#' + id, loop_colour)
+        });
+    })
+}
\ No newline at end of file