From 6a7d803dae50633ca599e6d3e5798fb3a6726e67 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Fri, 19 Oct 2018 17:34:51 +0800 Subject: [PATCH] add eventlistener to cells --- copyoftemplateclass.ts | 1 + index.html | 29 ++--- src/rescource/typescriptDefinition.ts | 48 +++++++++ src/script/TemplateClasses.ts | 148 ++++++++++++++++++-------- src/script/designerClasses.ts | 114 +++++++++++--------- src/script/main.ts | 66 ++++++------ src/style/style.css | 43 +++++++- 7 files changed, 298 insertions(+), 151 deletions(-) create mode 100644 src/rescource/typescriptDefinition.ts diff --git a/copyoftemplateclass.ts b/copyoftemplateclass.ts index e685dde..e9d427b 100644 --- a/copyoftemplateclass.ts +++ b/copyoftemplateclass.ts @@ -27,6 +27,7 @@ class Table { document.getElementById("table") ); var row = table.insertRow(-1); + console.log(table); for (var j = 0; j < this.columnLength; j++) { var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); diff --git a/index.html b/index.html index 8f86667..036a712 100644 --- a/index.html +++ b/index.html @@ -10,26 +10,6 @@
-
-
-
- -
-
- - - - - - - - - - - - - -
@@ -38,6 +18,15 @@
+
+ + + +
diff --git a/src/rescource/typescriptDefinition.ts b/src/rescource/typescriptDefinition.ts new file mode 100644 index 0000000..429b9f8 --- /dev/null +++ b/src/rescource/typescriptDefinition.ts @@ -0,0 +1,48 @@ +interface OrderDetailsFormat { + [index: string]: string | object; + orderNo: string; + clientName: string; + soldDate: string; + contactName: string; + contactNo: string; + deliveryAddress: string; + addOn: string; + boards: Array<{ + [index: string]: number | string | object; + id: number; + material: string; + color: string; + boardInfos: Array<{ + houseName: string; + closetName: string; + boardNo: string; + boardName: string; + length: number; + width: number; + thickness: number; + quantity: number; + area: number; + mutation: string; + shape: string; + direction: string; + stripe: string; + boardAddOn: string; + + [index: string]: number | string; + }>; + }>; +} +interface cellInfoControlPanel { + backgroundColor: string; + border: string; + cellId: string; + color: string; + font: string; + fontColor: string; + fontSize: string; + fontStyle: string; + fontWeight: string; + textAlign: string; + textDecoration: string; +} +export { OrderDetailsFormat, cellInfoControlPanel }; diff --git a/src/script/TemplateClasses.ts b/src/script/TemplateClasses.ts index e3b2329..23bf726 100644 --- a/src/script/TemplateClasses.ts +++ b/src/script/TemplateClasses.ts @@ -2,45 +2,8 @@ import { ControlPanel } from "./designerClasses"; // 表格类 class Table { - rowLength: number; - columnLength: number; - selectedRow: string; - selectedCell: string; - instanceOfCells: any; - constructor(rowLength: number, columnLength: number, instanceOfCells: any) { - this.rowLength = rowLength; - this.columnLength = columnLength; - - this.selectedRow; - this.selectedCell; - } - render(instanceOfCells) { - var myNode = document.getElementById("table"); - while (myNode.firstChild) { - myNode.removeChild(myNode.firstChild); - } - var cellIndex = -1; - for (var i = 0; i < this.rowLength; i++) { - var table: HTMLTableElement = ( - document.getElementById("table") - ); - var row = table.insertRow(-1); - - for (var j = 0; j < this.columnLength; j++) { - var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); - - const instanceOfCell = instanceOfCells[(cellIndex += 1)]; - const cellElement = instanceOfCell.CreateCellElement(); - row.appendChild(cellElement); - - cellElement.addEventListener("dblclick", () => { - cellElement.className = "highlight"; - this.showDesignerInfo(instanceOfCell); - }); - - cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter; - } - } + render(tableInfo) { + this.proccessTableData(tableInfo); } showDesignerInfo(instanceOfCell) { const cellInfoElements = document @@ -54,7 +17,103 @@ class Table { } } } - deleteCurrentRow() {} + proccessTableData(tableInfo) { + const tableElement: HTMLTableElement = ( + document.getElementById("table") + ); + while (tableElement.firstChild) { + tableElement.removeChild(tableElement.firstChild); + } + + for (const eachrow of tableInfo) { + const row = tableElement.insertRow(-1); + + for (const cell of eachrow.cells) { + const letter = String.fromCharCode( + "A".charCodeAt(0) + eachrow.cells.indexOf(cell) - 1 + ); + + const cellElement = cell.CreateCellElement(); + + row.appendChild(cellElement); + + cellElement.addEventListener("dblclick", () => { + this.showDesignerInfo(cell); + }); + + cellElement.addEventListener( + "contextmenu", + ev => { + ev.preventDefault(); + const dropDownElement = document.getElementById("cntnr"); + dropDownElement.style.left = ev.pageX + "px"; + dropDownElement.style.top = ev.pageY + "px"; + dropDownElement.style.display = "block"; + + this.cellRightClickHandler(ev, tableInfo); + }, + false + ); + + // cellElement.innerHTML = i && j ? cellElement.innerHTML : i || letter; + if (!(tableInfo.indexOf(eachrow) && eachrow.cells.indexOf(cell))) { + cellElement.innerHTML = tableInfo.indexOf(eachrow) || letter; + } + } + } + } + + deleteCurrentRow(tableInfo, id) { + for (const row of tableInfo) { + for (const cell of row.cells) { + if (cell.cellId === id) { + tableInfo.splice(tableInfo.indexOf(row), 1); + this.render(tableInfo); + break; + } + } + } + } + deleteTable(tableInfo) { + tableInfo.splice(0, tableInfo.length); + this.render(tableInfo); + } + addRowBefore(tableInfo, id) { + // console.log("hello", id); + // for (const row of tableInfo) { + // for (const cell of row.cells) { + // if (cell.cellId === id) { + // const newRow = row; + // // tableInfo.splice(tableInfo.indexOf(row), 0, newRow); + // // this.render(tableInfo); + // break; + // } + // } + // } + // + + +// eventlistener occur more than once + + + // + cellRightClickHandler(ev, tableInfo) { + const deleteTableElement = document.getElementById("delete-table"); + const deleteCurrenRowElement = document.getElementById( + "delete-current-row" + ); + const insertTopRowElement = document.getElementById("insert-top-row"); + deleteTableElement.addEventListener("click", () => { + this.deleteTable(tableInfo); + }); + deleteCurrenRowElement.addEventListener("click", () => { + this.deleteCurrentRow(tableInfo, ev.target.id); + }); + insertTopRowElement.addEventListener("click", () => { + console.log(123); + // this.addRowBefore(tableInfo, ev.target.id); + }); + } deleteCurrenCol() {} insertColToLeft() {} insertColToRight() {} @@ -74,6 +133,7 @@ class Table { // 单元类 class Cell { cellId: string; + content: string; font: string; fontSize: string; fontColor: string; @@ -86,13 +146,14 @@ class Cell { className: string; constructor(id) { this.cellId = id; + this.content = this.cellId; this.font = "Serif"; this.fontSize = "12"; this.fontColor = "black"; this.fontWeight = "normal"; this.fontStyle = "normal"; - this.textDecoration = ""; - this.border = ""; + this.textDecoration = "none"; + this.border = "1"; this.backgroundColor = ""; this.textAlign = "left"; this.className = "normal"; @@ -111,8 +172,9 @@ class Cell { tdElement.style.fontStyle = this.fontStyle; tdElement.style.textDecoration = this.textDecoration; tdElement.style.textAlign = this.textAlign; - tdElement.innerHTML = "cell"; + tdElement.innerHTML = this.content; tdElement.className = this.className; + tdElement.id = this.cellId; return tdElement; } diff --git a/src/script/designerClasses.ts b/src/script/designerClasses.ts index ffdab0e..e723e8e 100644 --- a/src/script/designerClasses.ts +++ b/src/script/designerClasses.ts @@ -1,27 +1,77 @@ +import { + OrderDetailsFormat, + cellInfoControlPanel +} from "../rescource/typescriptDefinition"; // 控制面板类 class ControlPanel { - cellId: string; - - constructor(cellId) { - this.cellId = cellId; + table: any; + cell: any; + instanceOfCells: any; + constructor(Table, Cell, instanceOfCells) { + this.table = Table; + this.cell = Cell; + this.instanceOfCells = instanceOfCells; } - render() {} - update(instanceOfCells) { - const cellInfoObject = {}; + render() { + const initialControlPanelHtmlText = + '


