converters.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagestyle/converters
  7. */
  8. import { isImage, getStyleByValue } from './utils.js';
  9. /**
  10. * Returns converter for `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
  11. *
  12. * @param {Object} styles Object containing available styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat}
  13. * for more details.
  14. * @return {Function} Model to view attribute converter.
  15. */
  16. export function modelToViewSetStyle( styles ) {
  17. return ( evt, data, consumable, conversionApi ) => {
  18. const eventType = evt.name.split( ':' )[ 0 ];
  19. const consumableType = eventType + ':imageStyle';
  20. if ( !consumable.test( data.item, consumableType ) ) {
  21. return;
  22. }
  23. // Check if there is class name associated with given value.
  24. const newStyle = getStyleByValue( data.attributeNewValue, styles );
  25. const oldStyle = getStyleByValue( data.attributeOldValue, styles );
  26. const viewElement = conversionApi.mapper.toViewElement( data.item );
  27. if ( eventType == 'addAttribute' || eventType == 'changeAttribute' ) {
  28. if ( !newStyle ) {
  29. return;
  30. }
  31. viewElement.addClass( newStyle.className );
  32. }
  33. if ( eventType == 'changeAttribute' || eventType == 'removeAttribute' ) {
  34. if ( !oldStyle ) {
  35. return;
  36. }
  37. viewElement.removeClass( data.attributeOldValue );
  38. }
  39. consumable.consume( data.item, consumableType );
  40. };
  41. }
  42. /**
  43. * Returns view to model converter converting image style CSS class to proper value in the model.
  44. *
  45. * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style Style for which converter is created.
  46. * @return {Function} View to model converter.
  47. */
  48. export function viewToModelImageStyle( style ) {
  49. return ( evt, data, consumable, conversionApi ) => {
  50. const viewFigureElement = data.input;
  51. const modelImageElement = data.output;
  52. // *** Step 1: Validate conversion.
  53. // Check if view element has proper class to consume.
  54. if ( !consumable.test( viewFigureElement, { class: style.className } ) ) {
  55. return;
  56. }
  57. // Check if figure is converted to image.
  58. if ( !isImage( modelImageElement ) ) {
  59. return;
  60. }
  61. // Check if image element can be placed in current context wit additional attribute.
  62. const attributes = [ ...modelImageElement.getAttributeKeys(), 'imageStyle' ];
  63. if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes } ) ) {
  64. return;
  65. }
  66. // *** Step2: Convert to model.
  67. consumable.consume( viewFigureElement, { class: style.className } );
  68. modelImageElement.setAttribute( 'imageStyle', style.value );
  69. };
  70. }