From ea05ab2b0640f3832e653df52b67b073f43b6c47 Mon Sep 17 00:00:00 2001
From: Daniel Quinn <code@danielquinn.org>
Date: Sat, 1 Dec 2018 16:22:19 +0000
Subject: [PATCH] Restructure colour.js to work withing a .ready()

---
 src/documents/static/js/colours.js | 69 +++++++++++++++---------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/documents/static/js/colours.js b/src/documents/static/js/colours.js
index f8f881aa1..41907ead3 100644
--- a/src/documents/static/js/colours.js
+++ b/src/documents/static/js/colours.js
@@ -2,48 +2,46 @@
 // drop-down on the `Add tag` page that will update to show the selected tag
 // color as the drop-down value is changed.
 
-if (django.jQuery("#id_colour").length) {
+django.jQuery(document).ready(function(){
+
+  if (django.jQuery("#id_colour").length) {
 
     let colour;
     let colour_num;
 
     colour_num = django.jQuery("#id_colour").val() - 1;
     colour = django.jQuery('#id_colour')[0][colour_num].text;
-    django.jQuery('#id_colour').after('<div class="colour_square"></div>')
+    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
+      '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});
+      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.
+  } else if (django.jQuery("select[id*='colour']").length) {
 
-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
+      let id;
+      let loop_colour_num;
+      let loop_colour;
 
-        id = "colour_square_" + index;
-        django.jQuery(element).after('<div class="colour_square" id="' + id + '"></div>')
+      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;
+      loop_colour_num = django.jQuery(element).val() - 1;
+      loop_colour = django.jQuery(element)[0][loop_colour_num].text;
 
-        django.jQuery("<style type='text/css'>\
+      django.jQuery("<style type='text/css'>\
                         .colour_square{ \
                             float: left; \
                             width: 20px; \
@@ -51,15 +49,18 @@ if (django.jQuery('select[id*="-colour"]').length) {
                             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_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)
-        });
+        console.log('#' + id, loop_colour)
+      });
     })
-}
+
+  }
+
+});