|
|
@@ -10,27 +10,59 @@
|
|
|
import Command from '../../core/command/command.js';
|
|
|
import { isImage, getStyleByValue } from './utils.js';
|
|
|
|
|
|
+/**
|
|
|
+ * The image style command. It is used to apply different image styles.
|
|
|
+ *
|
|
|
+ * @extends module:core/command/command~Command
|
|
|
+ */
|
|
|
export default class ImageStyleCommand extends Command {
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Creates instance of the command.
|
|
|
+ *
|
|
|
+ * @param {module:core/editor/editor~Editor} editor Editor instance.
|
|
|
+ * @param {Object} styles Allowed styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat
|
|
|
+ * ImageStyleFormat} for more information.
|
|
|
+ */
|
|
|
constructor( editor, styles ) {
|
|
|
super( editor );
|
|
|
|
|
|
+ /**
|
|
|
+ * The current style value.
|
|
|
+ *
|
|
|
+ * @readonly
|
|
|
+ * @observable
|
|
|
+ * @member {String} #value
|
|
|
+ */
|
|
|
this.set( 'value', false );
|
|
|
|
|
|
+ /**
|
|
|
+ * Image styles uses by this command.
|
|
|
+ *
|
|
|
+ * @readonly
|
|
|
+ * @member {Object} Allowed image styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat}.
|
|
|
+ */
|
|
|
this.styles = styles;
|
|
|
|
|
|
+ // Update current value and refresh state each time something change in model document.
|
|
|
this.listenTo( editor.document, 'changesDone', () => {
|
|
|
this._updateValue();
|
|
|
this.refreshState();
|
|
|
} );
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * Updates command's value.
|
|
|
+ *
|
|
|
+ * @private
|
|
|
+ */
|
|
|
_updateValue() {
|
|
|
const doc = this.editor.document;
|
|
|
const element = doc.selection.getSelectedElement();
|
|
|
|
|
|
if ( isImage( element ) ) {
|
|
|
- if ( element.hasAttribute( 'style' ) ) {
|
|
|
- const value = element.getAttribute( 'style' );
|
|
|
+ if ( element.hasAttribute( 'imageStyle' ) ) {
|
|
|
+ const value = element.getAttribute( 'imageStyle' );
|
|
|
|
|
|
// Check if value exists.
|
|
|
this.value = ( getStyleByValue( value, this.styles ) ? value : false );
|
|
|
@@ -43,19 +75,30 @@ export default class ImageStyleCommand extends Command {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * @inheritDoc
|
|
|
+ */
|
|
|
_checkEnabled() {
|
|
|
const element = this.editor.document.selection.getSelectedElement();
|
|
|
|
|
|
return isImage( element );
|
|
|
}
|
|
|
|
|
|
- _doExecute( options = {} ) {
|
|
|
- // TODO: add batch to options.
|
|
|
+ /**
|
|
|
+ * Executes command.
|
|
|
+ *
|
|
|
+ * @protected
|
|
|
+ * @param {Object} options
|
|
|
+ * @param {String} options.value Value to apply. It must be one of the values from styles passed to {@link #constructor}.
|
|
|
+ * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. New batch will be
|
|
|
+ * created if this option is not set.
|
|
|
+ */
|
|
|
+ _doExecute( options ) {
|
|
|
const currentValue = this.value;
|
|
|
const newValue = options.value;
|
|
|
|
|
|
// Check if new value is valid.
|
|
|
- if ( getStyleByValue( newValue, this.styles ) === undefined ) {
|
|
|
+ if ( !getStyleByValue( newValue, this.styles ) ) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
@@ -72,7 +115,7 @@ export default class ImageStyleCommand extends Command {
|
|
|
doc.enqueueChanges( () => {
|
|
|
const batch = options.batch || doc.batch();
|
|
|
|
|
|
- batch.setAttribute( imageElement, 'style', newValue );
|
|
|
+ batch.setAttribute( imageElement, 'imageStyle', newValue );
|
|
|
} );
|
|
|
}
|
|
|
}
|