Skip to content

Commit 2853953

Browse files
adokseoadokseo
committed
Satus updated
1 parent 8f73fd1 commit 2853953

2 files changed

Lines changed: 210 additions & 7 deletions

File tree

‎satus.css‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -547,8 +547,7 @@
547547

548548
align-items: center;
549549
flex: 1;
550-
}
551-
550+
}
552551
/*--------------------------------------------------------------
553552
>>> SELECT
554553
--------------------------------------------------------------*/
@@ -1189,6 +1188,47 @@
11891188
transform: translate(16px, 2px);
11901189
}
11911190

1191+
.satus-table
1192+
{
1193+
display: flex;
1194+
overflow: hidden;
1195+
flex-direction: column;
1196+
1197+
height: 100%;
1198+
1199+
border-radius: 4px;
1200+
background: var(--background-2);
1201+
}
1202+
1203+
.satus-table__head
1204+
{
1205+
font-weight: 700;
1206+
1207+
z-index: 1;
1208+
1209+
display: flex;
1210+
1211+
box-sizing: border-box;
1212+
height: 48px;
1213+
1214+
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
1215+
1216+
align-items: center;
1217+
}
1218+
1219+
.satus-table__body
1220+
{
1221+
overflow-y: scroll;
1222+
1223+
flex: 1;
1224+
}
1225+
1226+
.satus-table__body > div
1227+
{
1228+
display: flex;
1229+
1230+
align-items: center;
1231+
}
11921232
/*--------------------------------------------------------------
11931233
>>> TEXT
11941234
--------------------------------------------------------------*/

‎satus.js‎

Lines changed: 168 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,21 @@ Satus.storage = {};
8787
--------------------------------------------------------------*/
8888

8989
Satus.storage.get = function(name) {
90-
return Satus.storage[name];
90+
var target = Satus.storage;
91+
92+
name = name.split('/').filter(function(value) {
93+
return value != '';
94+
});
95+
96+
for (var i = 0, l = name.length; i < l; i++) {
97+
if (target[name[i]]) {
98+
target = target[name[i]];
99+
} else {
100+
return undefined;
101+
}
102+
}
103+
104+
return target;
91105
};
92106

93107

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

