defaultkavy/ytcd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.1

Browse Source 
update: JSON Paste
This commit is contained in:
defaultkavy 2024-03-30 21:44:03 +08:00
parent 6ec935153b
commit 92c2d0f9e7
11 changed files with 97 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/CNAME
View File

@ -1 +0,0 @@
ytchat.defaultkavy.com

1
docs/assets/index-B1D6x7ti.css Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/assets/index-DHiXaORX.css
View File

File diff suppressed because one or more lines are too long

49
docs/assets/index-HH4hPghE.js
View File

File diff suppressed because one or more lines are too long

49
docs/assets/index-umLM2jpx.js Normal file
View File

File diff suppressed because one or more lines are too long

4
docs/index.html
View File

@ -4,8 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YouTube Chat Designer</title> <title>YouTube Chat Designer</title>
<script type="module" crossorigin src="/assets/index-HH4hPghE.js"></script> <script type="module" crossorigin src="/assets/index-umLM2jpx.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DHiXaORX.css"> <link rel="stylesheet" crossorigin href="/assets/index-B1D6x7ti.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3
src/config.ts Normal file
View File

@ -0,0 +1,3 @@
export const config = {
version: 'v1.0.1'
}

3
src/index.scss
View File

@ -44,6 +44,9 @@ button {
&.done { &.done {
background-color: rgb(42, 190, 91); background-color: rgb(42, 190, 91);
} }
&.error {
background-color: #e44141;
}
} }
.button-group { .button-group {

52
src/main.ts
View File

@ -6,6 +6,7 @@ import { YouTubeChat } from './structure/YouTubeChat';
import { $Input } from 'fluentx/lib/$Input'; import { $Input } from 'fluentx/lib/$Input';
import { ColorInput } from './component/ColorInput'; import { ColorInput } from './component/ColorInput';
import { ytchat_css } from './data/ytchat'; import { ytchat_css } from './data/ytchat';
import { config } from './config';
export const ROLE_MODEL_MAP = new Map<string, Map<string, StyleModel>>(); export const ROLE_MODEL_MAP = new Map<string, Map<string, StyleModel>>();
const ROLE_LIST = ['Normal', 'Member', 'Moderator', 'Owner']; const ROLE_LIST = ['Normal', 'Member', 'Moderator', 'Owner'];
@ -22,42 +23,34 @@ export const $chat = new YouTubeChat().css({backgroundColor: '#131313'})
.send({name: 'Owner User', message: 'Try to send message for test your design.', role: 'Owner'}) .send({name: 'Owner User', message: 'Try to send message for test your design.', role: 'Owner'})
init(); init();
function init() { function init(data = defaultStyle) {
ROLE_MODEL_MAP.clear(); ROLE_MODEL_MAP.clear();
for (const role of ROLE_LIST) { for (const role of ROLE_LIST) {
const STYLE_MAP = new Map<string, StyleModel>() const STYLE_MAP = new Map<string, StyleModel>()
ROLE_MODEL_MAP.set(role, STYLE_MAP) ROLE_MODEL_MAP.set(role, STYLE_MAP);
for (const element of ELEMENT_LIST) { for (const element of ELEMENT_LIST) {
const model = new StyleModel(defaultStyle[role][element]); const model = new StyleModel(data[role][element]);
STYLE_MAP.set(element, model) STYLE_MAP.set(element, model)
$chat.updateStyle(element, model, [role]) $chat.updateStyle(element, model, [role])
} }
} }
$view.deleteAllView().clear();
for (const element of ELEMENT_LIST) PANEL_MAP.set(element, new StylePanel(element, IS_TEXT_ELEMENT.includes(element) ? 'text' : IS_IMAGE_ELEMENT.includes(element) ? 'image' : 'element')) for (const element of ELEMENT_LIST) {
} const $panel = new StylePanel(element, IS_TEXT_ELEMENT.includes(element) ? 'text' : IS_IMAGE_ELEMENT.includes(element) ? 'image' : 'element');
PANEL_MAP.set(element, $panel)
function exportJson() { $view.setView(element, $panel)
const json = {};
for (const [role, element_model_map] of ROLE_MODEL_MAP.entries()) {
const element_json = {};
for (const [element, model]of element_model_map.entries()) {
element_json[element] = model.data
}
json[role] = element_json;
} }
return json;
} }
$('app').content([ $('app').content([
$('h1').content(['YouTube Chat Designer v1.0.0', $('span').content('DEFAULTKAVY')]), $('h1').content(['YouTube Chat Designer', $('span').content(config.version)]),
$('div').class('content').content([ $('div').class('content').content([
$('div').class('console').content([ $('div').class('console').content([
$('div').class('menu').content([ $('div').class('menu').content([
$('div').class('action-row').content([ $('div').class('action-row').content([
$('div').class('role-list').content([ $('div').class('role-list').content([
$('button').content('ROLE').on('click', (e, $button) => { $('button').content('ROLE').on('click', () => {
const $input_list = $<$Input>('::.role-checkbox'); const $input_list = $<$Input>('::.role-checkbox');
const IS_ALL_CHECKED = !$input_list.find($input => $input.checked() === false); const IS_ALL_CHECKED = !$input_list.find($input => $input.checked() === false);
$input_list $input_list
@ -98,8 +91,8 @@ $('app').content([
$button.on('click', async (e) => { $button.on('click', async (e) => {
const json_string = await navigator.clipboard.readText(); const json_string = await navigator.clipboard.readText();
try { try {
const json = JSON.parse(json_string) const json = JSON.parse(json_string);
console.debug(json) init(json);
} catch (err) { } catch (err) {
$button.content('Error!').class('error'); $button.content('Error!').class('error');
timer = setTimeout(() => { timer = setTimeout(() => {
@ -108,6 +101,7 @@ $('app').content([
}, 3000); }, 3000);
return; return;
} }
load();
$button.content('Pasted!').class('done') $button.content('Pasted!').class('done')
if (timer) clearTimeout(timer); if (timer) clearTimeout(timer);
timer = setTimeout(() => { timer = setTimeout(() => {
@ -148,8 +142,7 @@ $('app').content([
]), ]),
$('div').class('element-list').content($content => [ $('div').class('element-list').content($content => [
ELEMENT_LIST.map(id => { ELEMENT_LIST.map(id => {
$view.set(id, PANEL_MAP.get(id)!) return $('button').staticClass('element-button').content(id).on('click', (e, $button) => $view.switchView(id))
return $('button').staticClass('element-button').content(id).on('click', (e, $button) => $view.switch(id))
.self($button => { .self($button => {
$view.event.on('switch', content_id => { $view.event.on('switch', content_id => {
if (content_id !== id) $button.removeClass('active'); if (content_id !== id) $button.removeClass('active');
@ -198,7 +191,8 @@ load();
exportCSS(); exportCSS();
function load() { function load() {
$view.switch('Message'); $view.switchView('Message');
$<$Input>('::.role-checkbox')?.forEach($input => $input.checked(false));
$<$Input>(':#normal')?.checked(true); $<$Input>(':#normal')?.checked(true);
refreshPanel(); refreshPanel();
} }
@ -244,4 +238,16 @@ function exportCSS() {
function toCssProp(str: string) { function toCssProp(str: string) {
return str.replaceAll(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`) return str.replaceAll(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`)
} }
}
function exportJson() {
const json = {};
for (const [role, element_model_map] of ROLE_MODEL_MAP.entries()) {
const element_json = {};
for (const [element, model]of element_model_map.entries()) {
element_json[element] = model.data
}
json[role] = element_json;
}
return json;
} }

13
src/structure/StylePanel.ts
View File

@ -17,13 +17,18 @@ export class StylePanel extends $Container {
this.name = name; this.name = name;
this.layout(); this.layout();
this.on('input', e => { this.on('input', e => {
this.role_model_list.forEach(([role, model]) => { this.update();
model.update(this)
$chat.updateStyle(this.name, model, [role]);
});
}) })
} }
update() {
this.role_model_list.forEach(([role, model]) => {
model.update(this)
$chat.updateStyle(this.name, model, [role]);
});
return this;
}
layout() { layout() {
if (!this.roles.length) return this.clear(); if (!this.roles.length) return this.clear();
const backgroundColor = this.data.backgroundColor === '??' ? {HEX: '??', A: '??'} : new ColorTranslator(this.data.backgroundColor!); const backgroundColor = this.data.backgroundColor === '??' ? {HEX: '??', A: '??'} : new ColorTranslator(this.data.backgroundColor!);

2
tsconfig.json
View File

@ -26,5 +26,5 @@
"experimentalDecorators": true "experimentalDecorators": true
}, },
"exclude": ["dist"] "exclude": ["dist", "docs"]
} }