8
0

background.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module engine/view/styles/background
  7. */
  8. import { isAttachment, isColor, isPosition, isRepeat, isURL } from './utils';
  9. /**
  10. * Adds a background CSS styles processing rules.
  11. *
  12. * editor.editing.view.document.addStyleProcessorRules( addBackgroundRules );
  13. *
  14. * The normalized value is stored as:
  15. *
  16. * const styles = {
  17. * background: {
  18. * color,
  19. * repeat,
  20. * position,
  21. * attachment,
  22. * image
  23. * }
  24. * };
  25. *
  26. * **Note**: Currently only `'background-color'` longhand value is parsed besides `'background'` shorthand. The reducer also supports only
  27. * `'background-color'` value.
  28. *
  29. * @param {module:engine/view/stylesmap~StylesProcessor} stylesProcessor
  30. */
  31. export function addBackgroundRules( stylesProcessor ) {
  32. stylesProcessor.setNormalizer( 'background', normalizeBackground );
  33. stylesProcessor.setNormalizer( 'background-color', value => ( { path: 'background.color', value } ) );
  34. stylesProcessor.setReducer( 'background', value => {
  35. const ret = [];
  36. ret.push( [ 'background-color', value.color ] );
  37. return ret;
  38. } );
  39. }
  40. function normalizeBackground( value ) {
  41. const background = {};
  42. const parts = value.split( ' ' );
  43. for ( const part of parts ) {
  44. if ( isRepeat( part ) ) {
  45. background.repeat = background.repeat || [];
  46. background.repeat.push( part );
  47. } else if ( isPosition( part ) ) {
  48. background.position = background.position || [];
  49. background.position.push( part );
  50. } else if ( isAttachment( part ) ) {
  51. background.attachment = part;
  52. } else if ( isColor( part ) ) {
  53. background.color = part;
  54. } else if ( isURL( part ) ) {
  55. background.image = part;
  56. }
  57. }
  58. return {
  59. path: 'background',
  60. value: background
  61. };
  62. }