utils.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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/utils
  7. */
  8. const colorRegExp = /^([#0-9A-Fa-f]{3,9}$|0$|rgba?\(|hsla?\(|[a-zA-Z]+$)/;
  9. /**
  10. * Checks if string contains [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS value.
  11. *
  12. * @param {String} string
  13. * @returns {Boolean}
  14. */
  15. export function isColor( string ) {
  16. return colorRegExp.test( string );
  17. }
  18. const lineStyleValues = [ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ];
  19. /**
  20. * Checks if string contains [line style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) CSS value.
  21. *
  22. * @param {String} string
  23. * @returns {Boolean}
  24. */
  25. export function isLineStyle( string ) {
  26. return lineStyleValues.includes( string );
  27. }
  28. const lengthRegExp = /^([+-]?[0-9]*[.]?[0-9]+([a-z]+|%)|0)$/;
  29. /**
  30. * Checks if string contains [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) CSS value.
  31. *
  32. * @param {String} string
  33. * @returns {Boolean}
  34. */
  35. export function isLength( string ) {
  36. return lengthRegExp.test( string );
  37. }
  38. const repeatValues = [ 'repeat-x', 'repeat-y', 'repeat', 'space', 'round', 'no-repeat' ];
  39. /**
  40. * Checks if string contains [background repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) CSS value.
  41. *
  42. * @param {String} string
  43. * @returns {Boolean}
  44. */
  45. export function isRepeat( string ) {
  46. return repeatValues.includes( string );
  47. }
  48. const positionValues = [ 'center', 'top', 'bottom', 'left', 'right' ];
  49. /**
  50. * Checks if string contains [background position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) CSS value.
  51. *
  52. * @param {String} string
  53. * @returns {Boolean}
  54. */
  55. export function isPosition( string ) {
  56. return positionValues.includes( string );
  57. }
  58. const attachmentValues = [ 'fixed', 'scroll', 'local' ];
  59. /**
  60. * Checks if string contains [background attachment](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment) CSS value.
  61. *
  62. * @param {String} string
  63. * @returns {Boolean}
  64. */
  65. export function isAttachment( string ) {
  66. return attachmentValues.includes( string );
  67. }
  68. const urlRegExp = /^url\(/;
  69. /**
  70. * Checks if string contains [URL](https://developer.mozilla.org/en-US/docs/Web/CSS/url) CSS value.
  71. *
  72. * @param {String} string
  73. * @returns {Boolean}
  74. */
  75. export function isURL( string ) {
  76. return urlRegExp.test( string );
  77. }
  78. export function getTopRightBottomLeftValues( value = '' ) {
  79. if ( value === '' ) {
  80. return { top: undefined, right: undefined, bottom: undefined, left: undefined };
  81. }
  82. const values = getShorthandValues( value );
  83. const top = values[ 0 ];
  84. const bottom = values[ 2 ] || top;
  85. const right = values[ 1 ] || top;
  86. const left = values[ 3 ] || right;
  87. return { top, bottom, right, left };
  88. }
  89. /**
  90. * Default reducer for CSS properties that concerns edges of a box
  91. * [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notations:
  92. *
  93. * stylesProcessor.setReducer( 'padding', getTopRightBottomLeftValueReducer( 'padding' ) );
  94. *
  95. * @param {String} styleShorthand
  96. * @returns {Function}
  97. */
  98. export function getTopRightBottomLeftValueReducer( styleShorthand ) {
  99. return value => {
  100. const { top, right, bottom, left } = value;
  101. const reduced = [];
  102. if ( ![ top, right, left, bottom ].every( value => !!value ) ) {
  103. if ( top ) {
  104. reduced.push( [ styleShorthand + '-top', top ] );
  105. }
  106. if ( right ) {
  107. reduced.push( [ styleShorthand + '-right', right ] );
  108. }
  109. if ( bottom ) {
  110. reduced.push( [ styleShorthand + '-bottom', bottom ] );
  111. }
  112. if ( left ) {
  113. reduced.push( [ styleShorthand + '-left', left ] );
  114. }
  115. } else {
  116. reduced.push( [ styleShorthand, getTopRightBottomLeftShorthandValue( value ) ] );
  117. }
  118. return reduced;
  119. };
  120. }
  121. /**
  122. * Returns a proper 1-to-4 value of a CSS [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) notation.
  123. *
  124. * getTopRightBottomLeftShorthandValue( { top: '1px', right: '1px', bottom: '2px', left: '1px' } );
  125. * // will return '1px 1px 2px'
  126. *
  127. * @param {String} styleShorthand
  128. * @returns {Function}
  129. */
  130. export function getTopRightBottomLeftShorthandValue( { top, right, bottom, left } ) {
  131. const out = [];
  132. if ( left !== right ) {
  133. out.push( top, right, bottom, left );
  134. } else if ( bottom !== top ) {
  135. out.push( top, right, bottom );
  136. } else if ( right !== top ) {
  137. out.push( top, right );
  138. } else {
  139. out.push( top );
  140. }
  141. return out.join( ' ' );
  142. }
  143. /**
  144. * Creates a normalizer for a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) 1-to-4 value.
  145. *
  146. * stylesProcessor.setNormalizer( 'margin', getPositionShorthandNormalizer( 'margin' ) );
  147. *
  148. * @param {String} shorthand
  149. * @returns {Function}
  150. */
  151. export function getPositionShorthandNormalizer( shorthand ) {
  152. return value => {
  153. return {
  154. path: shorthand,
  155. value: getTopRightBottomLeftValues( value )
  156. };
  157. };
  158. }
  159. /**
  160. * Parses parts of a 1-to-4 value notation - handles some CSS values with spaces (like RGB()).
  161. *
  162. * getShorthandValues( 'red blue RGB(0, 0, 0)');
  163. * // will return [ 'red', 'blue', 'RGB(0, 0, 0)' ]
  164. *
  165. * @param {String} string
  166. * @returns {Array.<String>}
  167. */
  168. export function getShorthandValues( string ) {
  169. return string
  170. .replace( /, /g, ',' ) // Exclude comma from spaces evaluation as values are separated by spaces.
  171. .split( ' ' )
  172. .map( string => string.replace( /,/g, ', ' ) ); // Restore original notation.
  173. }