utils.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagestyle/utils
  7. */
  8. import log from '@ckeditor/ckeditor5-utils/src/log';
  9. import fullWidthIcon from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
  10. import leftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
  11. import centerIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
  12. import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
  13. /**
  14. * Default image styles provided by the plugin, which can be referred in the
  15. * {@link module:image/image~ImageConfig#styles} config.
  16. *
  17. * Among them, 2 default semantic content styles are available:
  18. *
  19. * * `full` is a full–width image without any CSS class,
  20. * * `side` is a side image styled with the `image-style-side` CSS class
  21. *
  22. * There are also 3 styles focused on formatting:
  23. *
  24. * * `alignLeft` aligns the image to the left using the `image-style-align-left` class,
  25. * * `alignCenter` centers the image to the left using the `image-style-align-center` class,
  26. * * `alignRight` aligns the image to the right using the `image-style-align-right` class,
  27. *
  28. * @member {Object.<String,Object>}
  29. */
  30. const defaultStyles = {
  31. // This option is equal to situation when no style is applied.
  32. full: {
  33. name: 'full',
  34. title: 'Full size image',
  35. icon: fullWidthIcon,
  36. isDefault: true
  37. },
  38. // This represents side image.
  39. side: {
  40. name: 'side',
  41. title: 'Side image',
  42. icon: rightIcon,
  43. className: 'image-style-side'
  44. },
  45. // This style represents an imaged aligned to the left.
  46. alignLeft: {
  47. name: 'alignLeft',
  48. title: 'Left aligned image',
  49. icon: leftIcon,
  50. className: 'image-style-align-left'
  51. },
  52. // This style represents a centered imaged.
  53. alignCenter: {
  54. name: 'alignCenter',
  55. title: 'Centered image',
  56. icon: centerIcon,
  57. className: 'image-style-align-center'
  58. },
  59. // This style represents an imaged aligned to the right.
  60. alignRight: {
  61. name: 'alignRight',
  62. title: 'Right aligned image',
  63. icon: rightIcon,
  64. className: 'image-style-align-right'
  65. }
  66. };
  67. /**
  68. * Default image style icons provided by the plugin, which can be referred in the
  69. * {@link module:image/image~ImageConfig#styles} config.
  70. *
  71. * There are 4 icons available: `'full'`, `'left'`, `'center'` and `'right'`.
  72. *
  73. * @member {Object.<String, String>}
  74. */
  75. const defaultIcons = {
  76. full: fullWidthIcon,
  77. left: leftIcon,
  78. right: rightIcon,
  79. center: centerIcon
  80. };
  81. /**
  82. * Returns {@link module:image/image~ImageConfig#styles} array with items normalized in the
  83. * {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat} format and a complete `icon` markup for each style.
  84. *
  85. * @returns {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>}
  86. */
  87. export function normalizeImageStyles( configuredStyles = [] ) {
  88. return configuredStyles
  89. .map( _normalizeStyle )
  90. .map( style => Object.assign( {}, style ) );
  91. }
  92. // Normalizes an image style provided in the {@link module:image/image~ImageConfig#styles}
  93. // and returns it in a {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat}.
  94. //
  95. // @param {Object} style
  96. // @returns {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat}
  97. function _normalizeStyle( style ) {
  98. // Just the name of the style has been passed.
  99. if ( typeof style == 'string' ) {
  100. const styleName = style;
  101. // If it's one of the defaults, just use it.
  102. if ( defaultStyles[ styleName ] ) {
  103. // Clone the style to avoid overriding defaults.
  104. style = Object.assign( {}, defaultStyles[ styleName ] );
  105. }
  106. // If it's just a name but none of the defaults, warn because probably it's a mistake.
  107. else {
  108. log.warn(
  109. 'image-style-not-found: There is no such image style of given name.',
  110. { name: styleName }
  111. );
  112. // Normalize the style anyway to prevent errors.
  113. style = {
  114. name: styleName
  115. };
  116. }
  117. }
  118. // If an object style has been passed and if the name matches one of the defaults,
  119. // extend it with defaults – the user wants to customize a default style.
  120. // Note: Don't override the user–defined style object, clone it instead.
  121. else if ( defaultStyles[ style.name ] ) {
  122. const defaultStyle = defaultStyles[ style.name ];
  123. const extendedStyle = Object.assign( {}, style );
  124. for ( const prop in defaultStyle ) {
  125. if ( !style.hasOwnProperty( prop ) ) {
  126. extendedStyle[ prop ] = defaultStyle[ prop ];
  127. }
  128. }
  129. style = extendedStyle;
  130. }
  131. // If an icon is defined as a string and correspond with a name
  132. // in default icons, use the default icon provided by the plugin.
  133. if ( typeof style.icon == 'string' && defaultIcons[ style.icon ] ) {
  134. style.icon = defaultIcons[ style.icon ];
  135. }
  136. return style;
  137. }