├── README.md ├── _locales ├── en │ └── messages.json ├── nl │ └── messages.json └── ru │ └── messages.json ├── assets ├── fonts │ ├── OpenSans-Bold.ttf │ ├── OpenSans-BoldItalic.ttf │ ├── OpenSans-Italic.ttf │ ├── OpenSans-Regular.ttf │ ├── OpenSans-SemiBold.ttf │ └── OpenSans-SemiBoldItalic.ttf └── icons │ ├── 128.png │ ├── 16.png │ ├── 32.png │ └── 48.png ├── background.js ├── build.py ├── config.json ├── index.html ├── manifest.json ├── popup.css ├── popup.js ├── satus.css ├── satus.js └── src ├── css ├── basic.css ├── header.css ├── main.css ├── media.css ├── tables.css └── themes.css └── js ├── header.js ├── index.js ├── main.js └── tables.js /README.md: -------------------------------------------------------------------------------- 1 | # https://github.com/code-for-charity/History-Manager-with-indexedDB 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "compactMode": { 3 | "message": "Compact mode" 4 | }, 5 | "domain": { 6 | "message": "Domain" 7 | }, 8 | "language": { 9 | "message": "Language" 10 | }, 11 | "tags": { 12 | "message": "Tags" 13 | }, 14 | "title": { 15 | "message": "Title" 16 | }, 17 | "url": { 18 | "message": "URL" 19 | }, 20 | "visits": { 21 | "message": "Visits" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /_locales/nl/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "compactMode": { 3 | "message": "Compacte modus" 4 | }, 5 | "domain": { 6 | "message": "Domein" 7 | }, 8 | "language": { 9 | "message": "Taal" 10 | }, 11 | "tags": { 12 | "message": "Labels" 13 | }, 14 | "title": { 15 | "message": "Naam" 16 | }, 17 | "url": { 18 | "message": "URL" 19 | }, 20 | "visits": { 21 | "message": "Aantal keer bezocht" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /_locales/ru/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "compactMode": { 3 | "message": "Компактный режим" 4 | }, 5 | "domain": { 6 | "message": "Домен" 7 | }, 8 | "language": { 9 | "message": "Язык" 10 | }, 11 | "tags": { 12 | "message": "Теги" 13 | }, 14 | "title": { 15 | "message": "Заголовок" 16 | }, 17 | "url": { 18 | "message": "URL" 19 | }, 20 | "visits": { 21 | "message": "Посещения" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /assets/fonts/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/OpenSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-SemiBold.ttf -------------------------------------------------------------------------------- /assets/fonts/OpenSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/fonts/OpenSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /assets/icons/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/icons/128.png -------------------------------------------------------------------------------- /assets/icons/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/icons/16.png -------------------------------------------------------------------------------- /assets/icons/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/icons/32.png -------------------------------------------------------------------------------- /assets/icons/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-charity/History-Manager-with-no-DB/46cd69a748694eee83982499c07a6f8c63fbb527/assets/icons/48.png -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> BACKGROUND 3 | ----------------------------------------------------------------- 4 | # Parse history 5 | # Extension installed 6 | # History 7 | # Pinned tabs 8 | # History updated 9 | # Tabs updated 10 | # Message listener 11 | ---------------------------------------------------------------*/ 12 | 13 | /*--------------------------------------------------------------- 14 | # PARSE HISTORY 15 | ---------------------------------------------------------------*/ 16 | 17 | function parseHistory(item, result) { 18 | var url = item.url, 19 | domain = url.split('/')[2], 20 | path = url.match(/\w(\/.*)/)[1], 21 | q = url.match(/[?&]q=[^&]+/), 22 | title = item.title, 23 | visit_count = item.visitCount; 24 | 25 | if (result.domains[domain]) { 26 | result.domains[domain].visitCount += visit_count; 27 | } else { 28 | result.domains[domain] = { 29 | items: {}, 30 | visitCount: visit_count 31 | }; 32 | } 33 | 34 | result.domains[domain].items[path] = { 35 | title: title, 36 | visitCount: visit_count 37 | }; 38 | 39 | result.pages[url] = { 40 | title: title, 41 | visitCount: visit_count, 42 | star: 0, 43 | tags: '' 44 | }; 45 | 46 | result.params[url] = { 47 | title: title, 48 | visitCount: visit_count, 49 | star: 0, 50 | tags: '' 51 | }; 52 | } 53 | 54 | 55 | /*--------------------------------------------------------------- 56 | # EXTENSION INSTALLED 57 | ---------------------------------------------------------------*/ 58 | 59 | chrome.runtime.onInstalled.addListener(function() { 60 | 61 | /*----------------------------------------------------------- 62 | # HISTORY 63 | -----------------------------------------------------------*/ 64 | 65 | chrome.history.search({ 66 | text: '', 67 | startTime: 0, 68 | maxResults: 999999999 69 | }, function(items) { 70 | var storage = { 71 | _all: { 72 | domains: {}, 73 | pages: {}, 74 | params: {} 75 | }, 76 | _top: { 77 | domains: {}, 78 | pages: {}, 79 | params: {}, 80 | length: [0, 0, 0] 81 | }, 82 | pinned: {}, 83 | bookmarks: {} 84 | }; 85 | 86 | for (var i = 0, l = items.length; i < l; i++) { 87 | var item = items[i], 88 | title = item.title, 89 | visit_count = item.visitCount, 90 | url = item.url; 91 | 92 | var domain = url.split('/'); 93 | 94 | if (domain) { 95 | domain = domain[2]; 96 | 97 | var path = url.match(/\w(\/.*)/); 98 | 99 | if (path) { 100 | path = path[1]; 101 | 102 | var q = url.match(/[?&]q=[^&]+/) || []; 103 | 104 | // DOMAINS 105 | if (!storage[domain]) { 106 | storage[domain] = {}; 107 | } 108 | 109 | storage[domain][path] = { 110 | title: title, 111 | visitCount: visit_count, 112 | params: q[0] 113 | }; 114 | 115 | if (storage._all.domains[domain]) { 116 | storage._all.domains[domain] += visit_count; 117 | } else { 118 | storage._all.domains[domain] = visit_count; 119 | } 120 | 121 | // PAGES 122 | storage._all.pages[url] = { 123 | title: title, 124 | visitCount: visit_count, 125 | star: 0, 126 | tags: '' 127 | }; 128 | 129 | // PARAMS 130 | if (q && q[0] && !storage._all.params[domain]) { 131 | storage._all.params[domain] = visit_count; 132 | } 133 | 134 | if (storage._all.params[domain]) { 135 | storage._all.params[domain] += visit_count; 136 | } 137 | } 138 | } 139 | } 140 | 141 | 142 | // TOP 143 | var domains = Object.keys(storage._all.domains).map((key) => [key, storage._all.domains[key]]).sort(function(a, b) { 144 | return b[1] - a[1]; 145 | }), 146 | pages = Object.keys(storage._all.pages).map((key) => [key, storage._all.pages[key]]).sort(function(a, b) { 147 | return b[1].visitCount - a[1].visitCount; 148 | }), 149 | params = Object.keys(storage._all.params).map((key) => [key, storage._all.params[key]]).sort(function(a, b) { 150 | return b[1] - a[1]; 151 | }); 152 | 153 | for (var i = 0; i < Math.min(100, domains.length); i++) { 154 | storage._top.domains[domains[i][0]] = domains[i][1]; 155 | } 156 | 157 | for (var i = 0; i < Math.min(100, pages.length); i++) { 158 | storage._top.pages[pages[i][0]] = pages[i][1]; 159 | } 160 | 161 | for (var i = 0; i < Math.min(100, params.length); i++) { 162 | storage._top.params[params[i][0]] = params[i][1]; 163 | } 164 | 165 | storage._top.length[0] = Object.keys(storage._all.domains).length; 166 | storage._top.length[1] = Object.keys(storage._all.pages).length; 167 | storage._top.length[2] = Object.keys(storage._all.params).length; 168 | 169 | chrome.storage.local.set(storage); 170 | }); 171 | }); 172 | 173 | 174 | /*--------------------------------------------------------------- 175 | # HISTORY UPDATED 176 | ---------------------------------------------------------------*/ 177 | 178 | chrome.history.onVisited.addListener(function(item) { 179 | chrome.storage.local.get('_new', function(items) { 180 | var storage = items._new || { 181 | domains: {}, 182 | pages: {}, 183 | params: {} 184 | }, 185 | title = item.title, 186 | url = item.url, 187 | domain = url.split('/')[2], 188 | path = url.match(/\w(\/.*)/)[1], 189 | q = url.match(/[?&]q=[^&]+/) || []; 190 | 191 | // DOMAINS 192 | if (storage.domains[domain]) { 193 | storage.domains[domain] += 1; 194 | } else { 195 | storage.domains[domain] = 1; 196 | } 197 | 198 | // PAGES 199 | if (storage.pages[url]) { 200 | storage.pages[url].visitCount += 1; 201 | } else { 202 | storage.pages[url] = { 203 | title: title, 204 | visitCount: 1, 205 | star: 0, 206 | tags: '' 207 | }; 208 | } 209 | 210 | // PARAMS 211 | if (url.indexOf(/[?&]+q=/)) { 212 | if (storage.params[domain]) { 213 | storage.params[domain] += 1; 214 | } else { 215 | storage.params[domain] = 1; 216 | } 217 | } 218 | 219 | chrome.storage.local.set({ 220 | _new: storage 221 | }); 222 | }); 223 | }); 224 | 225 | 226 | /*--------------------------------------------------------------- 227 | # MESSAGE LISTENER 228 | ---------------------------------------------------------------*/ 229 | 230 | chrome.runtime.onMessage.addListener(async function(message, sender) { 231 | if (typeof message !== 'object') { 232 | return false; 233 | } 234 | 235 | if (message.action === 'history-manager--fetch') { 236 | var response = await (await fetch(message.url, { 237 | cache: 'force-cache', 238 | credentials: 'omit' 239 | })).text(); 240 | 241 | chrome.tabs.sendMessage(sender.tab.id, { 242 | action: 'history-manager--fetch-response', 243 | response: response, 244 | callback: message.callback 245 | }); 246 | } 247 | }); -------------------------------------------------------------------------------- /build.py: -------------------------------------------------------------------------------- 1 | import json 2 | import pathlib 3 | import re 4 | 5 | with open("config.json") as json_file: 6 | data = json.load(json_file) 7 | 8 | for target_key in data: 9 | if re.search(r"\/", target_key): 10 | pathlib.Path(target_key).mkdir(parents=True, exist_ok=True) 11 | 12 | file = open(target_key.search(r"[ \w-]+\.[\w-]*$").group(0), "w", encoding='utf-8') 13 | else: 14 | file = open(target_key, "w", encoding='utf-8') 15 | 16 | for source_key in data[target_key]: 17 | source_file = open(source_key, "r", encoding='utf-8') 18 | 19 | file.write("\r\n" + "".join(source_file.readlines())) 20 | 21 | source_file.close() 22 | 23 | file.close() -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "popup.js": [ 3 | "src/js/header.js", 4 | "src/js/main.js", 5 | "src/js/tables.js", 6 | "src/js/index.js" 7 | ], 8 | "popup.css": [ 9 | "src/css/themes.css", 10 | "src/css/basic.css", 11 | "src/css/header.css", 12 | "src/css/main.css", 13 | "src/css/tables.css", 14 | "src/css/media.css" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | New Tab 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "History Manager", 4 | "version": "1.0", 5 | "version_name": "1.0-alpha.7", 6 | 7 | "default_locale": "en", 8 | 9 | "icons": { 10 | "16": "assets/icons/16.png", 11 | "32": "assets/icons/32.png", 12 | "48": "assets/icons/48.png", 13 | "128": "assets/icons/128.png" 14 | }, 15 | 16 | "background": { 17 | "persistent": false, 18 | "scripts": [ 19 | "background.js" 20 | ] 21 | }, 22 | 23 | "chrome_url_overrides": { 24 | "newtab": "index.html" 25 | }, 26 | 27 | "optional_permissions": [ 28 | "downloads" 29 | ], 30 | 31 | "permissions": [ 32 | "bookmarks", 33 | "history", 34 | "storage", 35 | "unlimitedStorage", 36 | "chrome://favicon/", 37 | "tabs" 38 | ], 39 | "content_security_policy": "script-src 'self'; object-src 'self'; img-src chrome://favicon;" 40 | } -------------------------------------------------------------------------------- /popup.css: -------------------------------------------------------------------------------- 1 | 2 | /*-------------------------------------------------------------- 3 | >>> THEMES 4 | ---------------------------------------------------------------- 5 | 1.0 Default 6 | 2.0 Dark 7 | --------------------------------------------------------------*/ 8 | 9 | /*--------------------------------------------------------------- 10 | 1.0 DEFAULT 11 | ---------------------------------------------------------------*/ 12 | 13 | html { 14 | --satus-theme-primary: #f6b465; 15 | 16 | --satus-theme-header: #2684ff; 17 | --satus-theme-header-text: #fff; 18 | 19 | --satus-theme-main: #f7fafc; 20 | } 21 | 22 | 23 | /*--------------------------------------------------------------- 24 | 2.0 DARK 25 | ---------------------------------------------------------------*/ 26 | 27 | html[theme="dark"] 28 | { 29 | --satus-theme-primary: #f6b465; 30 | 31 | --satus-theme-dialog: #2c2b2c; 32 | --satus-theme-dialog-text: #b5b5b5; 33 | 34 | --satus-theme-header: #343334; 35 | --satus-theme-header-text: #b5b5b5; 36 | 37 | --satus-theme-main: #2c2b2c; 38 | --satus-theme-main-text: #b5b5b5; 39 | 40 | --satus-theme-section: #343334; 41 | 42 | --satus-theme-button: transparent; 43 | 44 | --satus-theme-scrollbar: rgba(255, 255, 255, .2); 45 | --satus-theme-scrollbar-focus: rgba(255, 255, 255, .4); 46 | 47 | --satus-theme-tooltip: rgba(10, 10, 10, .7); 48 | 49 | --satus-theme-ripple: rgba(255, 255, 255, .04); 50 | } 51 | 52 | /*--------------------------------------------------------------- 53 | >>> INDEX: 54 | ----------------------------------------------------------------- 55 | # Font 56 | # Body 57 | ---------------------------------------------------------------*/ 58 | 59 | /*--------------------------------------------------------------- 60 | # FONT 61 | ---------------------------------------------------------------*/ 62 | 63 | @font-face 64 | { 65 | font-family: 'Open Sans'; 66 | font-weight: 400; 67 | 68 | src: url('assets/fonts/OpenSans-Regular.ttf'); 69 | } 70 | 71 | @font-face 72 | { 73 | font-family: 'Open Sans'; 74 | font-weight: 700; 75 | 76 | src: url('assets/fonts/OpenSans-SemiBold.ttf'); 77 | } 78 | 79 | body, 80 | input, 81 | textarea, 82 | button 83 | { 84 | font-family: 'Open Sans', sans-serif; 85 | } 86 | 87 | 88 | /*--------------------------------------------------------------- 89 | # BASIC 90 | ---------------------------------------------------------------*/ 91 | 92 | body 93 | { 94 | font-size: .875rem; 95 | 96 | display: flex; 97 | overflow: hidden; 98 | flex-direction: column; 99 | 100 | width: 100vw; 101 | height: 100vh; 102 | margin: 0; 103 | 104 | background-color: var(--satus-theme-main); 105 | } 106 | 107 | /*--------------------------------------------------------------- 108 | >>> HEADER 109 | ----------------------------------------------------------------- 110 | 1.0 Buttons 111 | 1.1 Back button 112 | 2.0 Title 113 | 3.0 Right section 114 | 4.0 Search 115 | 5.0 Vertical menu 116 | ---------------------------------------------------------------*/ 117 | 118 | .satus-header 119 | { 120 | z-index: 2; 121 | 122 | min-height: 64px; 123 | 124 | border-bottom: 2px solid #006eff; 125 | box-shadow: 0 2px 2px rgb(0, 0, 0, .3); 126 | } 127 | 128 | body[data-compact-mode='true'] .satus-header 129 | { 130 | min-height: 38px; 131 | padding-left: 0; 132 | } 133 | 134 | .satus-section--align-start 135 | { 136 | position: relative; 137 | } 138 | 139 | /*--------------------------------------------------------------- 140 | 1.0 BUTTONS 141 | ---------------------------------------------------------------*/ 142 | 143 | .satus-header .satus-button 144 | { 145 | width: 36px; 146 | height: 36px; 147 | padding: 6px; 148 | } 149 | 150 | .satus-header .satus-button::before 151 | { 152 | border-radius: 50%; 153 | } 154 | 155 | 156 | /*--------------------------------------------------------------- 157 | 2.0 SEARCH 158 | ---------------------------------------------------------------*/ 159 | 160 | .satus-header__search-engine__back 161 | { 162 | position: absolute; 163 | 164 | width: 16px !important; 165 | height: 16px !important; 166 | margin: 10px; 167 | 168 | background: #ffd740; 169 | } 170 | 171 | .satus-header__search-engine 172 | { 173 | position: absolute; 174 | 175 | background-repeat: no-repeat; 176 | background-position: center; 177 | background-size: 16px; 178 | } 179 | 180 | .satus-header .satus-button.satus-header__search-button 181 | { 182 | position: absolute; 183 | right: 8px; 184 | 185 | padding: 9px; 186 | 187 | cursor: pointer; 188 | 189 | color: #888; 190 | } 191 | 192 | .satus-header__text-field 193 | { 194 | width: 100%; 195 | max-width: 1024px; 196 | height: 38px; 197 | padding: 10px 8px 10px 36px; 198 | 199 | color: #888; 200 | border-radius: 4px; 201 | background-color: #fff; 202 | } 203 | 204 | body[data-compact-mode='true'] .satus-header__text-field 205 | { 206 | border-top: none; 207 | border-left: none; 208 | border-radius: 0; 209 | } 210 | 211 | .satus-header__text-field--show-results 212 | { 213 | border-bottom-right-radius: 0; 214 | border-bottom-left-radius: 0; 215 | } 216 | 217 | .satus-search-results 218 | { 219 | position: absolute; 220 | z-index: 9999999999; 221 | top: 50px; 222 | left: 0; 223 | 224 | display: none; 225 | 226 | width: 100%; 227 | max-width: 1024px; 228 | min-height: 32px; 229 | 230 | background: #fff; 231 | box-shadow: 0 8px 8px 4px rgb(0,0,0,.25); 232 | } 233 | 234 | .satus-search-results img 235 | { 236 | margin: 3px 0 0; 237 | } 238 | 239 | .satus-header__text-field--show-results + .satus-search-results 240 | { 241 | display: block; 242 | } 243 | 244 | .satus-dialog--search-engine .satus-dialog__scrim 245 | { 246 | opacity: 0; 247 | 248 | backdrop-filter: none; 249 | } 250 | 251 | .satus-dialog--search-engine .satus-dialog__surface 252 | { 253 | position: absolute; 254 | top: 40px; 255 | left: 8px; 256 | 257 | width: auto; 258 | min-width: 0; 259 | 260 | transform: none !important; 261 | animation: none; 262 | 263 | opacity: 1; 264 | box-shadow: 0 8px 8px 4px rgb(0,0,0,.25); 265 | } 266 | 267 | .satus-dialog--search-engine .satus-dialog__surface > button:hover 268 | { 269 | background: rgba(0,0,0,.05); 270 | } 271 | 272 | 273 | 274 | .satus-search-results a 275 | { 276 | display: inline-flex; 277 | 278 | box-sizing: border-box; 279 | width: 100%; 280 | height: 32px; 281 | padding: 0 16px 0 38px; 282 | 283 | text-decoration: none; 284 | 285 | color: #1b1b1b; 286 | 287 | justify-content: flex-start; 288 | align-items: center; 289 | } 290 | 291 | .satus-search-results a.focused 292 | { 293 | background: rgba(0,0,0,.1); 294 | } 295 | 296 | .satus-search-results a span 297 | { 298 | margin: 0 0 0 8px; 299 | 300 | opacity: .75; 301 | } 302 | 303 | 304 | /*--------------------------------------------------------------- 305 | 3.0 RIGHT SECTION 306 | ---------------------------------------------------------------*/ 307 | 308 | .satus-section--align-end 309 | { 310 | justify-content: flex-end; 311 | } 312 | 313 | .satus-section--align-end .satus-button + .satus-button 314 | { 315 | margin-left: 8px; 316 | } 317 | 318 | 319 | /*--------------------------------------------------------------- 320 | 5.0 VERTICAL MENU 321 | ---------------------------------------------------------------*/ 322 | 323 | .satus-dialog--vertical-menu .satus-dialog__scrim 324 | { 325 | background: rgba(0,0,0,.7); 326 | 327 | backdrop-filter: blur(4px); 328 | } 329 | 330 | .satus-dialog--vertical-menu .satus-dialog__surface 331 | { 332 | position: absolute; 333 | top: 8px; 334 | right: 8px; 335 | left: auto; 336 | 337 | min-width: 180px; 338 | max-width: 180px; 339 | 340 | transform-origin: right top; 341 | } 342 | 343 | .satus-dialog--vertical-menu .satus-button, 344 | .satus-dialog--vertical-menu .satus-button 345 | { 346 | width: 100%; 347 | height: 36px; 348 | padding: 0 16px; 349 | 350 | text-align: left; 351 | } 352 | 353 | .satus-dialog--vertical-menu .satus-button svg, 354 | .satus-dialog--vertical-menu .satus-button svg 355 | { 356 | width: 20px; 357 | height: 18px; 358 | margin: 0 14px 0 0; 359 | 360 | opacity: .75; 361 | 362 | fill: none; 363 | stroke: var(--satus-theme-primary); 364 | } 365 | 366 | .satus-dialog--vertical-menu .satus-button--github svg 367 | { 368 | width: 18px; 369 | height: 18px; 370 | } 371 | 372 | /*-------------------------------------------------------------- 373 | >>> MAIN 374 | ---------------------------------------------------------------- 375 | # Checkbox 376 | # Loader 377 | --------------------------------------------------------------*/ 378 | 379 | .satus-main 380 | { 381 | margin: 8px 0; 382 | } 383 | 384 | .satus-main__container 385 | { 386 | display: flex; 387 | 388 | justify-content: space-between; 389 | } 390 | 391 | 392 | /*-------------------------------------------------------------- 393 | # CHECKBOX 394 | --------------------------------------------------------------*/ 395 | 396 | .satus-switch--checkbox 397 | { 398 | padding: 0; 399 | 400 | justify-content: center; 401 | } 402 | 403 | .satus-switch--checkbox:hover 404 | { 405 | background-color: unset; 406 | } 407 | 408 | .satus-switch--checkbox .satus-switch__label 409 | { 410 | margin: 0 0 0 16px; 411 | 412 | flex: 1; 413 | } 414 | 415 | .satus-switch--checkbox .satus-switch__track 416 | { 417 | width: 22px; 418 | min-width: 22px; 419 | max-width: 22px; 420 | height: 22px; 421 | min-height: 22px; 422 | max-height: 22px; 423 | 424 | border-radius: 50%; 425 | background: transparent; 426 | box-shadow: inset 0 0 0 1px #bdbdbd; 427 | } 428 | 429 | .satus-switch--checkbox .satus-switch__track::before 430 | { 431 | position: absolute; 432 | top: 7px; 433 | left: 5px; 434 | 435 | visibility: hidden; 436 | 437 | width: 10px; 438 | height: 5px; 439 | 440 | transition: unset; 441 | transform: rotate(-45deg); 442 | 443 | opacity: 0; 444 | border: 2px solid #fff; 445 | border-top: none; 446 | border-right: none; 447 | border-radius: unset; 448 | background-color: transparent; 449 | } 450 | 451 | .satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track::before 452 | { 453 | top: 7px; 454 | left: 5px; 455 | 456 | visibility: visible; 457 | 458 | transform: rotate(-45deg); 459 | 460 | opacity: 1; 461 | background-color: transparent; 462 | } 463 | 464 | .satus-switch--checkbox .satus-switch__track::after 465 | { 466 | content: none; 467 | } 468 | 469 | .satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track 470 | { 471 | background-color: #f6b465; 472 | box-shadow: none; 473 | } 474 | 475 | 476 | /*-------------------------------------------------------------- 477 | # LOADER 478 | --------------------------------------------------------------*/ 479 | 480 | body.loading::after 481 | { 482 | font-size: 64px; 483 | 484 | position: fixed; 485 | z-index: 9999; 486 | top: 0; 487 | left: 0; 488 | 489 | display: flex; 490 | 491 | width: 100vw; 492 | height: 100vh; 493 | 494 | content: '...'; 495 | 496 | color: rgba(255,255,255,.8); 497 | background: rgba(0,0,0,.8); 498 | 499 | justify-content: center; 500 | align-items: center; 501 | } 502 | 503 | /*--------------------------------------------------------------- 504 | >>> TABLES 505 | ----------------------------------------------------------------- 506 | # Global 507 | # By domain 508 | # By URL 509 | # By params 510 | # Pinned tabs 511 | # Compact mode 512 | 513 | # Inner elements 514 | # Toolbar 515 | ---------------------------------------------------------------*/ 516 | 517 | /*--------------------------------------------------------------- 518 | # GLOBAL 519 | ---------------------------------------------------------------*/ 520 | 521 | .satus-section--tables 522 | { 523 | width: 100vw; 524 | 525 | background-color: transparent !important; 526 | 527 | align-items: flex-start; 528 | } 529 | 530 | .satus-table 531 | { 532 | height: calc(100vh - 80px); 533 | 534 | border: 1px solid #e1e4eb; 535 | border-radius: 4px; 536 | } 537 | 538 | .satus-dropdown-list .satus-table 539 | { 540 | height: auto; 541 | max-height: calc(50vh - 80px); 542 | } 543 | 544 | .satus-table__head 545 | { 546 | height: 39px; 547 | 548 | color: #6e7d91; 549 | border-bottom: 1px solid #d5d5dd; 550 | background: #f1f1f4; 551 | box-shadow: 0 1px 2px rgb(0 0 0 / 10%); 552 | } 553 | 554 | .satus-table__body 555 | { 556 | background: #fff; 557 | } 558 | 559 | .satus-table__row:nth-child(2n) 560 | { 561 | background: transparent; 562 | } 563 | 564 | 565 | /*--------------------------------------------------------------- 566 | # BY DOMAIN 567 | ---------------------------------------------------------------*/ 568 | 569 | #by-domain 570 | { 571 | margin: 0 8px 8px; 572 | 573 | flex: 1; 574 | } 575 | 576 | #by-domain .satus-table__head > div:nth-child(1), 577 | #by-domain .satus-table__cell:nth-child(1) 578 | { 579 | width: 68px; 580 | } 581 | 582 | #by-domain .satus-table__head > div:nth-child(2), 583 | #by-domain .satus-table__cell:nth-child(2) 584 | { 585 | width: 28px; 586 | } 587 | 588 | #by-domain .satus-table__cell:nth-child(2) 589 | { 590 | padding: 0 8px 0 0; 591 | 592 | text-overflow: unset; 593 | } 594 | 595 | #by-domain .satus-table__head > div:nth-child(3), 596 | #by-domain .satus-table__cell:nth-child(3) 597 | { 598 | width: calc(100% - 96px); 599 | } 600 | 601 | 602 | /*--------------------------------------------------------------- 603 | # BY URL 604 | ---------------------------------------------------------------*/ 605 | 606 | #by-url 607 | { 608 | margin: 0 8px 8px 0; 609 | 610 | flex: 2; 611 | } 612 | 613 | #by-url .satus-table__row:hover 614 | { 615 | cursor: default; 616 | 617 | background-color: rgba(0,0,0,.075); 618 | } 619 | 620 | #by-url .satus-table__head > div:nth-child(1), 621 | #by-url .satus-table__cell:nth-child(1) 622 | { 623 | width: 68px; 624 | } 625 | 626 | #by-url .satus-table__head > div:nth-child(2), 627 | #by-url .satus-table__cell:nth-child(2) 628 | { 629 | width: calc(50% - 82px); 630 | } 631 | 632 | #by-url .satus-table__head > div:nth-child(3), 633 | #by-url .satus-table__cell:nth-child(3) 634 | { 635 | width: calc(50% - 82px); 636 | } 637 | 638 | #by-url .satus-table__cell:nth-child(3) 639 | { 640 | color: #1e6fdb; 641 | } 642 | 643 | #by-url .satus-table__head > div:nth-child(4), 644 | #by-url .satus-table__cell:nth-child(4) 645 | { 646 | width: 28px; 647 | padding: 0 8px 0 0; 648 | 649 | text-overflow: unset; 650 | } 651 | 652 | #by-url .satus-table__head > div:nth-child(5), 653 | #by-url .satus-table__cell:nth-child(5) 654 | { 655 | width: 68px; 656 | padding-top: 0; 657 | padding-bottom: 0; 658 | } 659 | 660 | .satus-button--star[data-value='false'] svg 661 | { 662 | fill: transparent; 663 | } 664 | 665 | .satus-button--star[data-value='true'] svg 666 | { 667 | fill: var(--satus-theme-primary); 668 | stroke: var(--satus-theme-primary); 669 | } 670 | 671 | 672 | /*--------------------------------------------------------------- 673 | # BY PARAMS 674 | ---------------------------------------------------------------*/ 675 | 676 | #by-params 677 | { 678 | margin: 0 8px 8px 0; 679 | 680 | flex: 1; 681 | } 682 | 683 | #by-params .satus-table__head > div:nth-child(1), 684 | #by-params .satus-table__cell:nth-child(1) 685 | { 686 | width: 68px; 687 | } 688 | 689 | #by-params .satus-table__head > div:nth-child(2), 690 | #by-params .satus-table__cell:nth-child(2) 691 | { 692 | width: 28px; 693 | } 694 | 695 | #by-params .satus-table__cell:nth-child(2) 696 | { 697 | padding: 0 8px 0 0; 698 | 699 | text-overflow: unset; 700 | } 701 | 702 | #by-params .satus-table__head > div:nth-child(3), 703 | #by-params .satus-table__cell:nth-child(3) 704 | { 705 | width: calc(100% - 96px); 706 | } 707 | 708 | 709 | /*--------------------------------------------------------------- 710 | # PINNED TABS 711 | ---------------------------------------------------------------*/ 712 | 713 | #pinned 714 | { 715 | margin: 0 8px 8px 0; 716 | 717 | flex: 1; 718 | } 719 | 720 | #pinned .satus-table__head > div:nth-child(1), 721 | #pinned .satus-table__cell:nth-child(1) 722 | { 723 | width: 28px; 724 | } 725 | 726 | #pinned .satus-table__cell:nth-child(1) 727 | { 728 | padding: 0 8px 0 0; 729 | 730 | text-overflow: unset; 731 | 732 | opacity: .5; 733 | } 734 | 735 | #pinned .satus-table__cell:nth-child(1):hover 736 | { 737 | opacity: 1; 738 | } 739 | 740 | .satus-button--pin[data-value=true] 741 | { 742 | color: #00f; 743 | } 744 | 745 | #pinned .satus-table__head > div:nth-child(2), 746 | #pinned .satus-table__cell:nth-child(2) 747 | { 748 | width: calc(100% - 36px); 749 | } 750 | 751 | 752 | /*--------------------------------------------------------------- 753 | # COMPACT MODE 754 | ---------------------------------------------------------------*/ 755 | 756 | body[data-compact-mode='true'] .satus-table 757 | { 758 | height: calc(100vh - 38px); 759 | 760 | border: none; 761 | border-radius: 0; 762 | } 763 | 764 | body[data-compact-mode='true'] #by-domain, 765 | body[data-compact-mode='true'] #by-url, 766 | body[data-compact-mode='true'] #by-params, 767 | body[data-compact-mode='true'] #pinned 768 | { 769 | margin: 0; 770 | } 771 | 772 | body[data-compact-mode='true'] #by-domain, 773 | body[data-compact-mode='true'] #by-url, 774 | body[data-compact-mode='true'] #by-params 775 | { 776 | border-right: 1px solid #ddd; 777 | } 778 | 779 | 780 | /*--------------------------------------------------------------- 781 | # INNER ELEMENTS 782 | ---------------------------------------------------------------*/ 783 | 784 | .satus-table a 785 | { 786 | text-decoration: none; 787 | 788 | color: currentColor; 789 | } 790 | 791 | .satus-table img 792 | { 793 | width: 16px; 794 | height: 16px; 795 | margin: 0 8px -3px 0; 796 | } 797 | 798 | .satus-table .satus-button 799 | { 800 | width: auto; 801 | height: auto; 802 | padding: 0; 803 | } 804 | 805 | .satus-button--dropdown 806 | { 807 | width: 20px; 808 | height: 20px; 809 | padding: 2px; 810 | } 811 | 812 | .satus-button--star 813 | { 814 | width: 20px; 815 | height: 20px; 816 | padding: 0; 817 | } 818 | 819 | .satus-button--dropdown svg:last-child 820 | { 821 | display: none; 822 | } 823 | 824 | .satus-button--dropdown.opened svg:first-child 825 | { 826 | display: none; 827 | } 828 | 829 | .satus-button--dropdown.opened svg:last-child 830 | { 831 | display: block; 832 | } 833 | 834 | .satus-button--dropdown svg, 835 | .satus-button--star svg, 836 | .satus-button--pin svg 837 | { 838 | pointer-events: none; 839 | } 840 | 841 | .satus-button--dropdown::before, 842 | .satus-button--star::before 843 | { 844 | content: none; 845 | } 846 | 847 | 848 | 849 | .satus-input--tags 850 | { 851 | box-sizing: border-box; 852 | width: 100%; 853 | height: calc(100% - 10px); 854 | margin: 5px 0; 855 | padding: 1px 2px; 856 | 857 | border: 1px solid #d2d2d2; 858 | border-radius: 4px; 859 | outline: none; 860 | } 861 | 862 | 863 | 864 | 865 | 866 | .satus-dropdown-list 867 | { 868 | width: 100%; 869 | margin: 0 0 8px 0; 870 | } 871 | 872 | .satus-dropdown-list a 873 | { 874 | color: #1e6fdb; 875 | } 876 | 877 | #by-domain .satus-dropdown-list .satus-table__cell:nth-child(2) 878 | { 879 | width: 60px; 880 | } 881 | 882 | #by-domain .satus-dropdown-list .satus-table__cell:nth-child(3) 883 | { 884 | width: calc(100% - 132px); 885 | } 886 | 887 | .satus-table__row.selected 888 | { 889 | background-color: rgba(255, 255, 0, .3); 890 | } 891 | 892 | 893 | /*--------------------------------------------------------------- 894 | # TOOLBAR 895 | ---------------------------------------------------------------*/ 896 | 897 | .satus-table--toolbar 898 | { 899 | display: none; 900 | 901 | height: 38px; 902 | padding: 0 8px; 903 | 904 | background: #fff; 905 | box-shadow: 0 -2px 4px rgba(0, 0, 0, .1); 906 | } 907 | 908 | .satus-table--selected .satus-table--toolbar 909 | { 910 | display: flex; 911 | } 912 | 913 | .satus-table--selected .satus-table__body 914 | { 915 | height: calc(100% - 39px - 38px); 916 | } 917 | 918 | .satus-table--toolbar > *:nth-child(5) 919 | { 920 | width: 68px; 921 | } 922 | 923 | 924 | .satus-table--toolbar > *:nth-child(4) 925 | { 926 | width: 28px; 927 | 928 | text-overflow: unset; 929 | } 930 | 931 | .satus-table--toolbar .satus-button 932 | { 933 | font-weight: 700; 934 | 935 | width: auto; 936 | margin: 0 8px 0 0; 937 | padding: 0 8px; 938 | } 939 | 940 | /*----------------------------------------------------------------------------- 941 | >>> TABLES 942 | -----------------------------------------------------------------------------*/ 943 | 944 | @media (max-width: 1365px) 945 | { 946 | .satus-section--dashboard 947 | { 948 | flex-direction: column; 949 | } 950 | 951 | .satus-section--dashboard #table-domain, 952 | .satus-section--dashboard #table-url, 953 | .satus-section--dashboard #table-search 954 | { 955 | width: calc(100% - 16px); 956 | } 957 | 958 | #table-url 959 | { 960 | flex: 1; 961 | } 962 | } 963 | -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | 2 | function dataSearch(event) { 3 | var value = event.target.value; 4 | 5 | if (HISTORY_MANAGER.SEARCH.INTERVAL) { 6 | clearInterval(HISTORY_MANAGER.SEARCH.INTERVAL); 7 | 8 | HISTORY_MANAGER.SEARCH.DOMAINS = {}; 9 | 10 | HISTORY_MANAGER.SEARCH.INDEX = 0; 11 | } 12 | 13 | if (value.length === 0) { 14 | updateTable1(true, HISTORY_MANAGER.DOMAINS); 15 | updateTable2(true, HISTORY_MANAGER.PAGES); 16 | updateTable3(true, HISTORY_MANAGER.PARAMS); 17 | 18 | return; 19 | } 20 | 21 | HISTORY_MANAGER.SEARCH.INTERVAL = setInterval(function() { 22 | if (HISTORY_MANAGER.SEARCH.INDEX < HISTORY_MANAGER.LENGTH[0]) { 23 | for (var i = HISTORY_MANAGER.SEARCH.INDEX, l = HISTORY_MANAGER.LENGTH[0]; i < l; i++) { 24 | HISTORY_MANAGER.SEARCH.INDEX++; 25 | var key = HISTORY_MANAGER.KEYS[0][i]; 26 | 27 | if (key.indexOf(value) !== -1 || (HISTORY_MANAGER.DOMAINS[key].title || '').indexOf(value) !== -1) { 28 | HISTORY_MANAGER.SEARCH.DOMAINS[key] = HISTORY_MANAGER.DOMAINS[key]; 29 | } 30 | } 31 | } else if (HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[0] < HISTORY_MANAGER.KEYS[1].length) { 32 | for (var i = HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[0], l = HISTORY_MANAGER.KEYS[1].length; i < l; i++) { 33 | HISTORY_MANAGER.SEARCH.INDEX++; 34 | var key = HISTORY_MANAGER.KEYS[1][i]; 35 | 36 | if (key.indexOf(value) !== -1 || (HISTORY_MANAGER.PAGES[key].title || '').indexOf(value) !== -1) { 37 | HISTORY_MANAGER.SEARCH.PAGES[key] = HISTORY_MANAGER.PAGES[key]; 38 | } 39 | } 40 | } else if (HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[1] < HISTORY_MANAGER.KEYS[2].length) { 41 | for (var i = HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[1], l = HISTORY_MANAGER.KEYS[2].length; i < l; i++) { 42 | HISTORY_MANAGER.SEARCH.INDEX++; 43 | 44 | var key = HISTORY_MANAGER.KEYS[2][i]; 45 | 46 | if (key.indexOf(value) !== -1) { 47 | HISTORY_MANAGER.SEARCH.PARAMS[key] = HISTORY_MANAGER.DOMAINS[key]; 48 | } 49 | } 50 | } 51 | 52 | if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[0]) { 53 | document.querySelector('#by-domain').pagingIndex = 0; 54 | 55 | updateTable1(true, HISTORY_MANAGER.SEARCH.DOMAINS); 56 | 57 | HISTORY_MANAGER.SEARCH.DOMAINS = {}; 58 | } else if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[1]) { 59 | document.querySelector('#by-url').pagingIndex = 0; 60 | 61 | updateTable2(true, HISTORY_MANAGER.SEARCH.PAGES); 62 | 63 | HISTORY_MANAGER.SEARCH.PAGES = {}; 64 | } else if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[2]) { 65 | document.querySelector('#by-params').pagingIndex = 0; 66 | 67 | updateTable3(true, HISTORY_MANAGER.SEARCH.PARAMS); 68 | 69 | HISTORY_MANAGER.SEARCH.PARAMS = {}; 70 | HISTORY_MANAGER.SEARCH.INDEX = 0; 71 | 72 | clearInterval(HISTORY_MANAGER.SEARCH.INTERVAL); 73 | } 74 | }, 100); 75 | } 76 | 77 | function updateSearchResults(search_field) { 78 | var value = search_field.value; 79 | 80 | if (value.length > 0 && value.match(/[^ ]/)) { 81 | var sorted = Object.keys(HISTORY_MANAGER.DOMAINS).map((key) => [key, HISTORY_MANAGER.DOMAINS[key]]).sort(function(a, b) { 82 | return b[1] - a[1]; 83 | }); 84 | 85 | search_results_element.innerHTML = ''; 86 | 87 | for (var i = 0, l = sorted.length; i < l; i++) { 88 | var key = sorted[i][0], 89 | s = key.indexOf(value); 90 | 91 | if (s === 0) { 92 | search_results_element.innerHTML += '' + key + ''; 93 | } else if (key.indexOf('www.') === 0 && s === 4) { 94 | var url = key.replace('www.', ''); 95 | 96 | search_results_element.innerHTML += '' + url + ''; 97 | } 98 | } 99 | 100 | search_results_element.innerHTML += '' + search_field.value + ' ' + searchEngine.title + ' Search'; 101 | 102 | search_field.classList.add('satus-header__text-field--show-results'); 103 | 104 | setTimeout(function() { 105 | var element = document.querySelector('.satus-search-results a'); 106 | 107 | if (element) { 108 | element.classList.add('focused'); 109 | } 110 | }); 111 | } else { 112 | search_field.classList.remove('satus-header__text-field--show-results'); 113 | } 114 | } 115 | 116 | function chooseSearchEngine(event) { 117 | searchEngine = { 118 | title: this.innerText, 119 | url: this.dataset.url, 120 | icon: this.dataset.icon 121 | }; 122 | 123 | document.querySelector('.satus-header__search-engine').style.backgroundImage = 'url(chrome://favicon/' + searchEngine.icon + ')'; 124 | 125 | document.querySelector('.satus-dialog__scrim').click(); 126 | 127 | satus.storage.set('searchEngine', searchEngine); 128 | } 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | /*-------------------------------------------------------------- 138 | >>> TABLE OF CONTENTS: 139 | ---------------------------------------------------------------- 140 | # Skeleton 141 | --------------------------------------------------------------*/ 142 | 143 | /*-------------------------------------------------------------- 144 | # SKELETON 145 | --------------------------------------------------------------*/ 146 | 147 | var searchEngine = { 148 | title: 'Google', 149 | icon: 'https://www.google.com/', 150 | url: 'https://www.google.com/search?q=' 151 | }; 152 | 153 | var Menu = { 154 | header: { 155 | type: 'header', 156 | 157 | section_start: { 158 | type: 'section', 159 | class: 'satus-section--align-start', 160 | 161 | search_engine_back: { 162 | type: 'button', 163 | class: 'satus-header__search-engine__back' 164 | }, 165 | search_engine: { 166 | type: 'button', 167 | class: 'satus-header__search-engine', 168 | dataset: { 169 | icon: 'https://www.google.com/search', 170 | url: 'https://www.google.com/?q=' 171 | }, 172 | style: { 173 | backgroundImage: 'url(chrome://favicon/https://www.google.com/)' 174 | }, 175 | onclick: { 176 | type: 'dialog', 177 | class: 'satus-dialog--search-engine', 178 | scrollbar: false, 179 | 180 | google: { 181 | type: 'button', 182 | label: 'Google', 183 | dataset: { 184 | icon: 'https://www.google.com/', 185 | url: 'https://www.google.com/search?q=' 186 | }, 187 | onclick: chooseSearchEngine 188 | }, 189 | youtube: { 190 | type: 'button', 191 | label: 'YouTube', 192 | dataset: { 193 | icon: 'https://www.youtube.com/', 194 | url: 'https://www.youtube.com/results?search_query=' 195 | }, 196 | onclick: chooseSearchEngine 197 | }, 198 | duckduckgo: { 199 | type: 'button', 200 | label: 'DuckDuckGo', 201 | dataset: { 202 | icon: 'https://duckduckgo.com/', 203 | url: 'https://duckduckgo.com/?q=' 204 | }, 205 | onclick: chooseSearchEngine 206 | }, 207 | bing: { 208 | type: 'button', 209 | label: 'Bing', 210 | dataset: { 211 | icon: 'https://bing.com/', 212 | url: 'https://bing.com/search?q=' 213 | }, 214 | onclick: chooseSearchEngine 215 | }, 216 | yahoo: { 217 | type: 'button', 218 | label: 'Yahoo!', 219 | dataset: { 220 | icon: 'https://search.yahoo.com/', 221 | url: 'https://search.yahoo.com/search?p=' 222 | }, 223 | onclick: chooseSearchEngine 224 | }, 225 | ecosia: { 226 | type: 'button', 227 | label: 'Ecosia', 228 | dataset: { 229 | icon: 'https://www.ecosia.org/', 230 | url: 'https://www.ecosia.org/search?q=' 231 | }, 232 | onclick: chooseSearchEngine 233 | }, 234 | history: { 235 | type: 'button', 236 | label: 'History', 237 | onclick: chooseSearchEngine 238 | } 239 | } 240 | }, 241 | search_field: { 242 | type: 'text-field', 243 | class: 'satus-header__text-field', 244 | placeholder: 'Search', 245 | onkeydown: function(event) { 246 | if (event.keyCode === 13) { 247 | setTimeout(function() { 248 | var focused = document.querySelector('.satus-search-results a.focused'); 249 | 250 | if (focused) { 251 | window.open(focused.href, '_self') 252 | } 253 | }); 254 | } else if (event.keyCode === 38) { 255 | var focused = document.querySelector('.satus-search-results a.focused'), 256 | prev = focused.previousElementSibling || focused.parentNode.lastElementChild; 257 | 258 | focused.classList.remove('focused'); 259 | 260 | prev.classList.add('focused'); 261 | } else if (event.keyCode === 40) { 262 | var focused = document.querySelector('.satus-search-results a.focused'), 263 | next = focused.nextElementSibling || focused.parentNode.firstElementChild; 264 | 265 | focused.classList.remove('focused'); 266 | 267 | next.classList.add('focused'); 268 | } 269 | }, 270 | oninput: function(event) { 271 | if (searchEngine.title === 'History') { 272 | if (all_loading === false) { 273 | if (all_loaded === false) { 274 | all_loading = true; 275 | 276 | satus.storage.import('_all', function(item) { 277 | HISTORY_MANAGER.DOMAINS = item.domains; 278 | HISTORY_MANAGER.PAGES = item.pages; 279 | 280 | document.querySelector('#by-domain').data = updateTable1(); 281 | document.querySelector('#by-url').data = updateTable2(); 282 | document.querySelector('#by-params').data = updateTable3(); 283 | 284 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 285 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 286 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 287 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 288 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 289 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 290 | 291 | all_loaded = true; 292 | all_loading = false; 293 | 294 | dataSearch(event); 295 | }); 296 | } else { 297 | dataSearch(event); 298 | } 299 | } 300 | } else { 301 | updateSearchResults(this); 302 | } 303 | }, 304 | onrender: function() { 305 | var self = this; 306 | 307 | setTimeout(function() { 308 | self.focus(); 309 | }, 500); 310 | } 311 | }, 312 | dropdown_menu: { 313 | type: 'div', 314 | class: 'satus-search-results' 315 | }, 316 | search_icon: { 317 | type: 'button', 318 | class: 'satus-header__search-button', 319 | before: '' 320 | } 321 | }, 322 | section_end: { 323 | type: 'section', 324 | class: 'satus-section--align-end', 325 | 326 | button: { 327 | type: 'button', 328 | before: '', 329 | 330 | onclick: { 331 | type: 'dialog', 332 | class: 'satus-dialog--vertical-menu', 333 | 334 | language: { 335 | type: 'select', 336 | label: 'language', 337 | options: [{ 338 | label: 'English', 339 | value: 'en' 340 | }, { 341 | label: 'Русский', 342 | value: 'ru' 343 | }] 344 | }, 345 | compact_mode: { 346 | type: 'switch', 347 | label: 'compactMode', 348 | storage_key: 'compact_mode', 349 | onclick: function() { 350 | setTimeout(function() { 351 | document.body.dataset.compactMode = satus.storage.get('compact_mode'); 352 | 353 | setTimeout(function() { 354 | window.dispatchEvent(new Event('resize')); 355 | }); 356 | }); 357 | } 358 | } 359 | } 360 | } 361 | } 362 | } 363 | }; 364 | var Selected = {}, 365 | all_loaded = false, 366 | all_loading = false; 367 | 368 | window.addEventListener('click', function(event) { 369 | var target = event.target; 370 | 371 | if (target.classList.contains('satus-button--star')) { 372 | star(target); 373 | } else if (target.classList.contains('satus-button--pin')) { 374 | pin(target); 375 | } else if (!target.classList.contains('satus-input--tags')) { 376 | var is_url_table = false; 377 | 378 | for (var i = event.path.length - 2; i > 0; i--) { 379 | if (event.path[i].id === 'by-url') { 380 | is_url_table = true; 381 | } 382 | 383 | if (event.path[i].classList && event.path[i].classList.contains('satus-table__row') && is_url_table === true) { 384 | var href = event.path[i].querySelector('a').href; 385 | 386 | if (event.path[i].classList.contains('selected')) { 387 | Selected[href] = undefined; 388 | } else { 389 | Selected[href] = HISTORY_MANAGER.PAGES[href]; 390 | } 391 | 392 | event.path[i].classList.toggle('selected'); 393 | 394 | checkToolbar(); 395 | } 396 | } 397 | } 398 | }); 399 | 400 | chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 401 | if (changeInfo.hasOwnProperty('pinned')) { 402 | updateTable4(true); 403 | } 404 | }); 405 | 406 | chrome.bookmarks.onCreated.addListener(function() { 407 | updateTable2(true); 408 | }); 409 | 410 | chrome.bookmarks.onRemoved.addListener(function() { 411 | updateTable2(true); 412 | }); 413 | 414 | chrome.bookmarks.onChanged.addListener(function() { 415 | updateTable2(true); 416 | }); 417 | 418 | function checkToolbar() { 419 | var is_empty = true; 420 | 421 | for (var key in Selected) { 422 | if (Selected[key]) { 423 | is_empty = false; 424 | } 425 | } 426 | 427 | if (is_empty === false) { 428 | document.querySelector('#by-url').classList.add('satus-table--selected'); 429 | } else { 430 | document.querySelector('#by-url').classList.remove('satus-table--selected'); 431 | } 432 | 433 | window.dispatchEvent(new Event('resize')); 434 | } 435 | 436 | function parseBookmarks(items, callback) { 437 | var bookmarks = {}, 438 | threads = 0; 439 | 440 | function parse(items) { 441 | threads++; 442 | 443 | for (var i = 0, l = items.length; i < l; i++) { 444 | var item = items[i]; 445 | 446 | 447 | if (item.url) { 448 | bookmarks[item.url] = item.id; 449 | } 450 | 451 | if (item.children) { 452 | parse(item.children); 453 | } 454 | } 455 | 456 | threads--; 457 | 458 | if (threads === 0) { 459 | if (callback) { 460 | callback(bookmarks); 461 | } 462 | } 463 | } 464 | 465 | parse(items); 466 | } 467 | 468 | function star(target) { 469 | if (target.dataset.value === 'false') { 470 | chrome.bookmarks.create({ 471 | title: target.dataset.title, 472 | url: target.dataset.href, 473 | parentId: '1' 474 | }, function(item) { 475 | target.dataset.id = item.id; 476 | target.dataset.value = 'true'; 477 | }); 478 | } else { 479 | chrome.bookmarks.remove(target.dataset.id); 480 | 481 | target.dataset.value = 'false'; 482 | } 483 | } 484 | 485 | function tags() { 486 | HISTORY_MANAGER.PAGES[this.dataset.href].tags = this.value; 487 | 488 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 489 | PAGES = HISTORY_MANAGER.PAGES, 490 | PARAMS = HISTORY_MANAGER.PARAMS; 491 | 492 | satus.storage.set('HISTORY', { 493 | DOMAINS, 494 | PAGES, 495 | PARAMS 496 | }); 497 | 498 | updateTable2(true); 499 | 500 | for (var key in Selected) { 501 | Selected[key] = undefined; 502 | } 503 | 504 | checkToolbar(); 505 | } 506 | 507 | function pin(target) { 508 | var value = target.dataset.value == 'false' ? true : false; 509 | 510 | chrome.tabs.query({}, function(tabs) { 511 | for (var i = 0, l = tabs.length; i < l; i++) { 512 | var tab = tabs[i]; 513 | 514 | if (tab.url === target.dataset.href) { 515 | chrome.tabs.update(tab.id, { 516 | pinned: value 517 | }); 518 | 519 | target.dataset.value = value; 520 | } 521 | } 522 | }); 523 | } 524 | 525 | function loadAll(item) { 526 | if (all_loaded === false) { 527 | console.time('loading-all'); 528 | 529 | document.body.classList.add('loading'); 530 | 531 | satus.storage.import('_all', function(_all) { 532 | var _new = satus.storage.get('_new'), 533 | _top = satus.storage.get('_top'); 534 | 535 | updateData(_new, _all); 536 | 537 | HISTORY_MANAGER.NEW.domains = {}; 538 | HISTORY_MANAGER.NEW.pages = {}; 539 | HISTORY_MANAGER.NEW.params = {}; 540 | 541 | satus.storage.set('_new', HISTORY_MANAGER.NEW); 542 | satus.storage.set('_all', _all); 543 | 544 | HISTORY_MANAGER.DOMAINS = _all.domains; 545 | HISTORY_MANAGER.PAGES = _all.pages; 546 | HISTORY_MANAGER.PARAMS = _all.params; 547 | 548 | document.querySelector('#by-domain').data = updateTable1(true); 549 | document.querySelector('#by-url').data = updateTable2(true); 550 | document.querySelector('#by-params').data = updateTable3(true); 551 | 552 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 553 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 554 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 555 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 556 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 557 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 558 | 559 | all_loaded = true; 560 | 561 | document.querySelectorAll('.satus-table')[0].querySelector('.satus-scrollbar__wrapper').scrollTo(0, 0); 562 | 563 | document.body.classList.remove('loading'); 564 | 565 | console.timeEnd('loading-all'); 566 | 567 | var domains = Object.keys(_all.domains).map((key) => [key, _all.domains[key]]).sort(function(a, b) { 568 | return b[1] - a[1]; 569 | }), 570 | pages = Object.keys(_all.pages).map((key) => [key, _all.pages[key]]).sort(function(a, b) { 571 | return b[1].visitCount - a[1].visitCount; 572 | }); 573 | 574 | for (var i = 0; i < Math.min(100, domains.length); i++) { 575 | _top.domains[domains[i][0]] = domains[i][1]; 576 | } 577 | 578 | for (var i = 0; i < Math.min(100, pages.length); i++) { 579 | _top.pages[pages[i][0]] = pages[i][1]; 580 | } 581 | 582 | _top.length[0] = Object.keys(_all.domains).length; 583 | _top.length[1] = Object.keys(_all.pages).length; 584 | 585 | satus.storage.set('_top', _top); 586 | }); 587 | 588 | return false; 589 | } 590 | 591 | var items = document.querySelectorAll('#by-url a'); 592 | 593 | for (var i = 0, l = items.length; i < l; i++) { 594 | for (var key in Selected) { 595 | if (items[i].href === key) { 596 | items[i].parentNode.parentNode.classList.add('selected'); 597 | } 598 | } 599 | } 600 | } 601 | 602 | Menu.main = { 603 | type: 'main', 604 | scrollbar: false, 605 | 606 | section: { 607 | type: 'section', 608 | class: 'satus-section--tables', 609 | 610 | table_01: { 611 | type: 'table', 612 | id: 'by-domain', 613 | paging: 100, 614 | columns: [{ 615 | title: 'visits', 616 | sorting: 'desc' 617 | }, { 618 | title: '', 619 | onrender: function() { 620 | this.querySelector('.satus-button--dropdown').addEventListener('click', function() { 621 | var container = this.parentNode.parentNode; 622 | 623 | if (!container.querySelector('.satus-dropdown-list')) { 624 | var self = this, 625 | list = document.createElement('div'), 626 | data = [], 627 | host = this.dataset.key; 628 | 629 | list.className = 'satus-dropdown-list'; 630 | 631 | satus.storage.import(host, function(items) { 632 | for (var key in items) { 633 | var item = items[key]; 634 | 635 | data.push([{ 636 | text: item.visitCount 637 | }, {}, { 638 | text: key, 639 | html: '' + key + '' 640 | }]); 641 | } 642 | 643 | setTimeout(function() { 644 | satus.render({ 645 | type: 'table', 646 | paging: 100, 647 | columns: [{ 648 | title: 'Visits', 649 | sorting: 'desc' 650 | }, { 651 | title: '' 652 | }, { 653 | title: 'Title', 654 | onrender: function() { 655 | this.querySelector('a').innerText = this.querySelector('a').innerText; 656 | } 657 | }], 658 | data: data 659 | }, list); 660 | 661 | setTimeout(function() { 662 | list.querySelector('.satus-table__body').style.height = list.querySelector('.satus-table').offsetHeight - 39 + 'px'; 663 | 664 | list.querySelector('.satus-scrollbar').resize(); 665 | }); 666 | }); 667 | 668 | container.appendChild(list); 669 | 670 | self.classList.add('opened'); 671 | }); 672 | } else { 673 | container.querySelector('.satus-dropdown-list').remove(); 674 | 675 | this.classList.remove('opened'); 676 | } 677 | }); 678 | } 679 | }, { 680 | title: 'domain' 681 | }], 682 | beforeUpdate: loadAll 683 | }, 684 | 685 | table_02: { 686 | type: 'table', 687 | id: 'by-url', 688 | paging: 100, 689 | columns: [{ 690 | title: 'visits', 691 | sorting: 'desc' 692 | }, { 693 | title: 'title' 694 | }, { 695 | title: 'URL' 696 | }, { 697 | title: '★' 698 | }, { 699 | title: 'tags', 700 | onrender: function() { 701 | this.querySelector('.satus-input--tags').onblur = tags; 702 | } 703 | }], 704 | onrender: function() { 705 | var toolbar = document.createElement('div'); 706 | 707 | toolbar.className = 'satus-table--toolbar'; 708 | 709 | satus.render({ 710 | undo: { 711 | type: 'button', 712 | label: 'Undo', 713 | 714 | onclick: function() { 715 | var selected = document.querySelectorAll('.satus-table__row.selected') 716 | 717 | for (var key in Selected) { 718 | Selected[key] = undefined; 719 | } 720 | 721 | for (var i = 0, l = selected.length; i < l; i++) { 722 | selected[i].classList.remove('selected'); 723 | } 724 | 725 | checkToolbar(); 726 | } 727 | }, 728 | star: { 729 | type: 'button', 730 | label: 'Star', 731 | 732 | onclick: function() { 733 | for (var key in Selected) { 734 | if (Selected[key]) { 735 | Selected[key].star = 1; 736 | } 737 | } 738 | 739 | updateTable2(true); 740 | 741 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 742 | PAGES = HISTORY_MANAGER.PAGES, 743 | PARAMS = HISTORY_MANAGER.PARAMS; 744 | 745 | satus.storage.set('HISTORY', { 746 | DOMAINS, 747 | PAGES, 748 | PARAMS 749 | }); 750 | 751 | for (var key in Selected) { 752 | Selected[key] = undefined; 753 | } 754 | 755 | checkToolbar(); 756 | } 757 | }, 758 | remove: { 759 | type: 'button', 760 | label: 'Remove', 761 | 762 | onclick: function() { 763 | for (var key in Selected) { 764 | if (Selected[key]) { 765 | delete HISTORY_MANAGER.PAGES[key]; 766 | delete Selected[key]; 767 | } 768 | } 769 | 770 | updateTable2(true); 771 | 772 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 773 | PAGES = HISTORY_MANAGER.PAGES, 774 | PARAMS = HISTORY_MANAGER.PARAMS; 775 | 776 | satus.storage.set('HISTORY', { 777 | DOMAINS, 778 | PAGES, 779 | PARAMS 780 | }); 781 | 782 | for (var key in Selected) { 783 | Selected[key] = undefined; 784 | } 785 | 786 | checkToolbar(); 787 | } 788 | }, 789 | edit: { 790 | type: 'button', 791 | label: 'Edit', 792 | 793 | onclick: function() { 794 | for (var key in Selected) { 795 | if (Selected[key]) { 796 | Selected[key].tags = this.parentNode.querySelector('input').value; 797 | } 798 | } 799 | 800 | updateTable2(true); 801 | 802 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 803 | PAGES = HISTORY_MANAGER.PAGES, 804 | PARAMS = HISTORY_MANAGER.PARAMS; 805 | 806 | satus.storage.set('HISTORY', { 807 | DOMAINS, 808 | PAGES, 809 | PARAMS 810 | }); 811 | 812 | for (var key in Selected) { 813 | Selected[key] = undefined; 814 | } 815 | 816 | checkToolbar(); 817 | } 818 | }, 819 | tags: { 820 | type: 'text-field', 821 | class: 'satus-input--tags', 822 | 823 | onkeydown: function(event) { 824 | if (event.keyCode === 13) { 825 | for (var key in Selected) { 826 | if (Selected[key]) { 827 | Selected[key].tags = this.value; 828 | } 829 | } 830 | 831 | updateTable2(true); 832 | 833 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 834 | PAGES = HISTORY_MANAGER.PAGES, 835 | PARAMS = HISTORY_MANAGER.PARAMS; 836 | 837 | satus.storage.set('HISTORY', { 838 | DOMAINS, 839 | PAGES, 840 | PARAMS 841 | }); 842 | } 843 | } 844 | } 845 | }, toolbar); 846 | 847 | this.appendChild(toolbar); 848 | }, 849 | beforeUpdate: loadAll 850 | }, 851 | 852 | table_03: { 853 | type: 'table', 854 | id: 'by-params', 855 | paging: 100, 856 | columns: [{ 857 | title: 'visits', 858 | sorting: 'desc' 859 | }, { 860 | title: '', 861 | onrender: function() { 862 | this.querySelector('.satus-button--dropdown').addEventListener('click', function() { 863 | var container = this.parentNode.parentNode; 864 | 865 | if (!container.querySelector('.satus-dropdown-list')) { 866 | var self = this, 867 | list = document.createElement('div'), 868 | data = [], 869 | host = this.dataset.key; 870 | 871 | list.className = 'satus-dropdown-list'; 872 | 873 | satus.storage.import(host, function(items) { 874 | for (var key in items) { 875 | var q = key.match(/[?&]q=[^&]+/) || key.match(/[?&]search_query=[^&]+/); 876 | 877 | if (q) { 878 | var item = items[key]; 879 | 880 | try { 881 | var qq = decodeURIComponent(q[0].substring(q[0].indexOf('=') + 1)); 882 | } catch (err) { 883 | var qq = q[0].substring(q[0].indexOf('=') + 1); 884 | } 885 | 886 | data.push([{ 887 | text: item.visitCount 888 | }, {}, { 889 | text: key, 890 | html: '' + qq + '' 891 | }]); 892 | } 893 | } 894 | 895 | if (data.length === 0) { 896 | return; 897 | } 898 | 899 | satus.render({ 900 | type: 'table', 901 | paging: 100, 902 | columns: [{ 903 | title: 'Visits', 904 | sorting: 'desc' 905 | }, { 906 | title: '' 907 | }, { 908 | title: 'Title', 909 | onrender: function() { 910 | this.querySelector('a').innerText = this.querySelector('a').innerText; 911 | } 912 | }], 913 | data: data 914 | }, list); 915 | 916 | container.appendChild(list); 917 | 918 | self.classList.add('opened'); 919 | }); 920 | } else { 921 | container.querySelector('.satus-dropdown-list').remove(); 922 | 923 | this.classList.remove('opened'); 924 | } 925 | }); 926 | } 927 | }, { 928 | title: 'domain' 929 | }], 930 | beforeUpdate: loadAll 931 | }, 932 | 933 | table_04: { 934 | type: 'table', 935 | id: 'pinned', 936 | paging: 100, 937 | columns: [{ 938 | title: '' 939 | }, { 940 | title: 'domain' 941 | }] 942 | } 943 | } 944 | }; 945 | /*--------------------------------------------------------------- 946 | >>> TABLES 947 | ----------------------------------------------------------------- 948 | # Table 1 949 | # Table 2 950 | # Table 3 951 | # Table 4 952 | ---------------------------------------------------------------*/ 953 | 954 | /*--------------------------------------------------------------- 955 | # TABLE 1 956 | ---------------------------------------------------------------*/ 957 | 958 | function updateTable1(force, d) { 959 | var data = d || HISTORY_MANAGER.DOMAINS, 960 | table = []; 961 | 962 | for (var key in data) { 963 | table.push([{ 964 | text: data[key] 965 | }, { 966 | html: '' 967 | }, { 968 | text: key, 969 | html: '' + key + '' 970 | }]); 971 | } 972 | 973 | Menu.main.section.table_01.data = table; 974 | 975 | if (force === true) { 976 | document.querySelector('#by-domain').update(table); 977 | } 978 | 979 | return table; 980 | } 981 | 982 | 983 | /*--------------------------------------------------------------- 984 | # TABLE 2 985 | ---------------------------------------------------------------*/ 986 | 987 | function updateTable2(force, d) { 988 | chrome.bookmarks.getTree(function(results) { 989 | parseBookmarks(results, function(bookmarks) { 990 | var data = d || HISTORY_MANAGER.PAGES, 991 | table = []; 992 | 993 | for (var key in data) { 994 | var item = data[key], 995 | url = key.replace(/^.*\/\/[^\/]+:?[0-9]?\//g, ''); 996 | 997 | table.push([{ 998 | text: item.visitCount 999 | }, { 1000 | html: '' + item.title, 1001 | text: item.title 1002 | }, { 1003 | html: '/' + url + '', 1004 | text: url 1005 | }, { 1006 | html: '', 1007 | text: item.star 1008 | }, { 1009 | html: '', 1010 | text: item.tags 1011 | }]); 1012 | } 1013 | 1014 | Menu.main.section.table_02.data = table; 1015 | 1016 | if (force === true) { 1017 | document.querySelector('#by-url').update(table); 1018 | } 1019 | }); 1020 | }); 1021 | } 1022 | 1023 | 1024 | /*--------------------------------------------------------------- 1025 | # TABLE 3 1026 | ---------------------------------------------------------------*/ 1027 | 1028 | function updateTable3(force, d) { 1029 | var data = d || HISTORY_MANAGER.PARAMS, 1030 | table = []; 1031 | 1032 | for (var key in data) { 1033 | table.push([{ 1034 | text: data[key] 1035 | }, { 1036 | html: '' 1037 | }, { 1038 | html: '' + key + '', 1039 | text: key 1040 | }]); 1041 | } 1042 | 1043 | Menu.main.section.table_03.data = table; 1044 | 1045 | if (force === true) { 1046 | document.querySelector('#by-params').update(table); 1047 | } 1048 | 1049 | return table; 1050 | } 1051 | 1052 | 1053 | /*--------------------------------------------------------------- 1054 | # TABLE 4 1055 | ---------------------------------------------------------------*/ 1056 | 1057 | function updateTable4() { 1058 | chrome.tabs.query({}, function(tabs) { 1059 | var data = HISTORY_MANAGER.PINNED, 1060 | table = [], 1061 | pinned_tabs = {}; 1062 | 1063 | for (var i = 0, l = tabs.length; i < l; i++) { 1064 | var tab = tabs[i]; 1065 | 1066 | table.push([{ 1067 | html: '' 1068 | }, { 1069 | html: '' + tab.title + '', 1070 | text: tab.url 1071 | }]); 1072 | } 1073 | 1074 | if (table.length > 0) { 1075 | Menu.main.section.table_04.data = table; 1076 | 1077 | document.querySelector('#pinned').update(table); 1078 | } 1079 | }); 1080 | } 1081 | /*--------------------------------------------------------------- 1082 | >>> INDEX 1083 | ---------------------------------------------------------------*/ 1084 | 1085 | var HISTORY_MANAGER = { 1086 | DOMAINS: {}, 1087 | PAGES: {}, 1088 | PARAMS: {}, 1089 | PINNED: {}, 1090 | 1091 | KEYS: [ 1092 | [], 1093 | [], 1094 | [] 1095 | ], 1096 | 1097 | LENGTH: [0, 0, 0], 1098 | 1099 | SEARCH: { 1100 | INDEX: 0, 1101 | INTERVAL: false, 1102 | 1103 | DOMAINS: {}, 1104 | PAGES: {}, 1105 | PARAMS: {}, 1106 | PINNED: {} 1107 | }, 1108 | 1109 | NEW: {} 1110 | }; 1111 | 1112 | function updateData(new_items, current_items) { 1113 | if (new_items) { 1114 | if (new_items.domains) { 1115 | for (var key in new_items.domains) { 1116 | if (current_items.domains[key] || current_items.domains[key] === 0) { 1117 | current_items.domains[key] += new_items.domains[key]; 1118 | } 1119 | } 1120 | } 1121 | 1122 | if (new_items.pages) { 1123 | for (var key in new_items.pages) { 1124 | if (current_items.pages[key]) { 1125 | current_items.pages[key].visitCount += new_items.pages[key].visitCount; 1126 | } else { 1127 | current_items.pages[key] = new_items.pages[key]; 1128 | } 1129 | } 1130 | } 1131 | 1132 | if (new_items.params) { 1133 | for (var key in new_items.params) { 1134 | if (current_items.params[key] || current_items.params[key] === 0) { 1135 | current_items.params[key] += new_items.params[key]; 1136 | } 1137 | } 1138 | } 1139 | } 1140 | } 1141 | 1142 | console.time('start'); 1143 | 1144 | function init() { 1145 | if (location.href.indexOf('?loaded') === -1) { 1146 | location.replace(location.href + '?loaded'); 1147 | 1148 | return false; 1149 | } 1150 | 1151 | satus.storage.import('language', function(language) { 1152 | satus.updateStorageKeys(Menu); 1153 | 1154 | satus.locale.import(language || 'en', function() { 1155 | satus.storage.import('compact_mode', function(compact_mode) { 1156 | document.body.dataset.compactMode = compact_mode; 1157 | }); 1158 | 1159 | satus.storage.import('_new', function(_new) { 1160 | var _new = _new || { 1161 | domains: {}, 1162 | pages: {}, 1163 | params: {} 1164 | }; 1165 | 1166 | satus.storage.import('_top', function(_top) { 1167 | var _top = _top || { 1168 | domains: {}, 1169 | pages: {}, 1170 | params: {} 1171 | }; 1172 | 1173 | //backgroundFetch('https://www.google.com/favicon.ico', 'updateSearchEngineIcon'); 1174 | 1175 | updateData(_new, _top); 1176 | 1177 | HISTORY_MANAGER.NEW = _new; 1178 | 1179 | HISTORY_MANAGER.DOMAINS = _top.domains; 1180 | HISTORY_MANAGER.PAGES = _top.pages; 1181 | HISTORY_MANAGER.PARAMS = _top.params; 1182 | 1183 | updateTable1(); 1184 | updateTable3(); 1185 | 1186 | Menu.main.section.table_01.pages = Math.ceil(satus.storage.data._top.length[0] / 100); 1187 | Menu.main.section.table_02.pages = Math.ceil(satus.storage.data._top.length[1] / 100); 1188 | Menu.main.section.table_03.pages = Math.ceil(satus.storage.data._top.length[2] / 100); 1189 | 1190 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 1191 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 1192 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 1193 | 1194 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 1195 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 1196 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 1197 | 1198 | satus.render(Menu, document.body); 1199 | 1200 | search_results_element = document.querySelector('.satus-search-results'); 1201 | 1202 | updateTable2(true); 1203 | 1204 | console.timeEnd('start'); 1205 | 1206 | satus.storage.import('pinned', function(pinned) { 1207 | HISTORY_MANAGER.PINNED = pinned; 1208 | 1209 | updateTable4(); 1210 | 1211 | satus.storage.import('searchEngine', function(item) { 1212 | if (item) { 1213 | searchEngine = item; 1214 | 1215 | document.querySelector('.satus-header__search-engine').style.backgroundImage = 'url(chrome://favicon/' + searchEngine.icon + ')'; 1216 | } 1217 | }); 1218 | }); 1219 | }); 1220 | }); 1221 | }); 1222 | }); 1223 | } 1224 | 1225 | init(); 1226 | 1227 | 1228 | chrome.runtime.onMessage.addListener(async function(message, sender) { 1229 | if (typeof message !== 'object') { 1230 | return false; 1231 | } 1232 | 1233 | if (message.action === 'history-manager--fetch-response') { 1234 | if (window[message.callback]) { 1235 | window[message.callback](message.response); 1236 | } 1237 | } 1238 | }); 1239 | 1240 | function backgroundFetch(url, callback) { 1241 | chrome.runtime.sendMessage({ 1242 | action: 'history-manager--fetch', 1243 | url: url, 1244 | callback: callback 1245 | }); 1246 | } -------------------------------------------------------------------------------- /satus.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | /*--------------------------------------------------------------- 4 | >>> ANIMATIONS 5 | ---------------------------------------------------------------*/ 6 | 7 | .satus-animation--fade-in 8 | { 9 | animation: fadeIn 250ms; 10 | } 11 | 12 | .satus-animation--fade-out 13 | { 14 | animation: fadeOut 250ms; 15 | } 16 | 17 | .satus-animation--fade-in-left 18 | { 19 | animation: fadeInLeft 250ms; 20 | } 21 | 22 | .satus-animation--fade-in-right 23 | { 24 | animation: fadeInRight 250ms; 25 | } 26 | 27 | .satus-animation--fade-out-left 28 | { 29 | animation: fadeOutLeft 250ms; 30 | } 31 | 32 | .satus-animation--fade-out-right 33 | { 34 | animation: fadeOutRight 250ms; 35 | } 36 | 37 | .satus-animation--zoom-in 38 | { 39 | animation: zoomIn 250ms; 40 | } 41 | 42 | .satus-animation--zoom-out 43 | { 44 | animation: zoomOut 250ms; 45 | } 46 | 47 | @keyframes fadeIn 48 | { 49 | from 50 | { 51 | opacity: 0; 52 | } 53 | to 54 | { 55 | opacity: 1; 56 | } 57 | } 58 | 59 | @keyframes fadeOut 60 | { 61 | from 62 | { 63 | opacity: 1; 64 | } 65 | to 66 | { 67 | opacity: 0; 68 | } 69 | } 70 | 71 | @keyframes fadeInLeft 72 | { 73 | from 74 | { 75 | transform: translateX(-10%); 76 | 77 | opacity: 0; 78 | } 79 | to 80 | { 81 | transform: translateX(0%); 82 | 83 | opacity: 1; 84 | } 85 | } 86 | 87 | @keyframes fadeInRight 88 | { 89 | from 90 | { 91 | transform: translateX(10%); 92 | 93 | opacity: 0; 94 | } 95 | to 96 | { 97 | transform: translateX(0%); 98 | 99 | opacity: 1; 100 | } 101 | } 102 | 103 | @keyframes fadeOutLeft 104 | { 105 | from 106 | { 107 | transform: translateX(0%); 108 | 109 | opacity: 1; 110 | } 111 | to 112 | { 113 | transform: translateX(-10%); 114 | 115 | opacity: 0; 116 | } 117 | } 118 | 119 | @keyframes fadeOutRight 120 | { 121 | from 122 | { 123 | transform: translateX(0%); 124 | 125 | opacity: 1; 126 | } 127 | to 128 | { 129 | transform: translateX(10%); 130 | 131 | opacity: 0; 132 | } 133 | } 134 | 135 | @keyframes zoomIn 136 | { 137 | from 138 | { 139 | transform: scale(.8); 140 | 141 | opacity: 0; 142 | } 143 | to 144 | { 145 | transform: scale(1); 146 | 147 | opacity: 1; 148 | } 149 | } 150 | 151 | @keyframes zoomOut 152 | { 153 | from 154 | { 155 | transform: scale(1); 156 | 157 | opacity: 1; 158 | } 159 | to 160 | { 161 | transform: scale(.8); 162 | 163 | opacity: 0; 164 | } 165 | } 166 | 167 | 168 | /*--------------------------------------------------------------- 169 | >>> CUSTOM 170 | ---------------------------------------------------------------*/ 171 | 172 | html, 173 | body 174 | { 175 | display: flex; 176 | overflow: hidden; 177 | flex-direction: column; 178 | 179 | width: 100vw; 180 | height: 100vh; 181 | margin: 0; 182 | 183 | background: var(--satus-theme-main); 184 | } 185 | 186 | 187 | /*--------------------------------------------------------------- 188 | >>> THEMES 189 | ----------------------------------------------------------------- 190 | 1.0 Default 191 | ---------------------------------------------------------------*/ 192 | 193 | html 194 | { 195 | --satus-theme-primary: #ffbe46; 196 | --satus-theme-on-primary: #fff; 197 | --satus-theme-dialog: #f7f7f6; 198 | --satus-theme-dialog-backdrop: rgba(25,25,25,.2); 199 | --satus-theme-dialog-shadow: inset 0 -1px 1px 1px rgba(0,0,0,.1), 0 2px 6px rgba(0, 0, 0, .15); 200 | --satus-theme-dialog-text: #777; 201 | --satus-theme-header: #fff; 202 | --satus-theme-header-text: #777; 203 | --satus-theme-main: #f7f7f6; 204 | --satus-theme-main-text: #777; 205 | --satus-theme-section: #fff; 206 | --satus-theme-on-button: transparent; 207 | --satus-theme-button: transparent; 208 | --satus-theme-scrollbar: rgba(0, 0, 0, .2); 209 | --satus-theme-scrollbar-focus: rgba(0, 0, 0, .4); 210 | --satus-theme-tooltip: rgba(0, 0, 0, .4); 211 | --satus-theme-hover: rgba(0, 0, 0, .04); 212 | --satus-theme-shortcut: #fff; 213 | --satus-theme-tabs-background: #efefef; 214 | --satus-theme-tabs-border: #dfdfdf; 215 | } 216 | 217 | /*--------------------------------------------------------------- 218 | >>> BUTTON 219 | ----------------------------------------------------------------- 220 | # Basis 221 | # Background 222 | 223 | # Variants 224 | # Text 225 | # List item 226 | # Raised 227 | # Unelevated 228 | 229 | # Before 230 | # Afte 231 | 232 | # SVG 233 | 234 | # Attributes 235 | ---------------------------------------------------------------*/ 236 | 237 | /*--------------------------------------------------------------- 238 | # BASIS 239 | ---------------------------------------------------------------*/ 240 | 241 | .satus-button 242 | { 243 | font: inherit; 244 | font-weight: 500; 245 | line-height: inherit; 246 | 247 | position: relative; 248 | 249 | display: inline-flex; 250 | 251 | height: 40px; 252 | padding: 0 16px; 253 | 254 | -webkit-user-select: none; 255 | -moz-user-select: none; 256 | -ms-user-select: none; 257 | user-select: none; 258 | 259 | color: inherit; 260 | border: none; 261 | outline: none; 262 | background: transparent; 263 | 264 | -moz-osx-font-smoothing: grayscale; 265 | -webkit-font-smoothing: antialiased; 266 | align-items: center; 267 | -webkit-tap-highlight-color: transparent; 268 | -webkit-appearance: none; 269 | } 270 | 271 | .satus-button:hover 272 | { 273 | cursor: pointer; 274 | } 275 | 276 | 277 | /*--------------------------------------------------------------- 278 | # BACKGROUND 279 | ---------------------------------------------------------------*/ 280 | 281 | .satus-button--text, 282 | .satus-button--raised, 283 | .satus-button--unelevated 284 | { 285 | margin: 4px; 286 | } 287 | 288 | .satus-button--text > *, 289 | .satus-button--raised > *, 290 | .satus-button--unelevated > * 291 | { 292 | position: relative; 293 | z-index: 1; 294 | } 295 | 296 | .satus-button--text::before, 297 | .satus-button--raised::before, 298 | .satus-button--unelevated::before 299 | { 300 | position: absolute; 301 | top: 0; 302 | left: 0; 303 | 304 | box-sizing: border-box; 305 | width: 100%; 306 | height: 100%; 307 | 308 | content: ''; 309 | transition: box-shadow .2s, transform .4s cubic-bezier(.175, .885, .32, 1.275), background .2s; 310 | 311 | border-radius: 8px; 312 | background: transparent; 313 | } 314 | 315 | .satus-button--text:active::before, 316 | .satus-button--raised:active::before, 317 | .satus-button--unelevated:active::before 318 | { 319 | transform: scale(.95); 320 | } 321 | 322 | 323 | /*--------------------------------------------------------------- 324 | # VARIANTS 325 | ---------------------------------------------------------------*/ 326 | 327 | /*--------------------------------------------------------------- 328 | # TEXT 329 | ---------------------------------------------------------------*/ 330 | 331 | .satus-button--text:hover::before 332 | { 333 | background: var(--satus-theme-hover); 334 | } 335 | 336 | 337 | /*--------------------------------------------------------------- 338 | # LIST ITEM 339 | ---------------------------------------------------------------*/ 340 | 341 | .satus-button--list-item 342 | { 343 | width: 100%; 344 | height: 48px; 345 | margin: 0; 346 | padding: 0 16px; 347 | 348 | text-align: left; 349 | 350 | border-radius: 0; 351 | 352 | justify-content: flex-start; 353 | } 354 | 355 | .satus-button--list-item:hover 356 | { 357 | background: var(--satus-theme-hover); 358 | } 359 | 360 | 361 | /*--------------------------------------------------------------- 362 | # RAISED 363 | ---------------------------------------------------------------*/ 364 | 365 | .satus-button--raised 366 | { 367 | color: var(--satus-theme-on-primary); 368 | } 369 | 370 | .satus-button--raised::before 371 | { 372 | background: var(--satus-theme-primary); 373 | box-shadow: 0 2px 3px rgba(0, 0, 0, .15); 374 | } 375 | 376 | .satus-button--raised:hover::before 377 | { 378 | background: var(--satus-theme-primary); 379 | } 380 | 381 | .satus-button--raised:not([disabled]):active::before 382 | { 383 | box-shadow: 0 1px 2px rgba(0, 0, 0, .15); 384 | } 385 | 386 | 387 | /*--------------------------------------------------------------- 388 | # UNELEVATED 389 | ---------------------------------------------------------------*/ 390 | 391 | .satus-button--unelevated 392 | { 393 | color: var(--satus-theme-on-primary); 394 | } 395 | 396 | .satus-button--unelevated::before 397 | { 398 | background: var(--satus-theme-primary); 399 | } 400 | 401 | .satus-button--unelevated:hover::before 402 | { 403 | background: var(--satus-theme-primary); 404 | } 405 | 406 | 407 | /*--------------------------------------------------------------- 408 | # BEFORE 409 | ---------------------------------------------------------------*/ 410 | 411 | .satus-button > * + .satus-button__label 412 | { 413 | margin: 0 0 0 8px; 414 | } 415 | 416 | 417 | /*--------------------------------------------------------------- 418 | # AFTER 419 | ---------------------------------------------------------------*/ 420 | 421 | .satus-button > .satus-button__label + * 422 | { 423 | margin: 0 0 0 8px; 424 | } 425 | 426 | 427 | /*--------------------------------------------------------------- 428 | # SVG 429 | ---------------------------------------------------------------*/ 430 | 431 | .satus-button svg 432 | { 433 | width: 24px; 434 | height: 24px; 435 | } 436 | 437 | 438 | /*--------------------------------------------------------------- 439 | # ATTRIBUTES 440 | ---------------------------------------------------------------*/ 441 | 442 | .satus-button[disabled] 443 | { 444 | opacity: .7; 445 | } 446 | 447 | .satus-button[disabled]:hover 448 | { 449 | cursor: default; 450 | } 451 | 452 | .satus-button[disabled]:active::before 453 | { 454 | transform: none; 455 | } 456 | 457 | 458 | /*--------------------------------------------------------------- 459 | >>> COLOR PICKER 460 | ---------------------------------------------------------------*/ 461 | 462 | .satus-color-picker 463 | { 464 | display: flex; 465 | flex-direction: column; 466 | 467 | justify-content: center; 468 | align-items: center; 469 | } 470 | 471 | .satus-color-picker__wheel 472 | { 473 | position: relative; 474 | margin: 16px 0 0; 475 | border-radius: 50%; 476 | overflow: hidden; 477 | width: 256px; 478 | height: 256px; 479 | } 480 | 481 | .satus-color-picker__wheel canvas 482 | { 483 | border-radius: 50%; 484 | } 485 | 486 | .satus-color-picker__shader 487 | { 488 | position: absolute; 489 | left: 0; 490 | top: 0; 491 | width: 100%; 492 | height: 100%; 493 | pointer-events: none; 494 | background: #000; 495 | opacity: 0; 496 | } 497 | 498 | .satus-color-picker__cursor 499 | { 500 | position: absolute; 501 | top: 128px; 502 | left: 128px; 503 | 504 | width: 12px; 505 | height: 12px; 506 | 507 | transform: translate(-50%, -50%); 508 | pointer-events: none; 509 | 510 | border: 2px solid rgba(0,0,0,.4); 511 | border-radius: 50%; 512 | } 513 | 514 | .satus-color-picker__cursor.invert 515 | { 516 | border-color: rgba(255,255,255,.4) 517 | } 518 | 519 | .satus-color-picker__slider 520 | { 521 | width: calc(100% - 32px); 522 | height: 16px; 523 | border: 1px solid rgba(0,0,0,.2); 524 | border-radius: 4px; 525 | box-sizing: border-box; 526 | margin: 24px 16px 16px; 527 | position: relative; 528 | } 529 | 530 | .satus-color-picker__slider::after 531 | { 532 | content: ''; 533 | position: absolute; 534 | left: 0; 535 | top: 0; 536 | width: 100%; 537 | height: 100%; 538 | background: linear-gradient(90deg, transparent, #000); 539 | } 540 | 541 | .satus-color-picker__thumb 542 | { 543 | position: absolute; 544 | left: 0px; 545 | top: 10px; 546 | width: 12px; 547 | height: 10px; 548 | background: #fff; 549 | box-shadow: 0 1px 1px rgba(0,0,0,.2); 550 | z-index: 1; 551 | transform: translateX(-50%); 552 | } 553 | 554 | .satus-color-picker__thumb::before 555 | { 556 | content: ''; 557 | position: absolute; 558 | width: 0; 559 | height: 0; 560 | left: 0; 561 | top: -6px; 562 | border-left: 6px solid transparent; 563 | border-right: 6px solid transparent; 564 | border-bottom: 6px solid #fff; 565 | pointer-events: none; 566 | } 567 | 568 | .satus-color-picker__value 569 | { 570 | width: 28px; 571 | height: 28px; 572 | margin: 0 8px 0 0; 573 | 574 | border: 2px solid #dcdcdc; 575 | border-radius: 4px; 576 | } 577 | 578 | 579 | /*--------------------------------------------------------------- 580 | >>> DIALOG 581 | ----------------------------------------------------------------- 582 | 1.0 General 583 | 2.0 Other 584 | 3.0 Actions 585 | ---------------------------------------------------------------*/ 586 | 587 | /*--------------------------------------------------------------- 588 | 1.0 GENERAL 589 | ---------------------------------------------------------------*/ 590 | 591 | .satus-dialog 592 | { 593 | position: absolute; 594 | z-index: 100; 595 | top: 0; 596 | left: 0; 597 | 598 | display: flex; 599 | 600 | width: 100vw; 601 | height: 100vh; 602 | 603 | justify-content: center; 604 | align-items: center; 605 | } 606 | 607 | .satus-dialog__scrim 608 | { 609 | position: absolute; 610 | top: 0; 611 | left: 0; 612 | 613 | width: 100%; 614 | height: 100%; 615 | 616 | animation: fadeIn 150ms linear forwards; 617 | 618 | opacity: 0; 619 | background: var(--satus-theme-dialog-backdrop); 620 | 621 | backdrop-filter: blur(8px); 622 | } 623 | 624 | .satus-dialog__surface 625 | { 626 | font-size: 14px; 627 | 628 | display: flex; 629 | flex-direction: column; 630 | 631 | width: 95%; 632 | min-width: 240px; 633 | max-width: 560px; 634 | max-height: 80%; 635 | padding: 8px 0; 636 | 637 | transform: scale(.8); 638 | animation: zoomIn 150ms linear forwards; 639 | animation-delay: 20ms; 640 | 641 | opacity: 0; 642 | color: var(--satus-theme-dialog-text); 643 | border-radius: 6px; 644 | background-color: var(--satus-theme-dialog); 645 | box-shadow: var(--satus-theme-dialog-shadow); 646 | } 647 | 648 | .satus-dialog--closing .satus-dialog__scrim 649 | { 650 | animation: fadeOut 70ms linear forwards; 651 | } 652 | 653 | .satus-dialog--closing .satus-dialog__surface 654 | { 655 | animation: zoomOut 70ms linear forwards; 656 | } 657 | 658 | 659 | /*--------------------------------------------------------------- 660 | 2.0 OTHER 661 | ---------------------------------------------------------------*/ 662 | 663 | .satus-dialog .satus-button 664 | { 665 | justify-content: flex-start; 666 | } 667 | 668 | .satus-dialog__message 669 | { 670 | width: calc(100% - 32px); 671 | margin: 0 16px; 672 | } 673 | 674 | 675 | /*--------------------------------------------------------------- 676 | 3.0 ACTIONS 677 | ---------------------------------------------------------------*/ 678 | 679 | .satus-section--actions 680 | { 681 | width: calc(100% - 24px); 682 | margin: 0 20px; 683 | 684 | justify-content: flex-end; 685 | } 686 | 687 | .satus-section--actions .satus-button 688 | { 689 | font-weight: 600; 690 | 691 | color: var(--satus-theme-primary); 692 | } 693 | 694 | 695 | /*--------------------------------------------------------------- 696 | >>> HEADER 697 | ----------------------------------------------------------------- 698 | 1.0 Basic 699 | 2.0 Buttons 700 | 2.1 Back 701 | 3.0 Title 702 | 4.0 Vertical menu 703 | ---------------------------------------------------------------*/ 704 | 705 | /*--------------------------------------------------------------- 706 | 1.0 BASIC 707 | ---------------------------------------------------------------*/ 708 | 709 | .satus-header 710 | { 711 | position: relative; 712 | z-index: 1; 713 | 714 | display: flex; 715 | 716 | box-sizing: border-box; 717 | width: 100%; 718 | min-height: 56px; 719 | padding: 0 8px; 720 | 721 | color: var(--satus-theme-header-text); 722 | background-color: var(--satus-theme-header); 723 | box-shadow: 0 0 3px rgba(0,0,0,.1); 724 | 725 | fill: var(--satus-theme-header-text); 726 | } 727 | 728 | 729 | /*--------------------------------------------------------------- 730 | 2.0 BUTTONS 731 | ---------------------------------------------------------------*/ 732 | 733 | .satus-header .satus-button 734 | { 735 | width: 36px; 736 | height: 36px; 737 | padding: 6px; 738 | 739 | border-radius: 50%; 740 | } 741 | 742 | 743 | /*--------------------------------------------------------------- 744 | 3.0 BACK BUTTON 745 | ---------------------------------------------------------------*/ 746 | 747 | .satus-button--back 748 | { 749 | position: absolute; 750 | } 751 | 752 | body[data-appearance='home'] .satus-button--back 753 | { 754 | visibility: hidden; 755 | } 756 | 757 | 758 | /*--------------------------------------------------------------- 759 | 3.0 TITLE 760 | ---------------------------------------------------------------*/ 761 | 762 | .satus-header .satus-text--title 763 | { 764 | font-size: 15px; 765 | font-weight: 400; 766 | 767 | position: absolute; 768 | left: 56px; 769 | 770 | overflow: hidden; 771 | 772 | max-width: calc(100% - 148px); 773 | 774 | white-space: nowrap; 775 | text-overflow: ellipsis; 776 | } 777 | 778 | body[data-appearance='home'] .satus-text--title 779 | { 780 | left: 14px; 781 | } 782 | 783 | 784 | /*--------------------------------------------------------------- 785 | 4.0 VERTICAL MENU 786 | ---------------------------------------------------------------*/ 787 | 788 | .satus-dialog--vertical-menu .satus-dialog__surface 789 | { 790 | position: absolute; 791 | top: 8px; 792 | right: 8px; 793 | left: auto; 794 | 795 | min-width: 180px; 796 | max-width: 220px; 797 | 798 | transform-origin: right top; 799 | } 800 | 801 | .satus-dialog--vertical-menu .satus-button, 802 | .satus-dialog--vertical-menu .satus-folder, 803 | .satus-dialog--vertical-menu .satus-switch 804 | { 805 | width: 100%; 806 | height: 36px; 807 | padding: 0 16px; 808 | 809 | text-align: left; 810 | } 811 | 812 | .satus-dialog--vertical-menu svg 813 | { 814 | width: 20px !important; 815 | height: 20px !important; 816 | 817 | opacity: .75; 818 | } 819 | 820 | 821 | /*-------------------------------------------------------------- 822 | >>> LIST 823 | --------------------------------------------------------------*/ 824 | 825 | .satus-list--compact, 826 | .satus-list--compact li 827 | { 828 | margin: 0; 829 | padding: 0; 830 | 831 | list-style: none; 832 | } 833 | 834 | 835 | /*--------------------------------------------------------------- 836 | >>> MAIN 837 | ----------------------------------------------------------------- 838 | # BASIC 839 | ---------------------------------------------------------------*/ 840 | 841 | /*--------------------------------------------------------------- 842 | # BASIC 843 | ---------------------------------------------------------------*/ 844 | 845 | .satus-main 846 | { 847 | position: relative; 848 | 849 | overflow: hidden; 850 | 851 | width: 100%; 852 | height: 100%; 853 | 854 | color: var(--satus-theme-main-text); 855 | background-color: var(--satus-theme-main); 856 | 857 | flex: 1; 858 | } 859 | 860 | .satus-main__container 861 | { 862 | position: absolute; 863 | top: 0; 864 | left: 0; 865 | 866 | overflow: auto; 867 | 868 | box-sizing: border-box; 869 | width: 100%; 870 | height: 100%; 871 | 872 | transition: 250ms; 873 | 874 | background-color: var(--satus-theme-main); 875 | } 876 | 877 | /*--------------------------------------------------------------- 878 | >>> RADIO GROUP 879 | ---------------------------------------------------------------*/ 880 | 881 | .satus-button--radio 882 | { 883 | flex-direction: column; 884 | 885 | height: auto; 886 | padding: 16px 8px; 887 | } 888 | 889 | .satus-button--radio .satus-button__label 890 | { 891 | margin: 0; 892 | } 893 | 894 | 895 | .satus-scrollbar 896 | { 897 | position: relative; 898 | 899 | overflow: hidden; 900 | 901 | width: 100%; 902 | height: 100%; 903 | } 904 | 905 | .satus-scrollbar__wrapper 906 | { 907 | overflow-y: scroll; 908 | 909 | width: 150%; 910 | height: 100%; 911 | } 912 | 913 | .satus-scrollbar__content 914 | { 915 | display: inline-block; 916 | } 917 | 918 | .satus-scrollbar__thumb 919 | { 920 | position: absolute; 921 | z-index: 999; 922 | top: 0; 923 | right: 0; 924 | 925 | min-height: 32px; 926 | padding: 0 2px; 927 | 928 | transition: background-color 200ms, opacity 300ms; 929 | 930 | opacity: 0; 931 | } 932 | 933 | .satus-scrollbar__thumb::after 934 | { 935 | display: block; 936 | 937 | width: 3px; 938 | height: 100%; 939 | 940 | content: ''; 941 | 942 | background-color: var(--satus-theme-scrollbar); 943 | } 944 | 945 | .satus-scrollbar__thumb:hover::after 946 | { 947 | background-color: var(--satus-theme-scrollbar-focus); 948 | } 949 | 950 | .satus-scrollbar.active .satus-scrollbar__thumb, 951 | .satus-scrollbar__thumb:hover 952 | { 953 | transition: background-color 200ms, opacity 100ms; 954 | 955 | opacity: 1; 956 | } 957 | 958 | 959 | /*-------------------------------------------------------------- 960 | >>> SECTION 961 | --------------------------------------------------------------*/ 962 | 963 | .satus-section 964 | { 965 | display: inline-flex; 966 | 967 | box-sizing: border-box; 968 | 969 | align-items: center; 970 | flex: 1; 971 | } 972 | 973 | .satus-section--card 974 | { 975 | display: block; 976 | 977 | width: calc(100% - 16px); 978 | max-width: 900px; 979 | margin: 8px auto; 980 | padding: 8px 0; 981 | 982 | border: 1px solid rgba(0,0,0,.1); 983 | border-radius: 8px; 984 | background-color: var(--satus-theme-section); 985 | } 986 | 987 | 988 | /*--------------------------------------------------------------- 989 | >>> SELECT 990 | ---------------------------------------------------------------*/ 991 | 992 | .satus-select > svg 993 | { 994 | width: 20px; 995 | } 996 | 997 | .satus-select > svg + .satus-select__label 998 | { 999 | margin: 0 0 0 8px; 1000 | } 1001 | 1002 | .satus-select__value 1003 | { 1004 | font-size: 12px; 1005 | 1006 | text-align: right; 1007 | 1008 | opacity: .7; 1009 | 1010 | flex: 1; 1011 | } 1012 | 1013 | 1014 | .satus-dialog--select-component .satus-dialog__surface 1015 | { 1016 | position: absolute; 1017 | 1018 | max-width: unset; 1019 | 1020 | transform: unset; 1021 | animation: unset; 1022 | 1023 | opacity: 1; 1024 | } 1025 | 1026 | .satus-dialog--select-component .satus-section 1027 | { 1028 | top: 48px; 1029 | 1030 | flex-direction: column; 1031 | 1032 | transform: translateY(-16px); 1033 | animation: listIn 50ms linear forwards; 1034 | animation-delay: 20ms; 1035 | 1036 | opacity: .5; 1037 | } 1038 | 1039 | .satus-dialog--select-component .satus-button 1040 | { 1041 | width: 100%; 1042 | height: 48px; 1043 | padding: 0 16px; 1044 | } 1045 | 1046 | @keyframes listIn 1047 | { 1048 | from 1049 | { 1050 | transform: translateY(-16px); 1051 | 1052 | opacity: .5; 1053 | } 1054 | to 1055 | { 1056 | transform: translateY(0); 1057 | 1058 | opacity: 1; 1059 | } 1060 | } 1061 | 1062 | .satus-section--align-end 1063 | { 1064 | justify-content: flex-end; 1065 | } 1066 | 1067 | 1068 | .satus-button--select 1069 | { 1070 | justify-content: space-between; 1071 | } 1072 | 1073 | 1074 | /*--------------------------------------------------------------- 1075 | >>> SHORTCUT 1076 | ----------------------------------------------------------------- 1077 | # Canvas 1078 | # Popup 1079 | ---------------------------------------------------------------*/ 1080 | 1081 | .satus-shortcut 1082 | { 1083 | position: relative; 1084 | 1085 | display: flex; 1086 | overflow: hidden; 1087 | 1088 | box-sizing: border-box; 1089 | width: 100%; 1090 | height: 48px; 1091 | min-height: 48px; 1092 | padding: 0 16px; 1093 | 1094 | cursor: pointer; 1095 | 1096 | justify-content: space-between; 1097 | align-items: center; 1098 | } 1099 | 1100 | .satus-shortcut:hover 1101 | { 1102 | background-color: var(--satus-theme-ripple); 1103 | } 1104 | 1105 | .satus-shortcut .satus-shortcut__label 1106 | { 1107 | flex: 1; 1108 | } 1109 | 1110 | .satus-shortcut .satus-shortcut__value 1111 | { 1112 | flex: 0; 1113 | } 1114 | 1115 | .satus-shortcut .satus-shortcut__label + .satus-shortcut__value 1116 | { 1117 | justify-content: flex-end; 1118 | } 1119 | 1120 | 1121 | /*--------------------------------------------------------------- 1122 | # CANVAS 1123 | ---------------------------------------------------------------*/ 1124 | 1125 | .satus-shortcut__value 1126 | { 1127 | display: flex; 1128 | 1129 | box-sizing: border-box; 1130 | width: 100%; 1131 | height: 48px; 1132 | 1133 | align-items: center; 1134 | } 1135 | 1136 | 1137 | .satus-shortcut__key 1138 | { 1139 | font-size: 12px; 1140 | line-height: 12px; 1141 | 1142 | display: flex; 1143 | 1144 | box-sizing: border-box; 1145 | min-width: 28px; 1146 | height: 28px; 1147 | padding: 4px 8px; 1148 | 1149 | white-space: nowrap; 1150 | 1151 | border: 1px solid rgba(0,0,0,.1); 1152 | border-radius: 4px; 1153 | background: var(--satus-theme-shortcut); 1154 | box-shadow: 0 1px 1px rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.1); 1155 | 1156 | align-items: center; 1157 | justify-content: center; 1158 | } 1159 | 1160 | .satus-shortcut__plus 1161 | { 1162 | position: relative; 1163 | 1164 | width: 10px; 1165 | height: 10px; 1166 | margin: 8px 6px; 1167 | } 1168 | 1169 | .satus-shortcut__plus::before 1170 | { 1171 | position: absolute; 1172 | top: 0; 1173 | left: 4px; 1174 | 1175 | width: 2px; 1176 | height: 10px; 1177 | 1178 | content: ''; 1179 | 1180 | background-color: #ccc; 1181 | } 1182 | 1183 | .satus-shortcut__plus::after 1184 | { 1185 | position: absolute; 1186 | top: 4px; 1187 | left: 0; 1188 | 1189 | width: 10px; 1190 | height: 2px; 1191 | 1192 | content: ''; 1193 | 1194 | background-color: #ccc; 1195 | } 1196 | 1197 | .satus-shortcut__mouse 1198 | { 1199 | position: relative; 1200 | 1201 | display: flex; 1202 | 1203 | width: 24px; 1204 | height: 32px; 1205 | 1206 | border-radius: 50%; 1207 | border-top-left-radius: 12px; 1208 | border-top-right-radius: 12px; 1209 | background: #fff; 1210 | box-shadow: 0 1px 3px rgba(0,0,0,.15), inset 0 -3px 0 rgba(0,0,0,.1); 1211 | } 1212 | 1213 | .satus-shortcut__mouse > div 1214 | { 1215 | position: absolute; 1216 | top: 0; 1217 | left: 11px; 1218 | 1219 | width: 2px; 1220 | height: 10px; 1221 | 1222 | border-radius: 2px; 1223 | background: #ccc; 1224 | } 1225 | 1226 | .satus-shortcut__mouse::before 1227 | { 1228 | position: absolute; 1229 | top: 0; 1230 | left: 18px; 1231 | 1232 | width: 2px; 1233 | height: 14px; 1234 | 1235 | content: ''; 1236 | 1237 | background: #f96754; 1238 | } 1239 | 1240 | .satus-shortcut__mouse.false::after 1241 | { 1242 | position: absolute; 1243 | top: -5px; 1244 | left: 15px; 1245 | 1246 | width: 0; 1247 | height: 0; 1248 | 1249 | content: ''; 1250 | 1251 | border-right: 4px solid transparent; 1252 | border-bottom: 6px solid #f96754; 1253 | border-left: 4px solid transparent; 1254 | } 1255 | 1256 | .satus-shortcut__mouse.true::after 1257 | { 1258 | position: absolute; 1259 | top: 13px; 1260 | left: 15px; 1261 | 1262 | width: 0; 1263 | height: 0; 1264 | 1265 | content: ''; 1266 | 1267 | border-top: 6px solid #f96754; 1268 | border-right: 4px solid transparent; 1269 | border-left: 4px solid transparent; 1270 | } 1271 | 1272 | .satus-shortcut__mouse.click::before 1273 | { 1274 | position: absolute; 1275 | top: 0; 1276 | left: -1px; 1277 | 1278 | width: 10px; 1279 | height: 10px; 1280 | 1281 | content: ''; 1282 | 1283 | border-radius: 50%; 1284 | background: #f96754; 1285 | } 1286 | 1287 | .satus-shortcut__mouse.context::before 1288 | { 1289 | position: absolute; 1290 | top: 0; 1291 | left: 15px; 1292 | 1293 | width: 10px; 1294 | height: 10px; 1295 | 1296 | content: ''; 1297 | 1298 | border-radius: 50%; 1299 | background: #f96754; 1300 | } 1301 | 1302 | 1303 | /*--------------------------------------------------------------- 1304 | # POPUP 1305 | ---------------------------------------------------------------*/ 1306 | 1307 | .satus-shortcut-dialog-label 1308 | { 1309 | font-size: 16px; 1310 | font-weight: 500; 1311 | 1312 | box-sizing: border-box; 1313 | width: 100%; 1314 | margin: 4px 0 10px; 1315 | padding: 0 16px; 1316 | } 1317 | 1318 | .satus-shortcut__canvas 1319 | { 1320 | display: flex; 1321 | 1322 | box-sizing: border-box; 1323 | width: 100%; 1324 | height: 68px; 1325 | padding: 16px; 1326 | 1327 | background: #dedede; 1328 | 1329 | align-items: center; 1330 | } 1331 | 1332 | .satus-section_shortcut 1333 | { 1334 | width: 100%; 1335 | margin: 8px 0 0; 1336 | 1337 | justify-content: flex-end; 1338 | } 1339 | 1340 | .satus-button_shortcut 1341 | { 1342 | font-weight: 500; 1343 | 1344 | overflow: hidden; 1345 | 1346 | height: 28px; 1347 | min-height: 28px; 1348 | margin-right: 2px; 1349 | padding: 4px 8px; 1350 | 1351 | text-transform: uppercase; 1352 | 1353 | color: #f96754; 1354 | border-radius: 4px; 1355 | } 1356 | 1357 | 1358 | /*-------------------------------------------------------------- 1359 | >>> SLIDER 1360 | --------------------------------------------------------------*/ 1361 | 1362 | .satus-slider 1363 | { 1364 | position: relative; 1365 | 1366 | display: flex; 1367 | flex-direction: column; 1368 | 1369 | box-sizing: border-box; 1370 | width: 100%; 1371 | min-height: 64px; 1372 | padding: 0 16px; 1373 | 1374 | -webkit-user-select: none; 1375 | -moz-user-select: -moz-none; 1376 | user-select: none; 1377 | 1378 | outline: none; 1379 | 1380 | align-items: flex-start; 1381 | justify-content: center; 1382 | } 1383 | 1384 | .satus-slider::before 1385 | { 1386 | position: absolute; 1387 | top: 0; 1388 | left: 0; 1389 | 1390 | width: 100%; 1391 | height: 100%; 1392 | 1393 | content: ''; 1394 | 1395 | opacity: 0; 1396 | background-color: var(--satus-theme-button); 1397 | } 1398 | 1399 | .satus-slider:hover::before 1400 | { 1401 | opacity: 1; 1402 | } 1403 | 1404 | 1405 | /* LABEL */ 1406 | 1407 | .satus-slider__label 1408 | { 1409 | cursor: default; 1410 | } 1411 | 1412 | 1413 | .satus-slider__range 1414 | { 1415 | position: absolute; 1416 | z-index: 1; 1417 | top: 0; 1418 | left: 0; 1419 | 1420 | box-sizing: border-box; 1421 | width: 100%; 1422 | height: 100%; 1423 | margin: 0; 1424 | padding: 0; 1425 | 1426 | opacity: 0; 1427 | } 1428 | 1429 | 1430 | /* TRACK */ 1431 | 1432 | .satus-slider__container 1433 | { 1434 | position: relative; 1435 | 1436 | width: 100%; 1437 | height: 12px; 1438 | margin: 8px 0 0; 1439 | } 1440 | 1441 | .satus-slider__track-container 1442 | { 1443 | position: absolute; 1444 | top: calc(50% - 1px); 1445 | 1446 | width: 100%; 1447 | height: 2px; 1448 | 1449 | pointer-events: none; 1450 | } 1451 | 1452 | .satus-slider__track-container::before 1453 | { 1454 | position: absolute; 1455 | top: 0; 1456 | left: 0; 1457 | 1458 | width: 100%; 1459 | height: 2px; 1460 | 1461 | content: ''; 1462 | 1463 | opacity: .26; 1464 | background-color: var(--satus-theme-primary); 1465 | } 1466 | 1467 | .satus-slider__track 1468 | { 1469 | position: relative; 1470 | 1471 | width: 0; 1472 | height: 100%; 1473 | 1474 | background-color: var(--satus-theme-primary); 1475 | 1476 | will-change: width; 1477 | } 1478 | 1479 | .satus-slider:not(.satus-slider--dragging) .satus-slider__track 1480 | { 1481 | transition: width 100ms ease-out; 1482 | } 1483 | 1484 | .satus-slider__thumb 1485 | { 1486 | position: absolute; 1487 | top: -5px; 1488 | right: -12px; 1489 | 1490 | width: 12px; 1491 | height: 12px; 1492 | 1493 | border-radius: 50%; 1494 | background-color: var(--satus-theme-primary); 1495 | box-shadow: 0 1px 5px rgba(0, 0, 0, .15); 1496 | } 1497 | 1498 | .satus-slider .satus-slider__thumb::before 1499 | { 1500 | font-size: 13px; 1501 | 1502 | position: absolute; 1503 | top: -34px; 1504 | left: 50%; 1505 | 1506 | visibility: hidden; 1507 | 1508 | box-sizing: border-box; 1509 | min-width: 28px; 1510 | padding: 4px 4px; 1511 | 1512 | content: attr(data-value); 1513 | transform: translateX(-50%); 1514 | text-align: center; 1515 | pointer-events: none; 1516 | 1517 | color: #fff; 1518 | border-radius: 4px; 1519 | background: var(--satus-theme-tooltip); 1520 | } 1521 | 1522 | .satus-slider:hover .satus-slider__thumb::before, 1523 | .satus-slider__range:focus .satus-slider__container .satus-slider__thumb::before 1524 | { 1525 | visibility: visible; 1526 | } 1527 | 1528 | .satus-slider__ring 1529 | { 1530 | position: absolute; 1531 | top: -11px; 1532 | right: -18px; 1533 | 1534 | width: 24px; 1535 | height: 24px; 1536 | 1537 | transition: 100ms; 1538 | transform: scale(0); 1539 | 1540 | opacity: 0; 1541 | border-radius: 50%; 1542 | background-color: var(--satus-theme-primary); 1543 | } 1544 | 1545 | .satus-slider__range:focus + .satus-slider__container .satus-slider__ring 1546 | { 1547 | transform: scale(1); 1548 | 1549 | opacity: .25; 1550 | } 1551 | 1552 | 1553 | /*-------------------------------------------------------------- 1554 | >>> SWITCH 1555 | --------------------------------------------------------------*/ 1556 | 1557 | .satus-switch 1558 | { 1559 | position: relative; 1560 | 1561 | display: flex; 1562 | 1563 | box-sizing: border-box; 1564 | width: 100%; 1565 | height: 48px; 1566 | padding: 0 16px; 1567 | 1568 | cursor: pointer; 1569 | -webkit-user-select: none; 1570 | -moz-user-select: -moz-none; 1571 | user-select: none; 1572 | 1573 | background-color: transparent; 1574 | 1575 | align-items: center; 1576 | justify-content: flex-start; 1577 | } 1578 | 1579 | .satus-switch:hover 1580 | { 1581 | background-color: var(--satus-theme-hover); 1582 | } 1583 | 1584 | .satus-switch__input 1585 | { 1586 | position: absolute; 1587 | z-index: 1; 1588 | top: 0; 1589 | left: 0; 1590 | 1591 | width: 100%; 1592 | height: 100%; 1593 | margin: 0; 1594 | padding: 0; 1595 | 1596 | opacity: 0; 1597 | outline: none; 1598 | 1599 | -webkit-appearance: none; 1600 | } 1601 | 1602 | 1603 | /* LABEL */ 1604 | 1605 | .satus-switch > * + .satus-switch__label { 1606 | margin: 0 0 0 8px; 1607 | } 1608 | 1609 | .satus-switch__label 1610 | { 1611 | padding: 0 16px 0 0; 1612 | } 1613 | 1614 | 1615 | /* TRACK*/ 1616 | 1617 | .satus-switch__value 1618 | { 1619 | display: inline-flex; 1620 | justify-content: flex-end; 1621 | align-items: center; 1622 | flex: 1; 1623 | } 1624 | 1625 | .satus-switch__track 1626 | { 1627 | position: relative; 1628 | 1629 | width: 32px; 1630 | min-width: 32px; 1631 | height: 18px; 1632 | 1633 | border-radius: 18px; 1634 | background: #bdbdbd; 1635 | } 1636 | 1637 | .satus-switch__track::before 1638 | { 1639 | position: absolute; 1640 | top: -7px; 1641 | left: -7px; 1642 | 1643 | width: 32px; 1644 | height: 32px; 1645 | 1646 | content: ''; 1647 | transition: left .1s cubic-bezier(.4, 0, .2, 1), transform 200ms, background-color 200ms; 1648 | transform: scale(0); 1649 | 1650 | opacity: 0; 1651 | border-radius: 50%; 1652 | background-color: #000; 1653 | 1654 | will-change: left, transform, background-color; 1655 | } 1656 | 1657 | .satus-switch__input:checked + .satus-switch__value .satus-switch__track::before 1658 | { 1659 | left: 8px; 1660 | 1661 | background-color: var(--satus-theme-primary, #54d2a3); 1662 | } 1663 | 1664 | .satus-switch__input:focus + .satus-switch__value .satus-switch__track::before 1665 | { 1666 | transform: scale(1); 1667 | 1668 | opacity: .08; 1669 | } 1670 | 1671 | .satus-switch__input:checked:focus + .satus-switch__value .satus-switch__track::before 1672 | { 1673 | opacity: .25; 1674 | } 1675 | 1676 | .satus-switch__track::after 1677 | { 1678 | position: absolute; 1679 | 1680 | width: 14px; 1681 | height: 14px; 1682 | 1683 | content: ''; 1684 | transition: transform .1s cubic-bezier(.4, 0, .2, 1); 1685 | transform: translate(2px, 2px); 1686 | 1687 | border-radius: 50%; 1688 | background-color: #fff; 1689 | 1690 | will-change: transform; 1691 | } 1692 | 1693 | .satus-switch__input:checked + .satus-switch__value .satus-switch__track 1694 | { 1695 | background: var(--satus-theme-primary, #54d2a3); 1696 | } 1697 | 1698 | .satus-switch__input:checked + .satus-switch__value .satus-switch__track::after 1699 | { 1700 | transform: translate(16px, 2px); 1701 | } 1702 | 1703 | 1704 | /*--------------------------------------------------------------- 1705 | >>> TABLE 1706 | ----------------------------------------------------------------- 1707 | # Head 1708 | # Body 1709 | # Paging 1710 | ---------------------------------------------------------------*/ 1711 | 1712 | .satus-table 1713 | { 1714 | font-size: 14px; 1715 | 1716 | position: relative; 1717 | 1718 | overflow: hidden; 1719 | 1720 | box-sizing: border-box; 1721 | 1722 | border: 1px solid #ececec; 1723 | border-radius: 6px; 1724 | } 1725 | 1726 | 1727 | /*--------------------------------------------------------------- 1728 | # HEAD 1729 | ---------------------------------------------------------------*/ 1730 | 1731 | .satus-table__head 1732 | { 1733 | position: relative; 1734 | z-index: 1; 1735 | 1736 | display: flex; 1737 | 1738 | box-sizing: border-box; 1739 | width: 100%; 1740 | height: 44px; 1741 | padding: 0 8px; 1742 | 1743 | background: #fff; 1744 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1); 1745 | } 1746 | 1747 | .satus-table__head > div 1748 | { 1749 | font-weight: 600; 1750 | 1751 | display: inline-flex; 1752 | 1753 | box-sizing: border-box; 1754 | padding: 0 8px 0 0; 1755 | 1756 | opacity: .7; 1757 | 1758 | flex-shrink: 0; 1759 | align-items: center; 1760 | } 1761 | 1762 | .satus-table__head > div:last-child 1763 | { 1764 | padding: 0; 1765 | } 1766 | 1767 | .satus-table__head > div:hover 1768 | { 1769 | cursor: pointer; 1770 | 1771 | opacity: 1; 1772 | } 1773 | 1774 | .satus-table__head > div[data-sorting=false]:hover 1775 | { 1776 | cursor: default; 1777 | } 1778 | 1779 | .satus-table__head > div > span 1780 | { 1781 | overflow: hidden; 1782 | 1783 | white-space: nowrap; 1784 | text-overflow: ellipsis; 1785 | 1786 | flex: 1; 1787 | } 1788 | 1789 | .satus-table__head > div[data-sorting=asc]::after 1790 | { 1791 | content: ''; 1792 | 1793 | border-right: 4px solid transparent; 1794 | border-bottom: 5px solid currentColor; 1795 | border-left: 4px solid transparent; 1796 | } 1797 | 1798 | .satus-table__head > div[data-sorting=desc]::after 1799 | { 1800 | content: ''; 1801 | 1802 | border-top: 5px solid currentColor; 1803 | border-right: 4px solid transparent; 1804 | border-left: 4px solid transparent; 1805 | } 1806 | 1807 | 1808 | /*--------------------------------------------------------------- 1809 | # BODY 1810 | ---------------------------------------------------------------*/ 1811 | 1812 | .satus-table__body 1813 | { 1814 | overflow: hidden; 1815 | 1816 | width: 100%; 1817 | height: calc(100% - 39px); 1818 | 1819 | background: #fff; 1820 | 1821 | flex: 1; 1822 | } 1823 | 1824 | .satus-table__row 1825 | { 1826 | padding: 0 8px; 1827 | 1828 | border-bottom: 1px solid rgba(0, 0, 0, .1); 1829 | } 1830 | 1831 | .satus-table__row:nth-child(2n) 1832 | { 1833 | background: rgba(0,0,0,.03); 1834 | } 1835 | 1836 | .satus-table__cell 1837 | { 1838 | display: inline-block; 1839 | overflow: hidden; 1840 | 1841 | box-sizing: border-box; 1842 | padding: 8px 8px 8px 0; 1843 | 1844 | white-space: nowrap; 1845 | text-overflow: ellipsis; 1846 | word-wrap: break-word; 1847 | -webkit-hyphens: auto; 1848 | -moz-hyphens: auto; 1849 | hyphens: auto; 1850 | 1851 | overflow-wrap: break-word; 1852 | } 1853 | 1854 | .satus-table__cell:last-child 1855 | { 1856 | padding-right: 0; 1857 | } 1858 | 1859 | .satus-table__cell input 1860 | { 1861 | box-sizing: border-box; 1862 | width: 100%; 1863 | height: calc(100% - 10px); 1864 | margin: 5px 0; 1865 | padding: 1px 2px; 1866 | 1867 | border: 1px solid #d2d2d2; 1868 | border-radius: 4px; 1869 | outline: none; 1870 | } 1871 | 1872 | 1873 | /*--------------------------------------------------------------- 1874 | # PAGING 1875 | ---------------------------------------------------------------*/ 1876 | 1877 | .satus-table__paging > button 1878 | { 1879 | min-width: 32px; 1880 | height: 32px; 1881 | padding: 0 8px; 1882 | 1883 | cursor: pointer; 1884 | 1885 | color: var(--satus-theme-on-surface, #555); 1886 | border: none; 1887 | background: transparent; 1888 | } 1889 | 1890 | .satus-table__paging > button.active 1891 | { 1892 | color: #2979ff; 1893 | } 1894 | 1895 | /*-------------------------------------------------------------- 1896 | >>> TABS 1897 | --------------------------------------------------------------*/ 1898 | 1899 | .satus-tabs__bar 1900 | { 1901 | position: relative; 1902 | 1903 | display: flex; 1904 | overflow: hidden; 1905 | 1906 | box-sizing: border-box; 1907 | width: calc(100% - 16px); 1908 | margin: 16px 8px 4px; 1909 | 1910 | border: 1px solid var(--satus-theme-tabs-border); 1911 | border-radius: 18px; 1912 | background-color: var(--satus-theme-tabs-background); 1913 | } 1914 | 1915 | .satus-tabs__bar > div:not(.satus-tabs__bar--select) 1916 | { 1917 | z-index: 1; 1918 | 1919 | display: flex; 1920 | 1921 | height: 32px; 1922 | 1923 | cursor: pointer; 1924 | transition: opacity .25s; 1925 | 1926 | opacity: .5; 1927 | 1928 | flex: 1; 1929 | align-items: center; 1930 | justify-content: center; 1931 | } 1932 | 1933 | .satus-tabs__bar > div.active 1934 | { 1935 | opacity: 1; 1936 | } 1937 | 1938 | .satus-tabs__bar--select 1939 | { 1940 | position: absolute; 1941 | z-index: 0; 1942 | left: 0; 1943 | 1944 | width: 50%; 1945 | height: 32px; 1946 | 1947 | transition: left .25s; 1948 | 1949 | border-radius: 18px; 1950 | background: var(--satus-theme-header); 1951 | box-shadow: 1px 0 4px rgba(0,0,0,.075); 1952 | } 1953 | 1954 | .satus-tabs__main 1955 | { 1956 | position: relative 1957 | } 1958 | 1959 | .satus-tabs__main > div 1960 | { 1961 | display: inline-block; 1962 | width: 100%; 1963 | min-height: 100%; 1964 | } 1965 | 1966 | .satus-tabs__main > .old 1967 | { 1968 | position: absolute; 1969 | left: 0; 1970 | top: 0; 1971 | } 1972 | 1973 | .satus-tabs__tab.satus-animation--fade-out-left:not(.old) 1974 | { 1975 | z-index: 1 1976 | } 1977 | 1978 | 1979 | /*-------------------------------------------------------------- 1980 | >>> TEXT 1981 | --------------------------------------------------------------*/ 1982 | 1983 | .satus-text 1984 | { 1985 | display: block; 1986 | } 1987 | 1988 | .satus-text--section-label 1989 | { 1990 | font-size: 17px; 1991 | 1992 | display: block; 1993 | 1994 | width: calc(100% - 16px); 1995 | max-width: 900px; 1996 | margin: 16px auto 8px; 1997 | } 1998 | 1999 | 2000 | /*--------------------------------------------------------------- 2001 | >>> TEXT 2002 | ---------------------------------------------------------------*/ 2003 | 2004 | .satus-text-field 2005 | { 2006 | font: inherit; 2007 | 2008 | box-sizing: border-box; 2009 | width: 100%; 2010 | margin: 0; 2011 | padding: 0; 2012 | padding: 0 8px; 2013 | 2014 | color: inherit; 2015 | border: none; 2016 | outline: none; 2017 | background: unset; 2018 | } -------------------------------------------------------------------------------- /src/css/basic.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> INDEX: 3 | ----------------------------------------------------------------- 4 | # Font 5 | # Body 6 | ---------------------------------------------------------------*/ 7 | 8 | /*--------------------------------------------------------------- 9 | # FONT 10 | ---------------------------------------------------------------*/ 11 | 12 | @font-face 13 | { 14 | font-family: 'Open Sans'; 15 | font-weight: 400; 16 | 17 | src: url('assets/fonts/OpenSans-Regular.ttf'); 18 | } 19 | 20 | @font-face 21 | { 22 | font-family: 'Open Sans'; 23 | font-weight: 700; 24 | 25 | src: url('assets/fonts/OpenSans-SemiBold.ttf'); 26 | } 27 | 28 | body, 29 | input, 30 | textarea, 31 | button 32 | { 33 | font-family: 'Open Sans', sans-serif; 34 | } 35 | 36 | 37 | /*--------------------------------------------------------------- 38 | # BASIC 39 | ---------------------------------------------------------------*/ 40 | 41 | body 42 | { 43 | font-size: .875rem; 44 | 45 | display: flex; 46 | overflow: hidden; 47 | flex-direction: column; 48 | 49 | width: 100vw; 50 | height: 100vh; 51 | margin: 0; 52 | 53 | background-color: var(--satus-theme-main); 54 | } 55 | -------------------------------------------------------------------------------- /src/css/header.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> HEADER 3 | ----------------------------------------------------------------- 4 | 1.0 Buttons 5 | 1.1 Back button 6 | 2.0 Title 7 | 3.0 Right section 8 | 4.0 Search 9 | 5.0 Vertical menu 10 | ---------------------------------------------------------------*/ 11 | 12 | .satus-header 13 | { 14 | z-index: 2; 15 | 16 | min-height: 64px; 17 | 18 | border-bottom: 2px solid #006eff; 19 | box-shadow: 0 2px 2px rgb(0, 0, 0, .3); 20 | } 21 | 22 | body[data-compact-mode='true'] .satus-header 23 | { 24 | min-height: 38px; 25 | padding-left: 0; 26 | } 27 | 28 | .satus-section--align-start 29 | { 30 | position: relative; 31 | } 32 | 33 | /*--------------------------------------------------------------- 34 | 1.0 BUTTONS 35 | ---------------------------------------------------------------*/ 36 | 37 | .satus-header .satus-button 38 | { 39 | width: 36px; 40 | height: 36px; 41 | padding: 6px; 42 | } 43 | 44 | .satus-header .satus-button::before 45 | { 46 | border-radius: 50%; 47 | } 48 | 49 | 50 | /*--------------------------------------------------------------- 51 | 2.0 SEARCH 52 | ---------------------------------------------------------------*/ 53 | 54 | .satus-header__search-engine__back 55 | { 56 | position: absolute; 57 | 58 | width: 16px !important; 59 | height: 16px !important; 60 | margin: 10px; 61 | 62 | background: #ffd740; 63 | } 64 | 65 | .satus-header__search-engine 66 | { 67 | position: absolute; 68 | 69 | background-repeat: no-repeat; 70 | background-position: center; 71 | background-size: 16px; 72 | } 73 | 74 | .satus-header .satus-button.satus-header__search-button 75 | { 76 | position: absolute; 77 | right: 8px; 78 | 79 | padding: 9px; 80 | 81 | cursor: pointer; 82 | 83 | color: #888; 84 | } 85 | 86 | .satus-header__text-field 87 | { 88 | width: 100%; 89 | max-width: 1024px; 90 | height: 38px; 91 | padding: 10px 8px 10px 36px; 92 | 93 | color: #888; 94 | border-radius: 4px; 95 | background-color: #fff; 96 | } 97 | 98 | body[data-compact-mode='true'] .satus-header__text-field 99 | { 100 | border-top: none; 101 | border-left: none; 102 | border-radius: 0; 103 | } 104 | 105 | .satus-header__text-field--show-results 106 | { 107 | border-bottom-right-radius: 0; 108 | border-bottom-left-radius: 0; 109 | } 110 | 111 | .satus-search-results 112 | { 113 | position: absolute; 114 | z-index: 9999999999; 115 | top: 50px; 116 | left: 0; 117 | 118 | display: none; 119 | 120 | width: 100%; 121 | max-width: 1024px; 122 | min-height: 32px; 123 | 124 | background: #fff; 125 | box-shadow: 0 8px 8px 4px rgb(0,0,0,.25); 126 | } 127 | 128 | .satus-search-results img 129 | { 130 | margin: 3px 0 0; 131 | } 132 | 133 | .satus-header__text-field--show-results + .satus-search-results 134 | { 135 | display: block; 136 | } 137 | 138 | .satus-dialog--search-engine .satus-dialog__scrim 139 | { 140 | opacity: 0; 141 | 142 | backdrop-filter: none; 143 | } 144 | 145 | .satus-dialog--search-engine .satus-dialog__surface 146 | { 147 | position: absolute; 148 | top: 40px; 149 | left: 8px; 150 | 151 | width: auto; 152 | min-width: 0; 153 | 154 | transform: none !important; 155 | animation: none; 156 | 157 | opacity: 1; 158 | box-shadow: 0 8px 8px 4px rgb(0,0,0,.25); 159 | } 160 | 161 | .satus-dialog--search-engine .satus-dialog__surface > button:hover 162 | { 163 | background: rgba(0,0,0,.05); 164 | } 165 | 166 | 167 | 168 | .satus-search-results a 169 | { 170 | display: inline-flex; 171 | 172 | box-sizing: border-box; 173 | width: 100%; 174 | height: 32px; 175 | padding: 0 16px 0 38px; 176 | 177 | text-decoration: none; 178 | 179 | color: #1b1b1b; 180 | 181 | justify-content: flex-start; 182 | align-items: center; 183 | } 184 | 185 | .satus-search-results a.focused 186 | { 187 | background: rgba(0,0,0,.1); 188 | } 189 | 190 | .satus-search-results a span 191 | { 192 | margin: 0 0 0 8px; 193 | 194 | opacity: .75; 195 | } 196 | 197 | 198 | /*--------------------------------------------------------------- 199 | 3.0 RIGHT SECTION 200 | ---------------------------------------------------------------*/ 201 | 202 | .satus-section--align-end 203 | { 204 | justify-content: flex-end; 205 | } 206 | 207 | .satus-section--align-end .satus-button + .satus-button 208 | { 209 | margin-left: 8px; 210 | } 211 | 212 | 213 | /*--------------------------------------------------------------- 214 | 5.0 VERTICAL MENU 215 | ---------------------------------------------------------------*/ 216 | 217 | .satus-dialog--vertical-menu .satus-dialog__scrim 218 | { 219 | background: rgba(0,0,0,.7); 220 | 221 | backdrop-filter: blur(4px); 222 | } 223 | 224 | .satus-dialog--vertical-menu .satus-dialog__surface 225 | { 226 | position: absolute; 227 | top: 8px; 228 | right: 8px; 229 | left: auto; 230 | 231 | min-width: 180px; 232 | max-width: 180px; 233 | 234 | transform-origin: right top; 235 | } 236 | 237 | .satus-dialog--vertical-menu .satus-button, 238 | .satus-dialog--vertical-menu .satus-button 239 | { 240 | width: 100%; 241 | height: 36px; 242 | padding: 0 16px; 243 | 244 | text-align: left; 245 | } 246 | 247 | .satus-dialog--vertical-menu .satus-button svg, 248 | .satus-dialog--vertical-menu .satus-button svg 249 | { 250 | width: 20px; 251 | height: 18px; 252 | margin: 0 14px 0 0; 253 | 254 | opacity: .75; 255 | 256 | fill: none; 257 | stroke: var(--satus-theme-primary); 258 | } 259 | 260 | .satus-dialog--vertical-menu .satus-button--github svg 261 | { 262 | width: 18px; 263 | height: 18px; 264 | } 265 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> MAIN 3 | ---------------------------------------------------------------- 4 | # Checkbox 5 | # Loader 6 | --------------------------------------------------------------*/ 7 | 8 | .satus-main 9 | { 10 | margin: 8px 0; 11 | } 12 | 13 | .satus-main__container 14 | { 15 | display: flex; 16 | 17 | justify-content: space-between; 18 | } 19 | 20 | 21 | /*-------------------------------------------------------------- 22 | # CHECKBOX 23 | --------------------------------------------------------------*/ 24 | 25 | .satus-switch--checkbox 26 | { 27 | padding: 0; 28 | 29 | justify-content: center; 30 | } 31 | 32 | .satus-switch--checkbox:hover 33 | { 34 | background-color: unset; 35 | } 36 | 37 | .satus-switch--checkbox .satus-switch__label 38 | { 39 | margin: 0 0 0 16px; 40 | 41 | flex: 1; 42 | } 43 | 44 | .satus-switch--checkbox .satus-switch__track 45 | { 46 | width: 22px; 47 | min-width: 22px; 48 | max-width: 22px; 49 | height: 22px; 50 | min-height: 22px; 51 | max-height: 22px; 52 | 53 | border-radius: 50%; 54 | background: transparent; 55 | box-shadow: inset 0 0 0 1px #bdbdbd; 56 | } 57 | 58 | .satus-switch--checkbox .satus-switch__track::before 59 | { 60 | position: absolute; 61 | top: 7px; 62 | left: 5px; 63 | 64 | visibility: hidden; 65 | 66 | width: 10px; 67 | height: 5px; 68 | 69 | transition: unset; 70 | transform: rotate(-45deg); 71 | 72 | opacity: 0; 73 | border: 2px solid #fff; 74 | border-top: none; 75 | border-right: none; 76 | border-radius: unset; 77 | background-color: transparent; 78 | } 79 | 80 | .satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track::before 81 | { 82 | top: 7px; 83 | left: 5px; 84 | 85 | visibility: visible; 86 | 87 | transform: rotate(-45deg); 88 | 89 | opacity: 1; 90 | background-color: transparent; 91 | } 92 | 93 | .satus-switch--checkbox .satus-switch__track::after 94 | { 95 | content: none; 96 | } 97 | 98 | .satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track 99 | { 100 | background-color: #f6b465; 101 | box-shadow: none; 102 | } 103 | 104 | 105 | /*-------------------------------------------------------------- 106 | # LOADER 107 | --------------------------------------------------------------*/ 108 | 109 | body.loading::after 110 | { 111 | font-size: 64px; 112 | 113 | position: fixed; 114 | z-index: 9999; 115 | top: 0; 116 | left: 0; 117 | 118 | display: flex; 119 | 120 | width: 100vw; 121 | height: 100vh; 122 | 123 | content: '...'; 124 | 125 | color: rgba(255,255,255,.8); 126 | background: rgba(0,0,0,.8); 127 | 128 | justify-content: center; 129 | align-items: center; 130 | } 131 | -------------------------------------------------------------------------------- /src/css/media.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------- 2 | >>> TABLES 3 | -----------------------------------------------------------------------------*/ 4 | 5 | @media (max-width: 1365px) 6 | { 7 | .satus-section--dashboard 8 | { 9 | flex-direction: column; 10 | } 11 | 12 | .satus-section--dashboard #table-domain, 13 | .satus-section--dashboard #table-url, 14 | .satus-section--dashboard #table-search 15 | { 16 | width: calc(100% - 16px); 17 | } 18 | 19 | #table-url 20 | { 21 | flex: 1; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/css/tables.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> TABLES 3 | ----------------------------------------------------------------- 4 | # Global 5 | # By domain 6 | # By URL 7 | # By params 8 | # Pinned tabs 9 | # Compact mode 10 | 11 | # Inner elements 12 | # Toolbar 13 | ---------------------------------------------------------------*/ 14 | 15 | /*--------------------------------------------------------------- 16 | # GLOBAL 17 | ---------------------------------------------------------------*/ 18 | 19 | .satus-section--tables 20 | { 21 | width: 100vw; 22 | 23 | background-color: transparent !important; 24 | 25 | align-items: flex-start; 26 | } 27 | 28 | .satus-table 29 | { 30 | height: calc(100vh - 80px); 31 | 32 | border: 1px solid #e1e4eb; 33 | border-radius: 4px; 34 | } 35 | 36 | .satus-dropdown-list .satus-table 37 | { 38 | height: auto; 39 | max-height: calc(50vh - 80px); 40 | } 41 | 42 | .satus-table__head 43 | { 44 | height: 39px; 45 | 46 | color: #6e7d91; 47 | border-bottom: 1px solid #d5d5dd; 48 | background: #f1f1f4; 49 | box-shadow: 0 1px 2px rgb(0 0 0 / 10%); 50 | } 51 | 52 | .satus-table__body 53 | { 54 | background: #fff; 55 | } 56 | 57 | .satus-table__row:nth-child(2n) 58 | { 59 | background: transparent; 60 | } 61 | 62 | 63 | /*--------------------------------------------------------------- 64 | # BY DOMAIN 65 | ---------------------------------------------------------------*/ 66 | 67 | #by-domain 68 | { 69 | margin: 0 8px 8px; 70 | 71 | flex: 1; 72 | } 73 | 74 | #by-domain .satus-table__head > div:nth-child(1), 75 | #by-domain .satus-table__cell:nth-child(1) 76 | { 77 | width: 68px; 78 | } 79 | 80 | #by-domain .satus-table__head > div:nth-child(2), 81 | #by-domain .satus-table__cell:nth-child(2) 82 | { 83 | width: 28px; 84 | } 85 | 86 | #by-domain .satus-table__cell:nth-child(2) 87 | { 88 | padding: 0 8px 0 0; 89 | 90 | text-overflow: unset; 91 | } 92 | 93 | #by-domain .satus-table__head > div:nth-child(3), 94 | #by-domain .satus-table__cell:nth-child(3) 95 | { 96 | width: calc(100% - 96px); 97 | } 98 | 99 | 100 | /*--------------------------------------------------------------- 101 | # BY URL 102 | ---------------------------------------------------------------*/ 103 | 104 | #by-url 105 | { 106 | margin: 0 8px 8px 0; 107 | 108 | flex: 2; 109 | } 110 | 111 | #by-url .satus-table__row:hover 112 | { 113 | cursor: default; 114 | 115 | background-color: rgba(0,0,0,.075); 116 | } 117 | 118 | #by-url .satus-table__head > div:nth-child(1), 119 | #by-url .satus-table__cell:nth-child(1) 120 | { 121 | width: 68px; 122 | } 123 | 124 | #by-url .satus-table__head > div:nth-child(2), 125 | #by-url .satus-table__cell:nth-child(2) 126 | { 127 | width: calc(50% - 82px); 128 | } 129 | 130 | #by-url .satus-table__head > div:nth-child(3), 131 | #by-url .satus-table__cell:nth-child(3) 132 | { 133 | width: calc(50% - 82px); 134 | } 135 | 136 | #by-url .satus-table__cell:nth-child(3) 137 | { 138 | color: #1e6fdb; 139 | } 140 | 141 | #by-url .satus-table__head > div:nth-child(4), 142 | #by-url .satus-table__cell:nth-child(4) 143 | { 144 | width: 28px; 145 | padding: 0 8px 0 0; 146 | 147 | text-overflow: unset; 148 | } 149 | 150 | #by-url .satus-table__head > div:nth-child(5), 151 | #by-url .satus-table__cell:nth-child(5) 152 | { 153 | width: 68px; 154 | padding-top: 0; 155 | padding-bottom: 0; 156 | } 157 | 158 | .satus-button--star[data-value='false'] svg 159 | { 160 | fill: transparent; 161 | } 162 | 163 | .satus-button--star[data-value='true'] svg 164 | { 165 | fill: var(--satus-theme-primary); 166 | stroke: var(--satus-theme-primary); 167 | } 168 | 169 | 170 | /*--------------------------------------------------------------- 171 | # BY PARAMS 172 | ---------------------------------------------------------------*/ 173 | 174 | #by-params 175 | { 176 | margin: 0 8px 8px 0; 177 | 178 | flex: 1; 179 | } 180 | 181 | #by-params .satus-table__head > div:nth-child(1), 182 | #by-params .satus-table__cell:nth-child(1) 183 | { 184 | width: 68px; 185 | } 186 | 187 | #by-params .satus-table__head > div:nth-child(2), 188 | #by-params .satus-table__cell:nth-child(2) 189 | { 190 | width: 28px; 191 | } 192 | 193 | #by-params .satus-table__cell:nth-child(2) 194 | { 195 | padding: 0 8px 0 0; 196 | 197 | text-overflow: unset; 198 | } 199 | 200 | #by-params .satus-table__head > div:nth-child(3), 201 | #by-params .satus-table__cell:nth-child(3) 202 | { 203 | width: calc(100% - 96px); 204 | } 205 | 206 | 207 | /*--------------------------------------------------------------- 208 | # PINNED TABS 209 | ---------------------------------------------------------------*/ 210 | 211 | #pinned 212 | { 213 | margin: 0 8px 8px 0; 214 | 215 | flex: 1; 216 | } 217 | 218 | #pinned .satus-table__head > div:nth-child(1), 219 | #pinned .satus-table__cell:nth-child(1) 220 | { 221 | width: 28px; 222 | } 223 | 224 | #pinned .satus-table__cell:nth-child(1) 225 | { 226 | padding: 0 8px 0 0; 227 | 228 | text-overflow: unset; 229 | 230 | opacity: .5; 231 | } 232 | 233 | #pinned .satus-table__cell:nth-child(1):hover 234 | { 235 | opacity: 1; 236 | } 237 | 238 | .satus-button--pin[data-value=true] 239 | { 240 | color: #00f; 241 | } 242 | 243 | #pinned .satus-table__head > div:nth-child(2), 244 | #pinned .satus-table__cell:nth-child(2) 245 | { 246 | width: calc(100% - 36px); 247 | } 248 | 249 | 250 | /*--------------------------------------------------------------- 251 | # COMPACT MODE 252 | ---------------------------------------------------------------*/ 253 | 254 | body[data-compact-mode='true'] .satus-table 255 | { 256 | height: calc(100vh - 38px); 257 | 258 | border: none; 259 | border-radius: 0; 260 | } 261 | 262 | body[data-compact-mode='true'] #by-domain, 263 | body[data-compact-mode='true'] #by-url, 264 | body[data-compact-mode='true'] #by-params, 265 | body[data-compact-mode='true'] #pinned 266 | { 267 | margin: 0; 268 | } 269 | 270 | body[data-compact-mode='true'] #by-domain, 271 | body[data-compact-mode='true'] #by-url, 272 | body[data-compact-mode='true'] #by-params 273 | { 274 | border-right: 1px solid #ddd; 275 | } 276 | 277 | 278 | /*--------------------------------------------------------------- 279 | # INNER ELEMENTS 280 | ---------------------------------------------------------------*/ 281 | 282 | .satus-table a 283 | { 284 | text-decoration: none; 285 | 286 | color: currentColor; 287 | } 288 | 289 | .satus-table img 290 | { 291 | width: 16px; 292 | height: 16px; 293 | margin: 0 8px -3px 0; 294 | } 295 | 296 | .satus-table .satus-button 297 | { 298 | width: auto; 299 | height: auto; 300 | padding: 0; 301 | } 302 | 303 | .satus-button--dropdown 304 | { 305 | width: 20px; 306 | height: 20px; 307 | padding: 2px; 308 | } 309 | 310 | .satus-button--star 311 | { 312 | width: 20px; 313 | height: 20px; 314 | padding: 0; 315 | } 316 | 317 | .satus-button--dropdown svg:last-child 318 | { 319 | display: none; 320 | } 321 | 322 | .satus-button--dropdown.opened svg:first-child 323 | { 324 | display: none; 325 | } 326 | 327 | .satus-button--dropdown.opened svg:last-child 328 | { 329 | display: block; 330 | } 331 | 332 | .satus-button--dropdown svg, 333 | .satus-button--star svg, 334 | .satus-button--pin svg 335 | { 336 | pointer-events: none; 337 | } 338 | 339 | .satus-button--dropdown::before, 340 | .satus-button--star::before 341 | { 342 | content: none; 343 | } 344 | 345 | 346 | 347 | .satus-input--tags 348 | { 349 | box-sizing: border-box; 350 | width: 100%; 351 | height: calc(100% - 10px); 352 | margin: 5px 0; 353 | padding: 1px 2px; 354 | 355 | border: 1px solid #d2d2d2; 356 | border-radius: 4px; 357 | outline: none; 358 | } 359 | 360 | 361 | 362 | 363 | 364 | .satus-dropdown-list 365 | { 366 | width: 100%; 367 | margin: 0 0 8px 0; 368 | } 369 | 370 | .satus-dropdown-list a 371 | { 372 | color: #1e6fdb; 373 | } 374 | 375 | #by-domain .satus-dropdown-list .satus-table__cell:nth-child(2) 376 | { 377 | width: 60px; 378 | } 379 | 380 | #by-domain .satus-dropdown-list .satus-table__cell:nth-child(3) 381 | { 382 | width: calc(100% - 132px); 383 | } 384 | 385 | .satus-table__row.selected 386 | { 387 | background-color: rgba(255, 255, 0, .3); 388 | } 389 | 390 | 391 | /*--------------------------------------------------------------- 392 | # TOOLBAR 393 | ---------------------------------------------------------------*/ 394 | 395 | .satus-table--toolbar 396 | { 397 | display: none; 398 | 399 | height: 38px; 400 | padding: 0 8px; 401 | 402 | background: #fff; 403 | box-shadow: 0 -2px 4px rgba(0, 0, 0, .1); 404 | } 405 | 406 | .satus-table--selected .satus-table--toolbar 407 | { 408 | display: flex; 409 | } 410 | 411 | .satus-table--selected .satus-table__body 412 | { 413 | height: calc(100% - 39px - 38px); 414 | } 415 | 416 | .satus-table--toolbar > *:nth-child(5) 417 | { 418 | width: 68px; 419 | } 420 | 421 | 422 | .satus-table--toolbar > *:nth-child(4) 423 | { 424 | width: 28px; 425 | 426 | text-overflow: unset; 427 | } 428 | 429 | .satus-table--toolbar .satus-button 430 | { 431 | font-weight: 700; 432 | 433 | width: auto; 434 | margin: 0 8px 0 0; 435 | padding: 0 8px; 436 | } 437 | -------------------------------------------------------------------------------- /src/css/themes.css: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> THEMES 3 | ---------------------------------------------------------------- 4 | 1.0 Default 5 | 2.0 Dark 6 | --------------------------------------------------------------*/ 7 | 8 | /*--------------------------------------------------------------- 9 | 1.0 DEFAULT 10 | ---------------------------------------------------------------*/ 11 | 12 | html { 13 | --satus-theme-primary: #f6b465; 14 | 15 | --satus-theme-header: #2684ff; 16 | --satus-theme-header-text: #fff; 17 | 18 | --satus-theme-main: #f7fafc; 19 | } 20 | 21 | 22 | /*--------------------------------------------------------------- 23 | 2.0 DARK 24 | ---------------------------------------------------------------*/ 25 | 26 | html[theme="dark"] 27 | { 28 | --satus-theme-primary: #f6b465; 29 | 30 | --satus-theme-dialog: #2c2b2c; 31 | --satus-theme-dialog-text: #b5b5b5; 32 | 33 | --satus-theme-header: #343334; 34 | --satus-theme-header-text: #b5b5b5; 35 | 36 | --satus-theme-main: #2c2b2c; 37 | --satus-theme-main-text: #b5b5b5; 38 | 39 | --satus-theme-section: #343334; 40 | 41 | --satus-theme-button: transparent; 42 | 43 | --satus-theme-scrollbar: rgba(255, 255, 255, .2); 44 | --satus-theme-scrollbar-focus: rgba(255, 255, 255, .4); 45 | 46 | --satus-theme-tooltip: rgba(10, 10, 10, .7); 47 | 48 | --satus-theme-ripple: rgba(255, 255, 255, .04); 49 | } 50 | -------------------------------------------------------------------------------- /src/js/header.js: -------------------------------------------------------------------------------- 1 | function dataSearch(event) { 2 | var value = event.target.value; 3 | 4 | if (HISTORY_MANAGER.SEARCH.INTERVAL) { 5 | clearInterval(HISTORY_MANAGER.SEARCH.INTERVAL); 6 | 7 | HISTORY_MANAGER.SEARCH.DOMAINS = {}; 8 | 9 | HISTORY_MANAGER.SEARCH.INDEX = 0; 10 | } 11 | 12 | if (value.length === 0) { 13 | updateTable1(true, HISTORY_MANAGER.DOMAINS); 14 | updateTable2(true, HISTORY_MANAGER.PAGES); 15 | updateTable3(true, HISTORY_MANAGER.PARAMS); 16 | 17 | return; 18 | } 19 | 20 | HISTORY_MANAGER.SEARCH.INTERVAL = setInterval(function() { 21 | if (HISTORY_MANAGER.SEARCH.INDEX < HISTORY_MANAGER.LENGTH[0]) { 22 | for (var i = HISTORY_MANAGER.SEARCH.INDEX, l = HISTORY_MANAGER.LENGTH[0]; i < l; i++) { 23 | HISTORY_MANAGER.SEARCH.INDEX++; 24 | var key = HISTORY_MANAGER.KEYS[0][i]; 25 | 26 | if (key.indexOf(value) !== -1 || (HISTORY_MANAGER.DOMAINS[key].title || '').indexOf(value) !== -1) { 27 | HISTORY_MANAGER.SEARCH.DOMAINS[key] = HISTORY_MANAGER.DOMAINS[key]; 28 | } 29 | } 30 | } else if (HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[0] < HISTORY_MANAGER.KEYS[1].length) { 31 | for (var i = HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[0], l = HISTORY_MANAGER.KEYS[1].length; i < l; i++) { 32 | HISTORY_MANAGER.SEARCH.INDEX++; 33 | var key = HISTORY_MANAGER.KEYS[1][i]; 34 | 35 | if (key.indexOf(value) !== -1 || (HISTORY_MANAGER.PAGES[key].title || '').indexOf(value) !== -1) { 36 | HISTORY_MANAGER.SEARCH.PAGES[key] = HISTORY_MANAGER.PAGES[key]; 37 | } 38 | } 39 | } else if (HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[1] < HISTORY_MANAGER.KEYS[2].length) { 40 | for (var i = HISTORY_MANAGER.SEARCH.INDEX - HISTORY_MANAGER.LENGTH[1], l = HISTORY_MANAGER.KEYS[2].length; i < l; i++) { 41 | HISTORY_MANAGER.SEARCH.INDEX++; 42 | 43 | var key = HISTORY_MANAGER.KEYS[2][i]; 44 | 45 | if (key.indexOf(value) !== -1) { 46 | HISTORY_MANAGER.SEARCH.PARAMS[key] = HISTORY_MANAGER.DOMAINS[key]; 47 | } 48 | } 49 | } 50 | 51 | if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[0]) { 52 | document.querySelector('#by-domain').pagingIndex = 0; 53 | 54 | updateTable1(true, HISTORY_MANAGER.SEARCH.DOMAINS); 55 | 56 | HISTORY_MANAGER.SEARCH.DOMAINS = {}; 57 | } else if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[1]) { 58 | document.querySelector('#by-url').pagingIndex = 0; 59 | 60 | updateTable2(true, HISTORY_MANAGER.SEARCH.PAGES); 61 | 62 | HISTORY_MANAGER.SEARCH.PAGES = {}; 63 | } else if (HISTORY_MANAGER.SEARCH.INDEX === HISTORY_MANAGER.LENGTH[2]) { 64 | document.querySelector('#by-params').pagingIndex = 0; 65 | 66 | updateTable3(true, HISTORY_MANAGER.SEARCH.PARAMS); 67 | 68 | HISTORY_MANAGER.SEARCH.PARAMS = {}; 69 | HISTORY_MANAGER.SEARCH.INDEX = 0; 70 | 71 | clearInterval(HISTORY_MANAGER.SEARCH.INTERVAL); 72 | } 73 | }, 100); 74 | } 75 | 76 | function updateSearchResults(search_field) { 77 | var value = search_field.value; 78 | 79 | if (value.length > 0 && value.match(/[^ ]/)) { 80 | var sorted = Object.keys(HISTORY_MANAGER.DOMAINS).map((key) => [key, HISTORY_MANAGER.DOMAINS[key]]).sort(function(a, b) { 81 | return b[1] - a[1]; 82 | }); 83 | 84 | search_results_element.innerHTML = ''; 85 | 86 | for (var i = 0, l = sorted.length; i < l; i++) { 87 | var key = sorted[i][0], 88 | s = key.indexOf(value); 89 | 90 | if (s === 0) { 91 | search_results_element.innerHTML += '' + key + ''; 92 | } else if (key.indexOf('www.') === 0 && s === 4) { 93 | var url = key.replace('www.', ''); 94 | 95 | search_results_element.innerHTML += '' + url + ''; 96 | } 97 | } 98 | 99 | search_results_element.innerHTML += '' + search_field.value + ' ' + searchEngine.title + ' Search'; 100 | 101 | search_field.classList.add('satus-header__text-field--show-results'); 102 | 103 | setTimeout(function() { 104 | var element = document.querySelector('.satus-search-results a'); 105 | 106 | if (element) { 107 | element.classList.add('focused'); 108 | } 109 | }); 110 | } else { 111 | search_field.classList.remove('satus-header__text-field--show-results'); 112 | } 113 | } 114 | 115 | function chooseSearchEngine(event) { 116 | searchEngine = { 117 | title: this.innerText, 118 | url: this.dataset.url, 119 | icon: this.dataset.icon 120 | }; 121 | 122 | document.querySelector('.satus-header__search-engine').style.backgroundImage = 'url(chrome://favicon/' + searchEngine.icon + ')'; 123 | 124 | document.querySelector('.satus-dialog__scrim').click(); 125 | 126 | satus.storage.set('searchEngine', searchEngine); 127 | } 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | /*-------------------------------------------------------------- 137 | >>> TABLE OF CONTENTS: 138 | ---------------------------------------------------------------- 139 | # Skeleton 140 | --------------------------------------------------------------*/ 141 | 142 | /*-------------------------------------------------------------- 143 | # SKELETON 144 | --------------------------------------------------------------*/ 145 | 146 | var searchEngine = { 147 | title: 'Google', 148 | icon: 'https://www.google.com/', 149 | url: 'https://www.google.com/search?q=' 150 | }; 151 | 152 | var Menu = { 153 | header: { 154 | type: 'header', 155 | 156 | section_start: { 157 | type: 'section', 158 | class: 'satus-section--align-start', 159 | 160 | search_engine_back: { 161 | type: 'button', 162 | class: 'satus-header__search-engine__back' 163 | }, 164 | search_engine: { 165 | type: 'button', 166 | class: 'satus-header__search-engine', 167 | dataset: { 168 | icon: 'https://www.google.com/search', 169 | url: 'https://www.google.com/?q=' 170 | }, 171 | style: { 172 | backgroundImage: 'url(chrome://favicon/https://www.google.com/)' 173 | }, 174 | onclick: { 175 | type: 'dialog', 176 | class: 'satus-dialog--search-engine', 177 | scrollbar: false, 178 | 179 | google: { 180 | type: 'button', 181 | label: 'Google', 182 | dataset: { 183 | icon: 'https://www.google.com/', 184 | url: 'https://www.google.com/search?q=' 185 | }, 186 | onclick: chooseSearchEngine 187 | }, 188 | youtube: { 189 | type: 'button', 190 | label: 'YouTube', 191 | dataset: { 192 | icon: 'https://www.youtube.com/', 193 | url: 'https://www.youtube.com/results?search_query=' 194 | }, 195 | onclick: chooseSearchEngine 196 | }, 197 | duckduckgo: { 198 | type: 'button', 199 | label: 'DuckDuckGo', 200 | dataset: { 201 | icon: 'https://duckduckgo.com/', 202 | url: 'https://duckduckgo.com/?q=' 203 | }, 204 | onclick: chooseSearchEngine 205 | }, 206 | bing: { 207 | type: 'button', 208 | label: 'Bing', 209 | dataset: { 210 | icon: 'https://bing.com/', 211 | url: 'https://bing.com/search?q=' 212 | }, 213 | onclick: chooseSearchEngine 214 | }, 215 | yahoo: { 216 | type: 'button', 217 | label: 'Yahoo!', 218 | dataset: { 219 | icon: 'https://search.yahoo.com/', 220 | url: 'https://search.yahoo.com/search?p=' 221 | }, 222 | onclick: chooseSearchEngine 223 | }, 224 | ecosia: { 225 | type: 'button', 226 | label: 'Ecosia', 227 | dataset: { 228 | icon: 'https://www.ecosia.org/', 229 | url: 'https://www.ecosia.org/search?q=' 230 | }, 231 | onclick: chooseSearchEngine 232 | }, 233 | history: { 234 | type: 'button', 235 | label: 'History', 236 | onclick: chooseSearchEngine 237 | } 238 | } 239 | }, 240 | search_field: { 241 | type: 'text-field', 242 | class: 'satus-header__text-field', 243 | placeholder: 'Search', 244 | onkeydown: function(event) { 245 | if (event.keyCode === 13) { 246 | setTimeout(function() { 247 | var focused = document.querySelector('.satus-search-results a.focused'); 248 | 249 | if (focused) { 250 | window.open(focused.href, '_self') 251 | } 252 | }); 253 | } else if (event.keyCode === 38) { 254 | var focused = document.querySelector('.satus-search-results a.focused'), 255 | prev = focused.previousElementSibling || focused.parentNode.lastElementChild; 256 | 257 | focused.classList.remove('focused'); 258 | 259 | prev.classList.add('focused'); 260 | } else if (event.keyCode === 40) { 261 | var focused = document.querySelector('.satus-search-results a.focused'), 262 | next = focused.nextElementSibling || focused.parentNode.firstElementChild; 263 | 264 | focused.classList.remove('focused'); 265 | 266 | next.classList.add('focused'); 267 | } 268 | }, 269 | oninput: function(event) { 270 | if (searchEngine.title === 'History') { 271 | if (all_loading === false) { 272 | if (all_loaded === false) { 273 | all_loading = true; 274 | 275 | satus.storage.import('_all', function(item) { 276 | HISTORY_MANAGER.DOMAINS = item.domains; 277 | HISTORY_MANAGER.PAGES = item.pages; 278 | 279 | document.querySelector('#by-domain').data = updateTable1(); 280 | document.querySelector('#by-url').data = updateTable2(); 281 | document.querySelector('#by-params').data = updateTable3(); 282 | 283 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 284 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 285 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 286 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 287 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 288 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 289 | 290 | all_loaded = true; 291 | all_loading = false; 292 | 293 | dataSearch(event); 294 | }); 295 | } else { 296 | dataSearch(event); 297 | } 298 | } 299 | } else { 300 | updateSearchResults(this); 301 | } 302 | }, 303 | onrender: function() { 304 | var self = this; 305 | 306 | setTimeout(function() { 307 | self.focus(); 308 | }, 500); 309 | } 310 | }, 311 | dropdown_menu: { 312 | type: 'div', 313 | class: 'satus-search-results' 314 | }, 315 | search_icon: { 316 | type: 'button', 317 | class: 'satus-header__search-button', 318 | before: '' 319 | } 320 | }, 321 | section_end: { 322 | type: 'section', 323 | class: 'satus-section--align-end', 324 | 325 | button: { 326 | type: 'button', 327 | before: '', 328 | 329 | onclick: { 330 | type: 'dialog', 331 | class: 'satus-dialog--vertical-menu', 332 | 333 | language: { 334 | type: 'select', 335 | label: 'language', 336 | options: [{ 337 | label: 'English', 338 | value: 'en' 339 | }, { 340 | label: 'Русский', 341 | value: 'ru' 342 | }] 343 | }, 344 | compact_mode: { 345 | type: 'switch', 346 | label: 'compactMode', 347 | storage_key: 'compact_mode', 348 | onclick: function() { 349 | setTimeout(function() { 350 | document.body.dataset.compactMode = satus.storage.get('compact_mode'); 351 | 352 | setTimeout(function() { 353 | window.dispatchEvent(new Event('resize')); 354 | }); 355 | }); 356 | } 357 | } 358 | } 359 | } 360 | } 361 | } 362 | }; -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> INDEX 3 | ---------------------------------------------------------------*/ 4 | 5 | var HISTORY_MANAGER = { 6 | DOMAINS: {}, 7 | PAGES: {}, 8 | PARAMS: {}, 9 | PINNED: {}, 10 | 11 | KEYS: [ 12 | [], 13 | [], 14 | [] 15 | ], 16 | 17 | LENGTH: [0, 0, 0], 18 | 19 | SEARCH: { 20 | INDEX: 0, 21 | INTERVAL: false, 22 | 23 | DOMAINS: {}, 24 | PAGES: {}, 25 | PARAMS: {}, 26 | PINNED: {} 27 | }, 28 | 29 | NEW: {} 30 | }; 31 | 32 | function updateData(new_items, current_items) { 33 | if (new_items) { 34 | if (new_items.domains) { 35 | for (var key in new_items.domains) { 36 | if (current_items.domains[key] || current_items.domains[key] === 0) { 37 | current_items.domains[key] += new_items.domains[key]; 38 | } 39 | } 40 | } 41 | 42 | if (new_items.pages) { 43 | for (var key in new_items.pages) { 44 | if (current_items.pages[key]) { 45 | current_items.pages[key].visitCount += new_items.pages[key].visitCount; 46 | } else { 47 | current_items.pages[key] = new_items.pages[key]; 48 | } 49 | } 50 | } 51 | 52 | if (new_items.params) { 53 | for (var key in new_items.params) { 54 | if (current_items.params[key] || current_items.params[key] === 0) { 55 | current_items.params[key] += new_items.params[key]; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | console.time('start'); 63 | 64 | function init() { 65 | if (location.href.indexOf('?loaded') === -1) { 66 | location.replace(location.href + '?loaded'); 67 | 68 | return false; 69 | } 70 | 71 | satus.storage.import('language', function(language) { 72 | satus.updateStorageKeys(Menu); 73 | 74 | satus.locale.import(language || 'en', function() { 75 | satus.storage.import('compact_mode', function(compact_mode) { 76 | document.body.dataset.compactMode = compact_mode; 77 | }); 78 | 79 | satus.storage.import('_new', function(_new) { 80 | var _new = _new || { 81 | domains: {}, 82 | pages: {}, 83 | params: {} 84 | }; 85 | 86 | satus.storage.import('_top', function(_top) { 87 | var _top = _top || { 88 | domains: {}, 89 | pages: {}, 90 | params: {} 91 | }; 92 | 93 | //backgroundFetch('https://www.google.com/favicon.ico', 'updateSearchEngineIcon'); 94 | 95 | updateData(_new, _top); 96 | 97 | HISTORY_MANAGER.NEW = _new; 98 | 99 | HISTORY_MANAGER.DOMAINS = _top.domains; 100 | HISTORY_MANAGER.PAGES = _top.pages; 101 | HISTORY_MANAGER.PARAMS = _top.params; 102 | 103 | updateTable1(); 104 | updateTable3(); 105 | 106 | Menu.main.section.table_01.pages = Math.ceil(satus.storage.data._top.length[0] / 100); 107 | Menu.main.section.table_02.pages = Math.ceil(satus.storage.data._top.length[1] / 100); 108 | Menu.main.section.table_03.pages = Math.ceil(satus.storage.data._top.length[2] / 100); 109 | 110 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 111 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 112 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 113 | 114 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 115 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 116 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 117 | 118 | satus.render(Menu, document.body); 119 | 120 | search_results_element = document.querySelector('.satus-search-results'); 121 | 122 | updateTable2(true); 123 | 124 | console.timeEnd('start'); 125 | 126 | satus.storage.import('pinned', function(pinned) { 127 | HISTORY_MANAGER.PINNED = pinned; 128 | 129 | updateTable4(); 130 | 131 | satus.storage.import('searchEngine', function(item) { 132 | if (item) { 133 | searchEngine = item; 134 | 135 | document.querySelector('.satus-header__search-engine').style.backgroundImage = 'url(chrome://favicon/' + searchEngine.icon + ')'; 136 | } 137 | }); 138 | }); 139 | }); 140 | }); 141 | }); 142 | }); 143 | } 144 | 145 | init(); 146 | 147 | 148 | chrome.runtime.onMessage.addListener(async function(message, sender) { 149 | if (typeof message !== 'object') { 150 | return false; 151 | } 152 | 153 | if (message.action === 'history-manager--fetch-response') { 154 | if (window[message.callback]) { 155 | window[message.callback](message.response); 156 | } 157 | } 158 | }); 159 | 160 | function backgroundFetch(url, callback) { 161 | chrome.runtime.sendMessage({ 162 | action: 'history-manager--fetch', 163 | url: url, 164 | callback: callback 165 | }); 166 | } -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | var Selected = {}, 2 | all_loaded = false, 3 | all_loading = false; 4 | 5 | window.addEventListener('click', function(event) { 6 | var target = event.target; 7 | 8 | if (target.classList.contains('satus-button--star')) { 9 | star(target); 10 | } else if (target.classList.contains('satus-button--pin')) { 11 | pin(target); 12 | } else if (!target.classList.contains('satus-input--tags')) { 13 | var is_url_table = false; 14 | 15 | for (var i = event.path.length - 2; i > 0; i--) { 16 | if (event.path[i].id === 'by-url') { 17 | is_url_table = true; 18 | } 19 | 20 | if (event.path[i].classList && event.path[i].classList.contains('satus-table__row') && is_url_table === true) { 21 | var href = event.path[i].querySelector('a').href; 22 | 23 | if (event.path[i].classList.contains('selected')) { 24 | Selected[href] = undefined; 25 | } else { 26 | Selected[href] = HISTORY_MANAGER.PAGES[href]; 27 | } 28 | 29 | event.path[i].classList.toggle('selected'); 30 | 31 | checkToolbar(); 32 | } 33 | } 34 | } 35 | }); 36 | 37 | chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 38 | if (changeInfo.hasOwnProperty('pinned')) { 39 | updateTable4(true); 40 | } 41 | }); 42 | 43 | chrome.bookmarks.onCreated.addListener(function() { 44 | updateTable2(true); 45 | }); 46 | 47 | chrome.bookmarks.onRemoved.addListener(function() { 48 | updateTable2(true); 49 | }); 50 | 51 | chrome.bookmarks.onChanged.addListener(function() { 52 | updateTable2(true); 53 | }); 54 | 55 | function checkToolbar() { 56 | var is_empty = true; 57 | 58 | for (var key in Selected) { 59 | if (Selected[key]) { 60 | is_empty = false; 61 | } 62 | } 63 | 64 | if (is_empty === false) { 65 | document.querySelector('#by-url').classList.add('satus-table--selected'); 66 | } else { 67 | document.querySelector('#by-url').classList.remove('satus-table--selected'); 68 | } 69 | 70 | window.dispatchEvent(new Event('resize')); 71 | } 72 | 73 | function parseBookmarks(items, callback) { 74 | var bookmarks = {}, 75 | threads = 0; 76 | 77 | function parse(items) { 78 | threads++; 79 | 80 | for (var i = 0, l = items.length; i < l; i++) { 81 | var item = items[i]; 82 | 83 | 84 | if (item.url) { 85 | bookmarks[item.url] = item.id; 86 | } 87 | 88 | if (item.children) { 89 | parse(item.children); 90 | } 91 | } 92 | 93 | threads--; 94 | 95 | if (threads === 0) { 96 | if (callback) { 97 | callback(bookmarks); 98 | } 99 | } 100 | } 101 | 102 | parse(items); 103 | } 104 | 105 | function star(target) { 106 | if (target.dataset.value === 'false') { 107 | chrome.bookmarks.create({ 108 | title: target.dataset.title, 109 | url: target.dataset.href, 110 | parentId: '1' 111 | }, function(item) { 112 | target.dataset.id = item.id; 113 | target.dataset.value = 'true'; 114 | }); 115 | } else { 116 | chrome.bookmarks.remove(target.dataset.id); 117 | 118 | target.dataset.value = 'false'; 119 | } 120 | } 121 | 122 | function tags() { 123 | HISTORY_MANAGER.PAGES[this.dataset.href].tags = this.value; 124 | 125 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 126 | PAGES = HISTORY_MANAGER.PAGES, 127 | PARAMS = HISTORY_MANAGER.PARAMS; 128 | 129 | satus.storage.set('HISTORY', { 130 | DOMAINS, 131 | PAGES, 132 | PARAMS 133 | }); 134 | 135 | updateTable2(true); 136 | 137 | for (var key in Selected) { 138 | Selected[key] = undefined; 139 | } 140 | 141 | checkToolbar(); 142 | } 143 | 144 | function pin(target) { 145 | var value = target.dataset.value == 'false' ? true : false; 146 | 147 | chrome.tabs.query({}, function(tabs) { 148 | for (var i = 0, l = tabs.length; i < l; i++) { 149 | var tab = tabs[i]; 150 | 151 | if (tab.url === target.dataset.href) { 152 | chrome.tabs.update(tab.id, { 153 | pinned: value 154 | }); 155 | 156 | target.dataset.value = value; 157 | } 158 | } 159 | }); 160 | } 161 | 162 | function loadAll(item) { 163 | if (all_loaded === false) { 164 | console.time('loading-all'); 165 | 166 | document.body.classList.add('loading'); 167 | 168 | satus.storage.import('_all', function(_all) { 169 | var _new = satus.storage.get('_new'), 170 | _top = satus.storage.get('_top'); 171 | 172 | updateData(_new, _all); 173 | 174 | HISTORY_MANAGER.NEW.domains = {}; 175 | HISTORY_MANAGER.NEW.pages = {}; 176 | HISTORY_MANAGER.NEW.params = {}; 177 | 178 | satus.storage.set('_new', HISTORY_MANAGER.NEW); 179 | satus.storage.set('_all', _all); 180 | 181 | HISTORY_MANAGER.DOMAINS = _all.domains; 182 | HISTORY_MANAGER.PAGES = _all.pages; 183 | HISTORY_MANAGER.PARAMS = _all.params; 184 | 185 | document.querySelector('#by-domain').data = updateTable1(true); 186 | document.querySelector('#by-url').data = updateTable2(true); 187 | document.querySelector('#by-params').data = updateTable3(true); 188 | 189 | HISTORY_MANAGER.KEYS[0] = Object.keys(HISTORY_MANAGER.DOMAINS); 190 | HISTORY_MANAGER.KEYS[1] = Object.keys(HISTORY_MANAGER.PAGES); 191 | HISTORY_MANAGER.KEYS[2] = Object.keys(HISTORY_MANAGER.PARAMS); 192 | HISTORY_MANAGER.LENGTH[0] = HISTORY_MANAGER.KEYS[0].length; 193 | HISTORY_MANAGER.LENGTH[1] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length; 194 | HISTORY_MANAGER.LENGTH[2] = HISTORY_MANAGER.KEYS[0].length + HISTORY_MANAGER.KEYS[1].length + HISTORY_MANAGER.KEYS[2].length; 195 | 196 | all_loaded = true; 197 | 198 | document.querySelectorAll('.satus-table')[0].querySelector('.satus-scrollbar__wrapper').scrollTo(0, 0); 199 | 200 | document.body.classList.remove('loading'); 201 | 202 | console.timeEnd('loading-all'); 203 | 204 | var domains = Object.keys(_all.domains).map((key) => [key, _all.domains[key]]).sort(function(a, b) { 205 | return b[1] - a[1]; 206 | }), 207 | pages = Object.keys(_all.pages).map((key) => [key, _all.pages[key]]).sort(function(a, b) { 208 | return b[1].visitCount - a[1].visitCount; 209 | }); 210 | 211 | for (var i = 0; i < Math.min(100, domains.length); i++) { 212 | _top.domains[domains[i][0]] = domains[i][1]; 213 | } 214 | 215 | for (var i = 0; i < Math.min(100, pages.length); i++) { 216 | _top.pages[pages[i][0]] = pages[i][1]; 217 | } 218 | 219 | _top.length[0] = Object.keys(_all.domains).length; 220 | _top.length[1] = Object.keys(_all.pages).length; 221 | 222 | satus.storage.set('_top', _top); 223 | }); 224 | 225 | return false; 226 | } 227 | 228 | var items = document.querySelectorAll('#by-url a'); 229 | 230 | for (var i = 0, l = items.length; i < l; i++) { 231 | for (var key in Selected) { 232 | if (items[i].href === key) { 233 | items[i].parentNode.parentNode.classList.add('selected'); 234 | } 235 | } 236 | } 237 | } 238 | 239 | Menu.main = { 240 | type: 'main', 241 | scrollbar: false, 242 | 243 | section: { 244 | type: 'section', 245 | class: 'satus-section--tables', 246 | 247 | table_01: { 248 | type: 'table', 249 | id: 'by-domain', 250 | paging: 100, 251 | columns: [{ 252 | title: 'visits', 253 | sorting: 'desc' 254 | }, { 255 | title: '', 256 | onrender: function() { 257 | this.querySelector('.satus-button--dropdown').addEventListener('click', function() { 258 | var container = this.parentNode.parentNode; 259 | 260 | if (!container.querySelector('.satus-dropdown-list')) { 261 | var self = this, 262 | list = document.createElement('div'), 263 | data = [], 264 | host = this.dataset.key; 265 | 266 | list.className = 'satus-dropdown-list'; 267 | 268 | satus.storage.import(host, function(items) { 269 | for (var key in items) { 270 | var item = items[key]; 271 | 272 | data.push([{ 273 | text: item.visitCount 274 | }, {}, { 275 | text: key, 276 | html: '' + key + '' 277 | }]); 278 | } 279 | 280 | setTimeout(function() { 281 | satus.render({ 282 | type: 'table', 283 | paging: 100, 284 | columns: [{ 285 | title: 'Visits', 286 | sorting: 'desc' 287 | }, { 288 | title: '' 289 | }, { 290 | title: 'Title', 291 | onrender: function() { 292 | this.querySelector('a').innerText = this.querySelector('a').innerText; 293 | } 294 | }], 295 | data: data 296 | }, list); 297 | 298 | setTimeout(function() { 299 | list.querySelector('.satus-table__body').style.height = list.querySelector('.satus-table').offsetHeight - 39 + 'px'; 300 | 301 | list.querySelector('.satus-scrollbar').resize(); 302 | }); 303 | }); 304 | 305 | container.appendChild(list); 306 | 307 | self.classList.add('opened'); 308 | }); 309 | } else { 310 | container.querySelector('.satus-dropdown-list').remove(); 311 | 312 | this.classList.remove('opened'); 313 | } 314 | }); 315 | } 316 | }, { 317 | title: 'domain' 318 | }], 319 | beforeUpdate: loadAll 320 | }, 321 | 322 | table_02: { 323 | type: 'table', 324 | id: 'by-url', 325 | paging: 100, 326 | columns: [{ 327 | title: 'visits', 328 | sorting: 'desc' 329 | }, { 330 | title: 'title' 331 | }, { 332 | title: 'URL' 333 | }, { 334 | title: '★' 335 | }, { 336 | title: 'tags', 337 | onrender: function() { 338 | this.querySelector('.satus-input--tags').onblur = tags; 339 | } 340 | }], 341 | onrender: function() { 342 | var toolbar = document.createElement('div'); 343 | 344 | toolbar.className = 'satus-table--toolbar'; 345 | 346 | satus.render({ 347 | undo: { 348 | type: 'button', 349 | label: 'Undo', 350 | 351 | onclick: function() { 352 | var selected = document.querySelectorAll('.satus-table__row.selected') 353 | 354 | for (var key in Selected) { 355 | Selected[key] = undefined; 356 | } 357 | 358 | for (var i = 0, l = selected.length; i < l; i++) { 359 | selected[i].classList.remove('selected'); 360 | } 361 | 362 | checkToolbar(); 363 | } 364 | }, 365 | star: { 366 | type: 'button', 367 | label: 'Star', 368 | 369 | onclick: function() { 370 | for (var key in Selected) { 371 | if (Selected[key]) { 372 | Selected[key].star = 1; 373 | } 374 | } 375 | 376 | updateTable2(true); 377 | 378 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 379 | PAGES = HISTORY_MANAGER.PAGES, 380 | PARAMS = HISTORY_MANAGER.PARAMS; 381 | 382 | satus.storage.set('HISTORY', { 383 | DOMAINS, 384 | PAGES, 385 | PARAMS 386 | }); 387 | 388 | for (var key in Selected) { 389 | Selected[key] = undefined; 390 | } 391 | 392 | checkToolbar(); 393 | } 394 | }, 395 | remove: { 396 | type: 'button', 397 | label: 'Remove', 398 | 399 | onclick: function() { 400 | for (var key in Selected) { 401 | if (Selected[key]) { 402 | delete HISTORY_MANAGER.PAGES[key]; 403 | delete Selected[key]; 404 | } 405 | } 406 | 407 | updateTable2(true); 408 | 409 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 410 | PAGES = HISTORY_MANAGER.PAGES, 411 | PARAMS = HISTORY_MANAGER.PARAMS; 412 | 413 | satus.storage.set('HISTORY', { 414 | DOMAINS, 415 | PAGES, 416 | PARAMS 417 | }); 418 | 419 | for (var key in Selected) { 420 | Selected[key] = undefined; 421 | } 422 | 423 | checkToolbar(); 424 | } 425 | }, 426 | edit: { 427 | type: 'button', 428 | label: 'Edit', 429 | 430 | onclick: function() { 431 | for (var key in Selected) { 432 | if (Selected[key]) { 433 | Selected[key].tags = this.parentNode.querySelector('input').value; 434 | } 435 | } 436 | 437 | updateTable2(true); 438 | 439 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 440 | PAGES = HISTORY_MANAGER.PAGES, 441 | PARAMS = HISTORY_MANAGER.PARAMS; 442 | 443 | satus.storage.set('HISTORY', { 444 | DOMAINS, 445 | PAGES, 446 | PARAMS 447 | }); 448 | 449 | for (var key in Selected) { 450 | Selected[key] = undefined; 451 | } 452 | 453 | checkToolbar(); 454 | } 455 | }, 456 | tags: { 457 | type: 'text-field', 458 | class: 'satus-input--tags', 459 | 460 | onkeydown: function(event) { 461 | if (event.keyCode === 13) { 462 | for (var key in Selected) { 463 | if (Selected[key]) { 464 | Selected[key].tags = this.value; 465 | } 466 | } 467 | 468 | updateTable2(true); 469 | 470 | var DOMAINS = HISTORY_MANAGER.DOMAINS, 471 | PAGES = HISTORY_MANAGER.PAGES, 472 | PARAMS = HISTORY_MANAGER.PARAMS; 473 | 474 | satus.storage.set('HISTORY', { 475 | DOMAINS, 476 | PAGES, 477 | PARAMS 478 | }); 479 | } 480 | } 481 | } 482 | }, toolbar); 483 | 484 | this.appendChild(toolbar); 485 | }, 486 | beforeUpdate: loadAll 487 | }, 488 | 489 | table_03: { 490 | type: 'table', 491 | id: 'by-params', 492 | paging: 100, 493 | columns: [{ 494 | title: 'visits', 495 | sorting: 'desc' 496 | }, { 497 | title: '', 498 | onrender: function() { 499 | this.querySelector('.satus-button--dropdown').addEventListener('click', function() { 500 | var container = this.parentNode.parentNode; 501 | 502 | if (!container.querySelector('.satus-dropdown-list')) { 503 | var self = this, 504 | list = document.createElement('div'), 505 | data = [], 506 | host = this.dataset.key; 507 | 508 | list.className = 'satus-dropdown-list'; 509 | 510 | satus.storage.import(host, function(items) { 511 | for (var key in items) { 512 | var q = key.match(/[?&]q=[^&]+/) || key.match(/[?&]search_query=[^&]+/); 513 | 514 | if (q) { 515 | var item = items[key]; 516 | 517 | try { 518 | var qq = decodeURIComponent(q[0].substring(q[0].indexOf('=') + 1)); 519 | } catch (err) { 520 | var qq = q[0].substring(q[0].indexOf('=') + 1); 521 | } 522 | 523 | data.push([{ 524 | text: item.visitCount 525 | }, {}, { 526 | text: key, 527 | html: '' + qq + '' 528 | }]); 529 | } 530 | } 531 | 532 | if (data.length === 0) { 533 | return; 534 | } 535 | 536 | satus.render({ 537 | type: 'table', 538 | paging: 100, 539 | columns: [{ 540 | title: 'Visits', 541 | sorting: 'desc' 542 | }, { 543 | title: '' 544 | }, { 545 | title: 'Title', 546 | onrender: function() { 547 | this.querySelector('a').innerText = this.querySelector('a').innerText; 548 | } 549 | }], 550 | data: data 551 | }, list); 552 | 553 | container.appendChild(list); 554 | 555 | self.classList.add('opened'); 556 | }); 557 | } else { 558 | container.querySelector('.satus-dropdown-list').remove(); 559 | 560 | this.classList.remove('opened'); 561 | } 562 | }); 563 | } 564 | }, { 565 | title: 'domain' 566 | }], 567 | beforeUpdate: loadAll 568 | }, 569 | 570 | table_04: { 571 | type: 'table', 572 | id: 'pinned', 573 | paging: 100, 574 | columns: [{ 575 | title: '' 576 | }, { 577 | title: 'domain' 578 | }] 579 | } 580 | } 581 | }; -------------------------------------------------------------------------------- /src/js/tables.js: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------------------- 2 | >>> TABLES 3 | ----------------------------------------------------------------- 4 | # Table 1 5 | # Table 2 6 | # Table 3 7 | # Table 4 8 | ---------------------------------------------------------------*/ 9 | 10 | /*--------------------------------------------------------------- 11 | # TABLE 1 12 | ---------------------------------------------------------------*/ 13 | 14 | function updateTable1(force, d) { 15 | var data = d || HISTORY_MANAGER.DOMAINS, 16 | table = []; 17 | 18 | for (var key in data) { 19 | table.push([{ 20 | text: data[key] 21 | }, { 22 | html: '' 23 | }, { 24 | text: key, 25 | html: '' + key + '' 26 | }]); 27 | } 28 | 29 | Menu.main.section.table_01.data = table; 30 | 31 | if (force === true) { 32 | document.querySelector('#by-domain').update(table); 33 | } 34 | 35 | return table; 36 | } 37 | 38 | 39 | /*--------------------------------------------------------------- 40 | # TABLE 2 41 | ---------------------------------------------------------------*/ 42 | 43 | function updateTable2(force, d) { 44 | chrome.bookmarks.getTree(function(results) { 45 | parseBookmarks(results, function(bookmarks) { 46 | var data = d || HISTORY_MANAGER.PAGES, 47 | table = []; 48 | 49 | for (var key in data) { 50 | var item = data[key], 51 | url = key.replace(/^.*\/\/[^\/]+:?[0-9]?\//g, ''); 52 | 53 | table.push([{ 54 | text: item.visitCount 55 | }, { 56 | html: '' + item.title, 57 | text: item.title 58 | }, { 59 | html: '/' + url + '', 60 | text: url 61 | }, { 62 | html: '', 63 | text: item.star 64 | }, { 65 | html: '', 66 | text: item.tags 67 | }]); 68 | } 69 | 70 | Menu.main.section.table_02.data = table; 71 | 72 | if (force === true) { 73 | document.querySelector('#by-url').update(table); 74 | } 75 | }); 76 | }); 77 | } 78 | 79 | 80 | /*--------------------------------------------------------------- 81 | # TABLE 3 82 | ---------------------------------------------------------------*/ 83 | 84 | function updateTable3(force, d) { 85 | var data = d || HISTORY_MANAGER.PARAMS, 86 | table = []; 87 | 88 | for (var key in data) { 89 | table.push([{ 90 | text: data[key] 91 | }, { 92 | html: '' 93 | }, { 94 | html: '' + key + '', 95 | text: key 96 | }]); 97 | } 98 | 99 | Menu.main.section.table_03.data = table; 100 | 101 | if (force === true) { 102 | document.querySelector('#by-params').update(table); 103 | } 104 | 105 | return table; 106 | } 107 | 108 | 109 | /*--------------------------------------------------------------- 110 | # TABLE 4 111 | ---------------------------------------------------------------*/ 112 | 113 | function updateTable4() { 114 | chrome.tabs.query({}, function(tabs) { 115 | var data = HISTORY_MANAGER.PINNED, 116 | table = [], 117 | pinned_tabs = {}; 118 | 119 | for (var i = 0, l = tabs.length; i < l; i++) { 120 | var tab = tabs[i]; 121 | 122 | table.push([{ 123 | html: '' 124 | }, { 125 | html: '' + tab.title + '', 126 | text: tab.url 127 | }]); 128 | } 129 | 130 | if (table.length > 0) { 131 | Menu.main.section.table_04.data = table; 132 | 133 | document.querySelector('#pinned').update(table); 134 | } 135 | }); 136 | } --------------------------------------------------------------------------------