Skip to content

Commit deb98ea

Browse files
stevenjoezhangstevenjoezhang
committed
Use class to control style
1 parent 39d77b6 commit deb98ea

File tree

3 files changed

+38
-84
lines changed

3 files changed

+38
-84
lines changed

‎dist/waifu.css

Lines changed: 23 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22
background-color: #fa0;
33
border-radius: 5px;
44
bottom: 66px;
5-
color: #fff;
65
cursor: pointer;
7-
font-size: 12px;
6+
display: flex;
7+
justify-content: flex-end;
88
left: 0;
99
margin-left: -100px;
10-
padding: 5px 0 5px 5px;
10+
padding: 5px;
1111
position: fixed;
1212
transition: margin-left 1s;
1313
width: 60px;
14-
writing-mode: vertical-rl;
1514
}
1615

1716
#waifu-toggle.waifu-toggle-active {
@@ -22,19 +21,32 @@
2221
margin-left: -30px;
2322
}
2423

24+
#waifu-toggle svg {
25+
fill: #fff;
26+
height: 25px;
27+
}
28+
2529
#waifu {
26-
bottom: -1000px;
30+
bottom: -500px;
2731
left: 0;
2832
line-height: 0;
2933
margin-bottom: -10px;
3034
position: fixed;
31-
transform: translateY(3px);
35+
transform: translateY(10px);
3236
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
3337
z-index: 1;
3438
}
3539

40+
#waifu.waifu-active {
41+
bottom: 0;
42+
}
43+
44+
#waifu.waifu-hidden {
45+
display: none;
46+
}
47+
3648
#waifu:hover {
37-
transform: translateY(0);
49+
transform: translateY(5px);
3850
}
3951

4052
#waifu-tips {
@@ -78,7 +90,10 @@
7890
}
7991

8092
#waifu-tool {
81-
color: #aaa;
93+
align-items: center;
94+
display: flex;
95+
flex-direction: column;
96+
gap: 5px;
8297
opacity: 0;
8398
position: absolute;
8499
right: -10px;
@@ -90,12 +105,6 @@
90105
opacity: 1;
91106
}
92107

93-
#waifu-tool span {
94-
display: block;
95-
height: 30px;
96-
text-align: center;
97-
}
98-
99108
#waifu-tool svg {
100109
fill: #7b8c9d;
101110
cursor: pointer;
@@ -107,209 +116,154 @@
107116
fill: #0684bd; /* #34495e */
108117
}
109118

