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 @@ + - + 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 @@ Hello, world! + - main + +
+
diff --git a/static/document-add.svg b/static/document-add.svg new file mode 100644 index 0000000..947a692 --- /dev/null +++ b/static/document-add.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/save.svg b/static/save.svg new file mode 100644 index 0000000..ce7a5e5 --- /dev/null +++ b/static/save.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/x.svg b/static/x.svg new file mode 100644 index 0000000..59d9f44 --- /dev/null +++ b/static/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpack.config.ts b/webpack.config.ts index 5d4e95f..e22cd6f 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -68,6 +68,6 @@ module.exports = { devServer: { contentBase: absolutePath("static"), compress: true, - port: 8000, + port: 8003, }, }; diff --git a/yarn.lock b/yarn.lock index 345c27b..2874b6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -95,6 +95,13 @@ dependencies: "@types/node" "*" +"@types/jquery@*": + version "3.5.8" + resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.8.tgz#83bfbcdf4e625c5471590f92703c06aadb052a09" + integrity sha512-cXk6NwqjDYg+UI9p2l3x0YmPa4m7RrXqmbK4IpVVpRJiYXU/QTo+UZrn54qfE1+9Gao4qpYqUnxm5ZCy2FTXAw== + dependencies: + "@types/sizzle" "*" + "@types/json-schema@*", "@types/json-schema@^7.0.6": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" @@ -152,6 +159,11 @@ "@types/mime" "^1" "@types/node" "*" +"@types/sizzle@*": + version "2.3.3" + resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef" + integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ== + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" @@ -162,6 +174,13 @@ resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4" integrity sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ== +"@types/tinymce@^4.6.4": + version "4.6.4" + resolved "https://registry.yarnpkg.com/@types/tinymce/-/tinymce-4.6.4.tgz#c31d72ba55147233e2b8fa8ebb81960f23d74c32" + integrity sha512-7xo9AnZO9DXdS41zxmKHDzOEo+yxdj9KaZXokSLDYeZ9KcbzIHJJBppRrCoDA8PH2+k79Qj68B+Yj/ye2xQzow== + dependencies: + "@types/jquery" "*" + "@types/uglify-js@*": version "3.13.0" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.0.tgz#1cad8df1fb0b143c5aba08de5712ea9d1ff71124" @@ -3377,6 +3396,11 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tinymce@^5.10.0: + version "5.10.0" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.10.0.tgz#5f88b40c2b26dc72b126f7d04944014dcb1ace05" + integrity sha512-SaqBK8GtTKYSsTfhKdN0+NrZRgmVWO+j3fvgzLjt0t/g0osNzRH5os8icm2Rv5HvaeTd4TpxetUuLE+R9yg/yg== + to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" -- cgit v1.3.1