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 ` -
${cellContent}
+
+ ${cellContent} +
+ `; } @@ -42,12 +52,13 @@ export function createTable(rowsCount = 10, columnCount = 10) { rows.push(createRow(cols, '', false)); - for (let i = 0; i < rowsCount; i++) { + for (let row = 0; row < rowsCount; row++) { const cells = new Array(colsCount) .fill('') - .map((el, index) => createCell('', index)) + .map((el, index) => createCell('', index, row)) .join(''); - rows.push(createRow(cells, `${i + 1}`)); + + rows.push(createRow(cells, `${row + 1}`)); } return rows.join(''); diff --git a/src/core/ExcelComponent.ts b/src/core/ExcelComponent.ts index 9c9a987..bf56c46 100644 --- a/src/core/ExcelComponent.ts +++ b/src/core/ExcelComponent.ts @@ -2,6 +2,7 @@ import { DomListener } from './DomListener'; interface ExcelComponentClass { toHTML: () => string; + prepare: () => void; } type OptionsType = { @@ -15,6 +16,12 @@ export class ExcelComponent extends DomListener implements ExcelComponentClass { constructor($root: any, options: OptionsType) { super($root, options?.listeners); this.name = options?.name; + + this.prepare(); + } + + prepare() { + } toHTML() { diff --git a/src/core/dom.ts b/src/core/dom.ts index e8f4807..c98804e 100644 --- a/src/core/dom.ts +++ b/src/core/dom.ts @@ -65,6 +65,10 @@ export class Dom implements DomClass { return this.$el.getBoundingClientRect(); } + find(selector: string): Dom { + return $(this.$el.querySelector(selector) as HTMLElement); + } + findAll(selector: string) { return this.$el.querySelectorAll(selector); } @@ -74,6 +78,14 @@ export class Dom implements DomClass { this.$el.style[key] = styles[key]; }); } + + addClass(className: string) { + this.$el.classList.add(className); + } + + removeClass(className: string) { + this.$el.classList.remove(className); + } } export function $(selector: SelectorType) {