110-
#waifu-toggle svg {
111-
fill: #fff;
112-
height: 25px;
113-
margin-right: -5px;
114-
}
115-
116119
@keyframes shake {
117120
2% {
118121
transform: translate(.5px, -1.5px) rotate(-.5deg);
119122
}
120-
121123
4% {
122124
transform: translate(.5px, 1.5px) rotate(1.5deg);
123125
}
124-
125126
6% {
126127
transform: translate(1.5px, 1.5px) rotate(1.5deg);
127128
}
128-
129129
8% {
130130
transform: translate(2.5px, 1.5px) rotate(.5deg);
131131
}
132-
133132
10% {
134133
transform: translate(.5px, 2.5px) rotate(.5deg);
135134
}
136-
137135
12% {
138136
transform: translate(1.5px, 1.5px) rotate(.5deg);
139137
}
140-
141138
14% {
142139
transform: translate(.5px, .5px) rotate(.5deg);
143140
}
144-
145141
16% {
146142
transform: translate(-1.5px, -.5px) rotate(1.5deg);
147143
}
148-
149144
18% {
150145
transform: translate(.5px, .5px) rotate(1.5deg);
151146
}
152-
153147
20% {
154148
transform: translate(2.5px, 2.5px) rotate(1.5deg);
155149
}
156-
157150
22% {
158151
transform: translate(.5px, -1.5px) rotate(1.5deg);
159152
}
160-
161153
24% {
162154
transform: translate(-1.5px, 1.5px) rotate(-.5deg);
163155
}
164-
165156
26% {
166157
transform: translate(1.5px, .5px) rotate(1.5deg);
167158
}
168-
169159
28% {
170160
transform: translate(-.5px, -.5px) rotate(-.5deg);
171161
}
172-
173162
30% {
174163
transform: translate(1.5px, -.5px) rotate(-.5deg);
175164
}
176-
177165
32% {
178166
transform: translate(2.5px, -1.5px) rotate(1.5deg);
179167
}
180-
181168
34% {
182169
transform: translate(2.5px, 2.5px) rotate(-.5deg);
183170
}
184-
185171
36% {
186172
transform: translate(.5px, -1.5px) rotate(.5deg);
187173
}
188-
189174
38% {
190175
transform: translate(2.5px, -.5px) rotate(-.5deg);
191176
}
192-
193177
40% {
194178
transform: translate(-.5px, 2.5px) rotate(.5deg);
195179
}
196-
197180
42% {
198181
transform: translate(-1.5px, 2.5px) rotate(.5deg);
199182
}
200-
201183
44% {
202184
transform: translate(-1.5px, 1.5px) rotate(.5deg);
203185
}
204-
205186
46% {
206187
transform: translate(1.5px, -.5px) rotate(-.5deg);
207188
}
208-
209189
48% {
210190
transform: translate(2.5px, -.5px) rotate(.5deg);
211191
}
212-
213192
50% {
214193
transform: translate(-1.5px, 1.5px) rotate(.5deg);
215194
}
216-
217195
52% {
218196
transform: translate(-.5px, 1.5px) rotate(.5deg);
219197
}
220-
221198
54% {
222199
transform: translate(-1.5px, 1.5px) rotate(.5deg);
223200
}
224-
225201
56% {
226202
transform: translate(.5px, 2.5px) rotate(1.5deg);
227203
}
228-
229204
58% {
230205
transform: translate(2.5px, 2.5px) rotate(.5deg);
231206
}
232-
233207
60% {
234208
transform: translate(2.5px, -1.5px) rotate(1.5deg);
235209
}
236-
237210
62% {
238211
transform: translate(-1.5px, .5px) rotate(1.5deg);
239212
}
240-
241213
64% {
242214
transform: translate(-1.5px, 1.5px) rotate(1.5deg);
243215
}
244-
245216
66% {
246217
transform: translate(.5px, 2.5px) rotate(1.5deg);
247218
}
248-
249219
68% {
250220
transform: translate(2.5px, -1.5px) rotate(1.5deg);
251221
}
252-
253222
70% {
254223
transform: translate(2.5px, 2.5px) rotate(.5deg);
255224
}
256-
257225
72% {
258226
transform: translate(-.5px, -1.5px) rotate(1.5deg);
259227
}
260-
261228
74% {
262229
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
263230
}
264-
265231
76% {
266232
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
267233
}
268-
269234
78% {
270235
transform: translate(-1.5px, 2.5px) rotate(.5deg);
271236
}
272-
273237
80% {
274238
transform: translate(-1.5px, .5px) rotate(-.5deg);
275239
}
276-
277240
82% {
278241
transform: translate(-1.5px, .5px) rotate(-.5deg);
279242
}
280-
281243
84% {
282244
transform: translate(-.5px, .5px) rotate(1.5deg);
283245
}
284-
285246
86% {
286247
transform: translate(2.5px, 1.5px) rotate(.5deg);
287248
}
288-
289249
88% {
290250
transform: translate(-1.5px, .5px) rotate(1.5deg);
291251
}
292-
293252
90% {
294253
transform: translate(-1.5px, -.5px) rotate(-.5deg);
295254
}
296-
297255
92% {
298256
transform: translate(-1.5px, -1.5px) rotate(1.5deg);
299257
}
300-
301258
94% {
302259
transform: translate(.5px, .5px) rotate(-.5deg);
303260
}
304-
305261
96% {
306262
transform: translate(2.5px, -.5px) rotate(-.5deg);
307263
}
308-
309264
98% {
310265
transform: translate(-1.5px, -1.5px) rotate(-.5deg);
311266
}
312-
313267
0%, 100% {
314268
transform: translate(0, 0) rotate(0);
315269
}

‎src/tools.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,11 @@ class ToolsManager {
121121
showMessage(message, 2000, 11);
122122
const waifu = document.getElementById('waifu');
123123
if (!waifu) return;
124-
waifu.style.bottom = '-500px';
124+
waifu.classList.remove('waifu-active');
125125
setTimeout(() => {
126-
waifu.style.display = 'none';
126+
waifu.classList.add('waifu-hidden');
127127
const waifuToggle = document.getElementById('waifu-toggle');
128-
if (!waifuToggle) return;
129-
waifuToggle.classList.add('waifu-toggle-active');
128+
waifuToggle?.classList.add('waifu-toggle-active');
130129
}, 3000);
131130
}
132131
}
@@ -137,18 +136,19 @@ class ToolsManager {
137136
if (!Array.isArray(this.config.tools)) {
138137
this.config.tools = Object.keys(this.tools);
139138
}
140-
for (const toolName of this.config.tools!) {
139+
for (const toolName of this.config.tools) {
141140
if (this.tools[toolName]) {
142141
const { icon, callback } = this.tools[toolName];
142+
const element = document.createElement('span');
143+
element.id = `waifu-tool-${toolName}`;
144+
element.innerHTML = icon;
143145
document
144-
.getElementById('waifu-tool')!
145-
.insertAdjacentHTML(
146+
.getElementById('waifu-tool')
147+
?.insertAdjacentElement(
146148
'beforeend',
147-
`<span id="waifu-tool-${toolName}">${icon}</span>`,
149+
element,
148150
);
149-
document
150-
.getElementById(`waifu-tool-${toolName}`)!
151-
.addEventListener('click', callback);
151+
element.addEventListener('click', callback);
152152
}
153153
}
154154
}

‎src/widget.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ async function loadWidget(config: Config) {
187187
await model.loadModel('');
188188
new ToolsManager(model, config, tips).registerTools();
189189
if (config.drag) registerDrag();
190-
document.getElementById('waifu')!.style.bottom = '0';
190+
document.getElementById('waifu')?.classList.add('waifu-active');
191191
}
192192

193193
/**
@@ -208,15 +208,15 @@ function initWidget(config: string | Config) {
208208
);
209209
const toggle = document.getElementById('waifu-toggle');
210210
toggle?.addEventListener('click', () => {
211-
toggle!.classList.remove('waifu-toggle-active');
211+
toggle?.classList.remove('waifu-toggle-active');
212212
if (toggle?.getAttribute('first-time')) {
213213
loadWidget(config as Config);
214214
toggle?.removeAttribute('first-time');
215215
} else {
216216
localStorage.removeItem('waifu-display');
217-
document.getElementById('waifu')!.style.display = '';
217+
document.getElementById('waifu')?.classList.remove('waifu-hidden');
218218
setTimeout(() => {
219-
document.getElementById('waifu')!.style.bottom = '0';
219+
document.getElementById('waifu')?.classList.add('waifu-active');
220220
}, 0);
221221
}
222222
});

0 commit comments

Comments
 (0)