utils.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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 table/ui/utils
  7. */
  8. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  11. import Model from '@ckeditor/ckeditor5-ui/src/model';
  12. import { isColor, isLength } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
  13. import { getTableWidgetAncestor } from '../utils';
  14. import { findAncestor } from '../commands/utils';
  15. const DEFAULT_BALLOON_POSITIONS = BalloonPanelView.defaultPositions;
  16. const BALLOON_POSITIONS = [
  17. DEFAULT_BALLOON_POSITIONS.northArrowSouth,
  18. DEFAULT_BALLOON_POSITIONS.northArrowSouthWest,
  19. DEFAULT_BALLOON_POSITIONS.northArrowSouthEast,
  20. DEFAULT_BALLOON_POSITIONS.southArrowNorth,
  21. DEFAULT_BALLOON_POSITIONS.southArrowNorthWest,
  22. DEFAULT_BALLOON_POSITIONS.southArrowNorthEast
  23. ];
  24. const isEmpty = val => val === '';
  25. /**
  26. * A helper utility that positions the
  27. * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} instance
  28. * with respect to the table in the editor content, if one is selected.
  29. *
  30. * @param {module:core/editor/editor~Editor} editor The editor instance.
  31. * @param {String} target Either "cell" or "table". Determines the the target the balloon will
  32. * be attached to.
  33. */
  34. export function repositionContextualBalloon( editor, target ) {
  35. const balloon = editor.plugins.get( 'ContextualBalloon' );
  36. if ( getTableWidgetAncestor( editor.editing.view.document.selection ) ) {
  37. let position;
  38. if ( target === 'cell' ) {
  39. position = getBalloonCellPositionData( editor );
  40. } else {
  41. position = getBalloonTablePositionData( editor );
  42. }
  43. balloon.updatePosition( position );
  44. }
  45. }
  46. /**
  47. * Returns the positioning options that control the geometry of the
  48. * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  49. * to the selected table in the editor content.
  50. *
  51. * @param {module:core/editor/editor~Editor} editor The editor instance.
  52. * @returns {module:utils/dom/position~Options}
  53. */
  54. export function getBalloonTablePositionData( editor ) {
  55. const firstPosition = editor.model.document.selection.getFirstPosition();
  56. const modelTable = findAncestor( 'table', firstPosition );
  57. const viewTable = editor.editing.mapper.toViewElement( modelTable );
  58. return {
  59. target: editor.editing.view.domConverter.viewToDom( viewTable ),
  60. positions: BALLOON_POSITIONS
  61. };
  62. }
  63. /**
  64. * Returns the positioning options that control the geometry of the
  65. * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon} with respect
  66. * to the selected table cell in the editor content.
  67. *
  68. * @param {module:core/editor/editor~Editor} editor The editor instance.
  69. * @returns {module:utils/dom/position~Options}
  70. */
  71. export function getBalloonCellPositionData( editor ) {
  72. const firstPosition = editor.model.document.selection.getFirstPosition();
  73. const modelTableCell = findAncestor( 'tableCell', firstPosition );
  74. const viewTableCell = editor.editing.mapper.toViewElement( modelTableCell );
  75. return {
  76. target: editor.editing.view.domConverter.viewToDom( viewTableCell ),
  77. positions: BALLOON_POSITIONS
  78. };
  79. }
  80. /**
  81. * Returns an object containing pairs of CSS border style values and their localized UI
  82. * labels. Used by {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView}
  83. * and {@link module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}.
  84. *
  85. * @param {module:utils/locale~Locale#t} t The "t" function provided by the editor
  86. * that is used to localize strings.
  87. * @returns {Object.<String,String>}
  88. */
  89. export function getBorderStyleLabels( t ) {
  90. return {
  91. none: t( 'None' ),
  92. solid: t( 'Solid' ),
  93. dotted: t( 'Dotted' ),
  94. dashed: t( 'Dashed' ),
  95. double: t( 'Double' ),
  96. groove: t( 'Groove' ),
  97. ridge: t( 'Ridge' ),
  98. inset: t( 'Inset' ),
  99. outset: t( 'Outset' ),
  100. };
  101. }
  102. /**
  103. * Returns a localized error string that can be displayed next to color (background, border)
  104. * fields that have an invalid value.
  105. *
  106. * @param {module:utils/locale~Locale#t} t The "t" function provided by the editor
  107. * that is used to localize strings.
  108. * @returns {String}
  109. */
  110. export function getLocalizedColorErrorText( t ) {
  111. return t( 'The color is invalid. Try "#FF0000" or "rgb(255,0,0)" or "red".' );
  112. }
  113. /**
  114. * Returns a localized error string that can be displayed next to length (padding, border width)
  115. * fields that have an invalid value.
  116. *
  117. * @param {module:utils/locale~Locale#t} t The "t" function provided by the editor
  118. * that is used to localize strings.
  119. * @returns {String}
  120. */
  121. export function getLocalizedLengthErrorText( t ) {
  122. return t( 'The value is invalid. Try "10px" or "2em" or simply "2".' );
  123. }
  124. /**
  125. * Returns `true` when the passed value is an empty string or a valid CSS color expression.
  126. * Otherwise, `false` is returned.
  127. *
  128. * See {@link module:engine/view/styles/utils~isColor}.
  129. *
  130. * @param {String} value
  131. * @returns {Boolean}
  132. */
  133. export function colorFieldValidator( value ) {
  134. value = value.trim();
  135. return isEmpty( value ) || isColor( value );
  136. }
  137. /**
  138. * Returns `true` when the passed value is an empty string or a valid CSS length expression.
  139. * Otherwise, `false` is returned.
  140. *
  141. * See {@link module:engine/view/styles/utils~isLength}.
  142. *
  143. * @param {String} value
  144. * @returns {Boolean}
  145. */
  146. export function lengthFieldValidator( value ) {
  147. value = value.trim();
  148. return isEmpty( value ) || isLength( value );
  149. }
  150. /**
  151. * Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.
  152. *
  153. * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
  154. * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView}
  155. * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
  156. */
  157. export function getBorderStyleDefinitions( view ) {
  158. const itemDefinitions = new Collection();
  159. const styleLabels = getBorderStyleLabels( view.t );
  160. for ( const style in styleLabels ) {
  161. const definition = {
  162. type: 'button',
  163. model: new Model( {
  164. _borderStyleValue: style,
  165. label: styleLabels[ style ],
  166. withText: true,
  167. } )
  168. };
  169. definition.model.bind( 'isOn' ).to( view, 'borderStyle', value => {
  170. return value === style;
  171. } );
  172. itemDefinitions.add( definition );
  173. }
  174. return itemDefinitions;
  175. }
  176. /**
  177. * A helper that fills a toolbar toolbar with buttons that:
  178. *
  179. * * have some labels,
  180. * * have some icons,
  181. * * set a certain UI view property value upon execution.
  182. *
  183. * @param {Object} options
  184. * @param {module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView|
  185. * module:table/tableproperties/ui/tablepropertiesview~TablePropertiesView} options.view
  186. * @param {Array.<String>} options.icons
  187. * @param {module:ui/toolbar/toolbarview~ToolbarView} options.toolbar
  188. * @param {Object.<String,String>} labels
  189. * @param {String} propertyName
  190. */
  191. export function fillToolbar( { view, icons, toolbar, labels, propertyName } ) {
  192. for ( const name in labels ) {
  193. const button = new ButtonView( view.locale );
  194. button.set( {
  195. label: labels[ name ],
  196. icon: icons[ name ],
  197. } );
  198. button.bind( 'isOn' ).to( view, propertyName, value => {
  199. return value === name;
  200. } );
  201. button.on( 'execute', () => {
  202. view[ propertyName ] = name;
  203. } );
  204. toolbar.items.add( button );
  205. }
  206. }