From 0dee6d64edfbc79a6610c247156f21024c291767 Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Sun, 14 Sep 2025 18:26:46 +0300 Subject: [PATCH] Initial port to svelte --- {www/img => vnshed/src/lib/assets}/delete.svg | 0 {www/img => vnshed/src/lib/assets}/edit.svg | 0 vnshed/src/lib/components/add_button.svelte | 7 + vnshed/src/lib/components/calendar.svelte | 109 ++++++++ .../src/lib/components/create_button.svelte | 4 + .../src/lib/components/horisontal_bar.svelte | 47 ++++ vnshed/src/lib/components/image.svelte | 11 + vnshed/src/lib/components/img_button.svelte | 37 +++ vnshed/src/lib/components/queue_item.svelte | 15 ++ {www => vnshed/src/lib}/css/calendar.css | 0 {www => vnshed/src/lib}/css/global.css | 10 +- {www => vnshed/src/lib}/css/themes.css | 0 vnshed/src/lib/functions.js | 46 ++++ vnshed/src/routes/+layout.svelte | 57 +++- vnshed/src/routes/+page.svelte | 4 +- {www => vnshed/static}/font/Inter-Light.woff2 | Bin www/index.html | 95 ------- www/js/calendar.js | 8 - www/js/functions.js | 46 ---- www/js/index.js | 12 - www/js/types.js | 249 ------------------ 21 files changed, 333 insertions(+), 424 deletions(-) rename {www/img => vnshed/src/lib/assets}/delete.svg (100%) rename {www/img => vnshed/src/lib/assets}/edit.svg (100%) create mode 100644 vnshed/src/lib/components/add_button.svelte create mode 100644 vnshed/src/lib/components/calendar.svelte create mode 100644 vnshed/src/lib/components/create_button.svelte create mode 100644 vnshed/src/lib/components/horisontal_bar.svelte create mode 100644 vnshed/src/lib/components/image.svelte create mode 100644 vnshed/src/lib/components/img_button.svelte create mode 100644 vnshed/src/lib/components/queue_item.svelte rename {www => vnshed/src/lib}/css/calendar.css (100%) rename {www => vnshed/src/lib}/css/global.css (93%) rename {www => vnshed/src/lib}/css/themes.css (100%) create mode 100644 vnshed/src/lib/functions.js rename {www => vnshed/static}/font/Inter-Light.woff2 (100%) delete mode 100644 www/index.html delete mode 100644 www/js/calendar.js delete mode 100644 www/js/functions.js delete mode 100644 www/js/index.js delete mode 100644 www/js/types.js diff --git a/www/img/delete.svg b/vnshed/src/lib/assets/delete.svg similarity index 100% rename from www/img/delete.svg rename to vnshed/src/lib/assets/delete.svg diff --git a/www/img/edit.svg b/vnshed/src/lib/assets/edit.svg similarity index 100% rename from www/img/edit.svg rename to vnshed/src/lib/assets/edit.svg diff --git a/vnshed/src/lib/components/add_button.svelte b/vnshed/src/lib/components/add_button.svelte new file mode 100644 index 0000000..2d12f4c --- /dev/null +++ b/vnshed/src/lib/components/add_button.svelte @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/vnshed/src/lib/components/calendar.svelte b/vnshed/src/lib/components/calendar.svelte new file mode 100644 index 0000000..9221434 --- /dev/null +++ b/vnshed/src/lib/components/calendar.svelte @@ -0,0 +1,109 @@ + + +
+
+
    + + +
  • Август 2025
    • +
+
+ + +
+ + \ No newline at end of file diff --git a/vnshed/src/lib/components/create_button.svelte b/vnshed/src/lib/components/create_button.svelte new file mode 100644 index 0000000..e63d230 --- /dev/null +++ b/vnshed/src/lib/components/create_button.svelte @@ -0,0 +1,4 @@ + +
+ +
\ No newline at end of file diff --git a/vnshed/src/lib/components/horisontal_bar.svelte b/vnshed/src/lib/components/horisontal_bar.svelte new file mode 100644 index 0000000..c526646 --- /dev/null +++ b/vnshed/src/lib/components/horisontal_bar.svelte @@ -0,0 +1,47 @@ + + + + +
+

{label}

