Move the color picker to its own initializer file (#11693)

* refactor: move the color picker to its own initializer file

* fix:wrap in the initializecolorpicker function with use strict

app/assets/javascripts/initializePage.js

@@ -12,7 +12,7 @@
   initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
   nextPage:writable, fetching:writable, done:writable, adClicked:writable,
   initializePaymentPointers, initializeSpecialNavigationFunctionality, initializeBroadcast,
-  initializeDateHelpers
+  initializeDateHelpers, initializeColorPicker
 */
 
 function callInitializers() {
@@ -65,6 +65,7 @@ function callInitializers() {
   initializeHeroBannerClose();
   initializeOnboardingTaskCard();
   initializeDateHelpers();
+  initializeColorPicker();
 
   function freezeScrolling(event) {
     event.preventDefault();

app/assets/javascripts/initializers/initializeColorPicker.js

@@ -0,0 +1,21 @@
+'use strict';
+
+function initializeColorPicker() {
+  var pickers = Array.from(document.getElementsByClassName('js-color-field'));
+
+  function colorValueChange(e) {
+    var field = e.target;
+    var sibling = '';
+    if (field.nextElementSibling) {
+      sibling = field.nextElementSibling;
+    } else {
+      sibling = field.previousElementSibling;
+    }
+
+    sibling.value = field.value;
+  }
+
+  pickers.forEach(function (picker) {
+    picker.addEventListener('change', colorValueChange);
+  });
+}

app/views/users/_profile.html.erb

@@ -81,23 +81,3 @@
     <button type="submit" class="crayons-btn">Save Profile Information</button>
   </div>
 <% end %>
-
-<script>
-  var pickers = Array.from(document.getElementsByClassName('js-color-field'));
-
-  function colorValueChange(e) {
-    var field = e.target;
-    var sibling = '';
-    if (field.nextElementSibling) {
-      sibling = field.nextElementSibling;
-    } else {
-      sibling = field.previousElementSibling;
-    }
-
-    sibling.value = field.value;
-  }
-
-  pickers.forEach(function(picker) {
-    picker.addEventListener('change', colorValueChange);
-  });
-</script>