8
0

utils.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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. * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
  11. *
  12. * @param {String} modelAttributeKey Key
  13. * @param {Array.<module:font/fontfamily~FontFamilyOption>|Array.<module:font/fontsize~FontSizeOption>} options
  14. * @returns {module:engine/conversion/conversion~ConverterDefinition}
  15. */
  16. export function buildDefinition( modelAttributeKey, options ) {
  17. const definition = {
  18. model: {
  19. key: modelAttributeKey,
  20. values: []
  21. },
  22. view: {},
  23. upcastAlso: {}
  24. };
  25. for ( const option of options ) {
  26. definition.model.values.push( option.model );
  27. definition.view[ option.model ] = option.view;
  28. if ( option.upcastAlso ) {
  29. definition.upcastAlso[ option.model ] = option.upcastAlso;
  30. }
  31. }
  32. return definition;
  33. }
  34. export const FONT_COLOR = 'fontColor';
  35. export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
  36. export function renderUpcastAttribute( styleAttr ) {
  37. return viewElement => {
  38. const fontColor = viewElement.getStyle( styleAttr );
  39. return normalizeColorCode( fontColor );
  40. };
  41. }
  42. export function renderDowncastElement( styleAttr ) {
  43. return ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
  44. style: `${ styleAttr }:${ modelAttributeValue }`
  45. } );
  46. }
  47. function normalizeColorCode( value ) {
  48. return value.replace( /\s/g, '' );
  49. }
  50. export function normalizeOptions( colorRow ) {
  51. return colorRow
  52. .map( getColorsDefinition )
  53. .filter( option => !!option );
  54. }
  55. function getColorsDefinition( color ) {
  56. if ( typeof color === 'string' ) {
  57. return {
  58. model: color,
  59. label: color,
  60. view: {
  61. name: 'span',
  62. styles: {
  63. color
  64. },
  65. priority: 5
  66. }
  67. };
  68. } else {
  69. return {
  70. model: color.color,
  71. label: color.label,
  72. hasBorder: color.hasBorder,
  73. view: {
  74. name: 'span',
  75. styles: {
  76. color: `${ color.color }`
  77. },
  78. priority: 5
  79. }
  80. };
  81. }
  82. }
  83. export const colorUI = {
  84. addColorsToDropdown( dropdownView, colors ) {
  85. const locale = dropdownView.locale;
  86. const colorTableView = new ColorTableView( locale, { colors } );
  87. dropdownView.colorTableView = colorTableView;
  88. dropdownView.panelView.children.add( colorTableView );
  89. colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
  90. return colorTableView;
  91. }
  92. };