borderstyles.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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 { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
  6. /**
  7. * @module engine/view/styles/borderstyle
  8. */
  9. export function addBorderStylesProcessor( stylesProcessor ) {
  10. stylesProcessor.on( 'normalize:border', borderNormalizer );
  11. // Border-position shorthands.
  12. stylesProcessor.on( 'normalize:border-top', getBorderPositionNormalizer( 'top' ) );
  13. stylesProcessor.on( 'normalize:border-right', getBorderPositionNormalizer( 'right' ) );
  14. stylesProcessor.on( 'normalize:border-bottom', getBorderPositionNormalizer( 'bottom' ) );
  15. stylesProcessor.on( 'normalize:border-left', getBorderPositionNormalizer( 'left' ) );
  16. // Border-property shorthands.
  17. stylesProcessor.on( 'normalize:border-color', getBorderPropertyNormalizer( 'color' ) );
  18. stylesProcessor.on( 'normalize:border-width', getBorderPropertyNormalizer( 'width' ) );
  19. stylesProcessor.on( 'normalize:border-style', getBorderPropertyNormalizer( 'style' ) );
  20. // Border longhands.
  21. stylesProcessor.on( 'normalize:border-top-color', getBorderPropertyPositionNormalizer( 'color', 'top' ) );
  22. stylesProcessor.on( 'normalize:border-top-style', getBorderPropertyPositionNormalizer( 'style', 'top' ) );
  23. stylesProcessor.on( 'normalize:border-top-width', getBorderPropertyPositionNormalizer( 'width', 'top' ) );
  24. stylesProcessor.on( 'normalize:border-right-color', getBorderPropertyPositionNormalizer( 'color', 'right' ) );
  25. stylesProcessor.on( 'normalize:border-right-style', getBorderPropertyPositionNormalizer( 'style', 'right' ) );
  26. stylesProcessor.on( 'normalize:border-right-width', getBorderPropertyPositionNormalizer( 'width', 'right' ) );
  27. stylesProcessor.on( 'normalize:border-bottom-color', getBorderPropertyPositionNormalizer( 'color', 'bottom' ) );
  28. stylesProcessor.on( 'normalize:border-bottom-style', getBorderPropertyPositionNormalizer( 'style', 'bottom' ) );
  29. stylesProcessor.on( 'normalize:border-bottom-width', getBorderPropertyPositionNormalizer( 'width', 'bottom' ) );
  30. stylesProcessor.on( 'normalize:border-left-color', getBorderPropertyPositionNormalizer( 'color', 'left' ) );
  31. stylesProcessor.on( 'normalize:border-left-style', getBorderPropertyPositionNormalizer( 'style', 'left' ) );
  32. stylesProcessor.on( 'normalize:border-left-width', getBorderPropertyPositionNormalizer( 'width', 'left' ) );
  33. stylesProcessor.on( 'extract:border-top', getBorderPositionExtractor( 'top' ) );
  34. stylesProcessor.on( 'extract:border-right', getBorderPositionExtractor( 'right' ) );
  35. stylesProcessor.on( 'extract:border-bottom', getBorderPositionExtractor( 'bottom' ) );
  36. stylesProcessor.on( 'extract:border-left', getBorderPositionExtractor( 'left' ) );
  37. stylesProcessor.on( 'extract:border-top-color', ( evt, data ) => ( data.path = 'border.color.top' ) );
  38. stylesProcessor.on( 'extract:border-right-color', ( evt, data ) => ( data.path = 'border.color.right' ) );
  39. stylesProcessor.on( 'extract:border-bottom-color', ( evt, data ) => ( data.path = 'border.color.bottom' ) );
  40. stylesProcessor.on( 'extract:border-left-color', ( evt, data ) => ( data.path = 'border.color.left' ) );
  41. stylesProcessor.on( 'extract:border-top-width', ( evt, data ) => ( data.path = 'border.width.top' ) );
  42. stylesProcessor.on( 'extract:border-right-width', ( evt, data ) => ( data.path = 'border.width.right' ) );
  43. stylesProcessor.on( 'extract:border-bottom-width', ( evt, data ) => ( data.path = 'border.width.bottom' ) );
  44. stylesProcessor.on( 'extract:border-left-width', ( evt, data ) => ( data.path = 'border.width.left' ) );
  45. stylesProcessor.on( 'extract:border-top-style', ( evt, data ) => ( data.path = 'border.style.top' ) );
  46. stylesProcessor.on( 'extract:border-right-style', ( evt, data ) => ( data.path = 'border.style.right' ) );
  47. stylesProcessor.on( 'extract:border-bottom-style', ( evt, data ) => ( data.path = 'border.style.bottom' ) );
  48. stylesProcessor.on( 'extract:border-left-style', ( evt, data ) => ( data.path = 'border.style.left' ) );
  49. stylesProcessor.on( 'reduce:border-color', getTopRightBottomLeftValueReducer( 'border-color' ) );
  50. stylesProcessor.on( 'reduce:border-style', getTopRightBottomLeftValueReducer( 'border-style' ) );
  51. stylesProcessor.on( 'reduce:border-width', getTopRightBottomLeftValueReducer( 'border-width' ) );
  52. stylesProcessor.on( 'reduce:border-top', getBorderPositionReducer( 'top' ) );
  53. stylesProcessor.on( 'reduce:border-right', getBorderPositionReducer( 'right' ) );
  54. stylesProcessor.on( 'reduce:border-bottom', getBorderPositionReducer( 'bottom' ) );
  55. stylesProcessor.on( 'reduce:border-left', getBorderPositionReducer( 'left' ) );
  56. stylesProcessor.on( 'reduce:border', borderReducer );
  57. }
  58. function borderNormalizer( evt, data ) {
  59. const { color, style, width } = normalizeBorderShorthand( data.value );
  60. data.path = 'border';
  61. data.value = {
  62. color: getTopRightBottomLeftValues( color ),
  63. style: getTopRightBottomLeftValues( style ),
  64. width: getTopRightBottomLeftValues( width )
  65. };
  66. }
  67. function getBorderPositionNormalizer( side ) {
  68. return ( evt, data ) => {
  69. const { color, style, width } = normalizeBorderShorthand( data.value );
  70. const border = {};
  71. if ( color !== undefined ) {
  72. border.color = { [ side ]: color };
  73. }
  74. if ( style !== undefined ) {
  75. border.style = { [ side ]: style };
  76. }
  77. if ( width !== undefined ) {
  78. border.width = { [ side ]: width };
  79. }
  80. data.path = 'border';
  81. data.value = border;
  82. };
  83. }
  84. function getBorderPropertyNormalizer( propertyName ) {
  85. return ( evt, data ) => {
  86. data.path = 'border';
  87. data.value = toBorderPropertyShorthand( data.value, propertyName );
  88. };
  89. }
  90. function toBorderPropertyShorthand( value, property ) {
  91. return {
  92. [ property ]: getTopRightBottomLeftValues( value )
  93. };
  94. }
  95. function getBorderPropertyPositionNormalizer( property, side ) {
  96. return ( evt, data ) => {
  97. data.path = 'border';
  98. data.value = {
  99. [ property ]: {
  100. [ side ]: data.value
  101. }
  102. };
  103. };
  104. }
  105. function getBorderPositionExtractor( which ) {
  106. return ( evt, data ) => {
  107. if ( data.styles.border ) {
  108. data.value = extractBorderPosition( data.styles.border, which, data );
  109. }
  110. };
  111. }
  112. function extractBorderPosition( border, which ) {
  113. const value = {};
  114. if ( border.width && border.width[ which ] ) {
  115. value.width = border.width[ which ];
  116. }
  117. if ( border.style && border.style[ which ] ) {
  118. value.style = border.style[ which ];
  119. }
  120. if ( border.color && border.color[ which ] ) {
  121. value.color = border.color[ which ];
  122. }
  123. return value;
  124. }
  125. function normalizeBorderShorthand( string ) {
  126. const result = {};
  127. const parts = getShorthandValues( string );
  128. for ( const part of parts ) {
  129. if ( isLength( part ) || /thin|medium|thick/.test( part ) ) {
  130. result.width = part;
  131. } else if ( isLineStyle( part ) ) {
  132. result.style = part;
  133. } else {
  134. result.color = part;
  135. }
  136. }
  137. return result;
  138. }
  139. function borderReducer( evt, data ) {
  140. const ret = [];
  141. ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'top' ), 'top' ) );
  142. ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'right' ), 'right' ) );
  143. ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'bottom' ), 'bottom' ) );
  144. ret.push( ...reduceBorderPosition( extractBorderPosition( data.value, 'left' ), 'left' ) );
  145. data.reduced = ret;
  146. }
  147. function getBorderPositionReducer( which ) {
  148. return ( evt, data ) => ( data.reduced = reduceBorderPosition( data.value, which ) );
  149. }
  150. function reduceBorderPosition( value, which ) {
  151. const reduced = [];
  152. if ( value && value.width !== undefined ) {
  153. reduced.push( value.width );
  154. }
  155. if ( value && value.style !== undefined ) {
  156. reduced.push( value.style );
  157. }
  158. if ( value && value.color !== undefined ) {
  159. reduced.push( value.color );
  160. }
  161. if ( reduced.length ) {
  162. return [ [ `border-${ which }`, reduced.join( ' ' ) ] ];
  163. }
  164. return [];
  165. }