diff options
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/Chit.ts | 62 | ||||
| -rw-r--r-- | src/modules/Fridge.ts | 16 | ||||
| -rw-r--r-- | src/modules/WYSiWYG.ts | 58 |
3 files changed, 128 insertions, 8 deletions
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; + } +} |