'; + document.getElementById("designer").innerHTML = initialControlPanelHtmlText; + // this.createTable(this.table, this.cell, this.instanceOfCells); + // this.update(this.instanceOfCells, this.table); + } + createTable(tableInfo, Table, Cell) { + tableInfo.splice(0, tableInfo.length); + const rowElement = document.getElementById("totalRow"); + const totalRow = Number(rowElement.value); + const colElement = document.getElementById("totalCol"); + const totalCol = Number(colElement.value); + for (var i = 0; i < totalRow; i++) { + const cells = []; + for (var j = 0; j < totalCol; j++) { + var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); + + const newCell = new Cell(letter + i); + cells.push(newCell); + } + tableInfo.push({ rowId: i, cells: cells }); + } + + new Table().render(tableInfo); + + console.log(tableInfo); + } + update(tableInfo, Table) { + const cellInfoObject: cellInfoControlPanel = { + backgroundColor: "", + border: "", + cellId: "", + color: "", + font: "", + fontColor: "", + fontSize: "", + fontStyle: "", + fontWeight: "", + textAlign: "", + textDecoration: "" + }; const cellInfoElements = document .getElementById("cell-info") .getElementsByTagName("input"); - for (let x = 0; x < cellInfoElements.length; x++) { - cellInfoObject[cellInfoElements[x].name] = cellInfoElements[x].value; + for (let index = 0; index < cellInfoElements.length; index++) { + cellInfoObject[cellInfoElements[index].name] = + cellInfoElements[index].value; } - for (const instance of instanceOfCells) { - if (instance.cellId === "A1") { - for (const key in cellInfoObject) { - instance[key] = cellInfoObject[key]; + for (const row of tableInfo) { + for (const cell of row.cells) { + if (cell.cellId === cellInfoObject.cellId) { + for (const key in cellInfoObject) { + cell[key] = cellInfoObject[key]; + } } - console.log(instance); } } + console.log("hi"); + new Table().render(tableInfo); } setFont() {} @@ -102,40 +152,4 @@ banCaiInfoMatches.items = [ new DataResourceItem("${板材备注}", "boardAddOn") ]; -// typescript 类型定义 - -interface OrderDetailsFormat { - [index: string]: string | object; - orderNo: string; - clientName: string; - soldDate: string; - contactName: string; - contactNo: string; - deliveryAddress: string; - addOn: string; - boards: Array<{ - [index: string]: number | string | object; - id: number; - material: string; - color: string; - boardInfos: Array<{ - houseName: string; - closetName: string; - boardNo: string; - boardName: string; - length: number; - width: number; - thickness: number; - quantity: number; - area: number; - mutation: string; - shape: string; - direction: string; - stripe: string; - boardAddOn: string; - - [index: string]: number | string; - }>; - }>; -} export { ControlPanel }; diff --git a/src/script/main.ts b/src/script/main.ts index 5c3d869..1c29ed6 100644 --- a/src/script/main.ts +++ b/src/script/main.ts @@ -1,40 +1,38 @@ +import { + OrderDetailsFormat, + cellInfoControlPanel +} from "../rescource/typescriptDefinition"; import { Table, Cell } from "./TemplateClasses"; import { ControlPanel } from "./designerClasses"; -const createTable = document.getElementById("submitRowCol"); -const updateCellInfo = document.getElementById("update"); -const instanceOfCells = []; +const tableInfo = []; +let selectedCelll = ""; -createTable.addEventListener( - "click", - () => { - const rowElement = document.getElementById("totalRow"); - const totalRow = Number(rowElement.value); - const colElement = document.getElementById("totalCol"); - const totalCol = Number(colElement.value); +const controlPanel = new ControlPanel(Table, Cell, tableInfo); +const table = new Table(); +controlPanel.render(); - for (var i = 0; i < totalRow; i++) { - for (var j = 0; j < totalCol; j++) { - var letter = String.fromCharCode("A".charCodeAt(0) + j - 1); - - const newCell = new Cell(letter + i); - instanceOfCells.push(newCell); - } - } - - const table = new Table(totalRow, totalCol, instanceOfCells); - table.render(instanceOfCells); - }, - false -); - -updateCellInfo.addEventListener("click", () => { - const rowElement = document.getElementById("totalRow"); - const totalRow = Number(rowElement.value); - const colElement = document.getElementById("totalCol"); - const totalCol = Number(colElement.value); - const instanceOfControlPanel = new ControlPanel("A1"); - instanceOfControlPanel.update(instanceOfCells); - const table = new Table(totalRow, totalCol, instanceOfCells); - table.render(instanceOfCells); +// addEventListener on table tag +document.getElementById("table").addEventListener("click", () => { + const dropDownElement = document.getElementById("cntnr"); + dropDownElement.style.display = "none"; + console.log("click"); +}); +//addEventListener on side menu +const dropDownElement = document.getElementById("cntnr"); +document.getElementById("items").addEventListener("click", () => { + dropDownElement.style.display = "none"; +}); + +//新建table +const createTableElement = document.getElementById("create-table"); +createTableElement.addEventListener("click", () => { + controlPanel.createTable(tableInfo, Table, Cell); +}); + +// 更新table + +const updateCellInfo = document.getElementById("update"); +updateCellInfo.addEventListener("click", () => { + controlPanel.update(tableInfo, Table); }); diff --git a/src/style/style.css b/src/style/style.css index b444f42..eecf6aa 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -25,7 +25,7 @@ input { padding: 2px; } -tr:hover { +td:hover { background-color: #eee; } @@ -35,9 +35,7 @@ td:focus { .highlight { background-color: #ccf; } -.normal { - background-color: white; -} + input { width: 30px; } @@ -66,3 +64,40 @@ td:first-child { footer { font-size: 80%; } + +#items { + list-style: none; + margin: 0px; + margin-top: 4px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 3px; + font-size: 17px; + color: #333333; +} +hr { + width: 85%; + background-color: #e4e4e4; + border-color: #e4e4e4; + color: #e4e4e4; +} +#cntnr { + display: none; + position: fixed; + border: 1px solid #b2b2b2; + width: 150px; + background: #f9f9f9; + box-shadow: 3px 3px 2px #e9e9e9; + border-radius: 4px; +} + +li { + padding: 3px; + padding-left: 10px; +} + +#items :hover { + color: white; + background: #284570; + border-radius: 2px; +}