utils.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module font/utils
  7. */
  8. import ColorTableView from './ui/colortableview';
  9. /**
  10. * Name of the font size plugin.
  11. */
  12. export const FONT_SIZE = 'fontSize';
  13. /**
  14. * Name of the font family plugin.
  15. */
  16. export const FONT_FAMILY = 'fontFamily';
  17. /**
  18. * Name of the font color plugin.
  19. */
  20. export const FONT_COLOR = 'fontColor';
  21. /**
  22. * Name of font 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 model.
  54. *
  55. * **Note**: `styleAttr` 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**: `styleAttr` 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. } );
  76. }
  77. /**
  78. * Creates a unified color definition object from color configuration options.
  79. * The object contains both the information necessary to render the UI and initialize a conversion.
  80. *
  81. * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options
  82. * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}
  83. */
  84. export function normalizeColorOptions( options ) {
  85. return options
  86. .map( normalizeSingleColorDefinition )
  87. .filter( option => !!option );
  88. }
  89. /**
  90. * Helper which add {@link module:font/ui/colortableview~ColorTableView} to a dropdown with proper initial values.
  91. *
  92. * @param {Object} config Configuration object
  93. * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView Dropdown view to which
  94. * a {@link module:font/ui/colortableview~ColorTableView} will be added.
  95. * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions
  96. * representing colors to be displayed in the color table.
  97. * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
  98. * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  99. */
  100. export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
  101. const locale = dropdownView.locale;
  102. const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel } );
  103. dropdownView.colorTableView = colorTableView;
  104. dropdownView.panelView.children.add( colorTableView );
  105. colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
  106. return colorTableView;
  107. }
  108. /**
  109. * Returns color configuration options as defined in the `editor.config.(fontColor|fontBackgroundColor).colors`
  110. * but processed to account for editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
  111. * or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} in the correct language.
  112. *
  113. * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
  114. * when the user configuration is defined because the editor does not exist yet.
  115. *
  116. * @param {module:core/editor/editor~Editor} editor An editor instance.
  117. * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} options
  118. * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}.
  119. */
  120. export function getLocalizedColorOptions( editor, options ) {
  121. const t = editor.t;
  122. const localizedColorNames = {
  123. Black: t( 'Black' ),
  124. 'Dim grey': t( 'Dim grey' ),
  125. Grey: t( 'Grey' ),
  126. 'Light grey': t( 'Light grey' ),
  127. White: t( 'White' ),
  128. Red: t( 'Red' ),
  129. Orange: t( 'Orange' ),
  130. Yellow: t( 'Yellow' ),
  131. 'Light green': t( 'Light green' ),
  132. Green: t( 'Green' ),
  133. Aquamarine: t( 'Aquamarine' ),
  134. Turquoise: t( 'Turquoise' ),
  135. 'Light blue': t( 'Light blue' ),
  136. Blue: t( 'Blue' ),
  137. Purple: t( 'Purple' )
  138. };
  139. return options.map( colorOption => {
  140. const label = localizedColorNames[ colorOption.label ];
  141. if ( label && label != colorOption.label ) {
  142. colorOption.label = label;
  143. }
  144. return colorOption;
  145. } );
  146. }
  147. // Fixes color value string
  148. //
  149. // @param {String} value
  150. // @returns {String}
  151. function normalizeColorCode( value ) {
  152. return value.replace( /\s/g, '' );
  153. }
  154. // Creates normalized color definition from user defined configuration.
  155. //
  156. // @param {String|module:ui/colorgrid/colorgrid~ColorDefinition}
  157. // @returns {module:ui/colorgrid/colorgrid~ColorDefinition}
  158. function normalizeSingleColorDefinition( color ) {
  159. if ( typeof color === 'string' ) {
  160. return {
  161. model: color.replace( / /g, '' ),
  162. label: color,
  163. hasBorder: false,
  164. view: {
  165. name: 'span',
  166. styles: {
  167. color
  168. },
  169. priority: 5
  170. }
  171. };
  172. } else {
  173. return {
  174. model: color.color.replace( / /g, '' ),
  175. label: color.label || color.color,
  176. hasBorder: color.hasBorder === undefined ? false : color.hasBorder,
  177. view: {
  178. name: 'span',
  179. styles: {
  180. color: `${ color.color }`
  181. },
  182. priority: 5
  183. }
  184. };
  185. }
  186. }