add eventlistener to cells

2018-10-19 17:34:51 +08:00 · 2018-10-19 17:34:51 +08:00 · 6a7d803dae
commit 6a7d803dae
parent 5199d4e44e
7 changed files with 298 additions and 151 deletions
--- 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);
--- a/index.html
+++ b/index.html
@ -10,26 +10,6 @@

 <body>
    <div id='designer'>
-        <div id='table-creator'>
-            <label>列数</label> <input id='totalCol' type="text" value='10'> <br>
-            <label>行数</label> <input id='totalRow' type="text" value='10'> <br>
-            <button id='submitRowCol'>创建表格</button>
-        </div>
-        <div id='cell-info'>
-            <label>颜色</label> <input type="text" name='color'>
-            <label>单元Id</label> <input type="text" name='cellId'>
-            <label>字体</label> <input type="text" name='font'>
-            <label>字体大小</label> <input type="text" name='fontSize'>
-            <label>颜色</label> <input type="text" name='fontColor'>
-            <label>加粗</label> <input type="text" name='fontWeight'>
-            <label>斜体</label> <input type="text" name='fontStyle'>
-            <label>下划线</label> <input type="text" name='textDecoration'>
-            <label>边框</label> <input type="text" name='border'>
-            <label>背景颜色</label> <input type="text" name='backgroundColor'>
-            <label>位置</label> <input type="text" name='textAlign'>
-
-            <button id='update'>更新</button>
-        </div>

    </div>
    <div id='app'>
@ -38,6 +18,15 @@


    </div>
+    <div id='cntnr'>
+        <ul id='items'>
+            <li id='delete-table'>删除表格</li>
+            <li id='delete-current-row'>删除当前行</li>
+            <li id='insert-top-row'>上插入行</li>
+        </ul>
+
+
+    </div>



--- a/src/rescource/typescriptDefinition.ts
+++ 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 };
--- 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 = <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 = <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;
  }
--- 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 =
+      '<div id="table-creator"><label> 列数 </label> <input id="totalCol" type="text" value="10"> <br><label> 行数 </label> <input id="totalRow" type="text" value="10"> <br><button id = "create-table"> 创建表格 </button></div><div id = "cell-info"><label>颜色 </label> <input type="text" name="color"><label> 单元Id </label> <input type="text" name="cellId"><label> 字体 </label> <input type="text" name="font"><label> 字体大小 </label> <input type="text" name="fontSize"><label> 颜色 </label> <input type="text" name="fontColor"><label> 加粗 </label> <input type="text" name="fontWeight"><label> 斜体 </label> <input type="text" name="fontStyle"><label> 下划线 </label> <input type="text" name="textDecoration"><label> 边框 </label> <input type="text" name="border"><label> 背景颜色 </label> <input type="text" name="backgroundColor"><label> 位置 </label> <input type="text" name="textAlign"><label>内容 </label> <input type="text" name="content"><button id = "update" > 更新 </button></div>';
+    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 = <HTMLInputElement>document.getElementById("totalRow");
+    const totalRow = Number(rowElement.value);
+    const colElement = <HTMLInputElement>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 };
--- 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 = <HTMLInputElement>document.getElementById("totalRow");
-    const totalRow = Number(rowElement.value);
-    const colElement = <HTMLInputElement>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 = <HTMLInputElement>document.getElementById("totalRow");
-  const totalRow = Number(rowElement.value);
-  const colElement = <HTMLInputElement>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);
 });
--- 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;
+}