Shiloh/startpage
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add option to show launch keys instead of icons and other small changes

Browse Source
This commit is contained in:
Özenç Bilgili 2020-01-15 16:45:51 +03:00
parent b1c68842b3
commit 66737137cc
5 changed files with 85 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -11,13 +11,9 @@ Based on [Cade Scroggins](https://github.com/cadejscroggins)'s [Tilde](https://g
Most of the features are carried over from the original source. Most of the features are carried over from the original source.
Few of the added features are: Few of the added features are:
- Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch` - Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch` property set to `true` upon hitting `!` key.
property set to true upon hitting `!` key. - Color theme can now be inverted easily by either editing config or using `invert!` command.
- Clicking on the clock brings up pre-defined sites. - Added an option to show launch keys instead of icons again. Either edit config or type `keys!`.
- Available sites show their icons instead of their corresponding keys.
- Added the option to invert colour theme. You can either edit config or use `invert!` command.
- Other small changes on grids.
## Usage ## Usage
@ -82,8 +78,8 @@ This allows you to invoke Tilde with your native browser search bar.
## Configuration ## Configuration
Open up the [script.js](assets/script.js) file and read through the `CONFIG`! Open up the [script.js](js/script.js) file and read through the `CONFIG`!
## License ## License
Feel free to [use this and modify it however you like](https://github.com/Ozencb/tilde-enhanced/blob/master/LICENSE). Feel free to [use this and modify it however you like](https://github.com/Ozencb/tilde-enhanced/blob/master/LICENSE).

BIN
assets/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 120 KiB

7
style/style.css → css/style.css
View File

@ -1,7 +1,7 @@
:root { :root {
/* colors */ /* colors */
--background: #000000; --background: #0E0E0E;
--foreground: #FFFFFF; --foreground: #F1F1F1;
/* fonts */ /* fonts */
--font-family: 'Open Sans', sans-serif; --font-family: 'Open Sans', sans-serif;
@ -215,7 +215,8 @@ body.suggestions .search-suggestions {
border-radius: 50%; border-radius: 50%;
background: transparent; background: transparent;
color: var(--background); color: var(--background);
font-size: 0.75rem; font-size: 0.65rem;
font-weight: 800;
line-height: 2rem; line-height: 2rem;
text-align: center; text-align: center;
} }

9
index.html
View File

@ -4,22 +4,21 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex"/> <meta name="robots" content="noindex" />
<link rel="stylesheet" href="style/style.css" class="style"> <link rel="stylesheet" href="css/style.css" class="style">
<title>Home</title> <title>Home</title>
</head> </head>
<body> <body>
<div class="center"><time class="clock" id="clock"></time></div> <div class="center"><time class="clock" id="clock"></time></div>
<form autocomplete="off" class="center overlay search-form" id="search-form" spellcheck="false"> <form autocomplete="off" class="center overlay search-form" id="search-form" spellcheck="false">
<div> <div>
<input class="search-input" id="search-input" title="search" type="text" /> <input class="search-input" id="search-input" title="search" type="text" />
<ul class="search-suggestions" id="search-suggestions"></ul> <ul class="search-suggestions" id="search-suggestions"></ul>
</div> </div>
</form> </form>
<aside class="center help overlay" id="help"></aside> <aside class="center help overlay" id="help"></aside>
<script src="script/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>

97
script/script.js → js/script.js
View File

@ -1,14 +1,4 @@
let invertColorCookie; let CONFIG = {
if (localStorage.getItem('invertColorCookie') === null){
invertColorCookie = false;
}
else {
invertColorCookie = JSON.parse(localStorage.getItem('invertColorCookie'));
}
const CONFIG = {
/** /**
* The category, name, key, url, search path, color, icon, and quicklaunch properties for your commands. * The category, name, key, url, search path, color, icon, and quicklaunch properties for your commands.
* Icons must be added to "icons" folder and their values/names must be updated. * Icons must be added to "icons" folder and their values/names must be updated.
@ -106,7 +96,7 @@ const CONFIG = {
{ {
category: 'Fun', category: 'Fun',
name: 'Twitch', name: 'Twitch',
key: 't', key: 'tw',
url: 'https://www.twitch.tv', url: 'https://www.twitch.tv',
search: '/directory/game/{}', search: '/directory/game/{}',
color: 'linear-gradient(135deg, #6441a5, #4b367c)', color: 'linear-gradient(135deg, #6441a5, #4b367c)',
@ -126,9 +116,10 @@ const CONFIG = {
{ {
category: 'Other', category: 'Other',
name: 'Twitter', name: 'Twitter',
key: 'o', key: 't',
url: 'https://twitter.com', url: 'https://twitter.com',
color: 'linear-gradient(135deg, #C0A886, #E2DBC8)', search: '/search?q={}&src=typed_query',
color: 'linear-gradient(135deg, #1DA1F2, #19608F)',
icon: 'twitter', icon: 'twitter',
quickLaunch: true, quickLaunch: true,
}, },
@ -191,7 +182,12 @@ const CONFIG = {
/** /**
* Invert color theme * Invert color theme
*/ */
invertedColors: invertColorCookie, invertedColors: false,
/**
* Show keys instead of icons
*/
showKeys: true,
/** /**
* The delimiter between a command key and your search query. For example, * The delimiter between a command key and your search query. For example,
@ -216,6 +212,15 @@ const CONFIG = {
twentyFourHourClock: true, twentyFourHourClock: true,
}; };
// Get invertedColors preference from cookies
CONFIG.invertedColors = localStorage.getItem('invertColorCookie')
? JSON.parse(localStorage.getItem('invertColorCookie'))
: CONFIG.invertedColors;
// Get showKeys preference from cookies
CONFIG.showKeys = localStorage.getItem('showKeysCookie')
? JSON.parse(localStorage.getItem('showKeysCookie'))
: CONFIG.showKeys;
const $ = { const $ = {
bodyClassAdd: c => $.el('body').classList.add(c), bodyClassAdd: c => $.el('body').classList.add(c),
@ -354,7 +359,7 @@ class Help {
} }
} }
_buildAndAppendLists() { _buildAndAppendLists(mode) {
const lists = document.createElement('ul'); const lists = document.createElement('ul');
lists.classList.add('categories'); lists.classList.add('categories');
@ -363,7 +368,7 @@ class Help {
'beforeend', 'beforeend',
`<li class="category"> `<li class="category">
<h2 class="category-name">${category}</h2> <h2 class="category-name">${category}</h2>
<ul>${this._buildListCommands(category)}</ul> <ul>${this._buildListCommands(category, mode)}</ul>
</li>` </li>`
); );
}); });
@ -371,16 +376,22 @@ class Help {
this._el.appendChild(lists); this._el.appendChild(lists);
} }
_buildListCommands(currentCategory) { _buildListCommands(currentCategory, mode) {
this._invertValue = this._invertColors ? 1: 0; let invertValue = this._invertColors ? 1: 0;
return this._commands const bgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--foreground')
: getComputedStyle(document.documentElement).getPropertyValue('--background');
const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background')
: getComputedStyle(document.documentElement).getPropertyValue('--foreground');
const commandListWithIcons = this._commands
.map(({ category, name, key, url, icon }) => { .map(({ category, name, key, url, icon }) => {
if (category === currentCategory) { if (category === currentCategory) {
return ` return `
<li class="command"> <li class="command">
<a href="${url}" target="${this._newTab ? '_blank' : '_self'}"> <a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
<span class="command-key"><img src='assets/icons/${icon}.png' height = 36px center style="filter: invert(${this._invertValue});"></span> <span class="command-key"><img src='assets/icons/${icon}.png' height = 36px center style="filter: invert(${invertValue});"></span>
<span class="command-name">${name}</span> <span class="command-name">${name}</span>
</a> </a>
</li> </li>
@ -388,6 +399,30 @@ class Help {
} }
}) })
.join(''); .join('');
const commandListWithKeys = this._commands
.map(({ category, name, key, url }, i) => {
if (category === currentCategory) {
return `
<li class="command">
<a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
<style>
.command-key-${i} {
color: ${bgcolor};
background-color:${fgcolor};
}
</style>
<span class="command-key command-key-${i}" style="">${key}</span>
<span class="command-name command-name-${i}">${name}</span>
</a>
</li>
`;
}
})
.join('');
return CONFIG.showKeys ? commandListWithKeys : commandListWithIcons;
} }
_getCategories() { _getCategories() {
@ -824,13 +859,21 @@ class Form {
const bgcolor = getComputedStyle(document.documentElement).getPropertyValue('--background'); const bgcolor = getComputedStyle(document.documentElement).getPropertyValue('--background');
const fgcolor = getComputedStyle(document.documentElement).getPropertyValue('--foreground'); const fgcolor = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
document.documentElement.style.setProperty('--background', fgcolor); document.documentElement.style.setProperty('--background', fgcolor);
document.documentElement.style.setProperty('--foreground', bgcolor); } document.documentElement.style.setProperty('--foreground', bgcolor);
}
} }
_invertConfig() { _invertConfig() {
invertColorCookie = !invertColorCookie; let isInverted = !CONFIG.invertedColors;
localStorage.clear(); localStorage.removeItem('invertColorCookie');
localStorage.setItem('invertColorCookie', JSON.stringify(invertColorCookie)); localStorage.setItem('invertColorCookie', JSON.stringify(isInverted));
location.reload();
}
_showKeysConfig() {
let isShowKeys = !CONFIG.showKeys;
localStorage.removeItem('showKeysCookie');
localStorage.setItem('showKeysCookie', JSON.stringify(isShowKeys));
location.reload(); location.reload();
} }
@ -844,6 +887,7 @@ class Form {
const isHelp = newQuery === '?'; const isHelp = newQuery === '?';
const isLaunch = newQuery === '!'; const isLaunch = newQuery === '!';
const isInvert = newQuery === 'invert!'; const isInvert = newQuery === 'invert!';
const isShowKeys = newQuery === 'keys!';
const { isKey } = this._parseQuery(newQuery); const { isKey } = this._parseQuery(newQuery);
this._inputElVal = newQuery; this._inputElVal = newQuery;
this._suggester.suggest(newQuery); this._suggester.suggest(newQuery);
@ -852,6 +896,7 @@ class Form {
if (isHelp) this._toggleHelp(); if (isHelp) this._toggleHelp();
if (isLaunch) this._quickLaunch(); if (isLaunch) this._quickLaunch();
if (isInvert) this._invertConfig(); if (isInvert) this._invertConfig();
if (isShowKeys) this._showKeysConfig();
if (this._instantRedirect && isKey) this._submitWithValue(newQuery); if (this._instantRedirect && isKey) this._submitWithValue(newQuery);
} }
@ -948,6 +993,7 @@ const help = new Help({
newTab: CONFIG.newTab, newTab: CONFIG.newTab,
suggester, suggester,
invertedColors: CONFIG.invertedColors, invertedColors: CONFIG.invertedColors,
showKeys: CONFIG.showKeys
}); });
const form = new Form({ const form = new Form({
@ -959,6 +1005,7 @@ const form = new Form({
toggleHelp: help.toggle, toggleHelp: help.toggle,
quickLaunch: help.launch, quickLaunch: help.launch,
invertedColors: CONFIG.invertedColors, invertedColors: CONFIG.invertedColors,
showKeys: CONFIG.showKeys
}); });
new Clock({ new Clock({