All files / app/assets/javascripts/pages/admin/broadcast_messages broadcast_message.js

0% Statements 0/45
0% Branches 0/4
0% Functions 0/10
0% Lines 0/45

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105                                                                                                                                                                                                                 
import $ from 'jquery';
import { debounce } from 'lodash';
import createFlash from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { textColorForBackground } from '~/lib/utils/color_utils';
import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
import { __ } from '~/locale';
 
export default () => {
  const $broadcastMessageColor = $('.js-broadcast-message-color');
  const $broadcastMessageType = $('.js-broadcast-message-type');
  const $broadcastBannerMessagePreview = $('.js-broadcast-banner-message-preview');
  const $broadcastMessage = $('.js-broadcast-message-message');
  const $jsBroadcastMessagePreview = $('.js-broadcast-message-preview');
 
  const reloadPreview = function reloadPreview() {
    const previewPath = $broadcastMessage.data('previewPath');
    const message = $broadcastMessage.val();
    const type = $broadcastMessageType.val();
 
    if (message === '') {
      $jsBroadcastMessagePreview.text(__('Your message here'));
    } else {
      axios
        .post(previewPath, {
          broadcast_message: {
            message,
            broadcast_type: type,
          },
        })
        .then(({ data }) => {
          $jsBroadcastMessagePreview.html(data.message);
        })
        .catch(() =>
          createFlash({
            message: __('An error occurred while rendering preview broadcast message'),
          }),
        );
    }
  };
 
  $broadcastMessageColor.on('input', function onMessageColorInput() {
    const previewColor = $(this).val();
    $broadcastBannerMessagePreview.css('background-color', previewColor);
  });
 
  $('input#broadcast_message_font').on('input', function onMessageFontInput() {
    const previewColor = $(this).val();
    $broadcastBannerMessagePreview.css('color', previewColor);
  });
 
  $broadcastMessageType.on('change', () => {
    const $broadcastMessageColorFormGroup = $('.js-broadcast-message-background-color-form-group');
    const $broadcastMessageDismissableFormGroup = $('.js-broadcast-message-dismissable-form-group');
    const $broadcastNotificationMessagePreview = $('.js-broadcast-notification-message-preview');
 
    $broadcastMessageColorFormGroup.toggleClass('hidden');
    $broadcastMessageDismissableFormGroup.toggleClass('hidden');
    $broadcastBannerMessagePreview.toggleClass('hidden');
    $broadcastNotificationMessagePreview.toggleClass('hidden');
 
    reloadPreview();
  });
 
  $broadcastMessage.on(
    'input',
    debounce(() => {
      reloadPreview();
    }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
  );
 
  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 $jsBroadcastMessagePreview.css(selectedColorStyle);
  };
 
  const setSuggestedColor = (e) => {
    const color = $(e.currentTarget).data('color');
    $broadcastMessageColor
      .val(color)
      // Notify the form, that color has changed
      .trigger('input');
    // Only banner supports colors
    if ($broadcastMessageType === 'banner') {
      updateColorPreview();
    }
    return e.preventDefault();
  };
 
  $(document).on('click', '.suggest-colors a', setSuggestedColor);
};