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

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

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.
Few of the added features are:
- Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch`
property set to true upon hitting `!` key.
- Clicking on the clock brings up pre-defined sites.
- 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.
- Added a "Quick Launch" functionality, which launches all the sites with `quickLaunch` property set to `true` upon hitting `!` key.
- Color theme can now be inverted easily by either editing config or using `invert!` command.
- Added an option to show launch keys instead of icons again. Either edit config or type `keys!`.
## Usage
@ -82,8 +78,8 @@ This allows you to invoke Tilde with your native browser search bar.
## 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
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).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 120 KiB

View File

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

View File

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

View File

@ -1,14 +1,4 @@
let invertColorCookie;
if (localStorage.getItem('invertColorCookie') === null){
invertColorCookie = false;
}
else {
invertColorCookie = JSON.parse(localStorage.getItem('invertColorCookie'));
}
const CONFIG = {
let CONFIG = {
/**
* 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.
@ -106,7 +96,7 @@ const CONFIG = {
{
category: 'Fun',
name: 'Twitch',
key: 't',
key: 'tw',
url: 'https://www.twitch.tv',
search: '/directory/game/{}',
color: 'linear-gradient(135deg, #6441a5, #4b367c)',
@ -126,9 +116,10 @@ const CONFIG = {
{
category: 'Other',
name: 'Twitter',
key: 'o',
key: 't',
url: 'https://twitter.com',
color: 'linear-gradient(135deg, #C0A886, #E2DBC8)',
search: '/search?q={}&src=typed_query',
color: 'linear-gradient(135deg, #1DA1F2, #19608F)',
icon: 'twitter',
quickLaunch: true,
},
@ -191,7 +182,12 @@ const CONFIG = {
/**
* 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,
@ -216,6 +212,15 @@ const CONFIG = {
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 $ = {
bodyClassAdd: c => $.el('body').classList.add(c),
@ -354,7 +359,7 @@ class Help {
}
}
_buildAndAppendLists() {
_buildAndAppendLists(mode) {
const lists = document.createElement('ul');
lists.classList.add('categories');
@ -363,7 +368,7 @@ class Help {
'beforeend',
`<li class="category">
<h2 class="category-name">${category}</h2>
<ul>${this._buildListCommands(category)}</ul>
<ul>${this._buildListCommands(category, mode)}</ul>
</li>`
);
});
@ -371,16 +376,22 @@ class Help {
this._el.appendChild(lists);
}
_buildListCommands(currentCategory) {
this._invertValue = this._invertColors ? 1: 0;
_buildListCommands(currentCategory, mode) {
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 }) => {
if (category === currentCategory) {
return `
<li class="command">
<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>
</a>
</li>
@ -388,6 +399,30 @@ class Help {
}
})
.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() {
@ -824,13 +859,21 @@ class Form {
const bgcolor = getComputedStyle(document.documentElement).getPropertyValue('--background');
const fgcolor = getComputedStyle(document.documentElement).getPropertyValue('--foreground');
document.documentElement.style.setProperty('--background', fgcolor);
document.documentElement.style.setProperty('--foreground', bgcolor); }
document.documentElement.style.setProperty('--foreground', bgcolor);
}
}
_invertConfig() {
invertColorCookie = !invertColorCookie;
localStorage.clear();
localStorage.setItem('invertColorCookie', JSON.stringify(invertColorCookie));
let isInverted = !CONFIG.invertedColors;
localStorage.removeItem('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();
}
@ -844,6 +887,7 @@ class Form {
const isHelp = newQuery === '?';
const isLaunch = newQuery === '!';
const isInvert = newQuery === 'invert!';
const isShowKeys = newQuery === 'keys!';
const { isKey } = this._parseQuery(newQuery);
this._inputElVal = newQuery;
this._suggester.suggest(newQuery);
@ -852,6 +896,7 @@ class Form {
if (isHelp) this._toggleHelp();
if (isLaunch) this._quickLaunch();
if (isInvert) this._invertConfig();
if (isShowKeys) this._showKeysConfig();
if (this._instantRedirect && isKey) this._submitWithValue(newQuery);
}
@ -948,6 +993,7 @@ const help = new Help({
newTab: CONFIG.newTab,
suggester,
invertedColors: CONFIG.invertedColors,
showKeys: CONFIG.showKeys
});
const form = new Form({
@ -959,6 +1005,7 @@ const form = new Form({
toggleHelp: help.toggle,
quickLaunch: help.launch,
invertedColors: CONFIG.invertedColors,
showKeys: CONFIG.showKeys
});
new Clock({