diff --git a/src/components/table/Table.ts b/src/components/table/Table.ts index e081cab..e123196 100644 --- a/src/components/table/Table.ts +++ b/src/components/table/Table.ts @@ -1,10 +1,15 @@ +import { $ } from '../../core/dom'; import { ExcelComponent } from '../../core/ExcelComponent'; +import { isCell } from './table.functions'; +import { TableSelection } from './TableSelection'; import { createTable } from './table.template'; -import { resizeHandler } from './table.resize'; +import { resizeHandler } from './handlers/table.resize'; export class Table extends ExcelComponent { static className = 'excel__table'; + private selection: any; + constructor($root: any) { super($root, { name: 'Table', @@ -16,7 +21,23 @@ export class Table extends ExcelComponent { return createTable(50, 24); } + prepare() { + this.selection = new TableSelection(); + } + + init() { + super.init(); + + const $cell = this.$root.find('[data-id="0:0"]'); + this.selection.select($cell); + } + onMousedown(event: MouseEvent) { + if (isCell(event)) { + this.selection.select($(event.target as HTMLElement)); + return; + } + resizeHandler(this.$root, event); } } diff --git a/src/components/table/TableSelection.ts b/src/components/table/TableSelection.ts new file mode 100644 index 0000000..e0aa63c --- /dev/null +++ b/src/components/table/TableSelection.ts @@ -0,0 +1,25 @@ +import { Dom } from '../../core/dom'; + +export class TableSelection { + static selectedClassName = 'selected'; + private group: Dom[]; + + constructor() { + this.group = []; + } + + select($el: Dom) { + this.clearSelection(); + this.group = [$el]; + $el.addClass(TableSelection.selectedClassName); + } + + clearSelection() { + this.group.forEach(el => el.removeClass(TableSelection.selectedClassName)); + this.group = []; + } + + selectGroup() { + + } +} diff --git a/src/components/table/table.resize.ts b/src/components/table/handlers/table.resize.ts similarity index 97% rename from src/components/table/table.resize.ts rename to src/components/table/handlers/table.resize.ts index 0e6abb9..e23d751 100644 --- a/src/components/table/table.resize.ts +++ b/src/components/table/handlers/table.resize.ts @@ -1,4 +1,4 @@ -import { $, Dom } from '../../core/dom'; +import { $, Dom } from '../../../core/dom'; type CustomElementType = Element & { css: any }; diff --git a/src/components/table/table.functions.ts b/src/components/table/table.functions.ts index e69de29..ef9571f 100644 --- a/src/components/table/table.functions.ts +++ b/src/components/table/table.functions.ts @@ -0,0 +1,5 @@ +import { $ } from '../../core/dom'; + +export function isCell(event: Event): boolean { + return $(event.target as HTMLElement).data.type === 'cell'; +} diff --git a/src/components/table/table.template.ts b/src/components/table/table.template.ts index a2418a7..6ad5be1 100644 --- a/src/components/table/table.template.ts +++ b/src/components/table/table.template.ts @@ -3,9 +3,19 @@ const CODES = { Z: 90, }; -function createCell(cellContent = '', index = 1) { +function createCell(cellContent = '', colIndex = 1, rowIndex = 1) { return ` -