8
0
Просмотр исходного кода

Docs: Update InsertTableView docs.

Maciej Gołaszewski 7 лет назад
Родитель
Сommit
8ed9287cb1
1 измененных файлов с 37 добавлено и 19 удалено
  1. 37 19
      packages/ckeditor5-table/src/ui/inserttableview.js

+ 37 - 19
packages/ckeditor5-table/src/ui/inserttableview.js

@@ -94,57 +94,75 @@ export default class InsertTableView extends View {
 			}
 		} );
 
-		for ( let i = 0; i < 100; i++ ) {
-			const view = new TableSizeChooser();
+		// Add grid boxes to table selection view.
+		for ( let index = 0; index < 100; index++ ) {
+			const boxView = new TableSizeGridBoxView();
 
-			view.on( 'over', () => {
-				const row = parseInt( i / 10 );
-				const column = i % 10;
+			// Listen to box view 'over' event which indicates that mouse is over this box.
+			boxView.on( 'over', () => {
+				// Translate box index to the row & column index.
+				const row = parseInt( index / 10 );
+				const column = index % 10;
 
+				// As row & column indexes are zero-based transform it to number of selected rows & columns.
 				this.set( 'rows', row + 1 );
 				this.set( 'columns', column + 1 );
 			} );
 
-			this.items.add( view );
+			this.items.add( boxView );
 		}
 
 		this.on( 'change:columns', () => {
-			this._updateItems();
+			this._highlightGridBoxes();
 		} );
 
 		this.on( 'change:rows', () => {
-			this._updateItems();
+			this._highlightGridBoxes();
 		} );
 	}
 
 	/**
-	 * Enables current table size selection depending on rows & columns set.
+	 * Highlights grid boxes depending on rows & columns selected.
 	 *
 	 * @private
 	 */
-	_updateItems() {
-		const row = this.rows - 1;
-		const column = this.columns - 1;
+	_highlightGridBoxes() {
+		const rows = this.rows;
+		const columns = this.columns;
 
-		this.items.map( ( item, index ) => {
+		this.items.map( ( boxView, index ) => {
+			// Translate box index to the row & column index.
 			const itemRow = parseInt( index / 10 );
 			const itemColumn = index % 10;
 
-			if ( itemRow <= row && itemColumn <= column ) {
-				item.set( 'isOn', true );
-			} else {
-				item.set( 'isOn', false );
-			}
+			// Grid box is highlighted when its row & column index belongs to selected number of rows & columns.
+			const isOn = itemRow < rows && itemColumn < columns;
+
+			boxView.set( 'isOn', isOn );
 		} );
 	}
 }
 
-class TableSizeChooser extends View {
+/**
+ * Single grid box view element.
+ *
+ * @private
+ */
+class TableSizeGridBoxView extends View {
+	/**
+	 * @inheritDoc
+	 */
 	constructor( locale ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
 
+		/**
+		 * Controls whether the grid box view is "on".
+		 *
+		 * @observable
+		 * @member {Boolean} #isOn
+		 */
 		this.set( 'isOn', false );
 
 		this.setTemplate( {