stylenormalizer.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import { parseInlineStyles } from '../../src/view/element';
  6. function parseStyle( string ) {
  7. const map = new Map();
  8. parseInlineStyles( map, string );
  9. const styleObject = {};
  10. for ( const key of map.keys() ) {
  11. const value = map.get( key );
  12. if ( key === 'border' ) {
  13. const parsedBorder = parseBorderAttribute( value );
  14. const border = {
  15. top: parsedBorder,
  16. right: parsedBorder,
  17. bottom: parsedBorder,
  18. left: parsedBorder
  19. };
  20. addStyle( styleObject, 'border', border );
  21. } else {
  22. const borderPositionRegExp = /border-(top|right|bottom|left)$/;
  23. if ( borderPositionRegExp.test( key ) ) {
  24. const border = {};
  25. const which = borderPositionRegExp.exec( key )[ 1 ];
  26. border[ which ] = parseBorderAttribute( value );
  27. addStyle( styleObject, 'border', border );
  28. } else {
  29. addStyle( styleObject, key, value );
  30. }
  31. }
  32. }
  33. return styleObject;
  34. }
  35. function parseBorderAttribute( string ) {
  36. const result = {};
  37. for ( const part of string.split( ' ' ) ) {
  38. if ( isLength( part ) ) {
  39. result.width = part;
  40. }
  41. if ( isLineStyle( part ) ) {
  42. result.style = part;
  43. }
  44. if ( isColor( part ) ) {
  45. result.color = part;
  46. }
  47. }
  48. return result;
  49. }
  50. function isColor( string ) {
  51. return /^([#0-9A-Fa-f]{3,8}|[a-zA-Z]+)$/.test( string ) && !isLineStyle( string );
  52. }
  53. function isLineStyle( string ) {
  54. return /^(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)$/.test( string );
  55. }
  56. function isLength( string ) {
  57. return /^[+-]?[0-9]?[.]?[0-9]+([a-z]+|%)$/.test( string );
  58. }
  59. function addStyle( styleObject, name, value ) {
  60. if ( typeof value === 'object' ) {
  61. styleObject[ name ] = Object.assign( {}, styleObject[ name ] || {}, value );
  62. } else {
  63. styleObject[ name ] = value;
  64. }
  65. }
  66. describe( 'Style normalizer', () => {
  67. it( 'should parse', () => {
  68. expect( parseStyle( 'border:1px solid blue;' ) ).to.deep.equal( {
  69. border: {
  70. bottom: {
  71. color: 'blue',
  72. style: 'solid',
  73. width: '1px'
  74. },
  75. left: {
  76. color: 'blue',
  77. style: 'solid',
  78. width: '1px'
  79. },
  80. right: {
  81. color: 'blue',
  82. style: 'solid',
  83. width: '1px'
  84. },
  85. top: {
  86. color: 'blue',
  87. style: 'solid',
  88. width: '1px'
  89. }
  90. }
  91. } );
  92. } );
  93. it( 'should parse', () => {
  94. expect( parseStyle( 'border:1px solid blue;border-left:#665511 dashed 2.7em;border-top:7px dotted #ccc;' ) ).to.deep.equal( {
  95. border: {
  96. bottom: {
  97. color: 'blue',
  98. style: 'solid',
  99. width: '1px'
  100. },
  101. left: {
  102. color: '#665511',
  103. style: 'dashed',
  104. width: '2.7em'
  105. },
  106. right: {
  107. color: 'blue',
  108. style: 'solid',
  109. width: '1px'
  110. },
  111. top: {
  112. color: '#ccc',
  113. style: 'dotted',
  114. width: '7px'
  115. }
  116. }
  117. } );
  118. } );
  119. } );