98112
Satus.storage.set = function(name, value) {
99-
var items = {};
113+
var items = {},
114+
target = Satus.storage;
115+
116+
name = name.split('/').filter(function(value) {
117+
return value != '';
118+
});
100119

101-
Satus.storage[name] = value;
120+
for (var i = 0, l = name.length; i < l; i++) {
121+
var item = name[i];
122+
123+
if (i < l - 1) {
124+
125+
if (target[item]) {
126+
target = target[item];
127+
} else {
128+
target[item] = {};
129+
130+
target = target[item];
131+
}
132+
} else {
133+
target[item] = value;
134+
}
135+
}
102136

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

286+
if (object.after) {
287+
var component_after = document.createElement('span');
288+
289+
component_after.innerHTML = object.after;
290+
291+
for (var i = component_after.children.length - 1; i > -1; i--) {
292+
component.appendChild(component_after.children[i]);
293+
}
294+
}
295+
252296
(container || document.body).appendChild(component);
253297

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

266310
if (typeof component.onrender === 'function') {
267-
component.onrender();
311+
component.onrender(object);
268312
}
269313

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

18151859
return component;
18161860
};
1861+
Satus.components.table = function(item) {
1862+
var table = document.createElement('div'),
1863+
table_head = document.createElement('div'),
1864+
table_body = document.createElement('div'),
1865+
table_rows = [];
1866+
1867+
table_head.className = 'satus-table__head';
1868+
table_body.className = 'satus-table__body';
1869+
1870+
for (var i = 0, l = item.columns.length; i < l; i++) {
1871+
var col = document.createElement('div');
1872+
1873+
item.columns[i][Object.keys(item.columns[i])[0]].onclick = function() {
1874+
var index = [Array.prototype.indexOf.call(this.parentNode.parentNode.childNodes, this.parentNode)][0],
1875+
table_sort = (item.columns[index][Object.keys(item.columns[index])[0]].sort || '').split('/');
1876+
1877+
if (this.parentNode.parentNode.querySelector('.sort-asc') && this !== this.parentNode.parentNode.querySelector('.sort-asc')) {
1878+
this.parentNode.parentNode.querySelector('.sort-asc').classList.remove('sort-asc');
1879+
}
1880+
1881+
if (this.parentNode.parentNode.querySelector('.sort-desc') && this !== this.parentNode.parentNode.querySelector('.sort-desc')) {
1882+
this.parentNode.parentNode.querySelector('.sort-desc').classList.remove('sort-desc');
1883+
}
1884+
1885+
if (this.classList.contains('sort-desc')) {
1886+
this.classList.remove('sort-desc');
1887+
this.classList.add('sort-asc');
1888+
} else if (this.classList.contains('sort-asc')) {
1889+
this.classList.remove('sort-asc');
1890+
this.classList.add('sort-desc');
1891+
} else {
1892+
this.classList.add('sort-desc');
1893+
}
1894+
1895+
var sorted_rows = table_rows.sort(this.classList.contains('sort-asc') ? function(a, b) {
1896+
var a1 = a[index],
1897+
b1 = b[index];
1898+
1899+
for (var i = 0, l = table_sort.length; i < l; i++) {
1900+
a1 = a1[table_sort[i]];
1901+
b1 = b1[table_sort[i]];
1902+
}
1903+
1904+
if (typeof a1 === 'number') {
1905+
return a1 - b1;
1906+
} else if (typeof a1 === 'string') {
1907+
if (a1 < b1) {
1908+
return 1;
1909+
}
1910+
if (a1 > b1) {
1911+
return -1;
1912+
}
1913+
} else {
1914+
return 0;
1915+
}
1916+
} : function(a, b) {
1917+
var a1 = a[index],
1918+
b1 = b[index];
1919+
1920+
for (var i = 0, l = table_sort.length; i < l; i++) {
1921+
a1 = a1[table_sort[i]];
1922+
b1 = b1[table_sort[i]];
1923+
}
1924+
1925+
if (typeof a1 === 'number') {
1926+
return b1 - a1;
1927+
} else if (typeof a1 === 'string') {
1928+
if (a1 < b1) {
1929+
return -1;
1930+
}
1931+
if (a1 > b1) {
1932+
return 1;
1933+
}
1934+
} else {
1935+
return 0;
1936+
}
1937+
});
1938+
1939+
table.update(sorted_rows);
1940+
};
1941+
1942+
Satus.render(col, item.columns[i]);
1943+
1944+
table_head.appendChild(col);
1945+
}
1946+
1947+
function update(rows) {
1948+
this.querySelector('.satus-table__body').innerHTML = '';
1949+
1950+
table_rows = rows;
1951+
1952+
for (var i = 0, l = rows.length; i < l; i++) {
1953+
var row = document.createElement('div');
1954+
1955+
for (var j = 0, k = rows[i].length; j < k; j++) {
1956+
var col = document.createElement('div');
1957+
1958+
if (typeof rows[i][j] === 'object') {
1959+
Satus.render(rows[i][j], col);
1960+
}
1961+
1962+
row.appendChild(col);
1963+
}
1964+
1965+
this.querySelector('.satus-table__body').appendChild(row);
1966+
}
1967+
}
1968+
1969+
table.update = update;
1970+
1971+
setTimeout(function() {
1972+
table.update(item.rows);
1973+
});
1974+
1975+
table.appendChild(table_head);
1976+
table.appendChild(table_body);
1977+
1978+
return table;
1979+
};
18171980
/*--------------------------------------------------------------
18181981
>>> TEXT
18191982
--------------------------------------------------------------*/
@@ -1846,7 +2009,7 @@ Satus.components.text = function(element) {
18462009
--------------------------------------------------------------*/
18472010

18482011
Satus.components.textField = function(element) {
1849-
var component = document.createElement('input');
2012+
var component = element.rows > 1 ? document.createElement('textarea') : document.createElement('input');
18502013

18512014
component.type = 'text';
18522015

0 commit comments

Comments
 (0)