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

update

Browse Source
This commit is contained in:
defaultkavy 2024-03-30 21:10:45 +08:00
parent b1659b99d8
commit 6ec935153b
6 changed files with 122 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

6
docs/assets/index-C9J66gnR.js → docs/assets/index-HH4hPghE.js
View File

File diff suppressed because one or more lines are too long

1
docs/assets/index-mL8GJvpZ.css
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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>YouTube Chat Designer</title>
<script type="module" crossorigin src="/assets/index-C9J66gnR.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-mL8GJvpZ.css">
<script type="module" crossorigin src="/assets/index-HH4hPghE.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DHiXaORX.css">
</head>
<body>
<div id="app"></div>

38
src/index.scss
View File

@ -36,8 +36,30 @@ button {
color: white;
height: 100%;
cursor: pointer;
&:hover {
font-family: var(--font-family);
&:hover, &:focus {
background-color: #ffffff10;
outline: none;
}
&.done {
background-color: rgb(42, 190, 91);
}
}
.button-group {
border: 1px solid #ffffff20;
border-radius: 10px;
overflow: hidden;
display: flex;
align-content: stretch;
span {
padding: 10px;
color: #ffffffaa;
font-weight: 700;
}
button {
border: none;
border-radius: 0;
}
}
@ -55,6 +77,10 @@ app {
}
}
label, button {
user-select: none;
}
.content {
display: flex;
gap: 1rem;
@ -63,10 +89,6 @@ app {
width: 100%;
max-width: 60%;
label, button {
user-select: none;
}
.menu {
display: flex;
flex-direction: column;
@ -88,10 +110,12 @@ app {
border-radius: 10px;
width: fit-content;
overflow: hidden;
span {
padding: 10px;
button {
color: #ffffffaa;
font-weight: 700;
border-radius: 0;
border: none;
height: auto;
}
& > div {
display: flex;

111
src/main.ts
View File

@ -9,7 +9,7 @@ import { ytchat_css } from './data/ytchat';
export const ROLE_MODEL_MAP = new Map<string, Map<string, StyleModel>>();
const ROLE_LIST = ['Normal', 'Member', 'Moderator', 'Owner'];
const ELEMENT_LIST = ['Message', 'Name', 'Badge', 'Avatar', 'Author Area', 'Content Area', 'Outer Area'];
const ELEMENT_LIST = ['Message', 'Name', 'Avatar', 'Author Area', 'Content Area', 'Outer Area'];
const IS_TEXT_ELEMENT = ['Message', 'Name', 'Timestamp'];
const IS_IMAGE_ELEMENT = ['Badge', 'Avatar'];
const PANEL_MAP = new Map<string, StylePanel>();
@ -18,8 +18,8 @@ const $view = $('view');
export const $chat = new YouTubeChat().css({backgroundColor: '#131313'})
.send({name: 'Normal User', message: 'Hover mouse on the message will show the author role info.', role: 'Normal'})
.send({name: 'Member User', message: 'You can use Shift + Left Click on Role list to select multiple role!', role: 'Member'})
.send({name: 'Moderator User', message: 'yoyo', role: 'Moderator'})
.send({name: 'Owner User', message: 'Using the input panel to send message for testing.', role: 'Owner'})
.send({name: 'Moderator User', message: 'If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.', role: 'Moderator'})
.send({name: 'Owner User', message: 'Try to send message for test your design.', role: 'Owner'})
init();
function init() {
@ -46,35 +46,18 @@ function exportJson() {
}
json[role] = element_json;
}
console.debug(json);
return json;
}
$('app').content([
$('h1').content(['YouTube Chat Designer v1.0', $('span').content('DEFAULTKAVY')]),
$('h1').content(['YouTube Chat Designer v1.0.0', $('span').content('DEFAULTKAVY')]),
$('div').class('content').content([
$('div').class('console').content([
$('div').class('menu').content([
$('div').class('action-row').content([
$('div').class('role-list').content([
$('span').content('Role'),
$('div').content([
ROLE_LIST.map(id => [
$('div').class('role').content($div => [
$('input').class('role-checkbox').type('checkbox').value(id).id(id.toLowerCase()).on('input', refreshPanel),
$('label').content(id).for(id.toLowerCase())
.on('click', (e) => {
const checkboxes = $<$Input>('::.role-checkbox')
if (e.shiftKey) return;
checkboxes.forEach($input => {if ($input.id() !== id.toLowerCase()) $input.checked(false)})
})
])
])
])
]),
$('div').class('button-list').content([
$('button').content('Select All').on('click', (e, $button) => {
$('button').content('ROLE').on('click', (e, $button) => {
const $input_list = $<$Input>('::.role-checkbox');
const IS_ALL_CHECKED = !$input_list.find($input => $input.checked() === false);
$input_list
@ -82,8 +65,85 @@ $('app').content([
.forEach($input => $input.checked(!IS_ALL_CHECKED))
refreshPanel();
}),
$('button').content('Export JSON').on('click', () => exportJson()),
$('button').content('Export CSS').on('click', () => exportCSS())
$('div').content([
ROLE_LIST.map(id => [
$('div').class('role').content($div => [
$('input').class('role-checkbox').type('checkbox').value(id).id(id.toLowerCase()).on('input', refreshPanel),
$('label').content(id).for(id.toLowerCase())
.on('click', (e) => {
const $input_list = $<$Input>('::.role-checkbox');
const $self_input = $div.$<$Input>(`input#${id.toLowerCase()}`);
const IS_MULTI_CHECKED = $input_list.filter($input => $input.checked()).length > 1;
if (e.shiftKey) {
if (IS_MULTI_CHECKED) return;
else {
if ($self_input.checked()) return e.preventDefault();
return
};
}
if ($self_input.checked()) return e.preventDefault();
$input_list.forEach($input => {
if ($input.id() !== id.toLowerCase()) $input.checked(false)
})
})
])
])
])
]),
$('div').class('button-list').content([
$('div').class('button-group').content([
$('span').content('JSON'),
$('button').content('Paste').self($button => {
let timer: Timer | undefined;
$button.on('click', async (e) => {
const json_string = await navigator.clipboard.readText();
try {
const json = JSON.parse(json_string)
console.debug(json)
} catch (err) {
$button.content('Error!').class('error');
timer = setTimeout(() => {
$button.removeClass('error').content('Paste');
timer = undefined;
}, 3000);
return;
}
$button.content('Pasted!').class('done')
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
$button.removeClass('done').content('Paste');
timer = undefined;
}, 3000);
})
}),
$('button').content('Copy').self($button => {
let timer: Timer | undefined;
$button.on('click', (e) => {
navigator.clipboard.writeText(JSON.stringify(exportJson()));
$button.content('Copied!').class('done')
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
$button.removeClass('done').content('Copy');
timer = undefined;
}, 3000);
})
})
]),
$('div').class('button-group').content([
$('span').content('CSS'),
$('button').content('Copy').self($button => {
let timer: Timer | undefined;
$button.on('click', (e) => {
navigator.clipboard.writeText(exportCSS());
$button.content('Copied!').class('done')
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
$button.removeClass('done').content('Copy');
timer = undefined;
}, 3000);
})
})
])
]),
]),
$('div').class('element-list').content($content => [
@ -179,8 +239,7 @@ function exportCSS() {
css += `${selector} {\n${stylesheet}\n}\n\n`
}
}
console.debug(css)
return css;
function toCssProp(str: string) {
return str.replaceAll(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`)