Skip to content

Commit a84939f

Browse files
vectorcmdrvectorcmdr
committed
✨ add builtin config editor
1 parent 4a8b4bd commit a84939f

File tree

7 files changed

+206
-14
lines changed

7 files changed

+206
-14
lines changed

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,9 @@
2222
<div class="ball"></div>
2323
</label>
2424
</div>
25-
<!--
2625
<div class="credit">
2726
<p id="copyright">
2827
</div>
29-
-->
3028

3129
<tabs-list></tabs-list>
3230
<todo-list class="|" id="todo"></todo-list>
@@ -61,6 +59,8 @@
6159

6260
<script type="text/javascript" src="src/components/search/search.component.js"></script>
6361

62+
<script type="text/javascript" src="src/components/config/config.component.js"></script>
63+
6464
<script type="text/javascript" src="src/common/module.js"></script>
6565

6666
</body>

‎src/common/config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ class Config {
3535
tabs: [],
3636
keybindings: {
3737
"t": 'todo-list',
38-
"s": 'search-bar'
38+
"s": 'search-bar',
39+
"c": "config-editor",
3940
}
4041
};
4142

‎src/common/module.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const components = {
22
'search-bar': Search,
3+
'config-editor': ConfigEditor,
34
'todo-list': Todo,
45
'status-bar': Statusbar,
56
'currency-compare': Currency,

‎src/components/config/config.component.js‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
class ConfigEditor extends Component {
2+
refs = {
3+
config: '#config',
4+
textarea: '#config textarea[type="text"]',
5+
save: '.save',
6+
close: '.close'
7+
};
8+
9+
constructor() {
10+
super();
11+
this.config = JSON.parse(localStorage.getItem("config")).config;
12+
}
13+
14+
style() {
15+
return `
16+
#config {
17+
position: absolute;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
width: calc(100% - 2px);
22+
height: 100%;
23+
background: var(--editor-bg);
24+
z-index: 99;
25+
visibility: hidden;
26+
top: -100%;
27+
transition: all .3s ease-in-out;
28+
}
29+
30+
#config.active {
31+
top: 0;
32+
visibility: visible;
33+
}
34+
35+
#config div {
36+
position: relative;
37+
width: 95%;
38+
}
39+
40+
#config textarea {
41+
border: 0;
42+
outline: 0;
43+
width: 100%;
44+
box-shadow: inset 0 -1px var(--editor-unfocus);
45+
padding: .5em 0;
46+
background: none;
47+
font: 350 12px 'Roboto', sans-serif;
48+
letter-spacing: 1px;
49+
color: var(--editor-text);
50+
resize: none;
51+
height: 28vh;
52+
-ms-overflow-style: none;
53+
scrollbar-width: none;
54+
}
55+
56+
#config textarea:focus {
57+
box-shadow: inset 0 -1px var(--editor-focus);
58+
}
59+
60+
#config textarea::selection {
61+
background: var(--editor-select-bg);
62+
color: var(--editor-select);
63+
}
64+
65+
#config textarea::-webkit-scrollbar {
66+
display: none;
67+
}
68+
69+
#config .save {
70+
background: 0;
71+
border: 0;
72+
outline: 0;
73+
color: var(--editor-save);
74+
position: absolute;
75+
right: 28px;
76+
cursor: pointer;
77+
top: 6px;
78+
}
79+
80+
#config .save:hover {
81+
filter: opacity(.8);
82+
}
83+
84+
#config .close {
85+
background: 0;
86+
border: 0;
87+
outline: 0;
88+
color: var(--editor-close);
89+
position: absolute;
90+
right: 0;
91+
cursor: pointer;
92+
top: 4px;
93+
}
94+
95+
#config .close:hover {
96+
filter: opacity(.8);
97+
}
98+
99+
.material-icons.md-20 {
100+
font-size: 20px;
101+
}
102+
103+
.material-icons.md-24 {
104+
font-size: 24px;
105+
}
106+
107+
`;
108+
}
109+
110+
imports() {
111+
return [
112+
this.resources.fonts.roboto,
113+
this.resources.icons.material
114+
];
115+
}
116+
117+
template() {
118+
return `
119+
<div id="config">
120+
<div>
121+
<textarea type="text" spellcheck="false"></textarea>
122+
<button class="save"><i class="material-icons md-20">&#xe161;</i></button>
123+
<button class="close"><i class="material-icons md-24">&#xE5CD;</i></button>
124+
</div>
125+
</div>
126+
`;
127+
}
128+
129+
activate() {
130+
this.refs.config.classList.add('active');
131+
this.refs.textarea.scrollIntoView();
132+
setTimeout(() => this.refs.textarea.focus(), 100);
133+
}
134+
135+
deactivate() {
136+
this.refs.config.classList.remove('active');
137+
}
138+
139+
saveConfig() {
140+
localStorage.setItem("CONFIG", this.refs.textarea.value);
141+
this.deactivate();
142+
location.reload();
143+
}
144+
145+
handleSearch(event) {
146+
const { key } = event;
147+
148+
if (key === 'Escape')
149+
this.deactivate();
150+
}
151+
152+
setEvents() {
153+
this.refs.config.onkeyup = (e) => this.handleSearch(e);
154+
this.refs.close.onclick = () => this.deactivate();
155+
this.refs.save.onclick = () => this.saveConfig();
156+
}
157+
158+
setConfig() {
159+
this.refs.textarea.value = JSON.stringify(this.config, null, 4);
160+
}
161+
162+
connectedCallback() {
163+
this.render().then(() => {
164+
this.setEvents();
165+
this.setConfig();
166+
});
167+
}
168+
}

‎src/components/tabs/tabs.component.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,7 @@ class Tabs extends Component {
305305
<div class="categories">
306306
${Category.getAll(this.tabs)}
307307
<search-bar></search-bar>
308+
<config-editor></config-editor>
308309
</div>
309310
310311
</div>
@@ -345,8 +346,12 @@ function darkModeReload() {
345346
}
346347
}
347348

349+
//function getCopyright(){
350+
// document.getElementById("copyright").innerHTML = `Senzai StartPage <br>by <a href="https://github.com/vectorcmdr">@vector_cmdr</a>`;
351+
//}
352+
348353
function getCopyright(){
349-
document.getElementById("copyright").innerHTML = `Senzai StartPage <br>by <a href="https://github.com/lottehime">@vector_cmdr</a>`;
354+
document.getElementById("copyright").innerHTML = ``;
350355
}
351356

352357
window.onload = function() {

‎src/css/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,15 @@
145145
--link-visited: var(--wisteria-light);
146146
--link-hover: var(--sky-light);
147147
--link-active: var(--wisteria-dark);
148+
--editor-bg: var(--basalt);
149+
--editor-unfocus: var(--hydrangea-light);
150+
--editor-shadow: var(--slate-tr);
151+
--editor-text: var(--pebble);
152+
--editor-focus: var(--ginkgo-light);
153+
--editor-select-bg: var(--mackerel-tr);
154+
--editor-select: var(--pebble);
155+
--editor-save: var(--ginkgo-dark);
156+
--editor-close: var(--hydrangea-dark);
148157
--background-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23191921' fill-opacity='0.55'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
149158
}
150159

@@ -223,6 +232,15 @@
223232
--link-visited: var(--wisteria-light);
224233
--link-hover: var(--sky-light);
225234
--link-active: var(--wisteria-dark);
235+
--editor-bg: var(--basalt);
236+
--editor-unfocus: var(--hydrangea-light);
237+
--editor-shadow: var(--slate-tr);
238+
--editor-text: var(--pebble);
239+
--editor-focus: var(--ginkgo-light);
240+
--editor-select-bg: var(--mackerel-tr);
241+
--editor-select: var(--pebble);
242+
--editor-save: var(--ginkgo-dark);
243+
--editor-close: var(--hydrangea-dark);
226244
--background-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23191921' fill-opacity='0.05'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
227245
}
228246

‎userconfig.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
const CONFIG = new Config({
1+
let saved_config = JSON.parse(localStorage.getItem("CONFIG"));
2+
3+
const default_config = {
24
overrideStorage: true, // override localStorage with fixed userconfig values
35

46
disabled: [],
@@ -45,7 +47,8 @@ const CONFIG = new Config({
4547
},
4648
keybindings: {
4749
"t": 'todo-list',
48-
"s": 'search-bar'
50+
"s": 'search-bar',
51+
"c": "config-editor",
4952
},
5053
openLastVisitedTab: false,
5154
// For icon names, see: https://tabler.io/icons
@@ -473,12 +476,8 @@ const CONFIG = new Config({
473476
},
474477
]
475478
},
476-
//{
477-
// name: 'test',
478-
// background_url: 'src/img/banners/bg-2.gif',
479-
// move: '0',
480-
// scale: '0',
481-
// categories: []
482-
//}
483479
]
484-
});
480+
};
481+
482+
const CONFIG = new Config(saved_config ?? default_config);
483+
// const CONFIG = new Config(default_config);

0 commit comments

Comments
 (0)