color_field_widget_spectrum.jquery.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * @file
  3. * Javascript for Color Field.
  4. */
  5. (function ($, Drupal) {
  6. 'use strict';
  7. /**
  8. * Enables spectrum on color elements.
  9. *
  10. * @type {Drupal~behavior}
  11. *
  12. * @prop {Drupal~behaviorAttach} attach
  13. * Attaches a spectrum widget to a color input element.
  14. */
  15. Drupal.behaviors.color_field_spectrum = {
  16. attach: function (context, settings) {
  17. var $context = $(context);
  18. var spectrum_settings = settings.color_field.color_field_widget_spectrum;
  19. $context.find('.js-color-field-widget-spectrum').each(function (index, element) {
  20. var $element = $(element);
  21. var $element_color = $element.find('.js-color-field-widget-spectrum__color');
  22. var $element_opacity = $element.find('.js-color-field-widget-spectrum__opacity');
  23. $element_color.spectrum({
  24. showInitial: true,
  25. preferredFormat: "hex",
  26. showInput: spectrum_settings.show_input,
  27. showAlpha: spectrum_settings.show_alpha,
  28. showPalette: spectrum_settings.show_palette,
  29. showPaletteOnly: !!spectrum_settings.show_palette_only,
  30. palette: [spectrum_settings.palette],
  31. showButtons: spectrum_settings.show_buttons,
  32. allowEmpty: spectrum_settings.allow_empty,
  33. change: function(tinycolor) {
  34. $element_color.val(tinycolor.toHexString());
  35. $element_opacity.val(tinycolor._roundA);
  36. }
  37. });
  38. // Set alpha value on load.
  39. if (!!spectrum_settings.show_alpha) {
  40. var tinycolor = $element_color.spectrum("get");
  41. var alpha = $element_opacity.val();
  42. if (alpha > 0) {
  43. tinycolor.setAlpha(alpha);
  44. $element_color.spectrum("set", tinycolor);
  45. }
  46. }
  47. });
  48. }
  49. };
  50. })(jQuery, Drupal);