imagestylecommand.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagestyle/imagestylecommand
  7. */
  8. import Command from '@ckeditor/ckeditor5-core/src/command/command';
  9. import { isImage } from '../image/utils';
  10. /**
  11. * The image style command. It is used to apply different image styles.
  12. *
  13. * @extends module:core/command/command~Command
  14. */
  15. export default class ImageStyleCommand extends Command {
  16. /**
  17. * Creates instance of the image style command. Each command instance is handling one style.
  18. *
  19. * @param {module:core/editor/editor~Editor} editor Editor instance.
  20. * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} styles Style to apply by this command.
  21. */
  22. constructor( editor, style ) {
  23. super( editor );
  24. /**
  25. * The current command value - `true` if style handled by the command is applied on currently selected image,
  26. * `false` otherwise.
  27. *
  28. * @readonly
  29. * @observable
  30. * @member {Boolean} #value
  31. */
  32. this.set( 'value', false );
  33. /**
  34. * Style handled by this command.
  35. *
  36. * @readonly
  37. * @member {module:image/imagestyle/imagestyleengine~ImageStyleFormat} #style
  38. */
  39. this.style = style;
  40. // Update current value and refresh state each time something change in model document.
  41. this.listenTo( editor.document, 'changesDone', () => {
  42. this._updateValue();
  43. this.refreshState();
  44. } );
  45. }
  46. /**
  47. * Updates command's value.
  48. *
  49. * @private
  50. */
  51. _updateValue() {
  52. const doc = this.editor.document;
  53. const element = doc.selection.getSelectedElement();
  54. if ( !element ) {
  55. this.value = false;
  56. return;
  57. }
  58. if ( this.style.value === null ) {
  59. this.value = !element.hasAttribute( 'imageStyle' );
  60. } else {
  61. this.value = ( element.getAttribute( 'imageStyle' ) == this.style.value );
  62. }
  63. }
  64. /**
  65. * @inheritDoc
  66. */
  67. _checkEnabled() {
  68. const element = this.editor.document.selection.getSelectedElement();
  69. return isImage( element );
  70. }
  71. /**
  72. * Executes command.
  73. *
  74. * @protected
  75. * @param {Object} options
  76. * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. New batch will be
  77. * created if this option is not set.
  78. */
  79. _doExecute( options = {} ) {
  80. // Stop if style is already applied.
  81. if ( this.value ) {
  82. return;
  83. }
  84. const editor = this.editor;
  85. const doc = editor.document;
  86. const selection = doc.selection;
  87. const imageElement = selection.getSelectedElement();
  88. doc.enqueueChanges( () => {
  89. const batch = options.batch || doc.batch();
  90. batch.setAttribute( imageElement, 'imageStyle', this.style.value );
  91. } );
  92. }
  93. }