+ {#if type == "text"} + {}} /> + {:else if type == "image"} + + {/if} + +
\ No newline at end of file diff --git a/vnshed/src/lib/components/image.svelte b/vnshed/src/lib/components/image.svelte new file mode 100644 index 0000000..0525899 --- /dev/null +++ b/vnshed/src/lib/components/image.svelte @@ -0,0 +1,11 @@ + + +
+ { + // addImage(plus.id, this.id); + // document.getElementById("screenshots").appendChild(new HorisontalImage().html); + }}/> +
diff --git a/vnshed/src/lib/components/img_button.svelte b/vnshed/src/lib/components/img_button.svelte new file mode 100644 index 0000000..4e711a2 --- /dev/null +++ b/vnshed/src/lib/components/img_button.svelte @@ -0,0 +1,37 @@ + + + + +
+ {name} +
\ No newline at end of file diff --git a/vnshed/src/lib/components/queue_item.svelte b/vnshed/src/lib/components/queue_item.svelte new file mode 100644 index 0000000..ba3f921 --- /dev/null +++ b/vnshed/src/lib/components/queue_item.svelte @@ -0,0 +1,15 @@ + + +
+

{date}

+

{name}

+ + +
\ No newline at end of file diff --git a/www/css/calendar.css b/vnshed/src/lib/css/calendar.css similarity index 100% rename from www/css/calendar.css rename to vnshed/src/lib/css/calendar.css diff --git a/www/css/global.css b/vnshed/src/lib/css/global.css similarity index 93% rename from www/css/global.css rename to vnshed/src/lib/css/global.css index 1da034c..67909bf 100644 --- a/www/css/global.css +++ b/vnshed/src/lib/css/global.css @@ -1,14 +1,6 @@ @font-face { font-family: 'Inter'; - src: url('../font/Inter-Light.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Lobster'; - src: url('../font/Lobster-Regular.ttf') format('ttf'); + src: url('/font/Inter-Light.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; diff --git a/www/css/themes.css b/vnshed/src/lib/css/themes.css similarity index 100% rename from www/css/themes.css rename to vnshed/src/lib/css/themes.css diff --git a/vnshed/src/lib/functions.js b/vnshed/src/lib/functions.js new file mode 100644 index 0000000..8276ad9 --- /dev/null +++ b/vnshed/src/lib/functions.js @@ -0,0 +1,46 @@ +export function makeid(length) { + var result = ''; + var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + var charactersLength = characters.length; + for ( var i = 0; i < length; i++ ) { + result += characters.charAt(Math.floor(Math.random() * charactersLength)); + } + return result; +} + +// const imageTypes = { +// types: [ +// { +// description: "Images", +// accept: { +// "image/*": [".png", ".gif", ".jpeg", ".jpg"], +// }, +// }, +// ], +// excludeAcceptAllOption: true, +// multiple: false, +// }; + +// let fileHandle; +// export async function loadImage() { +// [fileHandle] = await window.showOpenFilePicker(imageTypes); +// return fileHandle; +// } + +// export function addImage(initiator, target) { +// loadImage().then(async (result) => { +// let img = document.createElement("img"); +// img.src = URL.createObjectURL(await result.getFile()); +// document.getElementById(target).appendChild(img); +// initiator = document.getElementById(initiator); +// if (initiator) initiator.remove(); +// //document.getElementById(target).addEventListener("click", addImage("", target)); +// }); +// } + +// export function json_filter(key,value) +// { +// if (key=="html") return undefined; +// //else if (key=="id") return undefined; +// else return value; +// } \ No newline at end of file diff --git a/vnshed/src/routes/+layout.svelte b/vnshed/src/routes/+layout.svelte index afc8a09..7b67679 100644 --- a/vnshed/src/routes/+layout.svelte +++ b/vnshed/src/routes/+layout.svelte @@ -1,5 +1,10 @@ @@ -8,9 +13,55 @@ - -

lld

+ +
+ +

Обложка

+
- +
+ + + + + + + +
+

Время на чтение

+ +
+ + + + + +

Скриншоты

+ + + +

Дата публикации

+ + + +

Очередь публикации

+
+ + +
+ +
+ + + + {@render children?.()} diff --git a/vnshed/src/routes/+page.svelte b/vnshed/src/routes/+page.svelte index cc88df0..1662510 100644 --- a/vnshed/src/routes/+page.svelte +++ b/vnshed/src/routes/+page.svelte @@ -1,2 +1,2 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+ diff --git a/www/font/Inter-Light.woff2 b/vnshed/static/font/Inter-Light.woff2 similarity index 100% rename from www/font/Inter-Light.woff2 rename to vnshed/static/font/Inter-Light.woff2 diff --git a/www/index.html b/www/index.html deleted file mode 100644 index 4643eb9..0000000 --- a/www/index.html +++ /dev/null @@ -1,95 +0,0 @@ - - - Отложка - - - - - - - - - - - - -
-
- -
-

Обложка

-
- -
- - - - - - - -
-

Время на чтение

- -
- - - - - - - - - - - -

Скриншоты

- - - -

Дата публикации

- - - -

Очередь публикации

-
- - -
-
- - -
- -
- - - - - \ No newline at end of file diff --git a/www/js/calendar.js b/www/js/calendar.js deleted file mode 100644 index d1f6189..0000000 --- a/www/js/calendar.js +++ /dev/null @@ -1,8 +0,0 @@ - -document.getElementById("cal-prev").addEventListener("click", (event) => { - console.log("cal-prev"); -}) - -document.getElementById("cal-next").addEventListener("click", (event) => { - console.log("cal-next"); -}) \ No newline at end of file diff --git a/www/js/functions.js b/www/js/functions.js deleted file mode 100644 index 5ca1bd3..0000000 --- a/www/js/functions.js +++ /dev/null @@ -1,46 +0,0 @@ -function makeid(length) { - var result = ''; - var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - var charactersLength = characters.length; - for ( var i = 0; i < length; i++ ) { - result += characters.charAt(Math.floor(Math.random() * charactersLength)); - } - return result; -} - -const imageTypes = { - types: [ - { - description: "Images", - accept: { - "image/*": [".png", ".gif", ".jpeg", ".jpg"], - }, - }, - ], - excludeAcceptAllOption: true, - multiple: false, -}; - -let fileHandle; -async function loadImage() { - [fileHandle] = await window.showOpenFilePicker(imageTypes); - return fileHandle; -} - -function addImage(initiator, target) { - loadImage().then(async (result) => { - let img = document.createElement("img"); - img.src = URL.createObjectURL(await result.getFile()); - document.getElementById(target).appendChild(img); - initiator = document.getElementById(initiator); - if (initiator) initiator.remove(); - //document.getElementById(target).addEventListener("click", addImage("", target)); - }); -} - -function json_filter(key,value) -{ - if (key=="html") return undefined; - //else if (key=="id") return undefined; - else return value; -} \ No newline at end of file diff --git a/www/js/index.js b/www/js/index.js deleted file mode 100644 index c4df95a..0000000 --- a/www/js/index.js +++ /dev/null @@ -1,12 +0,0 @@ - -document.getElementById("cover-plus").addEventListener("click", (event) => { - addImage("cover-plus", "cover-div"); -}) - -// document.getElementById("screen-plus").addEventListener("click", (event) => { -// addImage("screen-plus", "scr-1"); -// }) - -document.getElementById("create").addEventListener("click", (event) => { - console.log("create"); -}) \ No newline at end of file diff --git a/www/js/types.js b/www/js/types.js deleted file mode 100644 index 41a898e..0000000 --- a/www/js/types.js +++ /dev/null @@ -1,249 +0,0 @@ -class AddButton { - - id = ""; - html = undefined; - - constructor() { - this.html = document.createElement('button'); - this.html.classList.add("plus"); - this.html.classList.add("round"); - this.html.appendChild(document.createTextNode("+")); - this.id = makeid(8); - this.html.id = this.id; - } - - addHadler(func) { - this.html.addEventListener("click", func); - return this; - } - -} - -class HorisontalItem { - - id = undefined; - html = undefined; - text = undefined; - - constructor(text) { - this.text = text; - this.html = document.createElement('div'); - this.html.classList.add("horisontal-item"); - this.html.classList.add("rounded"); - this.html.appendChild(document.createTextNode(text)); - this.id = makeid(8); - this.html.id = this.id; - this.html.addEventListener("click", this.remove); - } - - remove() { - document.getElementById(this.id).remove(); - } -} - -class HorisontalBar { - - html = undefined; - plus_id = undefined; - elements = []; - - constructor(text, id) { - this.html = document.createElement('div'); - this.html.classList.add("horisontal-bar"); - this.html.classList.add("input"); - this.html.classList.add("rounded"); - let label = document.createElement('p'); - label.appendChild(document.createTextNode(text)) - this.html.appendChild(label); - const plus = new AddButton().addHadler( - () => this.append(new HorisontalItem('test')) - ); - this.html.appendChild(plus.html); - this.plus_id = plus.id; - } - - append(elem) { - this.elements.push(elem); - this.html.insertBefore(elem.html, document.getElementById(this.plus_id)); - return this; - } - - json() { - return JSON.stringify(this.elements, json_filter); - } -} - -class HorisontalImage { - - id = undefined; - html = undefined; - - constructor() { - this.html = document.createElement('div'); - this.html.classList.add("horisontal"); - this.html.classList.add("image"); - this.html.classList.add("input"); - this.html.classList.add("rounded"); - this.id = makeid(8); - this.html.id = this.id; - - let plus = new AddButton(); - plus.addHadler(() => { - addImage(plus.id, this.id); - document.getElementById("screenshots").appendChild(new HorisontalImage().html); - }); - this.html.appendChild(plus.html); - } - - remove() { - document.getElementById(this.id).remove(); - } -} - -class HorisontalImageBar { - - html = undefined; - first_id = undefined; - elements = []; - - constructor(id) { - this.html = document.createElement('div'); - this.html.classList.add("horisontal-bar"); - const first = new HorisontalImage(); - this.html.appendChild(first.html); - this.first_id = first.id; - } - - append(elem) { - this.elements.push(elem); - this.html.insertBefore(elem.html, document.getElementById(this.first_id)); - return this; - } - - json() { - return JSON.stringify(this.elements, json_filter); - } -} - -class ImgButton { - - html = undefined; - id = undefined; - - constructor(name, img) { - this.html = document.createElement('div'); - this.html.classList.add("imgbutton"); - this.id = makeid(8); - this.html.id = this.id; - - let btn_img = document.createElement('img'); - btn_img.src = img; - btn_img.innerHTML = name; - this.html.appendChild(btn_img); - } - - addHadler(func) { - this.html.addEventListener("click", func); - return this; - } - - setCssClass(name) { - this.html.classList.add(name); - } - -} - -class QueueItem { - - html = undefined; - id = undefined; - - constructor(date, name) { - this.html = document.createElement('div'); - this.html.classList.add("queue-item"); - this.html.classList.add("horisontal-bar"); - this.html.classList.add("rounded"); - this.id = makeid(8); - this.html.id = this.id; - - var date_p = document.createElement('p'); - date_p.innerHTML = date; - this.html.appendChild(date_p); - - var text = document.createElement('p'); - text.classList.add("ellipsis"); - text.innerHTML = name; - this.html.appendChild(text); - - let edit_btn = new ImgButton("Изменить", "./img/edit.svg"); - edit_btn.setCssClass("edit"); - this.html.appendChild(edit_btn.html); - let rem_btn = new ImgButton("Удалить", "./img/delete.svg"); - rem_btn.setCssClass("remove"); - this.html.appendChild(rem_btn.html); - } - -} - -class Calendar { - - html = undefined; - id = undefined; - - constructor() { - this.html = document.createElement('div'); - this.html.classList.add("calendar"); - this.html.classList.add("rounded"); - this.id = makeid(8); - this.html.id = this.id; - - // Calendar Header - let month = document.createElement('div'); - month.classList.add("month"); - let m_header = document.createElement('ul'); - let prev_btn = document.createElement('li'); - prev_btn.classList.add("prev"); - prev_btn.id = this.id + "-prev"; - prev_btn.innerHTML = "❮"; - m_header.appendChild(prev_btn); - let next_btn = document.createElement('li'); - next_btn.classList.add("next"); - next_btn.id = this.id + "-next"; - next_btn.innerHTML = "❯"; - m_header.appendChild(next_btn); - let month_text = document.createElement('li'); - month_text.innerHTML = "Август 2025"; - m_header.appendChild(month_text); - month.appendChild(m_header); - this.html.appendChild(month); - - // Week header - let weekdays = document.createElement('ul'); - weekdays.classList.add("weekdays"); - const days = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]; - for (const day of days) { - let day_li = document.createElement('li'); - day_li.innerHTML = day; - weekdays.appendChild(day_li); - } - this.html.appendChild(weekdays); - - let day_table = document.createElement('ul'); - day_table.classList.add("days"); - const current = 10; - for (const day of [...Array(31).keys()]) { - let day_li = document.createElement('li'); - if (day+1 == current) { - let day_sp = document.createElement('span'); - day_sp.classList.add("active"); - day_sp.innerHTML = day+1; - day_li.appendChild(day_sp); - } else { - day_li.innerHTML = day+1; - } - day_table.appendChild(day_li); - } - this.html.appendChild(day_table); - } - -} \ No newline at end of file