8
0

utils.js 4.7 KB

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