Skip to content

Commit

Permalink
Satus updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@adokseo
adokseo committed May 11, 2020
1 parent 8f73fd1 commit 2853953
Show file tree
Hide file tree
Showing 2 changed files with 210 additions and 7 deletions.
44 changes: 42 additions & 2 deletions satus.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,8 +547,7 @@

align-items: center;
flex: 1;
}

}
/*--------------------------------------------------------------
>>> SELECT
--------------------------------------------------------------*/
Expand Down Expand Up @@ -1189,6 +1188,47 @@
transform: translate(16px, 2px);
}

.satus-table
{
display: flex;
overflow: hidden;
flex-direction: column;

height: 100%;

border-radius: 4px;
background: var(--background-2);
}

.satus-table__head
{
font-weight: 700;

z-index: 1;

display: flex;

box-sizing: border-box;
height: 48px;

box-shadow: 0 2px 4px rgba(0, 0, 0, .1);

align-items: center;
}

.satus-table__body
{
overflow-y: scroll;

flex: 1;
}

.satus-table__body > div
{
display: flex;

align-items: center;
}
/*--------------------------------------------------------------
>>> TEXT
--------------------------------------------------------------*/
Expand Down
173 changes: 168 additions & 5 deletions satus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,21 @@ Satus.storage = {};
--------------------------------------------------------------*/

Satus.storage.get = function(name) {
return Satus.storage[name];
var target = Satus.storage;

name = name.split('/').filter(function(value) {
return value != '';
});

for (var i = 0, l = name.length; i < l; i++) {
if (target[name[i]]) {
target = target[name[i]];
} else {
return undefined;
}
}

return target;
};


Expand All @@ -96,9 +110,29 @@ Satus.storage.get = function(name) {
--------------------------------------------------------------*/

Satus.storage.set = function(name, value) {
var items = {};
var items = {},
target = Satus.storage;

name = name.split('/').filter(function(value) {
return value != '';
});

Satus.storage[name] = value;
for (var i = 0, l = name.length; i < l; i++) {
var item = name[i];

if (i < l - 1) {

if (target[item]) {
target = target[item];
} else {
target[item] = {};

target = target[item];
}
} else {
target[item] = value;
}
}

for (var key in Satus.storage) {
if (typeof items[key] !== 'function') {
Expand Down Expand Up @@ -249,6 +283,16 @@ Satus.render = function(element, container, callback) {
}
}

if (object.after) {
var component_after = document.createElement('span');

component_after.innerHTML = object.after;

for (var i = component_after.children.length - 1; i > -1; i--) {
component.appendChild(component_after.children[i]);
}
}

(container || document.body).appendChild(component);

if (typeof component.onClickRender === 'object') {
Expand All @@ -264,7 +308,7 @@ Satus.render = function(element, container, callback) {
}

if (typeof component.onrender === 'function') {
component.onrender();
component.onrender(object);
}

if (callback) {
Expand Down Expand Up @@ -1814,6 +1858,125 @@ Satus.components.switch = function(element) {

return component;
};
Satus.components.table = function(item) {
var table = document.createElement('div'),
table_head = document.createElement('div'),
table_body = document.createElement('div'),
table_rows = [];

table_head.className = 'satus-table__head';
table_body.className = 'satus-table__body';

for (var i = 0, l = item.columns.length; i < l; i++) {
var col = document.createElement('div');

item.columns[i][Object.keys(item.columns[i])[0]].onclick = function() {
var index = [Array.prototype.indexOf.call(this.parentNode.parentNode.childNodes, this.parentNode)][0],
table_sort = (item.columns[index][Object.keys(item.columns[index])[0]].sort || '').split('/');

if (this.parentNode.parentNode.querySelector('.sort-asc') && this !== this.parentNode.parentNode.querySelector('.sort-asc')) {
this.parentNode.parentNode.querySelector('.sort-asc').classList.remove('sort-asc');
}

if (this.parentNode.parentNode.querySelector('.sort-desc') && this !== this.parentNode.parentNode.querySelector('.sort-desc')) {
this.parentNode.parentNode.querySelector('.sort-desc').classList.remove('sort-desc');
}

if (this.classList.contains('sort-desc')) {
this.classList.remove('sort-desc');
this.classList.add('sort-asc');
} else if (this.classList.contains('sort-asc')) {
this.classList.remove('sort-asc');
this.classList.add('sort-desc');
} else {
this.classList.add('sort-desc');
}

var sorted_rows = table_rows.sort(this.classList.contains('sort-asc') ? function(a, b) {
var a1 = a[index],
b1 = b[index];

for (var i = 0, l = table_sort.length; i < l; i++) {
a1 = a1[table_sort[i]];
b1 = b1[table_sort[i]];
}

if (typeof a1 === 'number') {
return a1 - b1;
} else if (typeof a1 === 'string') {
if (a1 < b1) {
return 1;
}
if (a1 > b1) {
return -1;
}
} else {
return 0;
}
} : function(a, b) {
var a1 = a[index],
b1 = b[index];

for (var i = 0, l = table_sort.length; i < l; i++) {
a1 = a1[table_sort[i]];
b1 = b1[table_sort[i]];
}

if (typeof a1 === 'number') {
return b1 - a1;
} else if (typeof a1 === 'string') {
if (a1 < b1) {
return -1;
}
if (a1 > b1) {
return 1;
}
} else {
return 0;
}
});

table.update(sorted_rows);
};

Satus.render(col, item.columns[i]);

table_head.appendChild(col);
}

function update(rows) {
this.querySelector('.satus-table__body').innerHTML = '';

table_rows = rows;

for (var i = 0, l = rows.length; i < l; i++) {
var row = document.createElement('div');

for (var j = 0, k = rows[i].length; j < k; j++) {
var col = document.createElement('div');

if (typeof rows[i][j] === 'object') {
Satus.render(rows[i][j], col);
}

row.appendChild(col);
}

this.querySelector('.satus-table__body').appendChild(row);
}
}

table.update = update;

setTimeout(function() {
table.update(item.rows);
});

table.appendChild(table_head);
table.appendChild(table_body);

return table;
};
/*--------------------------------------------------------------
>>> TEXT
--------------------------------------------------------------*/
Expand Down Expand Up @@ -1846,7 +2009,7 @@ Satus.components.text = function(element) {
--------------------------------------------------------------*/

Satus.components.textField = function(element) {
var component = document.createElement('input');
var component = element.rows > 1 ? document.createElement('textarea') : document.createElement('input');

component.type = 'text';

Expand Down

0 comments on commit 2853953

Please sign in to comment.