Skip to content

Commit

Permalink
Sortable lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@adokseo
adokseo committed Apr 26, 2020
1 parent 5c60edb commit cfc0e84
Show file tree
Hide file tree
Showing 6 changed files with 330 additions and 126 deletions.
7 changes: 4 additions & 3 deletions popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ body[data-appearance='home'] .satus-text--title
2.0 SECTION
--------------------------------------------------------------*/

.satus-main .satus-section--label
.satus-main .satus-list--label
{
font-size: 17px;

Expand All @@ -284,10 +284,11 @@ body[data-appearance='home'] .satus-text--title
margin: 16px auto 8px;
}

.satus-main__container .satus-section
.satus-main__container .satus-list
{
display: block;

box-sizing: border-box;
width: calc(100% - 16px);
max-width: 900px;
margin: 8px auto;
Expand All @@ -299,7 +300,7 @@ body[data-appearance='home'] .satus-text--title
background-color: var(--satus-theme-surface, #fff);
}

.satus-main__container .satus-section--message
.satus-main__container .satus-list--message
{
padding-right: 8px;
padding-left: 8px;
Expand Down
89 changes: 69 additions & 20 deletions popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,31 @@ function update(container) {
var item = this.history[this.history.length - 1],
id = item.appearanceKey,
data = JSON.parse(Satus.storage.get('data') || '{}'),
list = {
section: {
type: 'section'
ui = {
list: {
type: 'list',
compact: true,
sortable: true,
onchange: function(old_index, new_index) {
var main = document.querySelector('.satus-main'),
data = JSON.parse(Satus.storage.get('data') || '{}'),
data2 = data,
clone;

if (main.history.length > 1) {
data = data[main.history[main.history.length - 1].storage_key];
}

old_index2 = Number(document.querySelectorAll('.satus-main .satus-list li')[old_index].querySelector('*').dataset.key);
new_index2 = Number(document.querySelectorAll('.satus-main .satus-list li')[new_index].querySelector('*').dataset.key);

clone = Object.assign(data[old_index2]);

data[old_index2] = data[new_index2];
data[new_index2] = clone;

Satus.storage.set('data', JSON.stringify(data2));
}
}
};

Expand All @@ -18,8 +40,30 @@ function update(container) {

if (item.appearanceKey === 'home') {
if (Object.keys(data).length === 0) {
list.section = {
type: 'section',
ui.list = {
type: 'list',
compact: true,
sortable: true,
onchange: function(old_index, new_index) {
var main = document.querySelector('.satus-main'),
data = JSON.parse(Satus.storage.get('data') || '{}'),
data2 = data,
clone;

if (main.history.length > 1) {
data = data[main.history[main.history.length - 1].storage_key];
}

old_index2 = Number(document.querySelectorAll('.satus-main .satus-list li')[old_index].querySelector('*').dataset.key);
new_index2 = Number(document.querySelectorAll('.satus-main .satus-list li')[new_index].querySelector('*').dataset.key);

clone = Object.assign(data[old_index2]);

data[old_index2] = data[new_index2];
data[new_index2] = clone;

Satus.storage.set('data', JSON.stringify(data2));
},

0: {
type: 'folder',
Expand All @@ -36,31 +80,36 @@ function update(container) {
};

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

data[0].storage_key = 0;
} else {
for (var key in data) {
list.section[key] = data[key];
list.section[key].appearanceKey = 'list';
list.section[key].storage_key = key;
list.section[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>';
ui.list[key] = data[key];
ui.list[key].appearanceKey = 'list';
ui.list[key].storage_key = key;
ui.list[key].dataset = {
key: key
};
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>';
}
}
} else if (item.appearanceKey === 'list') {
if (Object.keys(item).length === 5) {
list.section.class = 'satus-section--message';
ui.list.class = 'satus-list--message';

list.section.message = {
ui.list.message = {
type: 'text',
innerText: 'No tasks'
};
} else {
for (var key in data[item.storage_key]) {
if (typeof data[item.storage_key][key] === 'object') {
list.section[key] = data[item.storage_key][key];
list.section[key].class = 'satus-switch--checkbox';
list.section[key].dataset = {
ui.list[key] = data[item.storage_key][key];
ui.list[key].class = 'satus-switch--checkbox';
ui.list[key].dataset = {
key: key
};
list.section[key].onchange = function() {
ui.list[key].onchange = function() {
var main = document.querySelector('.satus-main'),
history_item = main.history[main.history.length - 1],
data = JSON.parse(Satus.storage.get('data') || '{}');
Expand All @@ -73,7 +122,7 @@ function update(container) {
}
}

Satus.render(list, container.querySelector('.satus-scrollbar__content'));
Satus.render(ui, container.querySelector('.satus-scrollbar__content'));
}

function create() {
Expand All @@ -96,7 +145,7 @@ function create() {
data[key].storage_key = key;
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>';

Satus.render(data[key], document.querySelector('.satus-main .satus-section'));
Satus.render(data[key], document.querySelector('.satus-main .satus-list'));
} else {
var folder_key = history_item.storage_key,
task_key = Object.keys(data[folder_key]).length;
Expand All @@ -111,11 +160,11 @@ function create() {

data[folder_key][task_key].storage_key = task_key;

if (document.querySelector('.satus-main .satus-section--message .satus-text')) {
document.querySelector('.satus-main .satus-section--message .satus-text').remove();
if (document.querySelector('.satus-main .satus-list--message .satus-text')) {
document.querySelector('.satus-main .satus-list--message .satus-text').remove();
}

Satus.render(data[folder_key][task_key], document.querySelector('.satus-main .satus-section'));
Satus.render(data[folder_key][task_key], document.querySelector('.satus-main .satus-list'));
}

document.querySelector('.satus-dialog__scrim').click();
Expand Down
13 changes: 13 additions & 0 deletions satus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,19 @@
fill: var(--satus-theme-on-surface, #777);
}

/*--------------------------------------------------------------
>>> LIST
--------------------------------------------------------------*/

.satus-list--compact,
.satus-list--compact li
{
margin: 0;
padding: 0;

list-style: none;
}

/*-----------------------------------------------------------------------------
>>> MAIN
-------------------------------------------------------------------------------
Expand Down
Loading

0 comments on commit cfc0e84

Please sign in to comment.