1 files changed, 42 insertions, 7 deletions

diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
index 6e00e31b828..7a6a486f551 100644
--- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
@@ -3,26 +3,31 @@ import _ from 'underscore';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
+import { textColorForBackground } from '~/lib/utils/color_utils';
 
 export default () => {
-  $('input#broadcast_message_color').on('input', function onMessageColorInput() {
+  const $broadcastMessageColor = $('input#broadcast_message_color');
+  const $broadcastMessagePreview = $('div.broadcast-message-preview');
+  $broadcastMessageColor.on('input', function onMessageColorInput() {
     const previewColor = $(this).val();
-    $('div.broadcast-message-preview').css('background-color', previewColor);
+    $broadcastMessagePreview.css('background-color', previewColor);
   });
 
   $('input#broadcast_message_font').on('input', function onMessageFontInput() {
     const previewColor = $(this).val();
-    $('div.broadcast-message-preview').css('color', previewColor);
+    $broadcastMessagePreview.css('color', previewColor);
   });
 
-  const previewPath = $('textarea#broadcast_message_message').data('previewPath');
+  const $broadcastMessage = $('textarea#broadcast_message_message');
+  const previewPath = $broadcastMessage.data('previewPath');
+  const $jsBroadcastMessagePreview = $('.js-broadcast-message-preview');
 
-  $('textarea#broadcast_message_message').on(
+  $broadcastMessage.on(
     'input',
     _.debounce(function onMessageInput() {
       const message = $(this).val();
       if (message === '') {
-        $('.js-broadcast-message-preview').text(__('Your message here'));
+        $jsBroadcastMessagePreview.text(__('Your message here'));
       } else {
         axios
           .post(previewPath, {
@@ -31,10 +36,40 @@ export default () => {
             },
           })
           .then(({ data }) => {
-            $('.js-broadcast-message-preview').html(data.message);
+            $jsBroadcastMessagePreview.html(data.message);
           })
           .catch(() => flash(__('An error occurred while rendering preview broadcast message')));
       }
     }, 250),
   );
+
+  const updateColorPreview = () => {
+    const selectedBackgroundColor = $broadcastMessageColor.val();
+    const contrastTextColor = textColorForBackground(selectedBackgroundColor);
+
+    // save contrastTextColor to hidden input field
+    $('input.text-font-color').val(contrastTextColor);
+
+    // Updates the preview color with the hex-color input
+    const selectedColorStyle = {
+      backgroundColor: selectedBackgroundColor,
+      color: contrastTextColor,
+    };
+
+    $('.label-color-preview').css(selectedColorStyle);
+
+    return $broadcastMessagePreview.css(selectedColorStyle);
+  };
+
+  const setSuggestedColor = e => {
+    const color = $(e.currentTarget).data('color');
+    $broadcastMessageColor
+      .val(color)
+      // Notify the form, that color has changed
+      .trigger('input');
+    updateColorPreview();
+    return e.preventDefault();
+  };
+
+  $(document).on('click', '.suggest-colors a', setSuggestedColor);
 };