From 55d0e202677253ecf893bd52649871f10b52d3de Mon Sep 17 00:00:00 2001
From: Maksymilian Jopek <maks@jopek.eu>
Date: Sun, 24 Oct 2021 18:59:50 +0200
Subject: Almost dragging and WYSiWYG start

---
 src/consts.ts            |   4 ++
 src/index.ts             |  12 ++++-
 src/main.ts              |  28 ++++++++++-
 src/modules/Chit.ts      | 121 +++++++++++++++++++++++++++++++++++++++++++++++
 src/modules/Events.ts    |  28 +++++++++++
 src/modules/Fridge.ts    |  44 +++++++++++++++++
 src/server/getFridge.php |   9 ++++
 src/server/start         |   1 +
 src/styles/main.css      |  20 ++++++++
 src/templates/index.html |   2 +-
 src/templates/main.html  |   5 +-
 11 files changed, 270 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/Chit.ts
 create mode 100644 src/modules/Events.ts
 create mode 100644 src/modules/Fridge.ts
 create mode 100644 src/server/getFridge.php
 create mode 100755 src/server/start

(limited to 'src')

diff --git a/src/consts.ts b/src/consts.ts
index e69de29..401de7e 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -0,0 +1,4 @@
+export let _zi = -2147483648;
+export function zi() {
+  return (_zi++).toString();
+}
diff --git a/src/index.ts b/src/index.ts
index 00391b5..79d5386 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,12 @@
-import "@/styles/index.css";
+import "Styles/index.css";
 
