|
@@ -18,10 +18,17 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
|
|
|
|
|
|
|
|
import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
|
|
import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
|
|
|
|
|
|
|
|
-import iconSmall from '../../theme/icons/image-resize-small.svg';
|
|
|
|
|
-import iconMedium from '../../theme/icons/image-resize-medium.svg';
|
|
|
|
|
-import iconLarge from '../../theme/icons/image-resize-large.svg';
|
|
|
|
|
-import iconFull from '../../theme/icons/image-resize-full.svg';
|
|
|
|
|
|
|
+import iconSmall from '@ckeditor/ckeditor5-core/theme/icons/object-size-small.svg';
|
|
|
|
|
+import iconMedium from '@ckeditor/ckeditor5-core/theme/icons/object-size-medium.svg';
|
|
|
|
|
+import iconLarge from '@ckeditor/ckeditor5-core/theme/icons/object-size-large.svg';
|
|
|
|
|
+import iconFull from '@ckeditor/ckeditor5-core/theme/icons/object-size-full.svg';
|
|
|
|
|
+
|
|
|
|
|
+const RESIZE_ICONS = {
|
|
|
|
|
+ small: iconSmall,
|
|
|
|
|
+ medium: iconMedium,
|
|
|
|
|
+ large: iconLarge,
|
|
|
|
|
+ original: iconFull
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* The `ImageResizeUI` plugin.
|
|
* The `ImageResizeUI` plugin.
|
|
@@ -56,8 +63,8 @@ export default class ImageResizeUI extends Plugin {
|
|
|
*
|
|
*
|
|
|
* @readonly
|
|
* @readonly
|
|
|
* @private
|
|
* @private
|
|
|
- *
|
|
|
|
|
* @type {module:image/image~ImageConfig#resizeUnit}
|
|
* @type {module:image/image~ImageConfig#resizeUnit}
|
|
|
|
|
+ * @default '%'
|
|
|
*/
|
|
*/
|
|
|
this._resizeUnit = editor.config.get( 'image.resizeUnit' ) || '%';
|
|
this._resizeUnit = editor.config.get( 'image.resizeUnit' ) || '%';
|
|
|
}
|
|
}
|
|
@@ -87,7 +94,6 @@ export default class ImageResizeUI extends Plugin {
|
|
|
* A helper function that creates a standalone button component for the plugin.
|
|
* A helper function that creates a standalone button component for the plugin.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
- *
|
|
|
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} resizeOption A model of resize option.
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} resizeOption A model of resize option.
|
|
|
*/
|
|
*/
|
|
|
_addButton( option ) {
|
|
_addButton( option ) {
|
|
@@ -99,30 +105,15 @@ export default class ImageResizeUI extends Plugin {
|
|
|
const button = new ButtonView( locale );
|
|
const button = new ButtonView( locale );
|
|
|
const command = editor.commands.get( 'imageResize' );
|
|
const command = editor.commands.get( 'imageResize' );
|
|
|
const commandCallback = setOptionOn( parsedValue );
|
|
const commandCallback = setOptionOn( parsedValue );
|
|
|
|
|
+ const labelText = this._createLabel( option, true );
|
|
|
|
|
|
|
|
- const userIcon = () => {
|
|
|
|
|
- switch ( icon ) {
|
|
|
|
|
- case 'original':
|
|
|
|
|
- return iconFull;
|
|
|
|
|
- case 'small':
|
|
|
|
|
- return iconSmall;
|
|
|
|
|
- case 'medium':
|
|
|
|
|
- return iconMedium;
|
|
|
|
|
- case 'large':
|
|
|
|
|
- return iconLarge;
|
|
|
|
|
- default:
|
|
|
|
|
- return null;
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- if ( !userIcon() ) {
|
|
|
|
|
|
|
+ if ( !RESIZE_ICONS[ icon ] ) {
|
|
|
/**
|
|
/**
|
|
|
* Setting {@link module:image/image~ImageConfig#resizeOptions `config.image.resizeOptions`} for the standalone buttons,
|
|
* Setting {@link module:image/image~ImageConfig#resizeOptions `config.image.resizeOptions`} for the standalone buttons,
|
|
|
* you have to choose a valid icon token for each option.
|
|
* you have to choose a valid icon token for each option.
|
|
|
*
|
|
*
|
|
|
* See all valid options described in the
|
|
* See all valid options described in the
|
|
|
* {@link module:image/imageresize/imageresizeui~ImageResizeOption plugin configuration}.
|
|
* {@link module:image/imageresize/imageresizeui~ImageResizeOption plugin configuration}.
|
|
|
- *
|
|
|
|
|
* @error imageresizeui-missing-icon
|
|
* @error imageresizeui-missing-icon
|
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} option Invalid image resize option.
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} option Invalid image resize option.
|
|
|
*/
|
|
*/
|
|
@@ -137,9 +128,9 @@ export default class ImageResizeUI extends Plugin {
|
|
|
|
|
|
|
|
button.set( {
|
|
button.set( {
|
|
|
// Uses `label` property for setting the more verbose text (from tooltip) for ARIA purpose.
|
|
// Uses `label` property for setting the more verbose text (from tooltip) for ARIA purpose.
|
|
|
- label: this._createLabel( option, true ),
|
|
|
|
|
- icon: userIcon(),
|
|
|
|
|
- tooltip: this._createLabel( option, true ),
|
|
|
|
|
|
|
+ label: labelText,
|
|
|
|
|
+ icon: RESIZE_ICONS[ icon ],
|
|
|
|
|
+ tooltip: labelText,
|
|
|
isToggleable: true,
|
|
isToggleable: true,
|
|
|
commandValue: parsedValue
|
|
commandValue: parsedValue
|
|
|
} );
|
|
} );
|
|
@@ -161,7 +152,6 @@ export default class ImageResizeUI extends Plugin {
|
|
|
* plugin configuration settings.
|
|
* plugin configuration settings.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
- *
|
|
|
|
|
* @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options An array of the configured options.
|
|
* @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options An array of the configured options.
|
|
|
*/
|
|
*/
|
|
|
_addDropdown( options ) {
|
|
_addDropdown( options ) {
|
|
@@ -191,7 +181,7 @@ export default class ImageResizeUI extends Plugin {
|
|
|
dropdownView.bind( 'isOn' ).to( command );
|
|
dropdownView.bind( 'isOn' ).to( command );
|
|
|
dropdownView.bind( 'isEnabled' ).to( this );
|
|
dropdownView.bind( 'isEnabled' ).to( this );
|
|
|
|
|
|
|
|
- addListToDropdown( dropdownView, this._prepareListDefinitions( options, command ) );
|
|
|
|
|
|
|
+ addListToDropdown( dropdownView, this._getResizeDropdownListItemDefinitions( options, command ) );
|
|
|
|
|
|
|
|
dropdownView.listView.ariaLabel = t( 'Image resize list' );
|
|
dropdownView.listView.ariaLabel = t( 'Image resize list' );
|
|
|
|
|
|
|
@@ -209,10 +199,8 @@ export default class ImageResizeUI extends Plugin {
|
|
|
* A helper function for creating an option label.
|
|
* A helper function for creating an option label.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
- *
|
|
|
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} option A resize option object.
|
|
* @param {module:image/imageresize/imageresizeui~ImageResizeOption} option A resize option object.
|
|
|
* @param {Boolean} [forTooltip] An optional flag for creating a tooltip label.
|
|
* @param {Boolean} [forTooltip] An optional flag for creating a tooltip label.
|
|
|
- *
|
|
|
|
|
* @returns {String} A user-defined label, a label combined from the value and resize unit or the default label
|
|
* @returns {String} A user-defined label, a label combined from the value and resize unit or the default label
|
|
|
* for reset options (`Original`).
|
|
* for reset options (`Original`).
|
|
|
*/
|
|
*/
|
|
@@ -223,26 +211,28 @@ export default class ImageResizeUI extends Plugin {
|
|
|
return option.label;
|
|
return option.label;
|
|
|
} else if ( forTooltip ) {
|
|
} else if ( forTooltip ) {
|
|
|
if ( option.value ) {
|
|
if ( option.value ) {
|
|
|
- return t( 'Resize image to' ) + ' ' + option.value + this._resizeUnit;
|
|
|
|
|
|
|
+ return t( 'Resize image to %0', option.value + this._resizeUnit );
|
|
|
} else {
|
|
} else {
|
|
|
return t( 'Resize image to the original size' );
|
|
return t( 'Resize image to the original size' );
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
|
- return option.value ? option.value + this._resizeUnit : t( 'Original' );
|
|
|
|
|
|
|
+ if ( option.value ) {
|
|
|
|
|
+ return option.value + this._resizeUnit;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return t( 'Original' );
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * A helper function for parsing resize options definitions.
|
|
|
|
|
|
|
+ * A helper function that parses resize options and returns definitions ready for use in a dropdown.
|
|
|
*
|
|
*
|
|
|
* @private
|
|
* @private
|
|
|
- *
|
|
|
|
|
* @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options The resize options.
|
|
* @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options The resize options.
|
|
|
* @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command A resize image command.
|
|
* @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command A resize image command.
|
|
|
- *
|
|
|
|
|
* @returns {module:utils/collection~Collection} definitions
|
|
* @returns {module:utils/collection~Collection} definitions
|
|
|
*/
|
|
*/
|
|
|
- _prepareListDefinitions( options, command ) {
|
|
|
|
|
|
|
+ _getResizeDropdownListItemDefinitions( options, command ) {
|
|
|
const itemDefinitions = new Collection();
|
|
const itemDefinitions = new Collection();
|
|
|
|
|
|
|
|
options.map( option => {
|
|
options.map( option => {
|
|
@@ -285,10 +275,9 @@ function setOptionOn( value ) {
|
|
|
* A resize option type.
|
|
* A resize option type.
|
|
|
*
|
|
*
|
|
|
* @typedef {Object} module:image/imageresize/imageresizeui~ImageResizeOption
|
|
* @typedef {Object} module:image/imageresize/imageresizeui~ImageResizeOption
|
|
|
- *
|
|
|
|
|
* @property {String} resizeOption.name A name of the option used for creating a component.
|
|
* @property {String} resizeOption.name A name of the option used for creating a component.
|
|
|
* You refer to that name later in the {@link module:image/image~ImageConfig#toolbar}.
|
|
* You refer to that name later in the {@link module:image/image~ImageConfig#toolbar}.
|
|
|
* @property {String} resizeOption.value A value of a resize option. `null` value is for resetting an image to its original size.
|
|
* @property {String} resizeOption.value A value of a resize option. `null` value is for resetting an image to its original size.
|
|
|
- * @property {String} resizeOptions.icon A value of the available icon sizes (`small`, `medium`, `large`, `original`).
|
|
|
|
|
|
|
+ * @property {String} [resizeOptions.icon] A value of the available icon sizes (`small`, `medium`, `large`, `original`).
|
|
|
* @property {String} [resizeOption.label] A label to be displayed with a button.
|
|
* @property {String} [resizeOption.label] A label to be displayed with a button.
|
|
|
*/
|
|
*/
|