From 55d0e202677253ecf893bd52649871f10b52d3de Mon Sep 17 00:00:00 2001
From: Maksymilian Jopek
Date: Sun, 24 Oct 2021 18:59:50 +0200
Subject: Almost dragging and WYSiWYG start
---
.gitignore | 1 +
package.json | 10 ++--
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 +-
static/document-add.svg | 63 ++++++++++++++++++++++++
static/save.svg | 1 +
static/x.svg | 1 +
webpack.config.ts | 2 +-
yarn.lock | 24 ++++++++++
18 files changed, 367 insertions(+), 9 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
create mode 100644 static/document-add.svg
create mode 100644 static/save.svg
create mode 100644 static/x.svg
diff --git a/.gitignore b/.gitignore
index b947077..283d180 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules/
dist/
+src/server/fridges
diff --git a/package.json b/package.json
index 862ad72..def0188 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
{
- "name": "webpack-ts-template",
+ "name": "isiqandisi",
"version": "0.0.1",
- "description": "Template for typescript project with webpack",
+ "description": "",
"main": "index.ts",
"scripts": {
"serve": "webpack serve --mode development",
"build": "webpack --mode production"
},
- "repository": "git@git.jopek.eu:maks/webpack-ts-template.git",
+ "repository": "git@git.jopek.eu:isiqandisi",
"author": "Maks Jopek ",
"license": "AGPL-3.0-or-later",
"private": false,
@@ -29,7 +29,9 @@
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
- "dotenv": "^9.0.2"
+ "@types/tinymce": "^4.6.4",
+ "dotenv": "^9.0.2",
+ "tinymce": "^5.10.0"
},
"browserslist": [
"last 1 chrome version"
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 = ""
+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 @@
+
-
+
- main
+
+
+