8
0

utils.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module font/utils
  7. */
  8. import ColorTableView from './ui/colortableview';
  9. /**
  10. * The name of the font size plugin.
  11. */
  12. export const FONT_SIZE = 'fontSize';
  13. /**
  14. * The name of the font family plugin.
  15. */
  16. export const FONT_FAMILY = 'fontFamily';
  17. /**
  18. * The name of the font color plugin.
  19. */
  20. export const FONT_COLOR = 'fontColor';
  21. /**
  22. * The name of the font background color plugin.
  23. */
  24. export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
  25. /**
  26. * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
  27. *
  28. * @param {String} modelAttributeKey Key
  29. * @param {Array.<module:font/fontfamily~FontFamilyOption>|Array.<module:font/fontsize~FontSizeOption>} options
  30. * @returns {module:engine/conversion/conversion~ConverterDefinition}
  31. */
  32. export function buildDefinition( modelAttributeKey, options ) {
  33. const definition = {
  34. model: {
  35. key: modelAttributeKey,
  36. values: []
  37. },
  38. view: {},
  39. upcastAlso: {}
  40. };
  41. for ( const option of options ) {
  42. definition.model.values.push( option.model );
  43. definition.view[ option.model ] = option.view;
  44. if ( option.upcastAlso ) {
  45. definition.upcastAlso[ option.model ] = option.upcastAlso;
  46. }
  47. }
  48. return definition;
  49. }
  50. /**
  51. * A {@link module:font/fontcolor~FontColor font color} and
  52. * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
  53. * responsible for upcasting data to the model.
  54. *
  55. * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
  56. *
  57. * @param {String} styleAttr
  58. * @return {String}
  59. */
  60. export function renderUpcastAttribute( styleAttr ) {
  61. return viewElement => normalizeColorCode( viewElement.getStyle( styleAttr ) );
  62. }
  63. /**
  64. * A {@link module:font/fontcolor~FontColor font color} and
  65. * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
  66. * responsible for downcasting a color attribute to a `<span>` element.
  67. *
  68. * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
  69. *
  70. * @param {String} styleAttr
  71. */
  72. export function renderDowncastElement( styleAttr ) {
  73. return ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
  74. style: `${ styleAttr }:${ modelAttributeValue }`
  75. }, { priority: 7 } );
  76. }
  77. /**
  78. * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
  79. *
  80. * @param {Object} config The configuration object.
  81. * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView The dropdown view to which
  82. * a {@link module:font/ui/colortableview~ColorTableView} will be added.
  83. * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions
  84. * representing colors to be displayed in the color table.
  85. * @param {String} config.removeButtonLabel The label for the button responsible for removing the color.
  86. * @param {String} config.documentColorsLabel The label for the section with document colors.
  87. * @param {String} config.documentColorsCount The number of document colors inside the dropdown.
  88. * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  89. */
  90. export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {
  91. const locale = dropdownView.locale;
  92. const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } );
  93. dropdownView.colorTableView = colorTableView;
  94. dropdownView.panelView.children.add( colorTableView );
  95. colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
  96. return colorTableView;
  97. }
  98. // Fixes the color value string.
  99. //
  100. // @param {String} value
  101. // @returns {String}
  102. function normalizeColorCode( value ) {
  103. return value.replace( /\s/g, '' );
  104. }