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

v1.0.5

Browse Source 
add: border radius link
This commit is contained in:
defaultkavy 2024-03-31 14:04:20 +08:00
parent d084a93a4b
commit 22d3148fce
6 changed files with 81 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
docs/assets/index-DTS3ifer.js Normal file
View File

File diff suppressed because one or more lines are too long

58
docs/assets/index-d29HCUyH.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -29,7 +29,7 @@
<meta name="twitter:title" content="YouTube Chat Designer">
<meta name="twitter:description" content="YouTube Chat CSS design tool for streamer.">
<!-- <meta name="twitter:image" content=""> -->
<script type="module" crossorigin src="/assets/index-d29HCUyH.js"></script>
<script type="module" crossorigin src="/assets/index-DTS3ifer.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nOkcB8kh.css">
</head>
<body>

2
src/component/RangeInput.ts
View File

@ -32,7 +32,7 @@ export class RangeInput extends InputComponent {
value(): string;
value(value: string | undefined): this;
value(value?: string) {
if (!arguments.length) return this.value();
if (!arguments.length) return this.$value.value();
if (value === undefined) return this;
if (value.match(/[a-zA-Z]/)) value = value.replaceAll(/[a-zA-Z]/g, '')
super.value(value);

2
src/config.ts
View File

@ -1,5 +1,5 @@
export const config = {
version: 'v1.0.4',
version: 'v1.0.5',
github_homepage: 'https://github.com/defaultkavy/youtube-chat-designer',
author_link: 'https://x.com/defaultkavy'
}

23
src/structure/StylePanel.ts
View File

@ -113,9 +113,26 @@ export class StylePanel extends $Container {
]),
]),
$('section').content([
$('h3').content('Border Radius'),
['top-left', 'top-right', 'bottom-left', 'bottom-right'].map(corner =>
new RangeInput(`border-${corner}-radius`).value(this.data[`border${propCap(corner)}Radius`]).unit('px').label(`${corner.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).toString().replace(',', ' ')}`) )
$('header').content([
$('h3').content('Border Radius'),
$('div').content([
$('label').content('Link').for('border-radius-link'),
$('input').id('border-radius-link').type('checkbox').checked(true)
])
]),
$('div').content([
['top-left', 'top-right', 'bottom-left', 'bottom-right'].map(corner =>
new RangeInput(`border-${corner}-radius`).value(this.data[`border${propCap(corner)}Radius`]).unit('px').label(`${corner.split('-').map(str => str.charAt(0).toUpperCase() + str.slice(1)).toString().replace(',', ' ')}`)
.on('input', (e, $range) => {
if (!$<$Input>(':#border-radius-link')?.checked()) return;
['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(d => {
if (d === corner) return;
$<RangeInput>(`:div.border-${d}-radius`)?.value($range.value())
})
})
)
])
]),
])
}