',
+ onclick: function () {
+ var main = document.querySelector('main');
+
+ satus.empty(main);
+
+ var skeleton = {
+ element: 'grid',
+ class: 'satus-grid--data',
+ items: [
+ [
+ {
+ element: 'h1',
+ text: 'bookmarks'
+ },
+ {
+ element: 'div',
+ class: 'satus-div--bookmarks',
+ onrender: function() {
+ var self = this;
+
+ function parse(object, parent) {
+ var ul = document.createElement('ul');
+
+ ul.className = 'satus-tree';
+
+ for (var key in object) {
+ if (typeof object[key] === 'object') {
+ if (object[key].children) {
+ var li = document.createElement('li');
+
+ li.className = 'satus-tree--item';
+
+ var button = document.createElement('button');
+
+ button.className = 'satus-button satus-button--object';
+ button.object = object[key];
+ button.textContent = object[key].title;
+
+ button.addEventListener('click', function() {
+ this.classList.toggle('active');
+
+ if (this.classList.contains('active')) {
+ parse(this.object, this.parentNode);
+ } else {
+ this.nextElementSibling.remove();
+ }
+ });
+
+ li.appendChild(button);
+ ul.appendChild(li);
+ } else if (object[key].url) {
+ var li = document.createElement('li');
+
+ li.className = 'satus-tree--item';
+ var a = document.createElement('a'),
+ img = document.createElement('img');
+
+ img.src = 'chrome://favicon/' + object[key].url;
+
+ a.href = object[key].url;
+ a.textContent = object[key].title || object[key].url;
+
+ li.appendChild(img);
+ li.appendChild(a);
+ ul.appendChild(li);
+ } else {
+ //console.log(object[key]);
+ parse(object[key], ul);
+ }
+ }
+ }
+
+ parent.appendChild(ul);
+ }
+
+ chrome.bookmarks.getTree(function (bookmarks) {
+ console.log(bookmarks[0].children);
+ parse(bookmarks[0].children, self);
+ });
+ }
+ }
+ ]
+ ]
+ };
+
+ satus.render(skeleton, main);
+
+ document.querySelector('.satus-sidebar .satus-button--active').classList.toggle('satus-button--active');
+
+ this.classList.add('satus-button--active');
+ }
+ },
+ settings: {
+ element: 'button',
+ html: '',
+ onclick: function () {
+ var main = document.querySelector('main');
+
+ satus.empty(main);
+
+ var skeleton = {
+ grid: {
+ element: 'grid',
+ class: 'satus-grid--data',
+ items: [
+ {
+ title: {
+ element: 'h1',
+ text: 'searchEngine'
+ },
+ search_engine: {
+ element: 'select',
+ storage: 'search-engine',
+ options: [
+ {
+ text: 'Google',
+ value: 'google',
+ dataset: {
+ url: 'https://www.google.com/search?q=%s'
+ }
+ },
+ {
+ text: 'DuckDuckGo',
+ value: 'duckduckgo',
+ dataset: {
+ url: 'https://duckduckgo.com/?q=%s'
+ }
+ },
+ {
+ text: 'Bing',
+ value: 'bing',
+ dataset: {
+ url: 'https://www.bing.com/search?q=%s'
+ }
+ },
+ {
+ text: 'Ecosia',
+ value: 'ecosia',
+ dataset: {
+ url: 'https://www.ecosia.org/search?q=%s'
+ }
+ }
+ ],
+ onchange: function() {
+ var favic = document.querySelector('.satus-button--search-options');
+
+ if (favic && this.value) {
+ favic.style.backgroundImage = 'url(' + SEARCH_ENGINE[this.value].favicon + ')';
+
+ document.querySelector('.search-field').placeholder = 'Search ' + SEARCH_ENGINE[this.value].name + ' or type a URL';
+ }
+ }
+ }
+ }
+ ]
+ }
+ };
+
+ satus.render(skeleton, main);
+
+ document.querySelector('.satus-sidebar .satus-button--active').classList.toggle('satus-button--active');
+
+ this.classList.add('satus-button--active');
+ }
+ }
+ },
+ main: {
+ element: 'main'
+ },
+ footer: {
+ element: 'footer',
+
+ storage_size: {
+ element: 'span',
+ class: 'satus-footer__storage-size'
+ },
+ indexeddb_size: {
+ element: 'span',
+ class: 'satus-footer__indexeddb-size'
+ }
+ }
+},
+tables = {
+ element: 'grid',
+ dataset: {
+ edit: true
+ },
+ items: [
+ // CATEGORIES
+ {
+ element: 'table',
+ class: 'satus-table--categories',
+ columns: [{
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ label: '',
+ key: 'path',
+ sort: false,
+ columns: [
+ {
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ key: 'path'
+ },
+ {
+ label: 'domain',
+ key: 'key',
+ intercept: function (cell, value, index, row) {
+ var icon = document.createElement('div'),
+ a = document.createElement('a'),
+ link = 'https://' + value;
+
+ icon.className = 'favicon';
+ icon.style.background = 'url(chrome://favicon/' + link + ') no-repeat center';
+
+ a.textContent = satus.locale.get(value);
+ a.href = link;
+
+ cell.appendChild(icon);
+ cell.appendChild(a);
+ }
+ }
+ ]
+ },
+ {
+ label: 'category',
+ key: 'name',
+ intercept: function (cell, value, index) {
+ var icon = document.createElement('div'),
+ text = document.createTextNode(satus.locale.get(value));
+
+ icon.className = 'favicon';
+ icon.style.backgroundPosition = ((-24 * index + Math.floor(index / 4) * 96) - 1) + 'px ' + (Math.floor(index / 4) * -24 - 1) + 'px';
+
+ cell.appendChild(icon);
+ cell.appendChild(text);
+ }
+ }
+ ]
+ },
+
+ // DOMAINS
+ {
+ element: 'table',
+ class: 'satus-table--domains',
+ db_object_name: 'domains',
+ columns: [{
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ label: '',
+ key: 'path',
+ sort: false,
+ columns: [
+ {
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ key: 'path'
+ },
+ {
+ label: 'domain',
+ key: 'key'
+ }
+ ]
+ },
+ {
+ label: 'domain',
+ key: 'domain',
+ intercept: function (cell, value, index, row) {
+ var icon = document.createElement('div'),
+ a = document.createElement('a'),
+ link = row.data.url;
+
+ icon.className = 'favicon';
+ icon.style.background = 'url(chrome://favicon/' + link + ') no-repeat center';
+
+ a.textContent = satus.locale.get(value);
+ a.href = link;
+
+ cell.appendChild(icon);
+ cell.appendChild(a);
+ }
+ }
+ ],
+ onpage: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ },
+ onsort: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ }
+ },
+
+ // PAGES
+ {
+ element: 'table',
+ class: 'satus-table--pages',
+ db_object_name: 'pages',
+ columns: [{
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc',
+ },
+ {
+ label: 'title',
+ key: 'title',
+ intercept: function (cell, value, index, row) {
+ var icon = document.createElement('div'),
+ a = document.createElement('a'),
+ link = row.data.url,
+ domain = link.match(REGEX_DOMAIN);
+
+ icon.className = 'favicon';
+ icon.style.background = 'url(chrome://favicon/' + domain[0] + ') no-repeat center';
+
+ a.textContent = value;
+ a.href = link;
+
+ cell.appendChild(icon);
+ cell.appendChild(a);
+ }
+ },
+ {
+ label: '★',
+ key: 'visitCount',
+ sort: false,
+ intercept: function (cell, value, index, row) {
+ var button = document.createElement('button');
+
+ button.className = 'satus-button';
+ button.textContent = BOOKMARKS.hasOwnProperty(row.data.url) ? '★' : '☆';
+
+ button.addEventListener('click', function() {
+ if (this.textContent === '★') {
+ this.textContent = '☆';
+
+ chrome.bookmarks.remove(BOOKMARKS[this.parentNode.parentNode.data.url]);
+ } else {
+ var self = this;
+
+ this.textContent = '★';
+
+ chrome.bookmarks.create({
+ title: this.parentNode.parentNode.data.title,
+ url: this.parentNode.parentNode.data.url,
+ parentId: '1'
+ }, function (item) {
+ BOOKMARKS[self.parentNode.parentNode.data.url] = item.id;
+ });
+ }
+ });
+
+ cell.appendChild(button);
+ }
+ },
+ {
+ label: 'tags',
+ key: 'tags',
+ intercept: function (cell, value, index) {
+ var input = document.createElement('input');
+
+ input.type = 'text';
+ input.className = 'satus-input';
+ input.value = value || '';
+
+ input.addEventListener('input', function() {
+ var transaction = DB.transaction('pages', 'readwrite'),
+ pages_object = transaction.objectStore('pages');
+
+ this.parentNode.parentNode.data.tags = this.value;
+
+ pages_object.put(this.parentNode.parentNode.data);
+ });
+
+ cell.appendChild(input);
+ }
+ }
+ ],
+ onpage: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ },
+ onsort: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ }
+ },
+
+ // PARAMS
+ {
+ element: 'table',
+ class: 'satus-table--params',
+ db_object_name: 'params',
+ columns: [{
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ label: '',
+ key: 'path',
+ sort: false,
+ columns: [
+ {
+ label: 'visits',
+ key: 'visitCount',
+ sort: 'desc'
+ },
+ {
+ key: 'path'
+ },
+ {
+ label: 'domain',
+ key: 'key'
+ }
+ ]
+ },
+ {
+ label: 'domain',
+ key: 'domain',
+ intercept: function (cell, value, index, row) {
+ var link = row.data.url,
+ icon = document.createElement('div'),
+ a = document.createElement('a');
+
+ icon.className = 'favicon';
+ icon.style.background = 'url(chrome://favicon/' + link + ') no-repeat center';
+
+ a.textContent = satus.locale.get(value);
+ a.href = link;
+
+ cell.appendChild(icon);
+ cell.appendChild(a);
+ }
+ }
+ ],
+ onpage: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ },
+ onsort: function() {
+ var table = this;
+
+ getDBData(table.db_object_name, table.order.key + 'Index', table.order.by, table.pageIndex * 100 - 100, function(data, count) {
+ table.data = data;
+
+ table.update();
+ });
+ }
+ },
+
+ // PINNED TABS
+ {
+ element: 'div',
+ class: 'satus-tab-manager'
+ },
+
+ // RECENTLY CLOSED
+ {
+ element: 'table',
+ class: 'satus-table--recently-closed',
+ columns: [{
+ label: 'timeAgo',
+ key: '0'
+ },
+ {
+ label: 'title',
+ key: '1',
+ intercept: function (cell, value, index, row) {
+ var link = row.data[2],
+ icon = document.createElement('div'),
+ a = document.createElement('a');
+
+ icon.className = 'favicon';
+ icon.style.background = 'url(chrome://favicon/' + link + ') no-repeat center';
+
+ a.textContent = satus.locale.get(value);
+ a.href = link;
+
+ cell.appendChild(icon);
+ cell.appendChild(a);
+ }
+ }
+ ]
+ }
+ ]
+};
+
+satus.render(skeleton);
+
+function renderTables() {
+ if (LOADED === false) {
+ return;
+ }
+
+ satus.empty(document.querySelector('main'));
+
+ satus.render(tables, document.querySelector('.satus-main'));
+
+ getDBData('domains', 'visitCountIndex', 'desc', 0, function(data, count) {
+ var categories = [];
+
+ for (var key in CATEGORIES) {
+ var category = CATEGORIES[key],
+ path = {};
+
+ if (!category.visitCount) {
+ category.visitCount = 0;
+ }
+
+ for (var link in category) {
+ for (var key2 in data) {
+ var domain = data[key2].domain;
+
+ if (domain.indexOf(link) !== -1) {
+ category[link] = data[key2].visitCount;
+
+ category.visitCount += data[key2].visitCount;
+ }
+ }
+
+ path[link] = {
+ key: link,
+ visitCount: category[link]
+ };
+ }
+
+ categories.push({
+ name: key,
+ path: path,
+ visitCount: category.visitCount
+ });
+ }
+
+ var table_pages = document.querySelector('.satus-table--categories');
+
+ table_pages.data = categories.sort(function(a, b) {
+ return b.visitCount - a.visitCount;
+ });
+ table_pages.count = categories.length;
+
+ table_pages.update();
+ }, false);
+
+ getDBData('domains', 'visitCountIndex', 'desc', 0, function(data, count) {
+ var table_pages = document.querySelector('.satus-table--domains');
+
+ table_pages.data = data;
+ table_pages.count = count;
+
+ table_pages.update();
+ });
+
+ getDBData('pages', 'visitCountIndex', 'desc', 0, function(data, count) {
+ var table_pages = document.querySelector('.satus-table--pages');
+
+ table_pages.data = data;
+ table_pages.count = count;
+
+ table_pages.update();
+ });
+
+ getDBData('params', 'visitCountIndex', 'desc', 0, function(data, count) {
+ var table_pages = document.querySelector('.satus-table--params');
+
+ table_pages.data = data;
+ table_pages.count = count;
+
+ table_pages.update();
+ });
+
+ var table_recently_closed = document.querySelector('.satus-table--recently-closed');
+
+ table_recently_closed.data = satus.storage.data.recently_closed || [];
+ table_recently_closed.count = table_recently_closed.data.length;
+
+ table_recently_closed.update();
+
+ updateTabManager();
+}
+
+function updateTabManager() {
+ var container = document.querySelector('.satus-tab-manager'),
+ tab_manager_skeleton = {};
+
+ if (container) {
+ satus.empty(container);
+
+ for (var i in TABS) {
+ tab_manager_skeleton[i] = {
+ element: 'div',
+
+ title: {
+ element: 'button',
+ text: 'window'
+ }
+ };
+
+ for (var j in TABS[i]) {
+ var tab = TABS[i][j];
+
+ tab_manager_skeleton[i]['row-' + j] = {
+ element: 'div',
+ class: 'satus-tab-manager__row',
+
+ pin: {
+ element: 'button',
+ dataset: {
+ pinned: tab.pinned,
+ id: tab.id
+ },
+ onclick: function () {
+ this.dataset.pinned = this.dataset.pinned != 'true';
+
+ chrome.tabs.update(Number(this.dataset.id), {
+ pinned: this.dataset.pinned == 'true'
+ });
+ }
+ },
+ favicon: {
+ element: 'div',
+ class: 'favicon',
+ style: {
+ background: 'url(chrome://favicon/' + tab.url.match(REGEX_DOMAIN)[0] + ') center center no-repeat'
+ }
+ },
+ title: {
+ element: 'a',
+ text: tab.title,
+ href: tab.url
+ }
+ };
+ }
+ }
+
+ satus.render(tab_manager_skeleton, container);
+ }
+}
+
+
+/*--------------------------------------------------------------
+# BOOKMARKS
+--------------------------------------------------------------*/
+
+chrome.bookmarks.getTree(function (bookmarks) {
+ var threads = 0;
+
+ function parse(bookmarks) {
+ threads++;
+
+ for (var i = 0, l = bookmarks.length; i < l; i++) {
+ var item = bookmarks[i];
+
+
+ if (item.url) {
+ BOOKMARKS[item.url] = item.id;
+ }
+
+ if (item.children) {
+ parse(item.children);
+ }
+ }
+
+ threads--;
+
+ if (threads === 0) {
+ renderTables();
+ }
+ }
+
+ parse(bookmarks);
+});
+
+
+/*--------------------------------------------------------------
+# TABS
+--------------------------------------------------------------*/
+
+chrome.tabs.query({}, function (tabs) {
+ for (var i = 0, l = tabs.length; i < l; i++) {
+ var tab = tabs[i];
+
+ if (!TABS['w' + tab.windowId]) {
+ TABS['w' + tab.windowId] = {};
+ }
+
+ TABS['w' + tab.windowId]['t' + tab.id] = tab;
+ }
+
+ renderTables();
+});
+
+chrome.tabs.onAttached.addListener(function(tabId, attachInfo) {
+ for (var key in TABS) {
+ if (TABS[key].hasOwnProperty('t' + tabId)) {
+ if (TABS.hasOwnProperty('w' + attachInfo.newWindowId) === false) {
+ TABS['w' + attachInfo.newWindowId] = {};
+ }
+
+ TABS['w' + attachInfo.newWindowId]['t' + tabId] = TABS[key]['t' + tabId];
+ TABS['w' + attachInfo.newWindowId]['t' + tabId].index = attachInfo.newPosition;
+
+ delete TABS[key]['t' + tabId];
+
+ break;
+ }
+ }
+
+ for (var key in TABS) {
+ if (Object.keys(TABS[key]).length === 0) {
+ delete TABS[key];
+ }
+ }
+
+ updateTabManager();
+});
+
+chrome.tabs.onCreated.addListener(function(tab) {
+ if (TABS.hasOwnProperty('w' + tab.windowId) === false) {
+ TABS['w' + tab.windowId] = {};
+ }
+
+ TABS['w' + tab.windowId]['t' + tab.id] = tab;
+ TABS['w' + tab.windowId]['t' + tab.id].url = TABS['w' + tab.windowId]['t' + tab.id].pendingUrl;
+
+ updateTabManager();
+});
+
+chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
+ for (var key in TABS) {
+ if (TABS[key].hasOwnProperty('t' + tabId)) {
+ delete TABS[key]['t' + tabId];
+
+ if (Object.keys(TABS[key]).length === 0) {
+ delete TABS[key];
+ }
+
+ break;
+ }
+ }
+
+ updateTabManager();
+});
+
+chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+ for (var key in TABS) {
+ if (TABS[key].hasOwnProperty('t' + tabId)) {
+ TABS[key]['t' + tabId] = tab;
+
+ break;
+ }
+ }
+
+ updateTabManager();
+});
+
+chrome.tabs.onMoved.addListener(function(tabId, moveInfo) {
+ for (var key in TABS) {
+ if (TABS[key].hasOwnProperty('t' + tabId)) {
+ TABS[key]['t' + tabId].index = moveInfo.toIndex;
+
+ break;
+ }
+ }
+
+ updateTabManager();
+});
+
+
+/*--------------------------------------------------------------
+# INITIALIZATION
+--------------------------------------------------------------*/
+
+satus.locale.load('_locales/en/messages.json', function () {
+ satus.storage.attributes = [
+ 'dark-theme',
+ 'privacy-mode'
+ ];
+
+ satus.storage.load(null, function (items) {
+ if (items['search-autofocus-mode'] !== false && location.href.indexOf('?loaded') === -1) {
+ location.replace(location.href + '?loaded');
+
+ return false;
+ }
+
+ openDB(function() {
+ getDBData('transitions', null, 'asc', 0, function(transitions) {
+ TRANSITIONS = transitions || {};
+
+ getHistoryItems(function(items) {
+ if (items.length > 0) {
+ var transaction = DB.transaction('pages', 'readwrite'),
+ pages = transaction.objectStore('pages'),
+ domains = {},
+ params = {},
+ visits = satus.storage.data.visits || {},
+ threads = 0;
+
+ for (var i = 0, l = items.length; i < l; i++) {
+ var item = items[i],
+ parts = item.url.match(REGEX_PARTS),
+ link = parts[0].substr(1),
+ domain = link.replace(/^www\./, '');
+
+ if (!domains[domain]) {
+ domains[domain] = {
+ url: item.url.match(REGEX_PROTOCOL)[0] + '://' + link,
+ typedCount: 0,
+ visitCount: 0,
+ path: {}
+ };
+ }
+
+ var object = domains[domain].path;
+
+ for (var j = 1, k = parts.length; j < k; j++) {
+ var name = parts[j];
+
+ if (!object[name]) {
+ object[name] = {
+ visitCount: 0,
+ path: {}
+ };
+ }
+
+ object.visitCount += item.visitCount;
+
+ object = object[name].path;
+
+ if (j + 1 === k) {
+ object.lastVisitTime = item.lastVisitTime;
+ object.title = item.title;
+ object.typedCount = item.typedCount;
+ object.visitCount = item.visitCount;
+ }
+ }
+
+ domains[domain].typedCount += item.typedCount;
+ domains[domain].visitCount += item.visitCount;
+
+ pages.add({
+ //'bookmarked': 0,
+ 'id': item.id,
+ 'lastVisitTime': item.lastVisitTime,
+ 'tags': '',
+ 'title': item.title,
+ 'typedCount': item.typedCount,
+ 'url': item.url,
+ 'visitCount': item.visitCount
+ });
+
+ if (item.url.indexOf('?') !== -1) {
+ try {
+ var decoded_url = decodeURIComponent(item.url);
+ } catch (err) {
+ var decoded_url = item.url;
+ }
+
+ var param = decoded_url.match(REGEX_PARAMS);
+
+ if (param) {
+ var domain = parts[0];
+
+ if (!params[domain]) {
+ params[domain] = {
+ domain: domain.substr(1),
+ url: item.url.match(REGEX_PROTOCOL)[0] + '://' + domain,
+ visitCount: 0,
+ path: {}
+ };
+ }
+
+ params[domain].visitCount += item.visitCount;
+
+ if (!params[domain].path[param[1]]) {
+ params[domain].path[param[1]] = {
+ visitCount: 0,
+ path: {}
+ };
+ }
+
+ params[domain].path[param[1]].visitCount += item.visitCount;
+
+ if (!params[domain].path[param[1]].path[param[2]]) {
+ params[domain].path[param[1]].path[param[2]] = {
+ visitCount: 0,
+ path: {}
+ };
+ }
+
+ params[domain].path[param[1]].path[param[2]].visitCount += item.visitCount;
+ params[domain].path[param[1]].path[param[2]].path[decoded_url] = item.visitCount;
+ }
+ }
+
+ chrome.history.getVisits({url: item.url}, function(visitItems) {
+ for (var i = 0, l = visitItems.length; i < l; i++) {
+ var visitItem = visitItems[i],
+ date = new Date(visitItem.visitTime),
+ year = date.getFullYear(),
+ month = date.getMonth(),
+ day = date.getDate(),
+ hours = date.getHours();
+
+ if (!visits[year]) {
+ visits[year] = {};
+ }
+
+ if (!visits[year][month]) {
+ visits[year][month] = {};
+ }
+
+ if (!visits[year][month][day]) {
+ visits[year][month][day] = {};
+ }
+
+ if (!visits[year][month][day][hours]) {
+ visits[year][month][day][hours] = 0;
+ }
+
+ visits[year][month][day][hours]++;
+
+ if (!TRANSITIONS[visitItem.transition]) {
+ TRANSITIONS[visitItem.transition] = {
+ transition: visitItem.transition,
+ visitCount: 0
+ };
+ }
+
+ TRANSITIONS[visitItem.transition].visitCount++;
+ }
+
+ threads--;
+
+ if (threads === 0) {
+ var transaction = DB.transaction('domains', 'readwrite'),
+ object = transaction.objectStore('domains');
+
+ for (var key in domains) {
+ domains[key].domain = key;
+
+ object.add(domains[key]);
+ }
+
+ var transaction = DB.transaction('params', 'readwrite'),
+ object = transaction.objectStore('params');
+
+ for (var key in params) {
+ object.add(params[key]);
+ }
+
+ var transaction = DB.transaction('transitions', 'readwrite'),
+ object = transaction.objectStore('transitions');
+
+ for (var key in transitions) {
+ object.add(transitions[key]);
+ }
+
+ navigator.storage.estimate().then(function(result) {
+ document.querySelector('.satus-footer__indexeddb-size').textContent = 'IndexedDB: ' + (result.usageDetails.indexedDB / 8e+6).toFixed(2) + ' MB';
+ });
+
+ chrome.storage.local.set({
+ visits: visits
+ });
+
+ LOADED = true;
+
+ renderTables();
+ }
+ });
+
+ threads++;
+ }
+ } else {
+ LOADED = true;
+ }
+
+ renderTables();
+ });
+ }, false);
+ });
+
+ document.querySelector('.satus-footer__storage-size').textContent = 'Storage: ' + (JSON.stringify(items).length * 2 / 8e+6).toFixed(2) + ' MB';
+
+ var favic = document.querySelector('.satus-button--search-options');
+
+ if (favic && items['search-engine']) {
+ favic.style.backgroundImage = 'url(' + SEARCH_ENGINE[items['search-engine']].favicon + ')';
+
+ document.querySelector('.search-field').placeholder = 'Search ' + SEARCH_ENGINE[items['search-engine']].name + ' or type a URL';
+ }
+ });
+});
+
+navigator.storage.estimate().then(function(result) {
+ document.querySelector('.satus-footer__indexeddb-size').textContent = 'IndexedDB: ' + (result.usageDetails.indexedDB / 8e+6).toFixed(2) + ' MB';
+});
+
+
+/*--------------------------------------------------------------
+# MESSAGES
+--------------------------------------------------------------*/
+
+chrome.runtime.onMessage.addListener(function(request, sender) {
+
+});
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index a0b9bc5..c71fc0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -5,17 +5,14 @@
"version_name": "1.0-alpha",
"default_locale": "en",
-
+
"background": {
"scripts": [
- "data/categories.js",
- "data/params.js",
- "data/useless-params.js",
"background.js"
]
},
- "2chrome_url_overrides": {
+ "chrome_url_overrides": {
"newtab": "index.html"
},
@@ -23,6 +20,8 @@
"bookmarks",
"chrome://favicon/",
"history",
+ "http://*/*",
+ "https://*/*",
"storage",
"unlimitedStorage",
"tabs"
diff --git a/py/locale.py b/py/locale.py
new file mode 100644
index 0000000..0f484d3
--- /dev/null
+++ b/py/locale.py
@@ -0,0 +1,128 @@
+#---------------------------------------------------------------
+# >>> TABLE OF CONTENTS:
+#---------------------------------------------------------------
+# 1.0 Import modules
+# 2.0 Lower camel case
+# 3.0 Get list of files
+# 4.0 Add item
+# 5.0 Remove item
+# 6.0 Decode
+# 7.0 Initialization
+#---------------------------------------------------------------
+
+#---------------------------------------------------------------
+# 1.0 IMPORT MODULES
+#---------------------------------------------------------------
+
+import json
+import os
+import pathlib
+import re
+
+
+#---------------------------------------------------------------
+# 2.0 LOWER CAMEL CASE
+#---------------------------------------------------------------
+
+def lowerCamelCase(string):
+ string = re.sub(r"(-|_)+", " ", string).title().replace(" ", "")
+
+ return string[0].lower() + string[1:]
+
+
+#---------------------------------------------------------------
+# 3.0 GET LIST OF FILES
+#---------------------------------------------------------------
+
+def getListOfFiles(dirName):
+ allFiles = list()
+
+ for entry in os.listdir(dirName):
+ fullPath = os.path.join(dirName, entry)
+
+ if not os.path.isdir(fullPath):
+ allFiles.append(fullPath)
+
+ for entry in os.listdir(dirName):
+ fullPath = os.path.join(dirName, entry)
+
+ if os.path.isdir(fullPath):
+ allFiles = allFiles + getListOfFiles(fullPath)
+
+ return allFiles
+
+
+#---------------------------------------------------------------
+# 4.0 ADD ITEM
+#---------------------------------------------------------------
+
+def addItem(allFiles):
+ message = input("Enter your message: ")
+
+ for keyFile in allFiles:
+ with open(keyFile, "r+") as json_file:
+ data = json.load(json_file)
+
+ data[lowerCamelCase(message)] = {
+ "message": message
+ }
+
+ json_file.seek(0)
+ json.dump(data, json_file, ensure_ascii=False, indent=4, sort_keys=True)
+ json_file.truncate()
+
+
+#---------------------------------------------------------------
+# 5.0 REMOVE ITEM
+#---------------------------------------------------------------
+
+def removeItem(allFiles):
+ key = input("Enter your key (lowerCamelCase): ")
+
+ for keyFile in allFiles:
+ with open(keyFile, "r+") as json_file:
+ data = json.load(json_file)
+
+ if data[key]:
+ del data[key]
+
+ json_file.seek(0)
+ json.dump(data, json_file, ensure_ascii=False, indent=4, sort_keys=True)
+ json_file.truncate()
+
+
+#---------------------------------------------------------------
+# 6.0 DECODE
+#---------------------------------------------------------------
+
+def decodeCharacters(allFiles):
+ for keyFile in allFiles:
+ with open(keyFile, "r+") as json_file:
+ data = json.load(json_file)
+
+ json_file.seek(0)
+ json.dump(data, json_file, ensure_ascii=False, indent=4, sort_keys=True)
+ json_file.truncate()
+
+
+#---------------------------------------------------------------
+# 7.0 INITIALIZATION
+#---------------------------------------------------------------
+
+allFiles = getListOfFiles("../_locales/")
+
+operation = input("""
+--------------------------------
+Add item: 1
+Remove item: 2
+Decode: 3
+--------------------------------
+
+Enter number: """)
+
+if operation == "1":
+ addItem(allFiles)
+elif operation == "2" :
+ removeItem(allFiles)
+elif operation == "3" :
+ decodeCharacters(allFiles)
\ No newline at end of file
diff --git a/satus.css b/satus.css
new file mode 100644
index 0000000..50c2fda
--- /dev/null
+++ b/satus.css
@@ -0,0 +1,627 @@
+/*--------------------------------------------------------------
+>>> SATUS
+----------------------------------------------------------------
+# Themes
+ # Light
+ # Dark
+
+# Components
+ # Header
+ # Button
+
+# Animations
+--------------------------------------------------------------*/
+
+
+/*--------------------------------------------------------------
+# THEMES
+--------------------------------------------------------------*/
+
+
+/*--------------------------------------------------------------
+# LIGHT
+--------------------------------------------------------------*/
+
+body {
+ --satus-theme-background-0: #f7f8fa;
+ --satus-theme-background-1: #fff;
+ --satus-theme-background-2: #fff;
+
+ --satus-theme-border-0: #edeff2;
+}
+
+
+/*--------------------------------------------------------------
+# DARK
+--------------------------------------------------------------*/
+
+body[data-dark-theme='true'] {
+ --satus-theme-background-0: #000;
+ --satus-theme-background-1: #1a1a1a;
+ --satus-theme-background-2: #262626;
+
+ --satus-theme-border-0: #222;
+}
+
+
+/*--------------------------------------------------------------
+# COMPONENTS
+--------------------------------------------------------------*/
+
+
+/*--------------------------------------------------------------
+# MENU
+--------------------------------------------------------------*/
+
+.satus-menu {
+ margin: 0;
+ padding: 8px 0;
+}
+
+.satus-menu__item {
+ list-style: none;
+}
+
+.satus-menu__item:hover {
+ background-color: rgba(0, 0, 0, .05);
+}
+
+.satus-menu>.satus-menu__item>* {
+ box-sizing: border-box;
+ width: 100%;
+ height: 36px;
+ padding: 0 16px !important;
+}
+
+
+/*--------------------------------------------------------------
+# HEADER
+--------------------------------------------------------------*/
+
+.satus-header {
+ display: flex;
+ height: 64px;
+ padding: 0 16px;
+ align-items: center;
+ justify-content: center;
+ /*color: #fff;
+ background: #304ffe;
+ box-shadow: 0 3px 2px rgb(1, 20, 127, .25);*/
+}
+
+
+/*--------------------------------------------------------------
+# SECTION
+--------------------------------------------------------------*/
+
+.satus-section {
+ display: flex;
+}
+
+.satus-section--flex-start {
+ justify-content: flex-start;
+}
+
+.satus-section--flex-end {
+ justify-content: flex-end;
+}
+
+
+/*--------------------------------------------------------------
+# BUTTON
+--------------------------------------------------------------*/
+
+.satus-button {
+ font: inherit;
+ box-sizing: border-box;
+ padding: 0;
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ color: inherit;
+ border: 1px solid rgba(0, 0, 0, .1);
+ background: var(--satus-theme-background-1);
+ appearance: none;
+}
+
+.satus-button:hover {
+ border-color: rgba(0, 0, 0, .2);
+}
+
+.satus-button:focus {
+ border-color: #86b7fe;
+ outline: none;
+ box-shadow: 0 0 0 4px rgb(13, 110, 253, .25);
+}
+
+
+/*--------------------------------------------------------------
+# SELECT
+--------------------------------------------------------------*/
+
+.satus-select {
+ appearance: none;
+ font: inherit;
+ box-sizing: border-box;
+ padding: 8px;
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ color: inherit;
+ border: none;
+ background: rgba(0,0,0,.1);
+}
+
+.satus-select:hover {
+ border-color: rgba(0, 0, 0, .2);
+}
+
+.satus-select:focus {
+ border-color: #86b7fe;
+ outline: none;
+ box-shadow: 0 0 0 4px rgb(13, 110, 253, .25);
+}
+
+
+/*--------------------------------------------------------------
+# SWITCH
+--------------------------------------------------------------*/
+
+.satus-switch {
+ font: inherit;
+ display: flex;
+ box-sizing: border-box;
+ padding: 0;
+ color: inherit;
+ border: none;
+ background: transparent;
+ appearance: none;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.satus-switch:focus {
+ outline: none;
+}
+
+.satus-switch__track {
+ width: 32px;
+ min-width: 32px;
+ height: 18px;
+ border-radius: 18px;
+ background: #bdbdbd;
+}
+
+.satus-switch[data-value='true'] .satus-switch__track {
+ background: #54d2a3;
+}
+
+.satus-switch__track::before {
+ display: block;
+ width: 14px;
+ height: 14px;
+ content: '';
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .1s cubic-bezier(.4, 0, .2, 1);
+ transform: translate(2px, 2px);
+ border-radius: 50%;
+ background-color: #fff;
+ will-change: transform;
+}
+
+.satus-switch[data-value='true'] .satus-switch__track::before {
+ transform: translate(16px, 2px);
+}
+
+.satus-switch:focus .satus-switch__track::before {
+ border-color: #86b7fe;
+ outline: none;
+ box-shadow: 0 0 0 8px rgb(13, 110, 253, .25);
+}
+
+
+/*--------------------------------------------------------------
+# INPUT TEXT
+--------------------------------------------------------------*/
+
+.satus-input[type='text'] {
+ font: inherit;
+ box-sizing: border-box;
+ width: 100%;
+ height: 40px;
+ padding: 8px 16px;
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+ color: inherit;
+ border: 1px solid rgba(0, 0, 0, .1);
+ background: var(--satus-theme-background-1);
+ appearance: none;
+}
+
+.satus-input[type='text']:hover {
+ border-color: rgba(0, 0, 0, .2);
+}
+
+.satus-input[type='text']:focus {
+ border-color: #86b7fe;
+ outline: 0;
+ box-shadow: 0 0 0 4px rgb(13, 110, 253, .25);
+}
+
+
+/*--------------------------------------------------------------
+# MODAL
+--------------------------------------------------------------*/
+
+.satus-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: flex;
+ width: 100vw;
+ height: 100vh;
+ animation: fadeIn 150ms linear forwards;
+ background: rgba(25, 25, 25, .2);
+ justify-content: center;
+ align-items: center;
+ backdrop-filter: blur(8px);
+ z-index: 1;
+}
+
+.satus-modal__container {
+ width: 100%;
+ max-width: 640px;
+ max-height: 75vh;
+ margin: 16px;
+ animation: zoomIn 150ms linear forwards;
+ animation-delay: 20ms;
+ border-radius: 4px;
+ background: var(--satus-theme-background-2);
+ box-shadow: inset 0 -1px 1px 1px rgb(0, 0, 0, .1), 0 2px 6px rgb(0, 0, 0, .15);
+}
+
+
+/*--------------------------------------------------------------
+# GRID
+--------------------------------------------------------------*/
+
+.satus-grid {
+ display: flex;
+}
+
+.satus-grid__item {
+ position: relative;
+ display: flex;
+ overflow: hidden;
+ flex: 1;
+}
+
+.satus-grid-item__left {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
+ width: 25%;
+ height: 100%;
+}
+
+.satus-grid-item__center {
+ position: absolute;
+ top: 0;
+ left: 25%;
+ display: none;
+ width: 50%;
+ height: 100%;
+}
+
+.satus-grid-item__right {
+ position: absolute;
+ top: 0;
+ left: 75%;
+ display: none;
+ width: 25%;
+ height: 100%;
+}
+
+.satus-grid--drag .satus-grid-item__left,
+.satus-grid--drag .satus-grid-item__center,
+.satus-grid--drag .satus-grid-item__right {
+ display: block;
+}
+
+.satus-grid__item--drag>*:not(.satus-grid-item__left):not(.satus-grid-item__center):not(.satus-grid-item__right) {
+ display: none;
+}
+
+.satus-grid[data-edit='true'] *:not(.satus-grid):not(.satus-grid__item):not(.satus-grid-item__left):not(.satus-grid-item__center):not(.satus-grid-item__right) {
+ overflow: hidden;
+ pointer-events: none;
+ opacity: .7;
+}
+
+.satus-grid__item[data-drag-over='left']>.satus-grid-item__left {
+ background: #e1bee7;
+}
+
+.satus-grid__item[data-drag-over='right']>.satus-grid-item__right {
+ background: #e1bee7;
+}
+
+
+/*--------------------------------------------------------------
+>>> TABLE
+----------------------------------------------------------------
+# Head
+# Body
+# Footer
+--------------------------------------------------------------*/
+
+.satus-table {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+
+/*--------------------------------------------------------------
+# HEAD
+--------------------------------------------------------------*/
+
+.satus-table__head {
+ position: relative;
+ display: flex;
+ background: var(--satus-theme-background-1);
+ box-shadow: 0 2px 2px #e6eff7;
+}
+
+.satus-table__head>* {
+ font: inherit;
+ font-weight: 600;
+ display: flex;
+ overflow: hidden;
+ margin: 8px;
+ cursor: pointer;
+ text-align: left;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: inherit;
+ border: none;
+ background: transparent;
+ flex: 1;
+ align-items: center;
+}
+
+.satus-table__head>*[data-order=asc]::after {
+ position: relative;
+ top: -3px;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin: 0 0 0 6px;
+ content: '';
+ border: 4px solid transparent;
+ border-bottom-color: currentColor;
+}
+
+.satus-table__head>*[data-order=desc]::after {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin: 0 0 0 6px;
+ content: '';
+ border: 4px solid transparent;
+ border-top-color: currentColor;
+}
+
+.satus-table__head>*>button {
+ font: inherit;
+ display: none;
+ margin: 0 0 0 8px;
+ padding: 0;
+ color: inherit;
+ border: none;
+ outline: none;
+ background: transparent;
+}
+
+.satus-table__head>*:hover>button,
+.satus-table__head>*>button:focus {
+ display: block;
+}
+
+.satus-table__head button svg {
+ width: 16px;
+ fill: none;
+ stroke: currentColor;
+}
+
+.satus-table__head>*>button+div {
+ position: absolute;
+ display: none;
+ width: 128px;
+ height: 64px;
+ background: #000;
+}
+
+.satus-table__head>*>button:focus+div {
+ display: block;
+}
+
+
+/*--------------------------------------------------------------
+# BODY
+--------------------------------------------------------------*/
+
+.satus-table__body {
+ overflow: auto;
+ flex: 1;
+}
+
+.satus-table__row {
+ display: flex;
+}
+
+.satus-table__row.selected {
+ color: #222;
+ background: #fff59d;
+}
+
+.satus-table__row.selection {
+ color: #222;
+ background: #ffeb3b;
+}
+
+.satus-table__row>div {
+ overflow: hidden;
+ margin: 8px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ flex: 1;
+}
+
+
+/*--------------------------------------------------------------
+# FOOTER
+--------------------------------------------------------------*/
+
+.satus-table__footer {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background: var(--satus-theme-background-1);
+ box-shadow: 0 -2px 2px #e6eff7;
+}
+
+
+/*--------------------------------------------------------------
+# PAGINATION
+--------------------------------------------------------------*/
+
+.satus-table__pagination {
+ display: flex;
+}
+
+.satus-table__pagination>button {
+ font: inherit;
+ min-width: 32px;
+ max-width: unset;
+ height: 32px;
+ min-height: unset;
+ max-height: unset;
+ padding: 0;
+ cursor: pointer;
+ opacity: .5;
+ color: inherit;
+ border: none;
+ outline: none;
+ background: transparent;
+ appearance: none;
+}
+
+.satus-table__pagination>button:hover {
+ opacity: 1;
+}
+
+.satus-table__pagination>button.selected {
+ font-weight: 700;
+ opacity: 1;
+}
+
+.satus-table__pagination>span {
+ display: flex;
+ width: 32px;
+ height: 32px;
+ align-items: center;
+ justify-content: center;
+}
+
+.satus-table__selection>button {
+ font: inherit;
+ margin: 8px;
+ padding: 8px;
+ color: inherit;
+ border: 1px solid #d2d6dc;
+ border-radius: 3px;
+ background: transparent;
+}
+
+
+/*--------------------------------------------------------------
+# CHARTS
+--------------------------------------------------------------*/
+
+
+/*--------------------------------------------------------------
+# VERTICAL BARS
+--------------------------------------------------------------*/
+
+.satus-vertical-bars {
+ display: flex;
+ box-sizing: border-box;
+ height: 320px;
+ padding: 16px;
+}
+
+.satus-vertical-bars__column {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ align-items: center;
+ justify-content: flex-end;
+ margin: 2px;
+}
+
+.satus-vertical-bars__bar {
+ width: 100%;
+ background: #EF9A9A;
+ box-shadow: inset -5px -2px 1px rgb(0, 0, 0, .1), 2px 1px 2px rgb(0, 0, 0, .1);
+}
+
+.satus-vertical-bars__label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+}
+
+
+/*--------------------------------------------------------------
+# ANIMATIONS
+--------------------------------------------------------------*/
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes zoomOut {
+ from {
+ transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ transform: scale(.8);
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/satus.js b/satus.js
new file mode 100644
index 0000000..cd162f1
--- /dev/null
+++ b/satus.js
@@ -0,0 +1,1134 @@
+/*--------------------------------------------------------------
+>>> SATUS
+----------------------------------------------------------------
+# Global variable
+# Isset
+# Camelize
+# Merge
+# Render
+# elements
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# GLOBAL VARIABLE
+--------------------------------------------------------------*/
+
+var satus = {
+ elements: {}
+};
+
+
+/*--------------------------------------------------------------
+# ISSET
+--------------------------------------------------------------*/
+
+satus.isset = function (variable) {
+ if (variable === null || variable === undefined) {
+ return false;
+ }
+
+ return true;
+};
+
+
+/*--------------------------------------------------------------
+# CAMELIZE
+--------------------------------------------------------------*/
+
+satus.camelize = function (string) {
+ return string.split('-').map(function (element, index) {
+ if (index === 0) {
+ return element;
+ }
+
+ return element[0].toUpperCase() + element.slice(1);
+ }).join('');
+};
+
+
+/*--------------------------------------------------------------
+# EMPTY
+--------------------------------------------------------------*/
+
+satus.empty = function (element) {
+ if (element) {
+ for (var i = element.children.length - 1; i > -1; i--) {
+ element.children[i].remove();
+ }
+ }
+};
+
+
+/*--------------------------------------------------------------
+# SORT
+--------------------------------------------------------------*/
+
+satus.sort = function (index, order, array) {
+ var type = typeof array[0][index];
+
+ if (order === 'asc') {
+ if (type === 'number') {
+ sorted = array.sort(function (a, b) {
+ return a[index] - b[index];
+ });
+ } else if (type === 'string') {
+ sorted = array.sort(function (a, b) {
+ return a[index].localeCompare(b[index]);
+ });
+ }
+ } else {
+ if (type === 'number') {
+ sorted = array.sort(function (a, b) {
+ return b[index] - a[index];
+ });
+ } else if (type === 'string') {
+ sorted = array.sort(function (a, b) {
+ return b[index].localeCompare(a[index]);
+ });
+ }
+ }
+
+ return sorted;
+};
+
+
+/*--------------------------------------------------------------
+# PARSE
+--------------------------------------------------------------*/
+
+satus.parse = function (object, callback) {
+ for (var key in object) {
+ if (typeof object[key] === 'object') {
+ satus.parse(object[key], callback);
+ } else {
+ callback(key, object[key]);
+ }
+ }
+};
+
+
+/*--------------------------------------------------------------
+# MERGE
+--------------------------------------------------------------*/
+
+satus.merge = function (target, sources, excluded) {
+ for (var key in sources) {
+ if (sources.hasOwnProperty(key)) {
+ if (excluded.indexOf(key) === -1) {
+ if (typeof sources[key] === 'object') {
+ if (['grid', 'menu', 'modal', 'table', 'select'].indexOf(sources.element) === -1) {
+ if (sources[key].hasOwnProperty('element')) {
+ satus.render(sources[key], target);
+ } else {
+ if (typeof target[key] !== 'object') {
+ target[key] = {};
+ }
+
+ this.merge(target[key], sources[key], excluded);
+ }
+ }
+ } else {
+ target[key] = sources[key];
+ }
+ }
+ }
+ }
+};
+
+
+/*--------------------------------------------------------------
+# RENDER
+--------------------------------------------------------------*/
+
+satus.render = function (skeleton, container) {
+ if (skeleton.hasOwnProperty('element')) {
+ var excluded = ['element', 'class', 'click', 'text'],
+ name = this.camelize(skeleton.element),
+ element;
+
+ if (satus.elements[name]) {
+ element = satus.elements[name](skeleton);
+ } else {
+ element = document.createElement(name);
+ }
+
+ element.classList.add('satus-' + skeleton.element);
+
+ if (skeleton.hasOwnProperty('class')) {
+ element.classList.add(skeleton.class.split(' '));
+ }
+
+ if (skeleton.hasOwnProperty('text')) {
+ var node = document.createTextNode(satus.locale.get(skeleton.text));
+
+ element.insertBefore(node, element.children[0]);
+ }
+
+ if (skeleton.hasOwnProperty('html')) {
+ element.innerHTML = skeleton.html;
+ }
+
+ if (skeleton.hasOwnProperty('click')) {
+ element.addEventListener('click', function () {
+ satus.render(this.skeleton.click);
+ });
+ }
+
+ if (skeleton.hasOwnProperty('storage')) {
+ var value = satus.storage.get(skeleton.storage);
+
+ if (satus.isset(value) === false) {
+ if (satus.isset(skeleton.value)) {
+ value = skeleton.value;
+ }
+ }
+
+ if (satus.isset(value)) {
+ element.dataset.value = value;
+
+ if (element.setValue) {
+ element.setValue(value);
+ }
+ }
+
+ element.change = function (value) {
+ var keys = this.skeleton.storage;
+
+ this.dataset.value = value;
+
+ if (satus.isset(keys)) {
+ satus.storage.set(keys, value);
+ }
+ };
+ }
+
+ satus.merge(element, skeleton, excluded);
+
+ element.skeleton = skeleton;
+
+ if (container) {
+ container.appendChild(element);
+ } else {
+ document.body.appendChild(element);
+ }
+
+ if (element.hasOwnProperty('onrender')) {
+ element.onrender();
+ }
+
+ return element;
+ } else if (typeof skeleton === 'object') {
+ for (var key in skeleton) {
+ if (skeleton.hasOwnProperty(key)) {
+ this.render(skeleton[key], container);
+ }
+ }
+ }
+};
+
+
+/*--------------------------------------------------------------
+# STORAGE
+--------------------------------------------------------------*/
+
+satus.storage = {
+ attributes: [],
+ data: {}
+};
+
+
+/*--------------------------------------------------------------
+# LOAD
+--------------------------------------------------------------*/
+
+satus.storage.load = function (keys, callback) {
+ chrome.storage.local.get(keys, function (items) {
+ for (var key in items) {
+ satus.storage.data[key] = items[key];
+ }
+
+ satus.parse(items, function (key, value) {
+ satus.storage.attributes.map(function (element) {
+ if (key === element) {
+ document.body.dataset[satus.camelize(key)] = value;
+ }
+ });
+ });
+
+ callback(items);
+ });
+};
+
+chrome.storage.onChanged.addListener(function (changes) {
+ for (var key in changes) {
+ var value = changes[key].newValue;
+
+ satus.storage.data[key] = value;
+
+ satus.parse(satus.storage.data, function (key, value) {
+ satus.storage.attributes.map(function (element) {
+ if (key === element) {
+ document.body.dataset[satus.camelize(key)] = value;
+ }
+ });
+ });
+ }
+});
+
+
+/*--------------------------------------------------------------
+# GET
+--------------------------------------------------------------*/
+
+satus.storage.get = function (keys) {
+ var target = satus.storage.data;
+
+ keys = keys.split('/').filter(function (value) {
+ return value != '';
+ });
+
+ for (var i = 0, l = keys.length; i < l; i++) {
+ if (target.hasOwnProperty(keys[i])) {
+ target = target[keys[i]];
+ } else {
+ return undefined;
+ }
+ }
+
+ return target;
+};
+
+
+/*--------------------------------------------------------------
+# SET
+--------------------------------------------------------------*/
+
+satus.storage.set = function (keys, value) {
+ var items = {},
+ target = satus.storage.data;
+
+ keys = keys.split('/').filter(function (value) {
+ return value != '';
+ });
+
+ for (var i = 0, l = keys.length; i < l; i++) {
+ var item = keys[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.data) {
+ items[key] = satus.storage.data[key];
+ }
+
+ chrome.storage.local.set(items);
+};
+
+
+/*--------------------------------------------------------------
+# LOCALE
+--------------------------------------------------------------*/
+
+satus.locale = {
+ data: {}
+};
+
+
+/*--------------------------------------------------------------
+# LOAD
+--------------------------------------------------------------*/
+
+satus.locale.load = async function (url, callback) {
+ this.data = await (await fetch(url)).json();
+
+ callback();
+};
+
+
+/*--------------------------------------------------------------
+# GET
+--------------------------------------------------------------*/
+
+satus.locale.get = function (string) {
+ if (this.data[string]) {
+ return this.data[string].message;
+ } else {
+ return string;
+ }
+};
+
+
+/*--------------------------------------------------------------
+# ELEMENTS
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# MENU
+--------------------------------------------------------------*/
+
+satus.elements.menu = function (skeleton) {
+ var ul = document.createElement('ul');
+
+ for (var key in skeleton) {
+ if (typeof skeleton[key] === 'object' && skeleton[key].hasOwnProperty('element')) {
+ var li = document.createElement('li');
+
+ li.className = 'satus-menu__item';
+
+ satus.render(skeleton[key], li);
+
+ ul.appendChild(li);
+ }
+ }
+
+ return ul;
+};
+
+
+/*--------------------------------------------------------------
+# GRID
+--------------------------------------------------------------*/
+
+satus.elements.grid = function (skeleton) {
+ var grid = document.createElement('div');
+
+ grid.className = 'satus-grid';
+ grid.dataset.edit = false;
+
+ grid.addItem = function (options) {
+ var item = document.createElement('div'),
+ left = document.createElement('div'),
+ right = document.createElement('div'),
+ center = document.createElement('div');
+
+ item.className = 'satus-grid__item';
+ left.className = 'satus-grid-item__left';
+ right.className = 'satus-grid-item__right';
+ center.className = 'satus-grid-item__center';
+
+ if (typeof options !== 'object') {
+ options = {};
+ }
+
+ //item.draggable = true;
+
+ item.options = options;
+ item.parent = this.parent || this;
+ item.addItem = this.addItem;
+
+ left.parent = item;
+ right.parent = item;
+ center.parent = item;
+
+
+ /*// MOUSE OVER
+ item.addEventListener('mouseover', function(event) {
+ if (event.path[0] === this && this.parent.editing === true) {
+ this.classList.add('grid__item--hover');
+ }
+ });
+
+ item.addEventListener('mouseout', function(event) {
+ if (event.path[0] === this && this.parent.editing === true) {
+ this.classList.remove('grid__item--hover');
+ }
+ });
+
+
+ // DRAG & DROP (CHILD)
+ item.addEventListener('dragstart', function(event) {
+ event.target.parent.dragChild = event.target;
+
+ event.target.parent.classList.add('grid--drag');
+
+ event.target.classList.add('grid__item--drag');
+ });
+
+ item.addEventListener('dragend', function(event) {
+ var parent = this.parent.dragParent,
+ child = this.parent.dragChild;
+
+ if (parent && child) {
+ if (parent.type === 'left') {
+ var target = parent.target;
+
+ target.parentNode.insertBefore(target.parent.dragChild, target);
+ } else if (parent.type === 'center') {
+ var target = parent.target;
+
+ target.appendChild(target.parent.dragChild);
+ } else if (parent.type === 'right') {
+ var target = parent.target;
+
+ target.parentNode.insertBefore(target.parent.dragChild, target.nextElementSibling);
+ }
+ }
+
+ event.target.parent.classList.remove('grid--drag');
+
+ delete this.parent.dragParent;
+ delete this.parent.dragChild;
+
+ event.target.classList.remove('grid__item--drag');
+ });
+
+
+ // DRAG & DROP (INSERT BEFORE PARENT)
+ left.addEventListener('dragover', function(event) {
+ var target = event.target.parentNode;
+
+ if (target.classList.contains('grid__item--drag') === false) {
+ target.classList.add('grid__item--dragover');
+
+ target.dataset.dragOver = 'left';
+
+ target.parent.dragParent = {
+ type: 'left',
+ target: target
+ };
+ }
+ });
+
+ left.addEventListener('dragleave', function(event) {
+ var target = event.target.parentNode;
+
+ delete target.dataset.dragOver;
+
+ target.classList.remove('grid__item--dragover');
+ });
+
+ // DRAG & DROP (INSERT TO PARENT)
+ center.addEventListener('dragover', function(event) {
+ var target = event.target.parentNode;
+
+ if (target.classList.contains('grid__item--drag') === false) {
+ target.classList.add('grid__item--dragover');
+
+ target.dataset.dragOver = 'center';
+
+ target.parent.dragParent = {
+ type: 'center',
+ target: target
+ };
+ }
+ });
+
+ center.addEventListener('dragleave', function(event) {
+ var target = event.target.parentNode;
+
+ delete target.dataset.dragOver;
+
+ target.classList.remove('grid__item--dragover');
+ });
+
+ // DRAG & DROP (INSERT AFTER PARENT)
+ right.addEventListener('dragover', function(event) {
+ var target = event.target.parentNode;
+
+ if (target.classList.contains('grid__item--drag') === false) {
+ target.classList.add('grid__item--dragover');
+
+ target.dataset.dragOver = 'right';
+
+ target.parent.dragParent = {
+ type: 'right',
+ target: target
+ };
+ }
+ });
+
+ right.addEventListener('dragleave', function(event) {
+ var target = event.target.parentNode;
+
+ delete target.dataset.dragOver;
+
+ target.classList.remove('grid__item--dragover');
+ });*/
+
+ item.appendChild(left);
+ item.appendChild(center);
+ item.appendChild(right);
+
+ this.appendChild(item);
+
+ return item;
+ }
+
+ for (var i = 0, l = skeleton.items.length; i < l; i++) {
+ var item = grid.addItem();
+
+ satus.render(skeleton.items[i], item);
+ }
+
+ return grid;
+};
+
+
+/*--------------------------------------------------------------
+# TABLE
+--------------------------------------------------------------*/
+
+satus.elements.table = function (skeleton) {
+ var table = document.createElement('div'),
+ head = document.createElement('div'),
+ body = document.createElement('div'),
+ footer = document.createElement('div'),
+ selection = document.createElement('div'),
+ pagination = document.createElement('div');
+
+ table.className = 'satus-table';
+ head.className = 'satus-table__head';
+ body.className = 'satus-table__body';
+ footer.className = 'satus-table__footer';
+ selection.className = 'satus-table__selection';
+ pagination.className = 'satus-table__pagination';
+
+ table.order = {
+ by: 'asc',
+ key: ''
+ };
+ table.columns = skeleton.columns;
+ table.data = skeleton.data || [];
+ table.count = table.data.length;
+ table.pageIndex = 1;
+ table.body = body;
+ table.onsort = skeleton.onsort;
+ table.onpage = skeleton.onpage;
+ table.selection = {
+ element: selection,
+ rows: {
+ length: 0
+ }
+ };
+ table.pagination = pagination;
+
+ table.createRows = function(data, parent, columns) {
+ for (var i = 0, l = data.length; i < l; i++) {
+ var row = document.createElement('div'),
+ is_filtered = true;
+
+ row.className = 'satus-table__row';
+ row.data = data[i];
+ row.index = i;
+
+ if (this.selection.rows[i] === data[i]) {
+ row.classList.add('selected');
+ }
+
+ for (var j = 0, k = columns.length; j < k; j++) {
+ var value = data[i][columns[j].key],
+ cell = document.createElement('div');
+
+ if (typeof value === 'object') {
+ var button = document.createElement('button');
+
+ button.className = 'satus-button satus-button--tree';
+ button.textContent = '+';
+ button.rowIndex = i;
+ button.colIndex = j;
+ button.data = value;
+ button.table = this;
+ button.column = columns[j];
+ button.addEventListener('click', function () {
+ if (this.textContent === '+') {
+ var columns = this.column.columns,
+ container = document.createElement('div'),
+ rows = [];
+
+ for (var key in this.data) {
+ var skip = false,
+ item = this.data[key],
+ row = {};
+
+ for (var i = 0, l = columns.length; i < l; i++) {
+ if (this.column.key === columns[i].key) {
+ columns[i] = this.column;
+ }
+ }
+
+ for (var i = 0, l = columns.length; i < l; i++) {
+ var column = columns[i];
+
+ if (column.key === key) {
+ skip = true;
+ }
+
+ row[column.key] = column.key === 'key' ? key : item[column.key];
+ }
+
+ if (skip === false) {
+ rows.push(row);
+ }
+ }
+
+ this.parentNode.parentNode.parentNode.insertBefore(container, this.parentNode.parentNode.nextElementSibling);
+
+ this.table.createRows(rows, container, columns);
+
+ this.textContent = '-';
+ } else {
+ this.textContent = '+';
+
+ this.parentNode.parentNode.nextElementSibling.remove();
+ }
+ });
+
+ cell.appendChild(button);
+ } else if (satus.isset(value)) {
+ if (columns[j].filter && !value.match(columns[j].filter)) {
+ is_filtered = false;
+ }
+
+ if (typeof columns[j].intercept === 'function') {
+ columns[j].intercept(cell, value, i, row);
+ } else {
+ cell.innerText = value;
+ }
+ }
+
+ row.appendChild(cell);
+ }
+
+ if (is_filtered) {
+ parent.appendChild(row);
+ }
+ }
+ };
+
+ table.update = function () {
+ var body = this.body,
+ pages = Math.ceil(this.count / 100);
+
+ for (var i = body.children.length - 1; i > -1; i--) {
+ body.children[i].remove();
+ }
+
+ for (var i = this.pagination.children.length - 1; i > -1; i--) {
+ this.pagination.children[i].remove();
+ }
+
+ this.createRows(this.data, body, this.columns);
+
+ if (pages > 1) {
+ for (var i = 0; i < pages; i++) {
+ var button = document.createElement('button');
+
+ if (this.pageIndex > 4 && i > 0 && i < this.pageIndex - 2) {
+ i = this.pageIndex - 2;
+
+ var span = document.createElement('span');
+
+ span.innerText = '...';
+
+ this.pagination.appendChild(span);
+ }
+
+ if (this.pageIndex < pages - 4 && i === this.pageIndex + 1) {
+ i = pages - 1;
+
+ var span = document.createElement('span');
+
+ span.innerText = '...';
+
+ this.pagination.appendChild(span);
+ }
+
+ button.innerText = i + 1;
+
+ if (this.pageIndex === i + 1) {
+ button.className = 'selected';
+ }
+
+ button.addEventListener('click', function () {
+ var table = this.parentNode.parentNode.parentNode,
+ prev = this.parentNode.querySelector('.selected');
+
+ table.pageIndex = Number(this.innerText);
+
+ if (prev) {
+ prev.classList.remove('selected');
+ }
+
+ this.classList.add('selected');
+
+ if (table.onpage) {
+ table.onpage(table.pageIndex * 100 - 100);
+ } else {
+ table.update();
+ }
+ });
+
+ this.pagination.appendChild(button);
+ }
+ }
+ };
+
+ for (var i = 0, l = skeleton.columns.length; i < l; i++) {
+ var column = document.createElement('div'),
+ sort = skeleton.columns[i].sort;
+
+ column.key = skeleton.columns[i].key,
+ column.innerText = satus.locale.get(skeleton.columns[i].label);
+
+ if (sort !== false) {
+ column.addEventListener('click', function () {
+ var table = this.parentNode.parentNode,
+ columns = this.parentNode.children;
+
+ for (var i = 0, l = columns.length; i < l; i++) {
+ delete columns[i].dataset.order;
+ }
+
+ if (table.order.by === 'asc') {
+ table.order.by = 'desc';
+ } else {
+ table.order.by = 'asc';
+ }
+
+ table.order.key = this.key;
+
+ this.dataset.order = table.order.by;
+
+ if (table.onsort) {
+ table.onsort();
+ } else {
+ table.update();
+ }
+ });
+ } else {
+ column.style.cursor = 'default';
+ }
+
+ column.addEventListener('selectstart', function (event) {
+ event.preventDefault();
+ });
+
+ if (sort === 'asc' || sort === 'desc') {
+ table.order.by = sort;
+ table.order.key = skeleton.columns[i].key;
+ column.dataset.order = sort;
+ }
+
+ head.appendChild(column);
+ }
+
+ function createSelectionBar(table) {
+ var bar = table.selection.element;
+
+ if (bar.children.length > 0) {
+ return;
+ }
+
+ var undo_button = document.createElement('button'),
+ delete_button = document.createElement('button'),
+ bookmark_button = document.createElement('button');
+
+ undo_button.textContent = 'Undo selection';
+ delete_button.textContent = 'Delete';
+ bookmark_button.textContent = 'Bookmark';
+
+ undo_button.addEventListener('click', function () {
+ var table = this.parentNode.parentNode.parentNode,
+ elements = table.querySelectorAll('.selected');
+
+ for (var i = 0, l = elements.length; i < l; i++) {
+ elements[i].classList.remove('selected');
+ }
+
+ removeSelectionBar(table);
+
+ table.data.selection = {
+ length: 0
+ };
+ });
+
+ delete_button.addEventListener('click', function () {
+ var table = this.parentNode.parentNode.parentNode,
+ rows = table.selection.rows,
+ elements = table.querySelectorAll('.selected');
+
+ for (var i = elements.length - 1; i > 0; i--) {
+ elements[i - 1].remove();
+ }
+
+ for (var key in rows) {
+ if (key !== 'length') {
+ var row = rows[key];
+
+ delete table.data.splice(key, 1);
+ delete table.selection.rows[key];
+ }
+ }
+
+ removeSelectionBar(table);
+
+ table.selection = {
+ length: 0
+ };
+ });
+
+ bookmark_button.addEventListener('click', function () {
+ var table = this.parentNode.parentNode.parentNode;
+
+ for (var key in table.data.selection) {
+ var element = elements[key];
+
+ delete table.data.table[element.data.index];
+ delete table.data.selection[element.data.index];
+
+ chrome.bookmarks.create({
+ title: this.parentNode.children[1].innerText,
+ url: this.parentNode.children[2].children[0].href,
+ parentId: '1'
+ }, function (item) {
+ self.bookmarkId = item.id;
+ });
+ }
+ });
+
+ bar.appendChild(undo_button);
+ bar.appendChild(delete_button);
+ bar.appendChild(bookmark_button);
+ }
+
+ function removeSelectionBar(table) {
+ var elements = table.selection.element.children;
+
+ for (var i = elements.length; i > 0; i--) {
+ elements[i - 1].remove();
+ }
+ }
+
+ table.addEventListener('mousedown', function (event) {
+ if (
+ event.button !== 0 || ['A', 'BUTTON', 'INPUT'].indexOf(event.target.nodeName) !== -1
+ ) {
+ return false;
+ }
+
+ var table = this,
+ rows = [],
+ start_row,
+ next_row,
+ end_row,
+ start_mouse_y = 0,
+ end_mouse_y = 0;
+
+ function mousemove(event) {
+ for (var i = 0, l = rows.length; i < l; i++) {
+ rows[i].classList.remove('selection');
+ }
+
+ rows.splice(1, rows.length);
+
+ for (var i = 0, l = event.path.length; i < l; i++) {
+ var item = event.path[i];
+
+ if (item.className === 'satus-table__row') {
+ end_row = item;
+ }
+ }
+
+ if (end_row && start_row !== end_row) {
+ next_row = start_row;
+
+ while (next_row !== end_row) {
+ if (start_mouse_y < event.clientY) {
+ next_row = next_row.nextElementSibling;
+ } else {
+ next_row = next_row.previousElementSibling;
+ }
+
+ rows.push(next_row);
+ }
+ }
+
+ for (var i = 0, l = rows.length; i < l; i++) {
+ rows[i].classList.add('selection');
+ }
+ }
+
+ function mouseup() {
+ for (var i = 0, l = rows.length; i < l; i++) {
+ var row = rows[i];
+
+ row.classList.remove('selection');
+ row.classList.toggle('selected');
+
+ if (row.classList.contains('selected')) {
+ table.selection.rows[row.index] = row.data;
+
+ table.selection.rows.length++;
+ } else {
+ delete table.selection.rows[row.index];
+
+ table.selection.rows.length--;
+ }
+ }
+
+ if (table.selection.rows.length === 0) {
+ removeSelectionBar(table);
+ } else {
+ createSelectionBar(table);
+ }
+
+ window.removeEventListener('mousemove', mousemove);
+ window.removeEventListener('mouseup', mouseup);
+ }
+
+ for (var i = 0, l = event.path.length; i < l; i++) {
+ var item = event.path[i];
+
+ if (item.className === 'satus-table__row') {
+ start_row = item;
+
+ rows.push(start_row);
+
+ event.preventDefault();
+ }
+ }
+
+ if (start_row) {
+ window.addEventListener('mousemove', mousemove);
+ window.addEventListener('mouseup', mouseup);
+
+ start_mouse_y = event.clientY;
+ }
+ });
+
+ table.appendChild(head);
+ table.appendChild(body);
+ footer.appendChild(selection);
+ footer.appendChild(pagination);
+ table.appendChild(footer);
+
+ table.update();
+
+ return table;
+};
+
+
+/*--------------------------------------------------------------
+# SWITCH
+--------------------------------------------------------------*/
+
+satus.elements.switch = function (skeleton) {
+ var element = document.createElement('button'),
+ track = document.createElement('span');
+
+ track.className = 'satus-switch__track';
+
+ element.addEventListener('click', function () {
+ this.change(this.dataset.value !== 'true');
+ });
+
+ element.appendChild(track);
+
+ return element;
+};
+
+
+/*--------------------------------------------------------------
+# MODAL
+--------------------------------------------------------------*/
+
+satus.elements.modal = function (skeleton) {
+ var modal = document.createElement('div'),
+ container = document.createElement('div');
+
+ modal.addEventListener('click', function (event) {
+ event.stopPropagation();
+
+ if (this === event.target) {
+ this.remove();
+ }
+ });
+
+ container.className = 'satus-modal__container';
+
+ for (var key in skeleton) {
+ if (typeof skeleton[key] === 'object' && skeleton[key].hasOwnProperty('element')) {
+ satus.render(skeleton[key], container);
+ }
+ }
+
+ modal.appendChild(container);
+
+ return modal;
+};
+
+
+/*--------------------------------------------------------------
+# SELECT
+--------------------------------------------------------------*/
+
+satus.elements.select = function (skeleton) {
+ var select = document.createElement('select');
+
+ for (var i = 0, l = skeleton.options.length; i < l; i++) {
+ skeleton.options[i].element = 'option';
+
+ satus.render(skeleton.options[i], select);
+ }
+
+ select.addEventListener('change', function() {
+ this.change(this.value);
+ });
+
+ select.setValue = function(value) {
+ for (var i = 0, l = this.children.length; i < l; i++) {
+ if (value === this.children[i].value) {
+ this.children[i].selected = true;
+ }
+ }
+ };
+
+ return select;
+};
+
+
+/*--------------------------------------------------------------
+# CHARTS
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+# VERTICAL BARS
+--------------------------------------------------------------*/
+
+satus.elements.verticalBars = function (skeleton) {
+ var chart = document.createElement('div'),
+ max_value = Math.max.apply(null, skeleton.data);
+
+ for (var i = 0, l = skeleton.data.length; i < l; i++) {
+ var column = document.createElement('div'),
+ bar = document.createElement('div'),
+ label = document.createElement('div');
+
+ column.className = 'satus-vertical-bars__column';
+ bar.className = 'satus-vertical-bars__bar';
+ label.className = 'satus-vertical-bars__label';
+
+ bar.dataset.value = skeleton.data[i];
+ bar.title = skeleton.data[i];
+ bar.style.height = skeleton.data[i] * 100 / max_value + '%';
+
+ label.textContent = satus.locale.get(skeleton.labels[i]);
+
+ column.appendChild(bar);
+ column.appendChild(label);
+ chart.appendChild(column);
+ }
+
+ return chart;
+};
\ No newline at end of file
diff --git a/script-testing.js b/script-testing.js
deleted file mode 100644
index eb09d78..0000000
--- a/script-testing.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*var grid = createGrid(),
- row1 = grid.addRow(),
- row2 = grid.addRow(),
- row3 = grid.addRow();
-
-/*row1.addCell().appendChild(document.createTextNode('#001'));
-row1.addCell().appendChild(document.createTextNode('#002'));
-row1.addCell().appendChild(document.createTextNode('#003'));
-
-row2.addCell().appendChild(document.createTextNode('#004'));
-row2.addCell().appendChild(document.createTextNode('#005'));
-
-row3.addCell().appendChild(document.createTextNode('#006'));*/
-
-var grid = createGrid(),
- item = grid.addItem();
-
-function addNewItem(event) {
- event.stopPropagation();
-
- this.addItem().addEventListener('dblclick', addNewItem);
-}
-
-item.addEventListener('dblclick', addNewItem);
-
-document.body.appendChild(grid);
\ No newline at end of file
diff --git a/script.js b/script.js
deleted file mode 100644
index b5a5f86..0000000
--- a/script.js
+++ /dev/null
@@ -1,1796 +0,0 @@
-/*--------------------------------------------------------------
->>> SCRIPT
-----------------------------------------------------------------
-# Global variables
-# Time
-# Search bar
-# Table
- # Head
- # Body
-# Selection
-# Initialization
---------------------------------------------------------------*/
-
-console.time();
-
-/*--------------------------------------------------------------
-# GLOBAL VARIABLES
---------------------------------------------------------------*/
-
-var TIME = new Date().getTime(),
- BOOKMARKS = {},
- TAGS = {},
- SEARCH = [],
- TABLE = {
- 4: document.querySelector('.table[data-table-index="4"]'),
- 0: document.querySelector('.table[data-table-index="0"]'),
- 1: document.querySelector('.table[data-table-index="1"]'),
- 2: document.querySelector('.table[data-table-index="2"]'),
- 3: document.querySelector('.table[data-table-index="3"]'),
- 5: document.querySelector('.table[data-table-index="5"]')
- },
- TABLE_BODY = {
- 4: document.querySelector('.table[data-table-index="4"] .table__body'),
- 0: document.querySelector('.table[data-table-index="0"] .table__body'),
- 1: document.querySelector('.table[data-table-index="1"] .table__body'),
- 2: document.querySelector('.table[data-table-index="2"] .table__body'),
- 3: document.querySelector('.table[data-table-index="3"] .table__body'),
- 5: document.querySelector('.table[data-table-index="5"] .table__body')
- },
- CATEGORIES = {},
- TOP_SITES = {},
- current_search_result = document.querySelector('.current-search-result'),
- search_results_element = document.querySelector('.search-results');
-
-TABLE[0].data = {
- table: [],
- id: 'BY_DOMAIN',
- loaded: false,
- page: 1,
- column: 0,
- order_by: 'desc',
- selection: {
- length: 0
- }
-};
-
-TABLE[1].data = {
- table: [],
- id: 'BY_PAGE',
- loaded: false,
- page: 1,
- column: 0,
- order_by: 'desc',
- selection: {
- length: 0
- }
-};
-
-TABLE[2].data = {
- table: [],
- id: 'BY_PARAM',
- loaded: false,
- page: 1,
- column: 0,
- order_by: 'desc',
- selection: {
- length: 0
- }
-};
-
-TABLE[4].data = {
- table: [],
- page: 1,
- column: 0,
- order_by: 'desc',
- selection: {
- length: 0
- }
-};
-
-TABLE[5].data = {
- table: [],
- page: 1,
- column: 0,
- order_by: 'desc',
- selection: {
- length: 0
- }
-};
-
-
-/*--------------------------------------------------------------
-# TIME UPDATE
---------------------------------------------------------------*/
-
-setInterval(function() {
- TIME += 60000;
-}, 60000);
-
-
-/*--------------------------------------------------------------
-# SEARCH BAR
---------------------------------------------------------------*/
-
-function initSearchBar() {
- var input = document.querySelector('.search-field');
-
- input.change = function () {
- var selection = window.getSelection(),
- value = this.textContent;
-
- /*var ranges = [];
-
- // COPY SELECTION
- for (var i = 0, l = selection.rangeCount; i < l; i++) {
- var range = selection.getRangeAt(i);
-
- ranges.push({
- endContainer: range.endContainer,
- endOffset: range.endOffset,
- startContainer: range.startContainer,
- startOffset: range.startOffset
- });
- }*/
-
- for (var i = 0, l = this.childNodes.length; i < l; i++) {
- var child = this.childNodes[i];
-
- if (child.nodeType === Node.TEXT_NODE) {
- var match = child.textContent.match(/([^\s]+|[\s]+)/g);
-
- if (match) {
- for (var j = 0, k = match.length; j < k; j++) {
- var element = document.createElement('span'),
- text = match[j].replace(/[\s\r\n\x0B\x0C\u0085\u2028\u2029]+/g, '');
-
- if (text !== '') {
- element.textContent = text;
- } else {
- element.className = 'space';
- element.innerHTML = ' ';
- }
-
- this.insertBefore(element, child);
- }
-
- child.remove();
- }
- } else if (child.tagName === 'SPAN') {
- var match = child.textContent.match(/([^\s]+|[\s]+)/g),
- match2 = child.textContent.match(/[\s]+/g);
-
- if (match && match2) {
- for (var j = 0, k = match.length; j < k; j++) {
- var element = document.createElement('span'),
- text = match[j].replace(/[\s\r\n\x0B\x0C\u0085\u2028\u2029]+/g, '');
-
- if (text !== '') {
- element.textContent = text;
- } else {
- element.className = 'space';
- element.innerHTML = ' ';
- }
-
- this.insertBefore(element, child);
- }
-
- child.remove();
- }
- }
- }
-
- var non_space = this.querySelectorAll('span:not(.space)');
-
- for (var i = 0, l = non_space.length; i < l; i++) {
- var element = non_space[i],
- a = (i + 1) / l;
-
- element.style.opacity = a;
- element.style.fontSize = a * 20 + 'px';
- }
-
- // CREATE SPANS
- /*var match = this.textContent.match(/([^\s]+|[\s]+)/g);
-
- if (match) {
- this.innerHTML = '';
-
- for (var i = 0, l = match.length; i < l; i++) {
- var element = document.createElement('span');
-
- element.textContent = match[i].replace(/[\r\n\x0B\x0C\u0085\u2028\u2029]+/g, '');
-
- var a = (i + 1) / l;
-
- element.style.opacity = a;
- element.style.fontSize = a * 20 + 'px';
-
- this.appendChild(element);
- }
- }*/
-
- // REPLACE SELECTION
- /*selection.removeAllRanges();
-
- var range = document.createRange(),
- element = this.children > 0 ? this.children[this.children.length - 1] : this;
-
- console.log(element, element.textContent.length - 1);
-
- range.setStart(element, element.textContent.length - 1);
-
- selection.addRange(range);*/
-
- /*for (var i = 0, l = ranges.length; i < l; i++) {
- var range = ranges[i],
- new_range = document.createRange();
-
- new_range.setStart(range.startContainer, range.startOffset);
- new_range.setEnd(range.endContainer, range.endOffset);
-
- selection.addRange(new_range);
- }*/
-
- var results = [],
- pre_results = {},
- first = null,
- cursor_position = this.selectionStart,
- r = new RegExp('[^\w]' + value);
-
- search_results_element.innerHTML = '';
-
- if (value.length > 0 && event.inputType !== 'deleteContentBackward') {
- for (var i = 0, l = SEARCH.length; i < l; i++) {
- var item = SEARCH[i];
-
- if (item[0].indexOf(value) === 0 && !pre_results[key]) {
- pre_results[item[0]] = item;
- }
- }
-
- for (var key in BOOKMARKS) {
- if (key.indexOf(value) === 0) {
- var start_with = key.match(/[^/]+\/\/(www\.)?/)[1],
- url = key.replace(start_with, '');
-
- if (!pre_results[key]) {
- pre_results[url] = [
- url,
- 0,
- start_with
- ];
- }
- }
- }
-
- for (var i = 0; i < TOP_SITES_length; i++) {
- var key = TOP_SITES[i];
-
- if (key.indexOf(value) === 0 && !pre_results[key]) {
- pre_results[key] = [
- key,
- 0,
- 'https://'
- ];
- }
- }
-
- for (var key in pre_results) {
- results.push(pre_results[key]);
- }
-
- if (results[0]) {
- results = sort(results, 1);
-
- results = results.slice(0, 6);
-
- for (var i = 0, l = results.length; i < l; i++) {
- var item = document.createElement('div');
-
- item.innerText = results[i][0];
- item.dataset.url = results[i][2] + results[i][0];
- item.style.backgroundImage = 'url(chrome://favicon/' + results[i][2] + results[i][0] + ')';
-
- item.addEventListener('click', function() {
- search_results_element.style.display = 'none';
-
- window.open(this.dataset.url, '_self');
- });
-
- search_results_element.appendChild(item);
- }
- }
- }
-
- if (results[0] && results[0][0]) {
- search_results_element.children[0].className = 'selected';
-
- this.value = results[0][0];
-
- //this.textContent = first;
- //this.setSelectionRange(cursor_position, this.value.length);
- }
-
- if (value.length === 0 || results.length === 0) {
- search_results_element.style.display = '';
- } else {
- search_results_element.style.display = 'block';
- }
- };
-
- input.addEventListener('focus', function() {
- if (this.innerText.length > 0) {
- search_results_element.style.display = 'block';
- }
- });
-
- input.addEventListener('blur', function() {
- search_results_element.style.display = '';
- });
-
- input.addEventListener('input', function() {
- this.change();
- });
-
- input.addEventListener('keydown', function(event) {
- var key = event.key;
-
- if (key === 'Enter') {
- window.open('https://' + this.value, '_self');
- } else if (key === 'ArrowUp') {
- var selected = search_results_element.querySelector('.selected'),
- elements = search_results_element.children;
-
- if (!selected) {
- elements[elements.length - 1].classList.add('selected');
- } else if (Array.prototype.indexOf.call(selected.parentNode.children, selected) === 0) {
- selected.classList.remove('selected');
-
- elements[elements.length - 1].classList.add('selected');
- } else {
- selected.classList.remove('selected');
-
- elements[Array.prototype.indexOf.call(selected.parentNode.children, selected) - 1].classList.add('selected');
- }
-
- this.value = search_results_element.querySelector('.selected').innerText;
- } else if (key === 'ArrowDown') {
- var selected = search_results_element.querySelector('.selected'),
- elements = search_results_element.children;
-
- if (!selected) {
- elements[0].classList.add('selected');
- } else if (Array.prototype.indexOf.call(selected.parentNode.children, selected) === elements.length - 1) {
- selected.classList.remove('selected');
-
- elements[0].classList.add('selected');
- } else {
- selected.classList.remove('selected');
-
- elements[Array.prototype.indexOf.call(selected.parentNode.children, selected) + 1].classList.add('selected');
- }
-
- this.value = search_results_element.querySelector('.selected').innerText;
- }
- });
-
- /*document.querySelector('header > input').addEventListener('input', function(event) {
- var results = [],
- pre_results = {},
- first = null,
- cursor_position = this.selectionStart,
- r = new RegExp('[^\w]' + this.value);
-
- search_results_element.innerHTML = '';
-
- if (this.value.length > 0 && event.inputType !== 'deleteContentBackward') {
- for (var i = 0, l = SEARCH.length; i < l; i++) {
- var item = SEARCH[i];
-
- if (item[0].indexOf(this.value) === 0 && !pre_results[key]) {
- pre_results[item[0]] = item;
- }
- }
-
- for (var key in BOOKMARKS) {
- if (key.indexOf(this.value) === 0) {
- var start_with = key.match(/[^/]+\/\/(www\.)?/)[1],
- url = key.replace(start_with, '');
-
- if (!pre_results[key]) {
- pre_results[url] = [
- url,
- 0,
- start_with
- ];
- }
- }
- }
-
- for (var i = 0; i < TOP_SITES_length; i++) {
- var key = TOP_SITES[i];
-
- if (key.indexOf(this.value) === 0 && !pre_results[key]) {
- pre_results[key] = [
- key,
- 0,
- 'https://'
- ];
- }
- }
-
- for (var key in pre_results) {
- results.push(pre_results[key]);
- }
-
- results = sort(results, 1);
-
- results = results.slice(0, 6);
-
- for (var i = 0, l = results.length; i < l; i++) {
- var item = document.createElement('div');
-
- item.innerText = results[i][0];
- item.dataset.url = results[i][2] + results[i][0];
- item.style.backgroundImage = 'url(chrome://favicon/' + results[i][2] + results[i][0] + ')';
-
- item.addEventListener('click', function() {
- search_results_element.style.display = 'none';
-
- window.open(this.innerText, '_self');
- });
-
- search_results_element.appendChild(item);
- }
-
- first = results[0][0];
-
- if (first) {
- search_results_element.children[0].className = 'selected';
-
- this.value = first;
- this.setSelectionRange(cursor_position, this.value.length);
- }
-
- if (this.value.length > 0) {
- search_results_element.style.display = 'block';
- } else {
- search_results_element.style.display = '';
- }
- }
- });*/
-}
-
-
-/*--------------------------------------------------------------
-# TABLE
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-# HEAD
---------------------------------------------------------------*/
-
-function initTableHeaders() {
- var th = document.querySelectorAll('.table__head > div[data-column-index]');
-
- for (var i = 0, l = th.length; i < l; i++) {
- th[i].addEventListener('click', function() {
- var table = this.parentNode.parentNode,
- previous = table.querySelector('.table__head > div[data-order-by]');
-
- if (previous && this !== previous) {
- delete previous.dataset.orderBy;
-
- this.dataset.orderBy = 'asc';
- } else {
- this.dataset.orderBy = this.dataset.orderBy === 'asc' ? 'desc' : 'asc';
- }
-
- if (table.data.loaded === true) {
- table.data.table = sort(table.data.table, this.dataset.columnIndex, this.dataset.orderBy);
-
- renderTable(Number(table.dataset.tableIndex));
- } else {
- var self = this,
- id = table.data.id;
-
- chrome.storage.local.get(id, function(items) {
- table.data.loaded = true;
-
- if (id === 'BY_DOMAIN') {
- TABLE[0].data.table = sort(items['BY_DOMAIN'], TABLE[0].data.column, TABLE[0].data.order_by);
- } else if (id === 'BY_PAGE') {
- for (var i = 0, l = items['BY_PAGE'].length; i < l; i++) {
- if (BOOKMARKS['https://' + items['BY_PAGE'][i][2]]) {
- items['BY_PAGE'][i][3] = 1;
- }
-
- if (TAGS[items['BY_PAGE'][i][2]]) {
- items['BY_PAGE'][i][4] = TAGS[items['BY_PAGE'][i][2]];
- }
- }
-
- TABLE[1].data.table = sort(items['BY_PAGE'], TABLE[1].data.column, TABLE[1].data.order_by);
- } else if (id === 'BY_PARAM') {
- TABLE[2].data.table = sort(items['BY_PARAM'], TABLE[2].data.column, TABLE[2].data.order_by);
- }
-
- table.data.table = sort(table.data.table, self.dataset.columnIndex, self.dataset.orderBy);
-
- renderTable(Number(table.dataset.tableIndex));
- });
- }
- });
- }
-}
-
-function sort(array, index, order_by) {
- if (order_by === 'asc') {
- if (typeof array[0][index] === 'number') {
- sorted = array.sort(function(a, b) {
- return a[index] - b[index];
- });
- } else {
- sorted = array.sort(function(a, b) {
- return a[index].localeCompare(b[index]);
- });
- }
- } else {
- if (typeof array[0][index] === 'number') {
- sorted = array.sort(function(a, b) {
- return b[index] - a[index];
- });
- } else {
- sorted = array.sort(function(a, b) {
- return b[index].localeCompare(a[index]);
- });
- }
- }
-
- return array;
-}
-
-
-/*--------------------------------------------------------------
-# BODY
---------------------------------------------------------------*/
-
-function renderFirstTableItem(object, parent) {
- var sorted = [];
-
- for (var key in object) {
- if (key.indexOf('/') !== -1) {
- sorted.push([object[key].d, key, object[key]]);
- }
- }
-
- sorted = sort(sorted, 0);
-
- for (var i = 0, l = sorted.length; i < l; i++) {
- var item = sorted[i],
- key = item[1];
-
- if (
- key !== 'a' &&
- key !== 'b' &&
- key !== 'c' &&
- key !== 'd'
- ) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- td3 = document.createElement('div'),
- a = document.createElement('a');
-
- tr.tree = item[2];
- tr.link = parent.link + item[1];
- td1.title = item[0];
- td1.innerText = item[0];
-
- var empty = true;
-
- for (var key2 in item[2]) {
- if (key2.indexOf('/') !== -1) {
- empty = false;
- }
- }
-
- if (empty === false) {
- var button = document.createElement('button');
-
- button.innerText = '+';
-
- button.addEventListener('click', function() {
- var parent = this.parentNode.parentNode.parentNode,
- item = this.parentNode.parentNode;
-
- if (this.innerText === '+') {
- var table = document.createElement('div');
-
- table.className = 'table--inner';
- table.link = item.link;
-
- renderFirstTableItem(item.tree, table);
-
- parent.insertBefore(table, item.nextElementSibling);
-
- this.innerText = '-';
- } else {
- item.nextElementSibling.remove();
-
- this.innerText = '+';
- }
- });
-
- td2.appendChild(button);
- }
-
- a.href = parent.link + item[1];
- a.innerText = item[1];
-
- td3.appendChild(a);
-
- td1.className = 'col';
- td2.className = 'col';
- td3.className = 'col';
-
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
-
- parent.appendChild(tr);
- }
- }
-}
-
-function renderTable(index, array) {
- TABLE_BODY[index].innerHTML = '';
-
- if (index === 0) {
- var array = TABLE[index].data.table;
-
- for (var i = 0 + (TABLE[index].data.page * 100 - 100), l = Math.min(TABLE[index].data.length, i + 100); i < l; i++) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- button = document.createElement('button'),
- td3 = document.createElement('div'),
- a = document.createElement('a');
-
- tr.data = {
- object: array[i],
- index: i
- };
-
- if (TABLE[index].data.selection[i]) {
- tr.classList.add('selected');
- }
-
- td1.title = array[i][1];
- td1.innerText = array[i][1];
-
- td3.style.backgroundImage = 'url(chrome://favicon/' + array[i][0] + ')';
-
- button.innerText = '+';
-
- button.addEventListener('click', function() {
- var parent = this.parentNode.parentNode.parentNode,
- item = this.parentNode.parentNode;
-
- if (this.innerText === '+') {
- if (!item.tree) {
- chrome.storage.local.get(item.children[2].children[0].innerText, function(items) {
- var table = document.createElement('div');
-
- table.className = 'table--inner';
-
- table.link = item.children[2].children[0].innerText;
- item.tree = items[item.children[2].children[0].innerText];
-
- console.log(item.tree);
-
- renderFirstTableItem(item.tree, table);
-
- parent.insertBefore(table, item.nextElementSibling);
- });
- } else {
- var table = document.createElement('div');
-
- table.className = 'table--inner';
- table.link = item.children[2].children[0].innerText;
-
- renderFirstTableItem(item.tree, table);
-
- parent.insertBefore(table, item.nextElementSibling);
- }
-
- this.innerText = '-';
- } else {
- item.nextElementSibling.remove();
-
- this.innerText = '+';
- }
- });
-
- a.href = array[i][0];
- a.innerText = array[i][0];
-
- td2.appendChild(button);
- td3.appendChild(a);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
-
- TABLE_BODY[index].appendChild(tr);
- }
- }
-
- if (index === 1) {
- var array = TABLE[1].data.table;
-
- for (var i = 0 + (TABLE[index].data.page * 100 - 100), l = Math.min(TABLE[index].data.length, i + 100); i < l; i++) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- td3 = document.createElement('div'),
- td4 = document.createElement('div'),
- td5 = document.createElement('div'),
- a = document.createElement('a'),
- input = document.createElement('input');
-
- tr.data = {
- object: array[i],
- index: i
- };
-
- if (TABLE[index].data.selection[i]) {
- tr.classList.add('selected');
- }
-
- input.type = 'text';
-
- td1.title = array[i][0];
- td1.innerText = array[i][0];
- td2.innerText = array[i][1];
- td2.title = array[i][1];
-
- td2.style.backgroundImage = 'url(chrome://favicon/' + array[i][2] + ')';
-
- if (BOOKMARKS[array[i][2]]) {
- td4.innerText = '★';
-
- td4.bookmarkId = BOOKMARKS[array[i][2]];
- } else {
- td4.innerText = '☆';
- }
-
- td4.addEventListener('click', function() {
- if (this.innerText === '★') {
- this.innerText = '☆';
-
- chrome.bookmarks.remove(this.bookmarkId);
- } else {
- var self = this;
-
- this.innerText = '★';
-
- chrome.bookmarks.create({
- title: this.parentNode.children[1].innerText,
- url: this.parentNode.children[2].children[0].href,
- parentId: '1'
- }, function (item) {
- self.bookmarkId = item.id;
- });
- }
- });
-
- if (TAGS[array[i][2]]) {
- input.value = TAGS[array[i][2]];
- }
-
- input.addEventListener('blur', function() {
- var url = this.parentNode.parentNode.children[2].children[0].innerText;
-
- if (this.value !== '') {
- TAGS[url] = this.value;
- } else {
- delete TAGS[url];
- }
-
- chrome.storage.local.set({
- tags: TAGS
- });
- });
-
- a.href = array[i][2];
- a.innerText = array[i][2];
-
- td3.appendChild(a);
- td5.appendChild(input);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
- tr.appendChild(td4);
- tr.appendChild(td5);
-
- TABLE_BODY[index].appendChild(tr);
- }
- }
-
- if (index === 2) {
- var array = TABLE[2].data.table;
-
- for (var i = 0 + (TABLE[index].data.page * 100 - 100), l = Math.min(TABLE[index].data.length, i + 100); i < l; i++) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- button = document.createElement('button'),
- td3 = document.createElement('div'),
- a = document.createElement('a');
-
- tr.data = {
- object: array[i],
- index: i
- };
-
- if (TABLE[index].data.selection[i]) {
- tr.classList.add('selected');
- }
-
- td1.title = array[i][0];
- td1.innerText = array[i][0];
- td3.style.backgroundImage = 'url(chrome://favicon/' + array[i][1] + ')';
-
- a.href = array[i][1];
- a.innerText = array[i][1];
-
- button.innerText = '+';
-
- button.addEventListener('click', function() {
- var parent = this.parentNode.parentNode.parentNode,
- item = this.parentNode.parentNode;
-
- if (this.innerText === '+') {
- var self = this;
-
- chrome.storage.local.get('q' + item.children[2].children[0].innerText, function(items) {
- console.log(items);
- var items = items['q' + item.children[2].children[0].innerText],
- table = document.createElement('div'),
- sorted = [];
-
- table.className = 'table--inner';
-
- for (var key in items) {
- sorted.push([items[key].visitCount, key, items[key].url]);
- }
-
- sorted = sort(sorted, 0);
-
- for (var i = 0, l = sorted.length; i < l; i++) {
- var element = sorted[i],
- tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- a = document.createElement('a');
-
- td1.title = element[0];
- td1.innerText = element[0];
-
- a.href = element[2];
- a.title = element[1];
- a.innerText = element[1];
-
- td2.appendChild(a);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
-
- table.appendChild(tr);
- }
-
- parent.insertBefore(table, item.nextElementSibling);
-
- self.innerText = '-';
- });
- } else {
- item.nextElementSibling.remove();
-
- this.innerText = '+';
- }
- });
-
- td2.appendChild(button);
- td3.appendChild(a);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
-
- TABLE_BODY[index].appendChild(tr);
- }
- }
-
- if (index === 3) {
- for (var key in array) {
- var tabs = array[key],
- window_row = document.createElement('div'),
- table = document.createElement('div');
-
- window_row.className = 'table__row--window';
- table.className = 'table--inner';
-
- window_row.addEventListener('click', function() {
- this.classList.toggle('collapsed');
- });
-
- window_row.innerText = chrome.i18n.getMessage('window') + ' ' + key;
-
- table.dataset.id = key;
-
- for (var i = 0, l = tabs.length; i < l; i++) {
- var tab = tabs[i],
- tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- button = document.createElement('button'),
- a = document.createElement('a');
-
- tr.tabId = tab.id;
- tr.pinned = tab.pinned;
-
- if (tr.pinned) {
- tr.classList.add('pinned');
- }
-
- button.addEventListener('click', function() {
- var row = this.parentNode.parentNode,
- pinned = !row.pinned;
-
- row.pinned = pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- } else {
- row.classList.remove('pinned');
- }
-
- chrome.tabs.update(row.tabId, {
- pinned: pinned
- });
- });
-
- td2.style.backgroundImage = 'url(' + tab.favIconUrl + ')';
-
- a.href = tab.url;
- a.innerText = tab.title;
-
- td1.appendChild(button);
- td2.appendChild(a);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
-
- table.appendChild(tr);
- }
-
- TABLE_BODY[3].appendChild(window_row);
- TABLE_BODY[3].appendChild(table);
- }
- }
-
- if (index === 4) {
- var array = TABLE[index].data.table;
-
- for (var i = 0, l = array.length; i < l; i++) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td2 = document.createElement('div'),
- button = document.createElement('button'),
- td3 = document.createElement('div'),
- icon = document.createElement('div'),
- visits = 0;
-
- tr.data = {
- object: array[i],
- index: i
- };
-
- if (TABLE[index].data.selection[i]) {
- tr.classList.add('selected');
- }
-
- button.innerText = '+';
- button.data = array[i][2];
-
- td1.title = array[i][0];
- td1.innerText = array[i][0];
-
- button.addEventListener('click', function() {
- var parent = this.parentNode.parentNode.parentNode,
- item = this.parentNode.parentNode,
- self = this;
-
- if (this.innerText === '+') {
- var table = document.createElement('div');
-
- table.className = 'table--inner';
-
- function create() {
- for (var i = 0, l = self.data.length; i < l; i++) {
- var tr = document.createElement('div'),
- td1 = document.createElement('div'),
- td3 = document.createElement('div'),
- a = document.createElement('a'),
- url = self.data[i][1],
- replaced = false;
-
- for (var j = 0, k = TABLE[0].data.table.length; j < k; j++) {
- var url2 = TABLE[0].data.table[j][0];
-
- if (url2.indexOf(url) !== -1) {
- url = url2;
-
- replaced = true;
- }
- }
-
- if (replaced === false) {
- url = 'https://' + url;
-
- td3.style.backgroundImage = 'url(' + url + '/favicon.ico)';
- } else {
- td3.style.backgroundImage = 'url(chrome://favicon/' + url + ')';
- }
-
- td1.title = self.data[i][0];
- td1.innerText = self.data[i][0];
-
- a.href = url;
- a.innerText = url;
-
- td3.appendChild(a);
-
- td1.className = 'col';
- td3.className = 'col';
-
- tr.appendChild(td1);
- tr.appendChild(td3);
-
- table.appendChild(tr);
- }
- }
-
- if (TABLE[0].data.loaded) {
- create();
- } else {
- var self = this;
-
- chrome.storage.local.get('BY_DOMAIN', function(items) {
- TABLE[0].data.loaded = true;
-
- TABLE[0].data.table = sort(items['BY_DOMAIN'], TABLE[0].data.column, TABLE[0].data.order_by);
-
- create();
- });
- }
-
- parent.insertBefore(table, item.nextElementSibling);
-
- this.innerText = '-';
- } else {
- item.nextElementSibling.remove();
-
- this.innerText = '+';
- }
- });
-
- var name = chrome.i18n.getMessage(array[i][1]);
-
- td3.title = name;
- td3.innerText = name;
-
- icon.style.backgroundPosition = (-24 * i + Math.floor(i / 4) * 96) - 1 + 'px ' + (Math.floor(i / 4) * -24 - 1) + 'px';
-
- td2.appendChild(button);
- td3.appendChild(icon);
-
- tr.appendChild(td1);
- tr.appendChild(td2);
- tr.appendChild(td3);
-
- TABLE_BODY[index].appendChild(tr);
- }
- }
-
- if (index === 5) {
- updateTableWithRecentlyClosed();
- }
-
- if (TABLE[index].data) {
- var pages = Math.ceil(TABLE[index].data.length / 100),
- current = TABLE[index].data.page;
-
- TABLE[index].children[2].children[1].innerHTML = '';
-
- if (pages > 1) {
- for (var i = 0; i < pages; i++) {
- var button = document.createElement('button');
-
- if (current > 4 && i > 0 && i < current - 2) {
- i = current - 2;
-
- var span = document.createElement('span');
-
- span.innerText = '...';
-
- TABLE[index].children[2].children[1].appendChild(span);
- }
-
- if (current < pages - 4 && i === current + 1) {
- i = pages - 1;
-
- var span = document.createElement('span');
-
- span.innerText = '...';
-
- TABLE[index].children[2].children[1].appendChild(span);
- }
-
- button.innerText = i + 1;
-
- if (current === i + 1) {
- button.className = 'selected';
- }
-
- button.addEventListener('click', function() {
- if (TABLE[index].data.loaded) {
- var prev = this.parentNode.querySelector('.selected');
-
- this.parentNode.parentNode.parentNode.data.page = Number(this.innerText);
-
- if (prev) {
- prev.classList.remove('selected');
- }
-
- this.classList.add('selected');
-
- renderTable(Number(this.parentNode.parentNode.parentNode.dataset.tableIndex));
- } else {
- var self = this,
- id = TABLE[index].data.id;
-
- chrome.storage.local.get(id, function(items) {
- TABLE[index].data.loaded = true;
-
- if (id === 'BY_DOMAIN') {
- TABLE[0].data.table = sort(items['BY_DOMAIN'], TABLE[0].data.column, TABLE[0].data.order_by);
- } else if (id === 'BY_PAGE') {
- for (var i = 0, l = items['BY_PAGE'].length; i < l; i++) {
- if (BOOKMARKS['https://' + items['BY_PAGE'][i][2]]) {
- items['BY_PAGE'][i][3] = 1;
- }
-
- if (TAGS[items['BY_PAGE'][i][2]]) {
- items['BY_PAGE'][i][4] = TAGS[items['BY_PAGE'][i][2]];
- }
- }
-
- TABLE[1].data.table = sort(items['BY_PAGE'], TABLE[1].data.column, TABLE[1].data.order_by);
- } else if (id === 'BY_PARAM') {
- TABLE[2].data.table = sort(items['BY_PARAM'], TABLE[2].data.column, TABLE[2].data.order_by);
- }
-
- var prev = self.parentNode.querySelector('.selected');
-
- self.parentNode.parentNode.parentNode.data.page = Number(self.innerText);
-
- if (prev) {
- prev.classList.remove('selected');
- }
-
- self.classList.add('selected');
-
- renderTable(Number(self.parentNode.parentNode.parentNode.dataset.tableIndex));
- });
- }
- });
-
- TABLE[index].children[2].children[1].appendChild(button);
- }
- }
- }
-}
-
-function initTable4() {
- chrome.tabs.query({}, function(tabs) {
- var object = {};
-
- for (var i = 0, l = tabs.length; i < l; i++) {
- var tab = tabs[i];
-
- if (!object[tab.windowId]) {
- object[tab.windowId] = [];
- }
-
- object[tab.windowId].push(tab);
- }
-
- renderTable(3, object);
- });
-
- chrome.tabs.onAttached.addListener(function(tabId, attachInfo) {
- var windows = TABLE_BODY[3].children;
-
- for (var i = 0, l = windows.length; i < l; i++) {
- for (var j = 0, k = windows[i].children.length; j < k; j++) {
- if (windows[i].children[j].tabId === tabId) {
- windows[i].children[j].remove();
- }
- }
- }
-
- var row = document.createElement('div'),
- col1 = document.createElement('div'),
- col2 = document.createElement('div'),
- button = document.createElement('button'),
- a = document.createElement('a');
-
- row.tabId = tab.tabId;
- row.pinned = tab.pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- }
-
- col2.style.backgroundImage = tab.children[1].style.backgroundImage;
-
- button.addEventListener('click', function() {
- var row = this.parentNode.parentNode,
- pinned = !row.pinned;
-
- row.pinned = pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- } else {
- row.classList.remove('pinned');
- }
-
- chrome.tabs.update(row.tabId, {
- pinned: pinned
- });
- });
-
- a.href = tab.children[1].children[0].href;
- a.innerText = tab.children[1].children[0].innerText;
-
- col1.appendChild(button);
- col2.appendChild(a);
-
- row.appendChild(col1);
- row.appendChild(col2);
-
- tab.remove();
-
- TABLE_BODY[3].querySelector('[data-id="' + attachInfo.newWindowId + '"]').insertBefore(row, TABLE_BODY[3].querySelector('[data-id="' + attachInfo.newWindowId + '"]').children[attachInfo.newPosition]);
- });
-
- chrome.tabs.onCreated.addListener(function(tab) {
- var row = document.createElement('div'),
- col1 = document.createElement('div'),
- col2 = document.createElement('div'),
- button = document.createElement('button'),
- a = document.createElement('a');
-
- row.tabId = tab.id;
- row.pinned = tab.pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- }
-
- button.addEventListener('click', function() {
- var row = this.parentNode.parentNode,
- pinned = !row.pinned;
-
- row.pinned = pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- } else {
- row.classList.remove('pinned');
- }
-
- chrome.tabs.update(row.tabId, {
- pinned: pinned
- });
- });
-
- col1.appendChild(button);
- col2.appendChild(a);
-
- row.appendChild(col1);
- row.appendChild(col2);
-
- TABLE_BODY[3].querySelector('[data-id="' + tab.windowId + '"]').appendChild(row);
- });
-
- chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
- var rows = TABLE_BODY[3].querySelector('[data-id="' + removeInfo.windowId + '"]').children;
-
- for (var i = 0, l = rows.length; i < l; i++) {
- var row = rows[i];
-
- if (row.tabId === tabId) {
- row.remove();
-
- return false;
- }
- }
- });
-
- chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
- var rows = TABLE_BODY[3].querySelector('[data-id="' + tab.windowId + '"]').children;
-
- for (var i = 0, l = rows.length; i < l; i++) {
- var row = rows[i];
-
- if (row.tabId === tabId) {
- var a = row.children[1].children[0];
-
- row.pinned = tab.pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- } else {
- row.classList.remove('pinned');
- }
-
- row.children[1].style.backgroundImage = 'url(' + tab.favIconUrl + ')';
-
- a.href = tab.url;
- a.innerText = tab.title;
- }
- }
- });
-
- chrome.tabs.onMoved.addListener(function(tabId, moveInfo) {
- var rows = TABLE_BODY[3].querySelector('[data-id="' + moveInfo.windowId + '"]').children;
-
- for (var i = 0, l = rows.length; i < l; i++) {
- var tab = rows[i];
-
- if (tab.tabId === tabId) {
- var row = document.createElement('div'),
- col1 = document.createElement('div'),
- col2 = document.createElement('div'),
- button = document.createElement('button'),
- a = document.createElement('a');
-
- row.tabId = tab.tabId;
- row.pinned = tab.pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- }
-
- col2.style.backgroundImage = tab.children[1].style.backgroundImage;
-
- button.addEventListener('click', function() {
- var row = this.parentNode.parentNode,
- pinned = !row.pinned;
-
- row.pinned = pinned;
-
- if (row.pinned) {
- row.classList.add('pinned');
- } else {
- row.classList.remove('pinned');
- }
-
- chrome.tabs.update(row.tabId, {
- pinned: pinned
- });
- });
-
- a.href = tab.children[1].children[0].href;
- a.innerText = tab.children[1].children[0].innerText;
-
- col1.appendChild(button);
- col2.appendChild(a);
-
- row.appendChild(col1);
- row.appendChild(col2);
-
- tab.remove();
-
- TABLE_BODY[3].querySelector('[data-id="' + moveInfo.windowId + '"]').insertBefore(row, TABLE_BODY[3].querySelector('[data-id="' + moveInfo.windowId + '"]').children[moveInfo.toIndex]);
- }
- }
- });
-}
-
-function parseBookmarks(callback) {
- chrome.bookmarks.getTree(function(bookmarks) {
- var threads = 0;
-
- function parse(bookmarks) {
- threads++;
-
- for (var i = 0, l = bookmarks.length; i < l; i++) {
- var item = bookmarks[i];
-
-
- if (item.url) {
- BOOKMARKS[item.url] = item.id;
- }
-
- if (item.children) {
- parse(item.children);
- }
- }
-
- threads--;
-
- if (threads === 0) {
- callback();
- }
- }
-
- parse(bookmarks);
- });
-}
-
-function updateTableWithRecentlyClosed() {
- var array = TABLE[5].data.table;
-
- for (var i = 0, l = array.length; i < l; i++) {
- var row = document.createElement('div'),
- col1 = document.createElement('div'),
- col2 = document.createElement('div'),
- col3 = document.createElement('div'),
- a = document.createElement('a'),
- time_ago = (TIME - array[i][0]) / 3600000;
-
- if (time_ago < 1) {
- time_ago = Math.round(time_ago * 60) + ' minutes ago';
- } else {
- time_ago = Math.round(time_ago) + ' hours ago';
- }
-
- col1.title = time_ago;
- col1.innerText = time_ago;
- col2.style.backgroundImage = 'url(chrome://favicon/' + array[i][1] + ')';
- a.title = array[i][1];
- a.href = array[i][1];
- a.innerText = array[i][1];
- col3.title = array[i][2];
- col3.innerText = array[i][2];
-
- col2.appendChild(a);
- row.appendChild(col1);
- row.appendChild(col2);
- row.appendChild(col3);
-
- TABLE_BODY[5].appendChild(row);
- }
-}
-
-
-/*--------------------------------------------------------------
-# SELECTION
---------------------------------------------------------------*/
-
-function createSelectionBar(table) {
- var bar = table.children[2].children[0];
-
- if (bar.children.length > 0) {
- return;
- }
-
- var undo_button = document.createElement('button'),
- delete_button = document.createElement('button'),
- bookmark_button = document.createElement('button');
-
- undo_button.textContent = 'Undo selection';
- delete_button.textContent = 'Delete';
- bookmark_button.textContent = 'Bookmark';
-
- undo_button.addEventListener('click', function() {
- var table = this.parentNode.parentNode.parentNode,
- elements = table.querySelectorAll('.selected');
-
- for (var i = 0, l = elements.length; i < l; i++) {
- elements[i].classList.remove('selected');
- }
-
- removeSelectionBar(table);
-
- table.data.selection = {
- length: 0
- };
- });
-
- delete_button.addEventListener('click', function() {
- var table = this.parentNode.parentNode.parentNode,
- elements = table.querySelectorAll('.selected');
-
- for (var i = elements.length - 1; i > 0; i--) {
- var element = elements[i - 1];
-
- delete table.data.table[element.data.index];
- delete table.data.selection[element.data.index];
-
- element.remove();
- }
-
- removeSelectionBar(table);
-
- table.data.selection = {
- length: 0
- };
- });
-
- bookmark_button.addEventListener('click', function() {
- var table = this.parentNode.parentNode.parentNode;
-
- for (var key in table.data.selection) {
- var element = elements[key];
-
- delete table.data.table[element.data.index];
- delete table.data.selection[element.data.index];
-
- chrome.bookmarks.create({
- title: this.parentNode.children[1].innerText,
- url: this.parentNode.children[2].children[0].href,
- parentId: '1'
- }, function (item) {
- self.bookmarkId = item.id;
- });
- }
- });
-
- bar.appendChild(undo_button);
- bar.appendChild(delete_button);
- bar.appendChild(bookmark_button);
-}
-
-function removeSelectionBar(table) {
- var elements = table.children[2].children[0].children;
-
- for (var i = elements.length; i > 0; i--) {
- elements[i - 1].remove();
- }
-}
-
-window.addEventListener('mousedown', function(event) {
- var table,
- rows = [],
- start_row,
- next_row,
- end_row,
- start_mouse_y = 0,
- end_mouse_y = 0;
-
- function mousemove(event) {
- for (var i = 0, l = rows.length; i < l; i++) {
- rows[i].classList.remove('selection');
- }
-
- rows.splice(1, rows.length);
-
- for (var i = 0, l = event.path.length; i < l; i++) {
- var item = event.path[i];
-
- if (
- item.parentNode &&
- (
- item.parentNode.className === 'table__body' ||
- item.parentNode.className === 'table--inner'
- )
- ) {
- end_row = item;
- }
- }
-
- if (end_row && start_row !== end_row) {
- next_row = start_row;
-
- while (next_row !== end_row) {
- if (start_mouse_y < event.clientY) {
- next_row = next_row.nextElementSibling;
- } else {
- next_row = next_row.previousElementSibling;
- }
-
- rows.push(next_row);
- }
- }
-
- for (var i = 0, l = rows.length; i < l; i++) {
- rows[i].classList.add('selection');
- }
- }
-
- function mouseup() {
- for (var i = 0, l = rows.length; i < l; i++) {
- var row = rows[i];
-
- row.classList.remove('selection');
- row.classList.toggle('selected');
-
- if (row.classList.contains('selected')) {
- table.data.selection[row.data.index] = row.data.object;
-
- table.data.selection.length++;
- } else {
- delete table.data.selection[row.data.index];
-
- table.data.selection.length--;
- }
- }
-
- if (table.data.selection.length === 0) {
- removeSelectionBar(table);
- } else {
- createSelectionBar(table);
- }
-
- window.removeEventListener('mousemove', mousemove);
- window.removeEventListener('mouseup', mouseup);
- }
-
- window.addEventListener('mousemove', mousemove);
- window.addEventListener('mouseup', mouseup);
-
- start_mouse_y = event.clientY;
-
- for (var i = 0, l = event.path.length; i < l; i++) {
- var item = event.path[i];
-
- if (item.className === 'table') {
- table = item;
- }
-
- if (
- item.parentNode &&
- (
- item.parentNode.className === 'table__body' ||
- item.parentNode.className === 'table--inner'
- )
- ) {
- start_row = item;
-
- rows.push(start_row);
-
- event.preventDefault();
- }
- }
-});
-
-
-/*--------------------------------------------------------------
-# INITIALIZATION
---------------------------------------------------------------*/
-
-function init() {
- initTableHeaders();
-
- TOP_SITES_length = Object.keys(TOP_SITES).length;
-
- parseBookmarks(function() {
- chrome.storage.local.get(['top', 'tags', 'for_search', 'by_category'], function(items) {
- TAGS = items.tags || {};
- SEARCH = items.for_search || [];
-
- TABLE[0].data.table = items.top[0];
- TABLE[0].data.length = items.top.l0;
- TABLE[1].data.table = items.top[1];
- TABLE[1].data.length = items.top.l1;
- TABLE[2].data.table = items.top[2];
- TABLE[2].data.length = items.top.l2;
- TABLE[4].data.table = items.by_category;
-
- /*for (var key in CATEGORIES) {
- for (var link in CATEGORIES[key]) {
- for (var i = 0, l = TABLE[0].data.table.length; i < l; i++) {
- if (TABLE[0].data.table[i][0].indexOf(link) !== -1) {
- CATEGORIES[key][link] = TABLE[0].data.table[i][1];
- }
- }
- }
- }
-
- for (var key in CATEGORIES) {
- TABLE[4].data.table.push([0, key]);
- }*/
-
- for (var i = 0, l = TABLE[1].data.table.length; i < l; i++) {
- if (BOOKMARKS['https://' + TABLE[1].data.table[i][2]]) {
- TABLE[1].data.table[i][3] = 1;
- }
-
- if (TAGS[TABLE[1].data.table[i][2]]) {
- TABLE[1].data.table[i][4] = TAGS[TABLE[1].data.table[i][2]];
- }
- }
-
- renderTable(0);
- renderTable(1);
- renderTable(2);
- renderTable(4);
-
- console.timeEnd();
- });
- });
-}
-
-window.addEventListener('load', function() {
- if (location.href.indexOf('?loaded') === -1) {
- location.replace(location.href + '?loaded');
-
- return false;
- }
-
- initSearchBar();
-
- chrome.storage.local.get('cached', function(items) {
- if (items.cached === true) {
- init();
- } else {
- for (var key in CATEGORIES) {
- for (var link in CATEGORIES[key]) {
- for (var i = 0, l = TABLE[0].data.table.length; i < l; i++) {
- if (TABLE[0].data.table[i][0].indexOf(link) !== -1) {
- CATEGORIES[key][link] = TABLE[0].data.table[i][1];
- }
- }
- }
- }
-
- for (var key in CATEGORIES) {
- TABLE[4].data.table.push([0, key]);
- }
- renderTable(4);
-
- for (var i = 0; i < 3; i++) {
- TABLE_BODY[i].style.position = 'relative';
- TABLE_BODY[i].innerHTML = '0%
';
- }
- }
- });
-
- chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
- if (request.progress) {
- if (request.progress === 'loaded') {
- TABLE_BODY[4].innerHTML = '';
- TABLE[4].data.table = [];
-
- for (var i = 0; i < 3; i++) {
- TABLE_BODY[i].style.position = '';
- }
-
- init();
- } else {
- for (var i = 0; i < 3; i++) {
- TABLE_BODY[i].innerHTML = '' + request.progress + '%
';
- }
- }
- }
- });
-
- chrome.storage.local.get('recently_closed', function(items) {
- if (items.recently_closed) {
- TABLE[5].data.table = items.recently_closed;
- updateTableWithRecentlyClosed();
- } else {
-
- }
- });
-
- initTable4();
-});
\ No newline at end of file
diff --git a/styles.css b/styles.css
deleted file mode 100644
index fbee28f..0000000
--- a/styles.css
+++ /dev/null
@@ -1,649 +0,0 @@
-/*--------------------------------------------------------------
->>> STYLES
-----------------------------------------------------------------
-# Header
-# Table
- # Head
- # Body
-# Themes
- # Scrollbar
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-# HEADER
---------------------------------------------------------------*/
-
-header
-{
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/*header>input:focus {
- opacity: .2
-}*/
-
-.search-results
-{
- font-size: 16px;
-
- position: absolute;
- z-index: 1;
- top: 56px;
-
- display: none;
-
- width: 100%;
- max-width: 768px;
-
- color: #000;
- border-top: 1px solid #ddd;
- background: #fff;
- border-radius: 4px;
- box-shadow: 0 2px 4px 2px rgba(0,0,0,.2);
-}
-
-.search-results:hover
-{
- display: block;
-}
-
-.search-results > div
-{
- overflow: hidden;
-
- padding: 6px 16px 6px 48px;
-
- cursor: default;
- white-space: nowrap;
- text-overflow: ellipsis;
- hyphens: auto;
-
- background-repeat: no-repeat;
- background-position: 16px 4px;
- background-size: 16px;
-
- overflow-wrap: break-word;
-}
-
-.search-results > div:hover
-{
- background-color: #efefef;
-}
-
-.search-results > .selected
-{
- background-color: #e0e0e0;
-}
-
-
-/*--------------------------------------------------------------
-# TABLE
---------------------------------------------------------------*/
-
-.table__row--window,
-.table:not([data-table-index='3']) .table--inner
-{
- border-top: 1px solid rgba(0,0,0,.05);
- border-bottom: 1px solid rgba(0,0,0,.05);
- background: rgba(0,0,0,.05);
-}
-
-html[theme=dark] .table__row--window,
-html[theme=dark] .table:not([data-table-index='3']) .table--inner
-{
- border-top: 1px solid rgba(255,255,255,.05);
- border-bottom: 1px solid rgba(255,255,255,.05);
- background: rgba(255,255,255,.05);
-}
-
-/*--------------------------------------------------------------
-# HEAD
---------------------------------------------------------------*/
-
-.table__head > div
-{
- box-sizing: border-box;
- margin-left: 8px;
-
- cursor: default;
-}
-
-.table__head > div[data-column-index]
-{
- cursor: pointer;
-}
-
-.table__head > div[data-column-index]:hover
-{
- opacity: .7;
-}
-
-.table__head > div:last-child
-{
- padding-right: 8px;
-}
-
-.table__head > div[data-order-by=asc]::after
-{
- position: relative;
- top: -3px;
-
- display: inline-block;
-
- width: 0;
- height: 0;
- margin: 0 0 0 6px;
-
- content: '';
-
- border: 4px solid transparent;
- border-bottom-color: #fff;
-}
-
-.table__head > div[data-order-by=desc]::after
-{
- position: relative;
- top: 1px;
-
- display: inline-block;
-
- width: 0;
- height: 0;
- margin: 0 0 0 6px;
-
- content: '';
-
- border: 4px solid transparent;
- border-top-color: #fff;
-}
-
-.table:nth-child(2) > .table__head > div:nth-child(4)
-{
- box-sizing: border-box;
- padding-left: 3px;
-}
-
-
-/*--------------------------------------------------------------
-# BODY
---------------------------------------------------------------*/
-
-.table__body
-{
- overflow-y: auto;
-
- flex: 1;
-}
-
-.table__body > div
-{
- display: flex;
- cursor: default;
-
- margin-top: 4px;
-}
-
-.table__body > div:last-child
-{
- margin-bottom: 4px;
-}
-
-.table__body > div:not(.table--inner):not(.selection):hover,
-.table--inner > div::not(.selection)hover
-{
- background-color: rgba(0,0,0,.1);
-}
-
-html[theme=dark] .table__body > div:not(.table--inner):not(.selection):hover,
-html[theme=dark] .table--inner > div:not(.selection):hover
-{
- background-color: rgba(255,255,255,.1);
-}
-
-.table__body > div:not(.table--inner) > div
-{
- line-height: 28px;
-
- overflow: hidden;
-
- box-sizing: border-box;
- height: 28px;
- margin-left: 8px;
-
- white-space: nowrap;
- text-overflow: ellipsis;
- hyphens: auto;
-
- overflow-wrap: break-word;
- flex: 1;
-}
-
-.table__body .table--inner > div {
-line-height: 28px;
-
- overflow: hidden;
-
- box-sizing: border-box;
- min-height: 28px;
-
- white-space: nowrap;
- text-overflow: ellipsis;
- hyphens: auto;
-
- overflow-wrap: break-word;
- flex: 1;
-}
-
-.table__body > div > div:last-child
-{
- padding-right: 8px;
-}
-
-.table[data-table-index='0'] .table__body > div:not(.table--inner) > div:last-child,
-.table[data-table-index='1'] .table__body > div:not(.table--inner) > div:nth-child(2),
-.table[data-table-index='2'] .table__body > div:not(.table--inner) > div:nth-child(3),
-.table[data-table-index='3'] .table--inner > div > div:last-child,
-.table[data-table-index='4'] .table__body > .table--inner > div > div:last-child,
-.table[data-table-index='5'] .table__body > div > div:nth-child(2)
-{
- padding-left: 36px;
-
- background-repeat: no-repeat;
- background-position: 8px 4px;
- background-size: 16px;
-}
-
-.table__body button
-{
- font-size: 24px;
- line-height: 0;
-
- width: 24px;
- height: 24px;
- padding: 0;
-
- cursor: pointer;
-
- color: #000;
- border: none;
- outline: none;
- background: transparent;
-
- appearance: none;
-}
-
-.table[data-table-index='3'] button
-{
- opacity: .25;
- background-image: url(icons-black.png);
- background-repeat: no-repeat;
- background-position: -73px -121px;
-}
-
-html[theme=dark] .table[data-table-index='3'] button {
- background-image: url(icons-white.png);
-}
-
-html[theme=dark] .table__body button
-{
- color: #fff;
-}
-
-html .table__body .pinned button
-{
- opacity: 1;
-}
-
-.table a
-{
- text-decoration: none;
-}
-
-
-
-
-.table--inner
-{
- display: flex;
- flex-direction: column;
-}
-
-.table--inner > div
-{
- display: flex;
-}
-
-.table--inner > div > div
-{
- flex: 1;
-}
-
-
-
-.table[data-table-index='1'] > .table__body > div > div:nth-child(4)
-{
- font-size: 18px;
- line-height: 28px;
-
- cursor: pointer;
-
- color: #ffd54f;
- text-align: center;
-}
-
-.table[data-table-index='1'] > .table__body > div > div:nth-child(4):hover
-{
- opacity: .7;
-}
-
-.table[data-table-index='1'] > .table__body > div > div:nth-child(5) input
-{
- font: inherit;
-
- box-sizing: border-box;
- width: 100%;
- min-width: 0;
- max-width: none;
- height: 100%;
- margin: 0;
- padding: 0 0 0 4px;
-
- color: #222;
- border: none;
- border-radius: 2px;
- outline: none;
- background: #fafafa;
-}
-
-
-
-.table__body > .selected,
-.table--inner > .selected {
- background: #FFD740;
- color: #222;
-}
-
-.table__body > .selection,
-.table--inner > .selection {
- background: #FFAB00;
- color: #222;
-}
-
-
-/*--------------------------------------------------------------
-# FOOTER
---------------------------------------------------------------*/
-
-.table__footer
-{
- position: relative;
-
- display: flex;
- flex-direction: column;
-
- background: #ccc;
- box-shadow: 0 -1px 3px 2px rgb(0, 0, 0, .2);
-}
-
-.table__selection
-{
- display: flex;
- background: #FFD740;
- max-height: 32px;
- color: #222;
-}
-
-.table__pagination
-{
- display: flex;
- height: 32px;
-}
-
-.table__pagination > button
-{
- font: inherit;
-
- min-width: 32px;
- max-width: 32px;
- min-height: 32px;
- max-height: 32px;
- padding: 0;
-
- cursor: pointer;
-
- opacity: .5;
- color: #000;
- border: none;
- outline: none;
- background: transparent;
-
- appearance: none;
-}
-
-.table__pagination > button:hover
-{
- opacity: 1;
-}
-
-.table__pagination > button.selected
-{
- font-weight: 700;
-
- opacity: 1;
-}
-
-.table__pagination > span
-{
- display: flex;
-
- width: 32px;
- height: 32px;
-
- align-items: center;
- justify-content: center;
-}
-
-html[theme=dark] .table__pagination > button
-{
- color: #fff;
-}
-
-
-/*--------------------------------------------------------------
-# THEMES
---------------------------------------------------------------*/
-
-html[theme=dark] .table__body a
-{
- color: #0075ff;
-}
-
-
-/*--------------------------------------------------------------
-# SCROLLBAR
---------------------------------------------------------------*/
-
-html[theme=dark] ::-webkit-scrollbar
-{
- background-color: #333;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button
-{
- display: block;
-
- background-repeat: no-repeat;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:hover
-{
- background-color: #555;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:vertical
-{
- background-size: 7px 4px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:horizontal
-{
- background-size: 4px 7px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:vertical:decrement
-{
- width: 16px;
- height: 15px;
-
- background-image: url('data:image/svg+xml;utf8,');
- background-position: 4px 6px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:vertical:increment
-{
- width: 16px;
- height: 15px;
-
- background-image: url('data:image/svg+xml;utf8,');
- background-position: 4px 5px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:horizontal:decrement
-{
- width: 15px;
- height: 16px;
-
- background-image: url('data:image/svg+xml;utf8,');
- background-position: 5px 4px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-button:single-button:horizontal:increment
-{
- width: 15px;
- height: 16px;
-
- background-image: url('data:image/svg+xml;utf8,');
- background-position: 6px 4px;
-}
-
-html[theme=dark] ::-webkit-scrollbar-thumb
-{
- border-right: 2px solid #333;
- border-left: 2px solid #333;
- background-color: #555;
-}
-
-html[theme=dark] ::-webkit-scrollbar-thumb:hover
-{
- background-color: #666;
-}
-
-html[theme=dark] ::-webkit-scrollbar-thumb:active
-{
- background-color: #666;
-}
-
-html[theme=dark] ::-webkit-scrollbar-corner
-{
- background-color: #444;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.table[data-table-index='4'] > .table__body > div:not(.table--inner) > div:nth-child(3){
- padding-left: 36px;
- position: relative;
-}
-
-.table[data-table-index='4'] > .table__body > div:not(.table--inner) > div:nth-child(3) > div {
- background-image: url(icons-black.png);
- background-repeat: no-repeat;
- content: '';
- width: 24px;
- height: 24px;
- position: absolute;
- left: 0;
- top: 0;
- opacity: .3;
-}
-
-html[theme=dark] .table[data-table-index='4'] > .table__body > div:not(.table--inner) > div:nth-child(3) > div {
- background-image: url(icons-white.png);
-}
-
-
-
-
-
-
-
-
-
-
-.table__row--window {
- height: 32px;
- display: flex;
- align-items: center;
- padding: 0 8px;
- box-sizing: border-box;
- cursor: pointer;
-}
-
-.table__row--window::before {
- content: '▲';
- margin: 0 8px 0 0;
- font-size: 10px;
- opacity: .5;
-}
-
-.table__row--window.collapsed::before {
- content: '▼';
-}
-
-.table__row--window.collapsed + .table--inner {
- display: none;
-}
-
-
-
-.caching-progress {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- font-weight: 700;
- font-size: 18px;
- opacity: .5;
-}
-
-
-
-
-.column {
- display: flex;
- overflow: hidden;
- flex-direction: column;
- flex: 1;
-}
-
-.column > .table:not(:last-child) {
- margin-bottom: 0;
- margin-right: 0;
-}
\ No newline at end of file
diff --git a/tests/grid.html b/tests/grid.html
deleted file mode 100644
index 8c04783..0000000
--- a/tests/grid.html
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
- Grid
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/tests/grid.js b/tests/grid.js
deleted file mode 100644
index 5e5fa92..0000000
--- a/tests/grid.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var grid = createGrid(),
- row1 = grid.addRow(),
- row2 = grid.addRow(),
- row3 = grid.addRow();
-
-row1.addCell().textContent = '#001';
-row1.addCell().textContent = '#002';
-row1.addCell().textContent = '#003';
-
-row2.addCell().textContent = '#004';
-row2.addCell().textContent = '#005';
-
-row3.addCell().textContent = '#006';
-
-document.body.appendChild(grid);
\ No newline at end of file
diff --git a/tests/table.html b/tests/table.html
deleted file mode 100644
index 48b7db0..0000000
--- a/tests/table.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
- Table
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/tests/table.js b/tests/table.js
deleted file mode 100644
index 6c97b94..0000000
--- a/tests/table.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var data = [];
-
-for (var i = 0; i < 1024; i++) {
- data.push([
- i,
- 'column #' + i,
- 'user #' + i,
- i * 1000
- ]);
-}
-
-var table = createTable([
- {label: 'column #1'},
- {label: 'column #2'},
- {label: 'column #3'},
- {label: 'column #4'}
- ], data);
-
-document.body.appendChild(table);
\ No newline at end of file