+async function goToMain() {
+  const i = document.getElementsByTagName("input")[0]
+  const res = await (await fetch("http://localhost:8000/getFridge.php?name=" + i.value)).text()
+  sessionStorage.fridge = res;
+  location.href = "/main.html"
+}
+declare global {
+  interface Window { goToMain: () => void; }
+}
+window.goToMain = goToMain
diff --git a/src/main.ts b/src/main.ts
index a955f0e..280cd99 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1 +1,27 @@
-console.log("main.ts")
+import "Styles/main.css";
+
+import Fridge from "Modules/Fridge"
+import Events from "Modules/Events"
+
+import tinymce from 'tinymce';
+import 'tinymce/icons/default';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import 'tinymce/plugins/save'
+
+tinymce.init({
+  selector: '#tinymce',
+  plugins: 'save',
+  // plugins: 'advlist code emoticons link lists table',
+  // toolbar: 'bold italic | bullist numlist | link emoticons',
+  // skin: false,
+  // content_css: false,
+  // content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
+});
+
+const tinyFooter = document.getElementsByClassName("tox-statusbar__branding")[0].parentElement as HTMLDivElement
+tinyFooter.innerHTML = "<button>adsasd</button>"
+const fridge = new Fridge()
+// fridge.createChit()
+Events.setAll(fridge)
+
diff --git a/src/modules/Chit.ts b/src/modules/Chit.ts
new file mode 100644
index 0000000..823ecab
--- /dev/null
+++ b/src/modules/Chit.ts
@@ -0,0 +1,121 @@
+import { zi } from "@/consts";
+import Fridge from "./Fridge";
+
+export default class Chit {
+  public isMoving = false;
+
+  #top: number;
+  #left: number;
+  #width: number;
+  #height: number;
+  #div: HTMLDivElement;
+  #txt: string;
+  #fride: Fridge;
+
+  get nCol() { return "lightblue" }
+  get cCol() { return "lightpink" }
+
+  constructor(f: Fridge, data?: ChitFromDb) {
+    if (data) {
+      this.#top = data.top;
+      this.#left = data.left;
+      this.#txt = data.txt;
+      this.#height = data.height;
+      this.#width = data.width;
+    } else {
+      this.#top = 200;
+      this.#left = 200;
+      this.#txt = '';
+      this.#width = 100;
+      this.#height = 100;
+    }
+    this.#div = this.createDiv();
+    this.#fride = f;
+  }
+
+  mouseDownH(e: MouseEvent) {
+    e;
+    // this.setzi();
+    const top = e.y
+    const left = e.x
+    this.#div.onmousemove = e => this.move(e, { top, left });
+    this.#div.style.backgroundColor = this.cCol
+    this.#div.style.zIndex = zi()
+    this.isMoving = true;
+  }
+  mouseUpH(e: MouseEvent) {
+    e;
+    // e.preventDefault()
+    this.#div.style.backgroundColor = this.nCol
+    this.#div.onmousemove = () => null;
+    this.#top = parseInt(this.#div.style.top.replace('px', ''))
+    this.#left = parseInt(this.#div.style.left.replace('px', ''))
+    // this.#div.style.zIndex = ""
+    this.isMoving = false;
+  }
+
+  move(e: MouseEvent, coord: { top: number, left: number }) {
+    this.#div.style.top = `${this.#top + e.y - coord.top}px`;
+    this.#div.style.left = `${this.#left + e.x - coord.left}px`;
+    // this.top = this.#div.offsetTop - coord.top
+    // this.left = this.#div.offsetLeft - coord.left
+  }
+  setzi() {
+    this.#fride.setChitZIAuto();
+    this.#div.style.zIndex = "10"
+  }
+
+  createDiv(): HTMLDivElement {
+    const div = document.createElement("div");
+    div.classList.add("chit")
+    div.style.top = this.topip;
+    div.style.left = this.leftip;
+    div.style.height = this.heightip;
+    div.style.width = this.widthip;
+    div.style.zIndex = zi();
+    div.style.backgroundColor = this.nCol
+    // div.onmousedown = e => this.mouseDownH(e);
+    div.onmousedown = e => this.mouseDownH(e);
+    div.onmouseup = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
+    document.onmouseleave = e => this.mouseUpH(e);    // div.onmouseleave = (e) => this.mouseUpH(e);
+    document.body.appendChild(div);
+    return div;
+  }
+
+  set top(t: number) {
+    this.#top = t;
+    this.div.style.top = this.topip;
+  }
+  set left(l: number) {
+    this.#left = l;
+    this.div.style.left = this.leftip;
+  }
+
+  get topip() {
+    return this.#top + "px";
+  }
+  get leftip() {
+    return this.#left + "px";
+  }
+  get widthip() {
+    return this.#width + "px";
+  }
+  get heightip() {
+    return this.#height + "px";
+  }
+  get div() {
+    return this.#div;
+  }
+  get txt() {
+    return this.#txt;
+  }
+}
+export interface ChitFromDb {
+  top: number;
+  left: number;
+  txt: string;
+  width: number;
+  height: number;
+  zi: number;
+}
+
diff --git a/src/modules/Events.ts b/src/modules/Events.ts
new file mode 100644
index 0000000..a135e45
--- /dev/null
+++ b/src/modules/Events.ts
@@ -0,0 +1,28 @@
+import Fridge from "Modules/Fridge"
+
+export default class Events {
+  static setAll(fridge: Fridge) {
+    this.setBAdd(fridge)
+    // this.docMouMov(fridge);
+    // this.docMouLea(fridge);
+  }
+  static setBAdd(fridge: Fridge) {
+    const bAdd = document.getElementById("document-add") as HTMLButtonElement
+    bAdd.onclick = () => fridge.createChit();
+  }
+  // static docMouMov(fridge: Fridge) {
+  //   let ox = 100, oy = 100;
+  //   document.onmousemove = e => {
+  //     if ((e.target as HTMLElement).localName === "div") {
+  //       e.preventDefault();
+  //       fridge.moveChit({ top: oy - e.y, left: ox - e.x });
+  //       [ox, oy] = [e.x, e.y]
+  //     }
+  //   }
+  // }
+  // static docMouLea(fridge: Fridge) {
+  //   document.onmouseleave = () => {
+  //     fridge.stopChitMove()
+  //   }
+  // }
+}
diff --git a/src/modules/Fridge.ts b/src/modules/Fridge.ts
new file mode 100644
index 0000000..79da4dc
--- /dev/null
+++ b/src/modules/Fridge.ts
@@ -0,0 +1,44 @@
+import Chit, { ChitFromDb } from "Modules/Chit"
+
+export default class Fridge {
+  #chits: Chit[] = [];
+
+  constructor() {
+    const f = sessionStorage.fridge;
+    if (f === null) {
+      location.href = "/"
+      return;
+    }
+    const cs = JSON.parse(f) as ChitFromDb[];
+    for (const c of cs) {
+      this.#chits.push(new Chit(this, c))
+    }
+  }
+
+  setChitZIAuto() {
+    for (const c of this.#chits)
+      c.div.style.zIndex = "auto"
+  }
+  // moveChit(coord: { top: number, left: number }) {
+  //   for (const c of this.#chits) {
+  //     if (c.isMoving) {
+  //       c.move(coord)
+  //     }
+  //   }
+  // }
+  // stopChitMove() {
+  //   for (const c of this.#chits) {
+  //     c.isMoving = false;
+  //     //@ts-expect-error
+  //     c.mouseUpH({ preventDefault: () => null })
+  //   }
+  // }
+
+  createChit() {
+    this.#chits.push(new Chit(this))
+  }
+
+  get chits(): Chit[] {
+    return this.#chits;
+  }
+}
diff --git a/src/server/getFridge.php b/src/server/getFridge.php
new file mode 100644
index 0000000..7a61ba8
--- /dev/null
+++ b/src/server/getFridge.php
@@ -0,0 +1,9 @@
+<?php
+header('Access-Control-Allow-Origin: *');
+$n = urlencode($_GET["name"]);
+
+$f = file_get_contents("./fridges/" . $n);
+if ($f === false)
+  echo "[]";
+else
+  echo $f;
diff --git a/src/server/start b/src/server/start
new file mode 100755
index 0000000..7538f45
--- /dev/null
+++ b/src/server/start
@@ -0,0 +1 @@
+php -S 0.0.0.0:8000
diff --git a/src/styles/main.css b/src/styles/main.css
index e69de29..5cbdb33 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -0,0 +1,20 @@
+#document-add {
+  background-image: url('static/document-add.svg');
+  border: 0;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+}
+
+.chit {
+  border: 1px solid black;
+  position: absolute;
+}
+
+#tinymce {
+  position: absolute;
+  top: 150;
+  left: 150;
+  width: 80vw;
+  height: 40vh;
+}
diff --git a/src/templates/index.html b/src/templates/index.html
index 0208796..b7fc24f 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -13,7 +13,7 @@
   <div>
     <label for="name">Igama lefriji yakho:</label>
     <input name="name" id="name" type="text">
-    <button type="button" onclick="goToFridge(event)">👍</button>
+    <button type="button" onclick="goToMain(event)">👍</button>
   </div>
 </body>
 
diff --git a/src/templates/main.html b/src/templates/main.html
index aceeb0d..14ad523 100644
--- a/src/templates/main.html
+++ b/src/templates/main.html
@@ -9,10 +9,13 @@
   <link rel="icon" href="<%= htmlWebpackPlugin.options.staticPath %>/favicon.ico" />
 
   <title>Hello, world!</title>
+
 </head>
 
 <body>
-  main
+  <button id="document-add"></button>
+  <div id="tinymce">
+  </div>
 </body>
 
 </html>
-- 
cgit v1.3.1