| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- /**
- * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module image/imagestyle/utils
- */
- import log from '@ckeditor/ckeditor5-utils/src/log';
- import fullWidthIcon from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
- import leftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
- import centerIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
- import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
- /**
- * Default image styles provided by the plugin, which can be referred in the
- * {@link module:image/image~ImageConfig#styles} config.
- *
- * Among them, 2 default semantic content styles are available:
- *
- * * `full` is a full–width image without any CSS class,
- * * `side` is a side image styled with the `image-style-side` CSS class
- *
- * There are also 3 styles focused on formatting:
- *
- * * `alignLeft` aligns the image to the left using the `image-style-align-left` class,
- * * `alignCenter` centers the image to the left using the `image-style-align-center` class,
- * * `alignRight` aligns the image to the right using the `image-style-align-right` class,
- *
- * @member {Object.<String,Object>}
- */
- const defaultStyles = {
- // This option is equal to situation when no style is applied.
- full: {
- name: 'full',
- title: 'Full size image',
- icon: fullWidthIcon,
- isDefault: true
- },
- // This represents side image.
- side: {
- name: 'side',
- title: 'Side image',
- icon: rightIcon,
- className: 'image-style-side'
- },
- // This style represents an imaged aligned to the left.
- alignLeft: {
- name: 'alignLeft',
- title: 'Left aligned image',
- icon: leftIcon,
- className: 'image-style-align-left'
- },
- // This style represents a centered imaged.
- alignCenter: {
- name: 'alignCenter',
- title: 'Centered image',
- icon: centerIcon,
- className: 'image-style-align-center'
- },
- // This style represents an imaged aligned to the right.
- alignRight: {
- name: 'alignRight',
- title: 'Right aligned image',
- icon: rightIcon,
- className: 'image-style-align-right'
- }
- };
- /**
- * Default image style icons provided by the plugin, which can be referred in the
- * {@link module:image/image~ImageConfig#styles} config.
- *
- * There are 4 icons available: `'full'`, `'left'`, `'center'` and `'right'`.
- *
- * @member {Object.<String, String>}
- */
- const defaultIcons = {
- full: fullWidthIcon,
- left: leftIcon,
- right: rightIcon,
- center: centerIcon
- };
- /**
- * Returns {@link module:image/image~ImageConfig#styles} array with items normalized in the
- * {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat} format and a complete `icon` markup for each style.
- *
- * @returns {Array.<module:image/imagestyle/imagestyleediting~ImageStyleFormat>}
- */
- export function normalizeImageStyles( configuredStyles = [] ) {
- return configuredStyles
- .map( _normalizeStyle )
- .map( style => Object.assign( {}, style ) );
- }
- // Normalizes an image style provided in the {@link module:image/image~ImageConfig#styles}
- // and returns it in a {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat}.
- //
- // @param {Object} style
- // @returns {@link module:image/imagestyle/imagestyleediting~ImageStyleFormat}
- function _normalizeStyle( style ) {
- // Just the name of the style has been passed.
- if ( typeof style == 'string' ) {
- const styleName = style;
- // If it's one of the defaults, just use it.
- if ( defaultStyles[ styleName ] ) {
- // Clone the style to avoid overriding defaults.
- style = Object.assign( {}, defaultStyles[ styleName ] );
- }
- // If it's just a name but none of the defaults, warn because probably it's a mistake.
- else {
- log.warn(
- 'image-style-not-found: There is no such image style of given name.',
- { name: styleName }
- );
- // Normalize the style anyway to prevent errors.
- style = {
- name: styleName
- };
- }
- }
- // If an object style has been passed and if the name matches one of the defaults,
- // extend it with defaults – the user wants to customize a default style.
- // Note: Don't override the user–defined style object, clone it instead.
- else if ( defaultStyles[ style.name ] ) {
- const defaultStyle = defaultStyles[ style.name ];
- const extendedStyle = Object.assign( {}, style );
- for ( const prop in defaultStyle ) {
- if ( !style.hasOwnProperty( prop ) ) {
- extendedStyle[ prop ] = defaultStyle[ prop ];
- }
- }
- style = extendedStyle;
- }
- // If an icon is defined as a string and correspond with a name
- // in default icons, use the default icon provided by the plugin.
- if ( typeof style.icon == 'string' && defaultIcons[ style.icon ] ) {
- style.icon = defaultIcons[ style.icon ];
- }
- return style;
- }
|