From 57b13ffa72790ba55d2aecb0b6d1b39c01070e20 Mon Sep 17 00:00:00 2001
From: Ridhwana <Ridhwana.Khan16@gmail.com>
Date: Tue, 1 Dec 2020 15:34:44 +0200
Subject: [PATCH] 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      |  3 ++-
 .../initializers/initializeColorPicker.js     | 21 +++++++++++++++++++
 app/views/users/_profile.html.erb             | 20 ------------------
 3 files changed, 23 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/javascripts/initializers/initializeColorPicker.js

diff --git a/app/assets/javascripts/initializePage.js b/app/assets/javascripts/initializePage.js
index fba65c633..cd2771edc 100644
--- a/app/assets/javascripts/initializePage.js
+++ b/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();
diff --git a/app/assets/javascripts/initializers/initializeColorPicker.js b/app/assets/javascripts/initializers/initializeColorPicker.js
new file mode 100644
index 000000000..7c8905835
--- /dev/null
+++ b/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);
+  });
+}
diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
index 161f42335..0af8f21ae 100644
--- a/app/views/users/_profile.html.erb
+++ b/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>