forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: base for webamp input configurator element
+141
+99
src/themes/webamp/configurators/input/element.js
+99
src/themes/webamp/configurators/input/element.js
···
1
+
import { DiffuseElement, query, whenElementsDefined } from "@common/element.js";
2
+
import { signal } from "@common/signal.js";
3
+
4
+
/**
5
+
* @import {RenderArg} from "@common/element.d.ts"
6
+
* @import {Track} from "@definitions/types.d.ts"
7
+
* @import {InputElement} from "@components/input/types.d.ts"
8
+
*/
9
+
10
+
class InputConfig extends DiffuseElement {
11
+
constructor() {
12
+
super();
13
+
this.attachShadow({ mode: "open" });
14
+
}
15
+
16
+
// RENDER
17
+
18
+
/**
19
+
* @param {RenderArg} _
20
+
*/
21
+
render({ html }) {
22
+
return html`
23
+
<link rel="stylesheet" href="styles/vendor/98.css" />
24
+
25
+
<style>
26
+
@import "./themes/webamp/98-vars.css";
27
+
28
+
menu[role="tablist"] {
29
+
padding-top: 2px;
30
+
31
+
li > label {
32
+
display: block;
33
+
margin: var(--radio-label-spacing);
34
+
}
35
+
36
+
/* Copied styles from "li[aria-selected=true]" */
37
+
li:has(input:checked) {
38
+
padding-bottom: 2px;
39
+
margin-top: -2px;
40
+
background-color: var(--surface);
41
+
position: relative;
42
+
z-index: 8;
43
+
margin-left: -3px;
44
+
}
45
+
46
+
input {
47
+
display: none
48
+
}
49
+
}
50
+
51
+
.window-body {
52
+
display: none
53
+
}
54
+
55
+
#tabbed:has(#opensubsonic-tab:checked) #opensubsonic-contents { display: block }
56
+
#tabbed:has(#s3-tab:checked) #s3-contents { display: block }
57
+
</style>
58
+
59
+
<div id="tabbed">
60
+
<menu role="tablist" class="multirows">
61
+
<li role="tab">
62
+
<label for="opensubsonic-tab">
63
+
<span>OpenSubsonic</span>
64
+
<input name="input-tab" id="opensubsonic-tab" type="radio" checked="" />
65
+
</label>
66
+
</li>
67
+
<li role="tab">
68
+
<label for="s3-tab">
69
+
<span>S3</span>
70
+
<input name="input-tab" id="s3-tab" type="radio" />
71
+
</label>
72
+
</li>
73
+
</menu>
74
+
<div class="window" role="tabpanel">
75
+
<!-- Opensubsonic -->
76
+
<div class="window-body" id="opensubsonic-contents">
77
+
<p>TODO: Opensubsonic form</p>
78
+
</div>
79
+
80
+
<!-- S3 -->
81
+
<div class="window-body" id="s3-contents">
82
+
<p>TODO: S3 form</p>
83
+
</div>
84
+
</div>
85
+
</div>
86
+
`;
87
+
}
88
+
}
89
+
90
+
export default InputConfig;
91
+
92
+
////////////////////////////////////////////
93
+
// REGISTER
94
+
////////////////////////////////////////////
95
+
96
+
export const CLASS = InputConfig;
97
+
export const NAME = "dtw-input-config";
98
+
99
+
customElements.define(NAME, CLASS);
+42
src/themes/webamp/configurators/input/index.vto
+42
src/themes/webamp/configurators/input/index.vto
···
1
+
---
2
+
layout: layouts/diffuse.vto
3
+
base: ../../../../
4
+
5
+
styles:
6
+
- styles/vendor/98.css
7
+
- themes/webamp/fonts.css
8
+
- themes/webamp/constituent.css
9
+
---
10
+
11
+
<!-- ELEMENTS -->
12
+
13
+
<div class="window">
14
+
<div
15
+
class="title-bar"
16
+
>
17
+
<div class="title-bar-icon">
18
+
<img src="images/icons/windows_98/directory_explorer-4.png" height="14" />
19
+
</div>
20
+
<div class="title-bar-text" draggable="false">
21
+
Input configurator
22
+
</div>
23
+
<div class="title-bar-controls">
24
+
<button aria-label="Close" onclick="window.close()"></button>
25
+
</div>
26
+
</div>
27
+
<div class="window-body">
28
+
<dtw-input-config></dtw-input-config>
29
+
</div>
30
+
</div>
31
+
32
+
<!-- SCRIPTS -->
33
+
34
+
<script type="module">
35
+
import { config } from "./common/constituents/default.js"
36
+
37
+
// Prepare default constituents setup
38
+
const defaults = config()
39
+
40
+
// Only then initialize the other elements
41
+
import("./themes/webamp/configurators/input/element.js")
42
+
</script>