inserttableview.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module table/ui/inserttableview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import './../../theme/inserttable.css';
  10. /**
  11. * The table size view.
  12. *
  13. * It renders a 10x10 grid to choose inserted table size.
  14. *
  15. * @extends module:ui/view~View
  16. */
  17. export default class InsertTableView extends View {
  18. /**
  19. * @inheritDoc
  20. */
  21. constructor( locale ) {
  22. super( locale );
  23. const bind = this.bindTemplate;
  24. /**
  25. * Collection of the table size box items.
  26. *
  27. * @readonly
  28. * @member {module:ui/viewcollection~ViewCollection}
  29. */
  30. this.items = this.createCollection();
  31. /**
  32. * Currently selected number of rows of a new table.
  33. *
  34. * @observable
  35. * @member {Number} #rows
  36. */
  37. this.set( 'rows', 0 );
  38. /**
  39. * Currently selected number of columns of a new table.
  40. *
  41. * @observable
  42. * @member {Number} #columns
  43. */
  44. this.set( 'columns', 0 );
  45. /**
  46. * The label text displayed under the boxes.
  47. *
  48. * @observable
  49. * @member {String} #label
  50. */
  51. this.bind( 'label' )
  52. .to( this, 'columns', this, 'rows', ( columns, rows ) => `${ rows } x ${ columns }` );
  53. this.setTemplate( {
  54. tag: 'div',
  55. attributes: {
  56. class: [ 'ck' ]
  57. },
  58. children: [
  59. {
  60. tag: 'div',
  61. attributes: {
  62. class: [ 'ck-insert-table-dropdown__grid' ]
  63. },
  64. children: this.items
  65. },
  66. {
  67. tag: 'div',
  68. attributes: {
  69. class: [ 'ck-insert-table-dropdown__label' ]
  70. },
  71. children: [
  72. {
  73. text: bind.to( 'label' )
  74. }
  75. ]
  76. }
  77. ],
  78. on: {
  79. mousedown: bind.to( evt => {
  80. evt.preventDefault();
  81. } ),
  82. click: bind.to( () => {
  83. this.fire( 'execute' );
  84. } )
  85. }
  86. } );
  87. // Add grid boxes to table selection view.
  88. for ( let index = 0; index < 100; index++ ) {
  89. const boxView = new TableSizeGridBoxView();
  90. // Listen to box view 'over' event which indicates that mouse is over this box.
  91. boxView.on( 'over', () => {
  92. // Translate box index to the row & column index.
  93. const row = Math.floor( index / 10 );
  94. const column = index % 10;
  95. // As row & column indexes are zero-based transform it to number of selected rows & columns.
  96. this.set( 'rows', row + 1 );
  97. this.set( 'columns', column + 1 );
  98. } );
  99. this.items.add( boxView );
  100. }
  101. this.on( 'change:columns', () => {
  102. this._highlightGridBoxes();
  103. } );
  104. this.on( 'change:rows', () => {
  105. this._highlightGridBoxes();
  106. } );
  107. }
  108. /**
  109. * Highlights grid boxes depending on rows & columns selected.
  110. *
  111. * @private
  112. */
  113. _highlightGridBoxes() {
  114. const rows = this.rows;
  115. const columns = this.columns;
  116. this.items.map( ( boxView, index ) => {
  117. // Translate box index to the row & column index.
  118. const itemRow = Math.floor( index / 10 );
  119. const itemColumn = index % 10;
  120. // Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
  121. const isOn = itemRow < rows && itemColumn < columns;
  122. boxView.set( 'isOn', isOn );
  123. } );
  124. }
  125. }
  126. /**
  127. * A single grid box view element.
  128. *
  129. * This class is used to render table size selection grid in {@link module:table/ui/inserttableview~InsertTableView}
  130. *
  131. * @private
  132. */
  133. class TableSizeGridBoxView extends View {
  134. /**
  135. * @inheritDoc
  136. */
  137. constructor( locale ) {
  138. super( locale );
  139. const bind = this.bindTemplate;
  140. /**
  141. * Controls whether the grid box view is "on".
  142. *
  143. * @observable
  144. * @member {Boolean} #isOn
  145. */
  146. this.set( 'isOn', false );
  147. this.setTemplate( {
  148. tag: 'div',
  149. attributes: {
  150. class: [
  151. 'ck-insert-table-dropdown-grid-box',
  152. bind.if( 'isOn', 'ck-on' )
  153. ]
  154. },
  155. on: {
  156. mouseover: bind.to( 'over' )
  157. }
  158. } );
  159. }
  160. }