summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/consts.ts2
-rw-r--r--src/index.ts2
-rw-r--r--src/main.ts23
-rw-r--r--src/modules/Chit.ts62
-rw-r--r--src/modules/Fridge.ts16
-rw-r--r--src/modules/WYSiWYG.ts58
-rwxr-xr-xsrc/server/start3
-rw-r--r--src/styles/main.css68
-rw-r--r--src/templates/main.html3
9 files changed, 200 insertions, 37 deletions
diff --git a/src/consts.ts b/src/consts.ts
index 401de7e..dd1d5d6 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,4 +1,6 @@
export let _zi = -2147483648;
export function zi() {
+ if (_zi + 1 > 2147483647)
+ _zi = -2147483648;
return (_zi++).toString();
}
diff --git a/src/index.ts b/src/index.ts
index 79d5386..79c88d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,7 @@ 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()
+ const res = await (await fetch("http://localhost:8001/getFridge.php?name=" + i.value)).text()
sessionStorage.fridge = res;
location.href = "/main.html"
}
diff --git a/src/main.ts b/src/main.ts
index 280cd99..a792dfd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,26 +2,9 @@ import "Styles/main.css";
import Fridge from "Modules/Fridge"
import Events from "Modules/Events"
+import WYSiWYG from "Modules/WYSiWYG";
-import tinymce from 'tinymce';
-import 'tinymce/icons/default';
-import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
-import 'tinymce/plugins/save'
+const wysiwyg = new WYSiWYG();
+const fridge = new Fridge(wysiwyg)
-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
index 823ecab..bd11766 100644
--- a/src/modules/Chit.ts
+++ b/src/modules/Chit.ts
@@ -1,5 +1,6 @@
import { zi } from "@/consts";
import Fridge from "./Fridge";
+import WYSiWYG from "./WYSiWYG";
export default class Chit {
public isMoving = false;
@@ -10,12 +11,13 @@ export default class Chit {
#height: number;
#div: HTMLDivElement;
#txt: string;
- #fride: Fridge;
+ #fridge: Fridge;
+ #wysiwyg: WYSiWYG;
get nCol() { return "lightblue" }
get cCol() { return "lightpink" }
- constructor(f: Fridge, data?: ChitFromDb) {
+ constructor(f: Fridge, wysiwyg: WYSiWYG, data?: ChitFromDb) {
if (data) {
this.#top = data.top;
this.#left = data.left;
@@ -25,12 +27,13 @@ export default class Chit {
} else {
this.#top = 200;
this.#left = 200;
- this.#txt = '';
+ this.#txt = '23';
this.#width = 100;
this.#height = 100;
}
this.#div = this.createDiv();
- this.#fride = f;
+ this.#fridge = f;
+ this.#wysiwyg = wysiwyg;
}
mouseDownH(e: MouseEvent) {
@@ -61,7 +64,7 @@ export default class Chit {
// this.left = this.#div.offsetLeft - coord.left
}
setzi() {
- this.#fride.setChitZIAuto();
+ this.#fridge.setChitZIAuto();
this.#div.style.zIndex = "10"
}
@@ -72,8 +75,19 @@ export default class Chit {
div.style.left = this.leftip;
div.style.height = this.heightip;
div.style.width = this.widthip;
+ // div.style.minHeight = "75px"
+ // div.style.minWidth = "75px"
div.style.zIndex = zi();
div.style.backgroundColor = this.nCol
+
+ div.innerHTML = `<button class="edit"></button><buttton class="resize"></buttton><buttton class="delete"></buttton>`
+ const be = div.children[0] as HTMLButtonElement;
+ const bl = div.children[1] as HTMLButtonElement;
+ const bd = div.children[2] as HTMLButtonElement;
+ be.onmousedown = e => this.edit(e);
+ bl.onmousedown = e => this.resize(e);
+ bd.onmousedown = () => this.remove();
+
// div.onmousedown = e => this.mouseDownH(e);
div.onmousedown = e => this.mouseDownH(e);
div.onmouseup = e => this.mouseUpH(e); // div.onmouseleave = (e) => this.mouseUpH(e);
@@ -82,6 +96,36 @@ export default class Chit {
return div;
}
+ edit(e: MouseEvent) {
+ e.stopPropagation();
+ this.#wysiwyg.show(this)
+ }
+ resize(e: MouseEvent) {
+ e.stopPropagation()
+ const [sx, sy] = [e.x, e.y]
+ let width: number, height: number
+ this.#div.onmousemove = ee => {
+ const [dx, dy] = [sx - ee.x, sy - ee.y]
+ width = this.#width - dx > 75 ? this.#width - dx : 75
+ height = this.#height - dy > 75 ? this.#height - dy : 75
+ console.log(sx, sy, dx, dy, width, height)
+ this.#div.style.width = width + "px"
+ this.#div.style.height = height + "px"
+ }
+ const stopRes = () => {
+ this.width = width
+ this.height = height
+ this.#div.onmousemove = () => null
+ }
+ this.#div.onmouseup = stopRes;
+ // this.#div.onmouseleave = stopRes;
+ document.body.onmouseleave = stopRes;
+ }
+ remove() {
+ this.#fridge.removeChit(this);
+ this.#div.remove();
+ }
+
set top(t: number) {
this.#top = t;
this.div.style.top = this.topip;
@@ -90,6 +134,14 @@ export default class Chit {
this.#left = l;
this.div.style.left = this.leftip;
}
+ set width(w: number) {
+ this.#width = w;
+ this.div.style.width = this.widthip;
+ }
+ set height(h: number) {
+ this.#height = h;
+ this.div.style.height = this.heightip;
+ }
get topip() {
return this.#top + "px";
diff --git a/src/modules/Fridge.ts b/src/modules/Fridge.ts
index 79da4dc..c12bc53 100644
--- a/src/modules/Fridge.ts
+++ b/src/modules/Fridge.ts
@@ -1,24 +1,34 @@
import Chit, { ChitFromDb } from "Modules/Chit"
+import WYSiWYG from "./WYSiWYG";
export default class Fridge {
#chits: Chit[] = [];
+ //@ts-expect-error
+ #wysiwyg: WYSiWYG;
- constructor() {
+ constructor(wysiwyg: WYSiWYG) {
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))
+ this.#chits.push(new Chit(this, wysiwyg, c));
}
+
+
+ this.#wysiwyg = wysiwyg;
}
setChitZIAuto() {
for (const c of this.#chits)
c.div.style.zIndex = "auto"
}
+ removeChit(ch: Chit) {
+ this.#chits = this.#chits.filter(c => c !== ch);
+ }
// moveChit(coord: { top: number, left: number }) {
// for (const c of this.#chits) {
// if (c.isMoving) {
@@ -35,7 +45,7 @@ export default class Fridge {
// }
createChit() {
- this.#chits.push(new Chit(this))
+ this.#chits.push(new Chit(this, this.#wysiwyg))
}
get chits(): Chit[] {
diff --git a/src/modules/WYSiWYG.ts b/src/modules/WYSiWYG.ts
new file mode 100644
index 0000000..1161cde
--- /dev/null
+++ b/src/modules/WYSiWYG.ts
@@ -0,0 +1,58 @@
+import tinymce, { Editor } from 'tinymce';
+import 'tinymce/icons/default';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import Chit from './Chit';
+
+export default class WYSiWYG {
+ #id = 'tinymce'
+ #bSave: HTMLButtonElement
+ #bCancel: HTMLButtonElement
+
+ constructor() {
+ tinymce.init({
+ selector: this.idAsSel,
+ });
+
+ const s = document.getElementsByClassName("tox-statusbar__branding")[0] as HTMLSpanElement;
+ const t = document.getElementsByClassName("tox-tinymce")[0] as HTMLDivElement;
+ const tf = s.parentElement as HTMLDivElement
+ const tfp = tf.parentElement as HTMLDivElement
+ tf.removeChild(s)
+
+ t.id = "wysiwyg"
+ tfp.id = "tfp";
+
+ this.#bSave = document.createElement("button")
+ this.#bCancel = document.createElement("button")
+ this.#bSave.id = "save"
+ this.#bCancel.id = "cancel"
+ tf.append(this.#bSave, this.#bCancel)
+
+ this.#bSave.onclick = () => this.setContent(this.content + "asd");
+ this.#bCancel.onclick = () => this.hide();
+ this.hide()
+ }
+
+ get #tmce(): Editor {
+ return tinymce.get(this.#id);
+ }
+ show(c: Chit) {
+ console.log(c.txt)
+ this.#tmce.show();
+ this.setContent(c.txt)
+ }
+ hide() {
+ this.#tmce.hide();
+ }
+ setContent(c: string) {
+ this.#tmce.setContent(c);
+ }
+ get content(): string {
+ return this.#tmce.getContent()
+ }
+
+ get idAsSel() {
+ return '#' + this.#id;
+ }
+}
diff --git a/src/server/start b/src/server/start
index 7538f45..a746e39 100755
--- a/src/server/start
+++ b/src/server/start
@@ -1 +1,2 @@
-php -S 0.0.0.0:8000
+#!/bin/sh
+php -S 0.0.0.0:8001 -t /home/maks/school/clientApps/isiqandisi/src/server
diff --git a/src/styles/main.css b/src/styles/main.css
index 5cbdb33..7918a59 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,3 +1,8 @@
+body {
+ background-color: black;
+ color: white;
+}
+
#document-add {
background-image: url('static/document-add.svg');
border: 0;
@@ -10,11 +15,64 @@
border: 1px solid black;
position: absolute;
}
+.edit {
+ position: absolute;
+ background-image: url('static/edit.svg');
+ background-color: rgba(0, 0, 0, 0);
+ border: 0;
+ cursor: pointer;
+ height: 25px;
+ width: 25px;
+}
+.resize {
+ position: absolute;
+ background-image: url('static/resize.svg');
+ background-color: rgba(0, 0, 0, 0);
+ cursor: pointer;
+ height: 25px;
+ width: 25px;
+ bottom: 0;
+ right: 0;
+}
+.delete {
+ position: absolute;
+ background-image: url('static/x.svg');
+ background-color: rgba(0, 0, 0, 0);
+ cursor: pointer;
+ height: 25px;
+ width: 25px;
+ top: 0;
+ right: 0;
+}
#tinymce {
- position: absolute;
- top: 150;
- left: 150;
- width: 80vw;
- height: 40vh;
+ display: none;
+}
+.tinymce-footer {
+ height: 40px;
+}
+#wysiwyg {
+ position: absolute;
+ top: 10%;
+ left: 17%;
+ width: 70vw;
+ height: 50vh;
+}
+#tfp {
+ height: 26px;
+ line-height: 26px;
+}
+#save {
+ background-image: url('static/save.svg');
+ border: 0;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+}
+#cancel {
+ background-image: url('static/x.svg');
+ border: 0;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
}
diff --git a/src/templates/main.html b/src/templates/main.html
index 14ad523..a248ec1 100644
--- a/src/templates/main.html
+++ b/src/templates/main.html
@@ -14,8 +14,7 @@
<body>
<button id="document-add"></button>
- <div id="tinymce">
- </div>
+ <div id="tinymce"></div>
</body>
</html>
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-23 13:20:55 +0000