Skip to content

Commit 9a72971

Browse files
adokseoadokseo
committed
"Remove" function & fixes
1 parent 6aa7ffe commit 9a72971

8 files changed

Lines changed: 290 additions & 56 deletions

File tree

‎assets/icons/128.png~‎

-621 Bytes
Binary file not shown.

‎assets/icons/16.png~‎

-29 Bytes
Binary file not shown.

‎assets/icons/32.png~‎

46 Bytes
Binary file not shown.

‎assets/icons/48.png~‎

91 Bytes
Binary file not shown.

‎popup.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,37 @@ body[data-appearance='home'] .satus-text--title
300300
background-color: var(--satus-theme-surface, #fff);
301301
}
302302

303+
.satus-main__container .satus-list li .satus-section
304+
{
305+
position: relative;
306+
307+
width: 100%;
308+
}
309+
310+
.satus-button--remove
311+
{
312+
position: absolute;
313+
z-index: 1;
314+
top: 6px;
315+
right: 8px;
316+
317+
visibility: hidden;
318+
319+
width: 36px;
320+
height: 36px;
321+
padding: 6px;
322+
}
323+
324+
.satus-button--remove::before
325+
{
326+
border-radius: 50%;
327+
}
328+
329+
.satus-main__container .satus-list li .satus-section:hover .satus-button--remove
330+
{
331+
visibility: visible;
332+
}
333+
303334
.satus-main__container .satus-list--message
304335
{
305336
padding-right: 8px;
@@ -328,7 +359,7 @@ body[data-appearance='home'] .satus-text--title
328359
4.0 BUTTON
329360
--------------------------------------------------------------*/
330361

331-
.satus-main .satus-button
362+
.satus-main .satus-button:not(.satus-button--remove)
332363
{
333364
width: 100%;
334365
height: 48px;

‎popup.js‎

Lines changed: 113 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,40 @@ function change(old_index, new_index) {
2020
Satus.storage.set('data', JSON.stringify(data2));
2121
}
2222

23+
function remove() {
24+
var main = document.querySelector('.satus-main'),
25+
history_item = main.history[main.history.length - 1],
26+
data = JSON.parse(Satus.storage.get('data') || '{}');
27+
28+
if (main.history.length > 1) {
29+
var key = this.parentNode.querySelector('.satus-switch').dataset.key;
30+
31+
delete data[history_item.storage_key][key];
32+
delete history_item[key];
33+
34+
Satus.storage.set('data', JSON.stringify(data));
35+
36+
var object = Object.assign(history_item);
37+
38+
delete object.type;
39+
40+
document.querySelector('.satus-scrollbar__content').innerHTML = '';
41+
42+
update();
43+
} else {
44+
delete data[this.parentNode.querySelector('.satus-folder').dataset.key];
45+
46+
Satus.storage.set('data', JSON.stringify(data));
47+
48+
document.querySelector('.satus-scrollbar__content').innerHTML = '';
49+
50+
update();
51+
}
52+
}
53+
2354
function update(container) {
24-
var item = this.history[this.history.length - 1],
55+
var self = (this === window ? document.querySelector('.satus-main') : this),
56+
item = self.history[self.history.length - 1],
2557
id = item.appearanceKey,
2658
data = JSON.parse(Satus.storage.get('data') || '{}'),
2759
ui = {
@@ -33,6 +65,10 @@ function update(container) {
3365
}
3466
};
3567

68+
if (!Satus.isset(container)) {
69+
container = document.querySelector('.satus-main__container');
70+
}
71+
3672
document.body.dataset.appearance = id;
3773
container.dataset.appearance = id;
3874

@@ -49,11 +85,23 @@ function update(container) {
4985
onchange: change,
5086

5187
0: {
52-
type: 'folder',
53-
label: 'My Tasks',
54-
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
55-
appearanceKey: 'list',
56-
storage_key: 0
88+
type: 'section',
89+
90+
folder: {
91+
type: 'folder',
92+
label: 'My Tasks',
93+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
94+
appearanceKey: 'list',
95+
storage_key: 0
96+
},
97+
98+
99+
button: {
100+
type: 'button',
101+
class: 'satus-button--remove',
102+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
103+
onclick: remove
104+
}
57105
}
58106
};
59107

@@ -67,13 +115,23 @@ function update(container) {
67115
data[0].storage_key = 0;
68116
} else {
69117
for (var key in data) {
70-
ui.list[key] = data[key];
71-
ui.list[key].appearanceKey = 'list';
72-
ui.list[key].storage_key = key;
73-
ui.list[key].dataset = {
118+
ui.list[key] = {
119+
type: 'section'
120+
};
121+
ui.list[key].folder = data[key];
122+
ui.list[key].folder.appearanceKey = 'list';
123+
ui.list[key].folder.storage_key = key;
124+
ui.list[key].folder.dataset = {
74125
key: key
75126
};
76-
ui.list[key].before = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
127+
ui.list[key].folder.before = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
128+
129+
ui.list[key].button = {
130+
type: 'button',
131+
class: 'satus-button--remove',
132+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
133+
onclick: remove
134+
};
77135
}
78136
}
79137
} else if (item.appearanceKey === 'list') {
@@ -95,19 +153,29 @@ function update(container) {
95153
} else {
96154
for (var key in data[item.storage_key]) {
97155
if (typeof data[item.storage_key][key] === 'object') {
98-
ui.list[key] = data[item.storage_key][key];
99-
ui.list[key].class = 'satus-switch--checkbox';
100-
ui.list[key].dataset = {
156+
ui.list[key] = {
157+
type: 'section'
158+
};
159+
ui.list[key].folder = data[item.storage_key][key];
160+
ui.list[key].folder.class = 'satus-switch--checkbox';
161+
ui.list[key].folder.dataset = {
101162
key: key
102163
};
103-
ui.list[key].onchange = function() {
164+
ui.list[key].folder.onchange = function() {
104165
var main = document.querySelector('.satus-main'),
105166
history_item = main.history[main.history.length - 1],
106167
data = JSON.parse(Satus.storage.get('data') || '{}');
107168

108169
data[history_item.storage_key][this.dataset.key].value = this.querySelector('input').checked;
109170
Satus.storage.set('data', JSON.stringify(data));
110171
};
172+
173+
ui.list[key].button = {
174+
type: 'button',
175+
class: 'satus-button--remove',
176+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
177+
onclick: remove
178+
};
111179
}
112180
}
113181
}
@@ -123,7 +191,7 @@ function create() {
123191
value = document.querySelector('.satus-text-field--value').value;
124192

125193
if (history_item.appearanceKey === 'home') {
126-
var key = Object.keys(data).length;
194+
var key = new Date().getTime();
127195

128196
data[key] = {
129197
type: 'folder',
@@ -132,14 +200,24 @@ function create() {
132200

133201
Satus.storage.set('data', JSON.stringify(data));
134202

135-
data[key].appearanceKey = 'list';
136-
data[key].storage_key = key;
137-
data[key].before = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
203+
history_item[key] = {
204+
type: 'section',
138205

139-
Satus.render(data[key], document.querySelector('.satus-main .satus-list'));
206+
folder: {
207+
type: 'folder',
208+
label: value,
209+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
210+
appearanceKey: 'list',
211+
storage_key: key
212+
}
213+
};
214+
215+
document.querySelector('.satus-scrollbar__content').innerHTML = '';
216+
217+
update();
140218
} else {
141219
var folder_key = history_item.storage_key,
142-
task_key = Object.keys(data[folder_key]).length;
220+
task_key = new Date().getTime();
143221

144222
data[folder_key][task_key] = {
145223
type: 'switch',
@@ -149,16 +227,24 @@ function create() {
149227

150228
Satus.storage.set('data', JSON.stringify(data));
151229

152-
data[folder_key][task_key].storage_key = task_key;
230+
data[folder_key][task_key] = {
231+
type: 'section',
153232

154-
if (document.querySelector('.satus-main .satus-list--message .satus-text')) {
155-
document.querySelector('.satus-main .satus-list--message .satus-text').remove();
233+
folder: {
234+
type: 'folder',
235+
class: 'satus-switch--checkbox',
236+
label: value,
237+
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
238+
storage_key: task_key
239+
}
240+
};
241+
242+
for (var i = document.querySelectorAll('body > *:not(script)').length - 1; i > -1; i++) {
243+
document.querySelectorAll('body > *:not(script)')[i].remove();
156244
}
157245

158-
Satus.render(data[folder_key][task_key], document.querySelector('.satus-main .satus-list'));
246+
//Satus.render(Menu, document.body);
159247
}
160-
161-
document.querySelector('.satus-dialog__scrim').click();
162248
}
163249
var Menu = {
164250
header: {

‎src/css/main.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,37 @@
4949
background-color: var(--satus-theme-surface, #fff);
5050
}
5151

52+
.satus-main__container .satus-list li .satus-section
53+
{
54+
position: relative;
55+
56+
width: 100%;
57+
}
58+
59+
.satus-button--remove
60+
{
61+
position: absolute;
62+
z-index: 1;
63+
top: 6px;
64+
right: 8px;
65+
66+
visibility: hidden;
67+
68+
width: 36px;
69+
height: 36px;
70+
padding: 6px;
71+
}
72+
73+
.satus-button--remove::before
74+
{
75+
border-radius: 50%;
76+
}
77+
78+
.satus-main__container .satus-list li .satus-section:hover .satus-button--remove
79+
{
80+
visibility: visible;
81+
}
82+
5283
.satus-main__container .satus-list--message
5384
{
5485
padding-right: 8px;
@@ -77,7 +108,7 @@
77108
4.0 BUTTON
78109
--------------------------------------------------------------*/
79110

80-
.satus-main .satus-button
111+
.satus-main .satus-button:not(.satus-button--remove)
81112
{
82113
width: 100%;
83114
height: 48px;

0 commit comments

Comments
 (0)