1 files changed, 35 insertions, 0 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
new file mode 100644
index 00000000000..885acfac6d0
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js
@@ -0,0 +1,35 @@
+import _ from 'underscore';
+import axios from '~/lib/utils/axios_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
+
+export default function initBroadcastMessagesForm() {
+  $('input#broadcast_message_color').on('input', function onMessageColorInput() {
+    const previewColor = $(this).val();
+    $('div.broadcast-message-preview').css('background-color', previewColor);
+  });
+
+  $('input#broadcast_message_font').on('input', function onMessageFontInput() {
+    const previewColor = $(this).val();
+    $('div.broadcast-message-preview').css('color', previewColor);
+  });
+
+  const previewPath = $('textarea#broadcast_message_message').data('preview-path');
+
+  $('textarea#broadcast_message_message').on('input', _.debounce(function onMessageInput() {
+    const message = $(this).val();
+    if (message === '') {
+      $('.js-broadcast-message-preview').text('Your message here');
+    } else {
+      axios.post(previewPath, {
+        broadcast_message: {
+          message,
+        },
+      })
+      .then(({ data }) => {
+        $('.js-broadcast-message-preview').html(data.message);
+      })
+      .catch(() => flash(__('An error occurred while rendering preview broadcast message')));
+    }
+  }, 250));
+}