8
0

tablecellpropertiesui.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  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. /**
  6. * @module table/tablecellpropertiesui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import { getTableWidgetAncestor } from './utils';
  11. import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
  12. import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
  13. import TableCellPropertiesView from './ui/tablecellpropertiesview';
  14. import tableCellProperties from './../theme/icons/table-cell-properties.svg';
  15. import { repositionContextualBalloon, getBalloonCellPositionData } from './ui/utils';
  16. import { findAncestor } from './commands/utils';
  17. const DEFAULT_BORDER_STYLE = 'none';
  18. const DEFAULT_HORIZONTAL_ALIGNMENT = 'left';
  19. const DEFAULT_VERTICAL_ALIGNMENT = 'middle';
  20. // Attributes that set the same value for "top", "right", "bottom", and "left".
  21. const QUAD_DIRECTION_ATTRIBUTES = [ 'borderStyle', 'borderWidth', 'borderColor', 'padding' ];
  22. /**
  23. * The table cell properties UI plugin. It introduces the `'tableCellProperties'` button
  24. * that opens a form allowing to specify visual styling of a table cell.
  25. *
  26. * It uses the
  27. * {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  28. *
  29. * @extends module:core/plugin~Plugin
  30. */
  31. export default class TableCellPropertiesUI extends Plugin {
  32. /**
  33. * @inheritDoc
  34. */
  35. static get requires() {
  36. return [ ContextualBalloon ];
  37. }
  38. /**
  39. * @inheritDoc
  40. */
  41. static get pluginName() {
  42. return 'TableCellPropertiesUI';
  43. }
  44. /**
  45. * @inheritDoc
  46. */
  47. init() {
  48. const editor = this.editor;
  49. const t = editor.t;
  50. /**
  51. * The contextual balloon plugin instance.
  52. *
  53. * @private
  54. * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
  55. */
  56. this._balloon = editor.plugins.get( ContextualBalloon );
  57. /**
  58. * The properties form view displayed inside the balloon.
  59. *
  60. * @member {module:table/ui/tablecellpropertiesview~TableCellPropertiesView}
  61. */
  62. this.view = this._createPropertiesView();
  63. /**
  64. * The batch used to undo all changes made by the form (which are live, as the user types)
  65. * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
  66. *
  67. * @private
  68. * @member {module:engine/model/batch~Batch}
  69. */
  70. this._batch = null;
  71. // Make the form dynamic, i.e. create bindings between view fields and the model.
  72. this._startRespondingToChangesInView();
  73. editor.ui.componentFactory.add( 'tableCellProperties', locale => {
  74. const view = new ButtonView( locale );
  75. view.set( {
  76. label: t( 'Cell properties' ),
  77. icon: tableCellProperties,
  78. tooltip: true
  79. } );
  80. this.listenTo( view, 'execute', () => this._showView() );
  81. return view;
  82. } );
  83. }
  84. /**
  85. * @inheritDoc
  86. */
  87. destroy() {
  88. super.destroy();
  89. // Destroy created UI components as they are not automatically destroyed.
  90. // See https://github.com/ckeditor/ckeditor5/issues/1341.
  91. this.view.destroy();
  92. }
  93. /**
  94. * Creates the {@link module:table/ui/tablecellpropertiesview~TableCellPropertiesView} instance.
  95. *
  96. * @private
  97. * @returns {module:table/ui/tablecellpropertiesview~TableCellPropertiesView} The cell properties form
  98. * view instance.
  99. */
  100. _createPropertiesView() {
  101. const editor = this.editor;
  102. const viewDocument = editor.editing.view.document;
  103. const view = new TableCellPropertiesView( editor.locale );
  104. // Render the view so its #element is available for the clickOutsideHandler.
  105. view.render();
  106. this.listenTo( view, 'submit', () => {
  107. this._hideView();
  108. } );
  109. this.listenTo( view, 'cancel', () => {
  110. editor.execute( 'undo', this._batch );
  111. this._hideView();
  112. } );
  113. // Close the balloon on Esc key press when the **form has focus**.
  114. view.keystrokes.set( 'Esc', ( data, cancel ) => {
  115. this._hideView();
  116. cancel();
  117. } );
  118. // Reposition the balloon or hide the form if an image widget is no longer selected.
  119. this.listenTo( editor.ui, 'update', () => {
  120. if ( !getTableWidgetAncestor( viewDocument.selection ) ) {
  121. this._hideView();
  122. } else if ( this._isViewVisible ) {
  123. repositionContextualBalloon( editor );
  124. }
  125. } );
  126. // Close on click outside of balloon panel element.
  127. clickOutsideHandler( {
  128. emitter: view,
  129. activator: () => this._isViewInBalloon,
  130. contextElements: [ this._balloon.view.element ],
  131. callback: () => this._hideView()
  132. } );
  133. return view;
  134. }
  135. /**
  136. * In this method the UI -> editor data binding is registered.
  137. *
  138. * Registers a listener that updates the editor model when any observable property of
  139. * the {@link #view} has changed. This makes the view live, which means the changes are
  140. * visible in the editing as soon as the user types or changes fields' values.
  141. *
  142. * @private
  143. */
  144. _startRespondingToChangesInView() {
  145. const editor = this.editor;
  146. const model = editor.model;
  147. const document = model.document;
  148. const selection = document.selection;
  149. this.view.on( 'change', ( evt, property, value ) => {
  150. const firstPosition = selection.getFirstPosition();
  151. const tableCell = findAncestor( 'tableCell', firstPosition );
  152. // Enqueue all changes into a single batch so clicking "Cancel" can undo them
  153. // as a single undo steps. It's a better UX than dozens of undo steps, e.g. each
  154. // for a single value change.
  155. editor.model.enqueueChange( this._batch, writer => {
  156. if ( QUAD_DIRECTION_ATTRIBUTES.includes( property ) ) {
  157. writer.setAttribute( property, {
  158. top: value,
  159. right: value,
  160. bottom: value,
  161. left: value
  162. }, tableCell );
  163. } else {
  164. writer.setAttribute( property, value, tableCell );
  165. }
  166. } );
  167. } );
  168. }
  169. /**
  170. * In this method the editor data -> UI binding is created.
  171. *
  172. * When executed, this method obtains the value attribute values of the cell the selection is anchored
  173. * to and passed them to the {@link #view}. This way, the UI stays up–to–date with the editor data.
  174. *
  175. * @private
  176. */
  177. _fillViewFormFromSelectedCell() {
  178. const editor = this.editor;
  179. const model = editor.model;
  180. const document = model.document;
  181. const selection = document.selection;
  182. const firstPosition = selection.getFirstPosition();
  183. const tableCell = findAncestor( 'tableCell', firstPosition );
  184. const borderWidth = unifyQuadDirectionPropertyValue( tableCell.getAttribute( 'borderWidth' ) ) || '';
  185. const borderColor = unifyQuadDirectionPropertyValue( tableCell.getAttribute( 'borderColor' ) ) || '';
  186. const borderStyle = unifyQuadDirectionPropertyValue( tableCell.getAttribute( 'borderStyle' ) ) || DEFAULT_BORDER_STYLE;
  187. const padding = unifyQuadDirectionPropertyValue( tableCell.getAttribute( 'padding' ) ) || '';
  188. const backgroundColor = tableCell.getAttribute( 'backgroundColor' ) || '';
  189. const horizontalAlignment = tableCell.getAttribute( 'horizontalAlignment' ) || DEFAULT_HORIZONTAL_ALIGNMENT;
  190. const verticalAlignment = tableCell.getAttribute( 'verticalAlignment' ) || DEFAULT_VERTICAL_ALIGNMENT;
  191. this.view.set( {
  192. borderWidth,
  193. borderColor,
  194. borderStyle,
  195. padding,
  196. backgroundColor,
  197. horizontalAlignment,
  198. verticalAlignment
  199. } );
  200. }
  201. /**
  202. * Shows the {@link #view} in the {@link #_balloon}.
  203. *
  204. * **Note**: Each time a view is shown, the new {@link #_batch} is created that contains
  205. * all changes made to the document when the view is visible, allowing a single undo step
  206. * for all of them.
  207. *
  208. * @private
  209. */
  210. _showView() {
  211. if ( this._isViewVisible ) {
  212. return;
  213. }
  214. const editor = this.editor;
  215. if ( !this._isViewInBalloon ) {
  216. this._balloon.add( {
  217. view: this.view,
  218. position: getBalloonCellPositionData( editor )
  219. } );
  220. }
  221. // Create a new batch. Clicking "Cancel" will undo this batch.
  222. this._batch = editor.model.createBatch();
  223. // Update the view with the model values.
  224. this._fillViewFormFromSelectedCell();
  225. // Basic a11y.
  226. this.view.focus();
  227. }
  228. /**
  229. * Removes the {@link #view} from the {@link #_balloon}.
  230. *
  231. * @private
  232. */
  233. _hideView() {
  234. if ( !this._isViewInBalloon ) {
  235. return;
  236. }
  237. const editor = this.editor;
  238. this.stopListening( editor.ui, 'update' );
  239. this.stopListening( this._balloon, 'change:visibleView' );
  240. // Make sure the focus always gets back to the editable _before_ removing the focused properties view.
  241. // Doing otherwise causes issues in some browsers. See https://github.com/ckeditor/ckeditor5-link/issues/193.
  242. editor.editing.view.focus();
  243. if ( this._isViewInBalloon ) {
  244. // Blur any input element before removing it from DOM to prevent issues in some browsers.
  245. // See https://github.com/ckeditor/ckeditor5/issues/1501.
  246. this.view.saveButtonView.focus();
  247. this._balloon.remove( this.view );
  248. // Because the form has an input which has focus, the focus must be brought back
  249. // to the editor. Otherwise, it would be lost.
  250. this.editor.editing.view.focus();
  251. }
  252. }
  253. /**
  254. * Returns `true` when the {@link #view} is the visible in the {@link #_balloon}.
  255. *
  256. * @private
  257. * @type {Boolean}
  258. */
  259. get _isViewVisible() {
  260. return this._balloon.visibleView === this.view;
  261. }
  262. /**
  263. * Returns `true` when the {@link #view} is in the {@link #_balloon}.
  264. *
  265. * @private
  266. * @type {Boolean}
  267. */
  268. get _isViewInBalloon() {
  269. return this._balloon.hasView( this.view );
  270. }
  271. }
  272. function unifyQuadDirectionPropertyValue( value ) {
  273. if ( !value ) {
  274. return;
  275. }
  276. // Unify to one value. If different values are set default to top (or right, etc).
  277. for ( const prop in value ) {
  278. if ( value[ prop ] && value[ prop ] !== 'none' ) {
  279. return value[ prop ];
  280. }
  281. }
  282. }