foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates and fixes across the board

Browse Source
This commit is contained in:
Cade Scroggins
2017-07-19 00:04:54 -07:00
parent b8777f64b9
commit e741f024a7
1 changed files with 242 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+242 -172
View File
@@ -3,42 +3,34 @@
<script> <script>
const CONFIG = { const CONFIG = {
// the categories & commands that show up on the help overlay // the category, key, name, url, search path and color for your commands
// use the exact name of each command
categories: {
'Work': ['GitHub', 'Inbox', 'Keep'],
'Lurk': ['Instagram', 'Reddit', 'Twitter'],
'Listen': ['Hypem', 'Line Radio', 'SoundCloud'],
'Look': ['Codrops', 'Photos', 'Unsplash'],
'Watch': ['Netflix', 'Twitch', 'YouTube'],
'Download': ['7digital', 'The Pirate Bay', 'YTS'],
},
// the key, name, url and search path for your commands
// if none of the specified keys are matched, the '*' key is used // if none of the specified keys are matched, the '*' key is used
// if the key is set to null, the command is disabled
commands: [ commands: [
['*', 'Google', 'https://encrypted.google.com', '/search?q={}'], [null, 'Google', '*', 'https://encrypted.google.com', '/search?q={}', '#111'],
['7', '7digital', 'https://us.7digital.com', '/search?q={}'], ['Work', 'Analytics', 'a', 'https://analytics.google.com', null, '#ff6d00'],
['T', 'The Pirate Bay', 'https://thepiratebay.org', '/search/{}'], ['Work', 'GitHub', 'g', 'https://github.com', '/search?q={}', '#333'],
['Y', 'YTS', 'https://yts.ag/browse-movies/0/1080p/all/7/latest', '/browse-movies/{}/1080p/all/0/rating'], ['Work', 'Inbox', 'I', 'https://inbox.google.com', '/search/{}', '#4285f4'],
['a', 'Analytics', 'https://analytics.google.com', null], ['Work', 'Keep', 'k', 'https://keep.google.com', '/#search/text={}', '#fb0'],
['c', 'Codrops', 'https://tympanus.net/codrops', '?search-type=posts&s={}'], ['Look', 'Codrops', 'C', 'https://tympanus.net/codrops', '?search-type=posts&s={}', '#0099cc'],
['f', 'Facebook', 'https://www.facebook.com', '/search/top/?q={}'], ['Look', 'Hunt', 'H', 'https://www.producthunt.com', '/search?q={}', '#da552f'],
['g', 'GitHub', 'https://github.com', '/search?q={}'], ['Look', 'Photos', 'P', 'https://photos.google.com', '/search/{}', '#34a853'],
['h', 'Hypem', 'http://hypem.com/popular', '/search/{}'], ['Look', 'Unsplash', 'u', 'https://unsplash.com/new', '/search/{}', '#000'],
['i', 'Instagram', 'https://www.instagram.com', false], ['Lurk', 'Facebook', 'f', 'https://www.facebook.com', '/search/top/?q={}', '#3b5998'],
['k', 'Keep', 'https://keep.google.com', '/#search/text={}'], ['Lurk', 'Instagram', 'i', 'https://www.instagram.com', false, '#833ab4'],
['l', 'Line Radio', 'https://linerad.io', '/#{}'], ['Lurk', 'Reddit', 'r', 'https://www.reddit.com', '/search?q={}', '#5f99cf'],
['m', 'Inbox', 'https://inbox.google.com', '/search/{}'], ['Lurk', 'Twitter', 't', 'https://twitter.com', '/search?q={}', '#1da1f2'],
['n', 'Netflix', 'https://www.netflix.com/browse', '/search?q={}'], ['Listen', 'Hypem', 'h', 'https://hypem.com/popular', '/search/{}', '#83c441'],
['p', 'Photos', 'https://photos.google.com', '/search/{}'], ['Listen', 'Line Radio', 'l', 'https://linerad.io', '/#{}', '#39CCCC'],
['r', 'Reddit', 'https://www.reddit.com', '/search?q={}'], ['Listen', 'Pandora', 'p', 'https://www.pandora.com', '/artist/{}', '#005483'],
['s', 'SoundCloud', 'https://soundcloud.com/discover', '/search?q={}'], ['Listen', 'SoundCloud', 's', 'https://soundcloud.com/discover', '/search?q={}', '#ff8800'],
['t', 'Twitter', 'https://twitter.com', '/search?q={}'], ['Watch', 'Academy', 'A', 'https://www.khanacademy.org/', '/search?page_search_query={}', '#9cb443'],
['u', 'Unsplash', 'https://unsplash.com/new', '/search/{}'], ['Watch', 'Netflix', 'n', 'https://www.netflix.com/browse', '/search?q={}', '#e50914'],
['w', 'Twitch', 'https://www.twitch.tv/directory/following', null], ['Watch', 'Twitch', 'T', 'https://www.twitch.tv/directory/following', null, '#6441a5'],
['y', 'YouTube', 'https://youtube.com/feed/subscriptions', '/results?search_query={}'], ['Watch', 'YouTube', 'y', 'https://youtube.com/feed/subscriptions', '/results?search_query={}', '#cd201f'],
['Download', '7digital', '7', 'https://us.7digital.com', '/search?q={}', '#07606e'],
['Download', 'Sky Torrents', 'S', 'https://skytorrents.in', '/search/all/ed/1?q={}', '#00d1b2'],
['Download', 'The Pirate Bay', 'b', 'https://thepiratebay.org', '/search/{}', '#4c4132'],
['Download', 'YTS', 'Y', 'https://yts.ag/browse-movies/0/1080p/all/7/latest', '/browse-movies/{}/1080p/all/0/rating', '#2f2f2f'],
], ],
// give suggestions as you type // give suggestions as you type
@@ -72,6 +64,9 @@
// open queries in a new tab // open queries in a new tab
newTab: true, newTab: true,
// dynamic background colors when command domains are matched
colors: true,
// the delimiter between the key and your search query // the delimiter between the key and your search query
// e.g. to search GitHub for potatoes you'd type "g:potatoes" // e.g. to search GitHub for potatoes you'd type "g:potatoes"
searchDelimiter: ':', searchDelimiter: ':',
@@ -86,6 +81,7 @@
</script> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<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">
@@ -140,6 +136,7 @@
#clock { #clock {
display: block; display: block;
margin-top: -.06em;
font-size: 6rem; font-size: 6rem;
letter-spacing: .05em; letter-spacing: .05em;
} }
@@ -147,12 +144,18 @@
#search-form { #search-form {
padding: 1em; padding: 1em;
background: #111; background: #111;
transition: background-color .5s;
box-sizing: border-box; box-sizing: border-box;
z-index: 2; z-index: 2;
} }
#search-form>div {
width: 100%;
}
#search-input, #search-input,
#search-input:focus { #search-input:focus {
width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.5em; font-size: 1.5em;
font-weight: 900; font-weight: 900;
@@ -177,18 +180,33 @@
cursor: pointer; cursor: pointer;
} }
.search-suggestion:focus,
.search-suggestion.highlight { .search-suggestion.highlight {
background-color: #fff; background-color: #fff;
color: #222; color: #222;
} }
.search-suggestion b { .search-suggestion b {
position: relative;
font-weight: 400; font-weight: 400;
text-decoration: line-through; }
.search-suggestion b::after {
content: ' ';
position: absolute;
top: 51%;
right: 0;
left: 0;
height: 3px;
background-color: #fff;
opacity: .8;
}
.search-suggestion.highlight b::after {
opacity: 0;
} }
#help { #help {
display: block;
padding: 8vw; padding: 8vw;
background: #fff; background: #fff;
font-size: 1.3rem; font-size: 1.3rem;
@@ -196,7 +214,7 @@
} }
.category { .category {
margin: 1.5em 0; margin-bottom: 2rem;
} }
.category:last-of-type { .category:last-of-type {
@@ -204,7 +222,7 @@
} }
.category-name { .category-name {
margin: 0 0 2em; margin: 0 0 2rem;
font-size: .7em; font-size: .7em;
letter-spacing: .2em; letter-spacing: .2em;
text-transform: uppercase; text-transform: uppercase;
@@ -213,12 +231,16 @@
.command a { .command a {
display: block; display: block;
position: relative; position: relative;
padding: .5em 0; margin: 1em 0;
font-size: .9em; font-size: .9em;
line-height: 2em; line-height: 2em;
text-decoration: none; text-decoration: none;
} }
.command:last-of-type a {
margin-bottom: 0;
}
.command-key { .command-key {
display: block; display: block;
float: left; float: left;
@@ -263,48 +285,32 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: opacity .1s;
visibility: hidden; visibility: hidden;
opacity: 0;
} }
body.help #help.overlay, body.help #help.overlay,
body.form #search-form.overlay { body.form #search-form.overlay {
visibility: visible; visibility: visible;
opacity: 1;
} }
.middle { .center {
position: absolute; display: flex;
top: 50%; justify-content: center;
right: 0; align-items: center;
left: 0; width: 100%;
transform: translateY(-50%); height: 100%;
text-align: center; box-sizing: border-box;
} }
@media (min-width: 800px) { @media (min-width: 500px) {
#help { .categories {
display: flex; display: grid;
justify-content: center; grid-template-columns: 250px 175px;
align-items: center; justify-content: space-around;
padding: 2em;
} }
#help>ul { .category:nth-last-child(2) {
display: flex; margin-bottom: 0;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 1300px;
}
.category {
min-width: calc(100% / 3);
}
.category:nth-child(3n+3) {
min-width: 190px;
} }
#search-input, #search-input,
@@ -312,28 +318,52 @@
font-size: 3em; font-size: 3em;
} }
} }
@media (min-width: 1000px) {
#help {
display: flex;
padding: 0;
}
.category {
margin: 2rem 0;
}
.categories {
grid-template-columns: repeat(2, 300px) 175px;
}
}
@media (min-width: 1700px) {
.categories {
grid-template-columns: repeat(5, 250px) 175px;
}
}
</style> </style>
<div class="middle"> <div class="center">
<time id="clock"></time> <time id="clock"></time>
</div> </div>
<form class="overlay" id="search-form" autocomplete="off" spellcheck="false"> <form class="overlay center" id="search-form" autocomplete="off" spellcheck="false">
<div class="middle"> <div>
<input id="search-input" type="text"> <input id="search-input" type="text">
<ul id="search-suggestions"></ul> <ul id="search-suggestions"></ul>
</div> </div>
</form> </form>
<aside class="overlay" id="help"></aside> <aside class="overlay center" id="help"></aside>
<script> <script>
const $ = { const $ = {
bodyClassRemove: c => $.el('body').classList.remove(c),
bodyClassAdd: c => $.el('body').classList.add(c), bodyClassAdd: c => $.el('body').classList.add(c),
bodyClassHas: c => $.el('body').classList.contains(c),
bodyClassRemove: c => $.el('body').classList.remove(c),
el: s => document.querySelector(s), el: s => document.querySelector(s),
els: s => [].slice.call(document.querySelectorAll(s) || []), els: s => [].slice.call(document.querySelectorAll(s) || []),
escapeRegex: s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), escapeRegex: s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
ieq: (a, b) => a.toLowerCase() === b.toLowerCase(),
iin: (a, b) => a.toLowerCase().indexOf(b.toLowerCase()) !== -1,
isDown: e => ['c-n', 'down', 'tab'].includes($.key(e)), isDown: e => ['c-n', 'down', 'tab'].includes($.key(e)),
isRemove: e => ['backspace', 'delete'].includes($.key(e)), isRemove: e => ['backspace', 'delete'].includes($.key(e)),
isUp: e => ['c-p', 'up', 's-tab'].includes($.key(e)), isUp: e => ['c-p', 'up', 's-tab'].includes($.key(e)),
@@ -362,7 +392,7 @@
case 78: return ctrl ? 'c-n' : 'n'; case 78: return ctrl ? 'c-n' : 'n';
case 80: return ctrl ? 'c-p' : 'n'; case 80: return ctrl ? 'c-p' : 'n';
case 91: return 'super'; case 91: return 'super';
case 191: return '?'; case 191: return shift ? '?' : '/';
} }
}, },
}; };
@@ -393,11 +423,10 @@
} }
class Help { class Help {
constructor({ commands, categories, newTab }) { constructor(options) {
this._el = $.el('#help'); this._el = $.el('#help');
this._commands = commands; this._commands = options.commands;
this._categories = categories; this._newTab = options.newTab;
this._newTab = newTab;
this._toggled = false; this._toggled = false;
this._buildAndAppendLists(); this._buildAndAppendLists();
this._bindMethods(); this._bindMethods();
@@ -415,37 +444,42 @@
_buildAndAppendLists() { _buildAndAppendLists() {
const lists = document.createElement('ul'); const lists = document.createElement('ul');
lists.classList.add('categories');
for (let name in this._categories) { this._getCategories().forEach(category => {
lists.insertAdjacentHTML( lists.insertAdjacentHTML(
'beforeend', 'beforeend',
`<li class="category"> `<li class="category">
<h2 class="category-name">${name}</h2> <h2 class="category-name">${category}</h2>
<ul>${this._buildListCommands(this._categories[name])}</ul> <ul>${this._buildListCommands(category)}</ul>
</li>` </li>`
); );
} });
this._el.appendChild(lists); this._el.appendChild(lists);
} }
_buildListCommands(commandNames) { _buildListCommands(category) {
return commandNames.map(commandName => { return this._commands.map(([cmdCategory, name, key, url]) => {
const [key, name, url] = this._getCommandFromName(commandName); if (cmdCategory === category) {
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">${key}</span>
<span class="command-key">${key}</span> <span class="command-name">${name}</span>
<span class="command-name">${name}</span> </a>
</a> </li>`
</li>` );
); }
}).join(''); }).join('');
} }
_getCommandFromName(commandName) { _getCategories() {
return this._commands.filter(([key, name]) => name === commandName)[0]; const categories = this._commands
.map(([category]) => category)
.filter(category => category);
return [...new Set(categories)];
} }
_handleKeydown(e) { _handleKeydown(e) {
@@ -458,12 +492,27 @@
} }
class Influencer { class Influencer {
constructor({ limit }) { constructor(options) {
this._limit = limit; this._limit = options.limit;
this._queryParser = options.queryParser;
} }
addItem() {} addItem() {}
getSuggestions() {} getSuggestions() {}
_addSearchPrefix(items, query) {
const searchPrefix = this._getSearchPrefix(query)
return items.map(s => searchPrefix ? searchPrefix + s : s);
}
_getSearchPrefix(query) {
const { isSearch, key, split } = this._parseQuery(query);
return isSearch ? `${key}${split} ` : false;
}
_parseQuery(query) {
return this._queryParser.parse(query);
}
} }
class DefaultInfluencer extends Influencer { class DefaultInfluencer extends Influencer {
@@ -481,21 +530,24 @@
} }
class DuckDuckGoInfluencer extends Influencer { class DuckDuckGoInfluencer extends Influencer {
constructor() { constructor({ queryParser }) {
super(...arguments); super(...arguments);
} }
getSuggestions(query) { getSuggestions(rawQuery) {
const { query } = this._parseQuery(rawQuery);
if (!query) return Promise.resolve([]);
return new Promise(resolve => { return new Promise(resolve => {
const endpoint = 'https://duckduckgo.com/ac/'; const endpoint = 'https://duckduckgo.com/ac/';
const callback = 'autocompleteCallback'; const callback = 'autocompleteCallback';
window[callback] = res => { window[callback] = res => {
const suggestions = res.map(i => i.phrase) const suggestions = res.map(i => i.phrase)
.filter(suggestion => suggestion !== query) .filter(s => !$.ieq(s, query))
.slice(0, this._limit); .slice(0, this._limit)
resolve(suggestions); resolve(this._addSearchPrefix(suggestions, rawQuery));
}; };
$.jsonp(`${endpoint}?callback=${callback}&q=${query}`); $.jsonp(`${endpoint}?callback=${callback}&q=${query}`);
@@ -514,7 +566,7 @@
let exists; let exists;
const history = this._getHistory().map(([item, count]) => { const history = this._getHistory().map(([item, count]) => {
const match = item === query; const match = $.ieq(item, query);
if (match) exists = true; if (match) exists = true;
return [item, match ? count + 1 : count]; return [item, match ? count + 1 : count];
}); });
@@ -544,7 +596,7 @@
} }
_itemContainsQuery(query, item) { _itemContainsQuery(query, item) {
return query && query !== item && item.indexOf(query) !== -1; return query && !$.ieq(item, query) && $.iin(item, query);
} }
_save(history) { _save(history) {
@@ -562,10 +614,10 @@
} }
class Suggester { class Suggester {
constructor({ influencers, limit }) { constructor(options) {
this._el = $.el('#search-suggestions'); this._el = $.el('#search-suggestions');
this._influencers = influencers; this._influencers = options.influencers;
this._limit = limit; this._limit = options.limit;
this._suggestionEls = []; this._suggestionEls = [];
this._bindMethods(); this._bindMethods();
this._registerEvents(); this._registerEvents();
@@ -606,7 +658,7 @@
_appendSuggestions(suggestions, input) { _appendSuggestions(suggestions, input) {
suggestions.some((suggestion, i) => { suggestions.some((suggestion, i) => {
const match = new RegExp($.escapeRegex(input), 'g'); const match = new RegExp($.escapeRegex(input), 'ig');
const suggestionHtml = suggestion.replace(match, `<b>${input}</b>`); const suggestionHtml = suggestion.replace(match, `<b>${input}</b>`);
this._el.insertAdjacentHTML( this._el.insertAdjacentHTML(
@@ -719,16 +771,16 @@
} }
class QueryParser { class QueryParser {
constructor({ commands, pathDelimiter, searchDelimiter }) { constructor(options) {
this._commands = commands; this._commands = options.commands;
this._searchDelimiter = searchDelimiter; this._searchDelimiter = options.searchDelimiter;
this._pathDelimiter = pathDelimiter; this._pathDelimiter = options.pathDelimiter;
this._protocolRegex = /^[a-zA-Z]+:\/\//i; this._protocolRegex = /^[a-zA-Z]+:\/\//i;
this._urlRegex = /^(?:(http|https)?:\/\/)?(?:[\w-]+\.)+([a-z]|[A-Z]|[0-9]){2,6}/i; this._urlRegex = /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i;
} }
parse(query) { parse(query) {
const res = { query: query }; const res = { query: query, split: null };
if (query.match(this._urlRegex)) { if (query.match(this._urlRegex)) {
const hasProtocol = query.match(this._protocolRegex); const hasProtocol = query.match(this._protocolRegex);
@@ -737,16 +789,22 @@
const splitSearch = query.split(this._searchDelimiter); const splitSearch = query.split(this._searchDelimiter);
const splitPath = query.split(this._pathDelimiter); const splitPath = query.split(this._pathDelimiter);
this._commands.some(([key, name, url, searchPath]) => { this._commands.some(([category, name, key, url, searchPath]) => {
const isSearch = splitSearch[0] === key; res.isKey = query === key;
const isPath = splitPath[0] === key; res.isSearch = !res.isKey && splitSearch[0] === key;
res.isPath = !res.isKey && splitPath[0] === key;
if (isSearch || isPath) { if (res.isKey || res.isSearch || res.isPath) {
if (splitSearch[1] && searchPath) { res.key = key;
res.query = this._shiftAndTrim(splitSearch, this._searchDelimiter);
if (res.isSearch && searchPath) {
res.split = this._searchDelimiter;
res.query = this._shiftAndTrim(splitSearch, res.split);
res.redirect = this._prepSearch(url, searchPath, res.query); res.redirect = this._prepSearch(url, searchPath, res.query);
} else if (splitPath[1]) { } else if (res.isPath) {
res.redirect = this._prepPath(url, splitPath); res.split = this._pathDelimiter;
res.path = this._shiftAndTrim(splitPath, res.split);
res.redirect = this._prepPath(url, res.path);
} else { } else {
res.redirect = url; res.redirect = url;
} }
@@ -760,24 +818,26 @@
}); });
} }
res.color = this._getColorFromUrl(res.redirect);
return res; return res;
} }
instantRedirect(query, callback) { _getColorFromUrl(url) {
let exists; const domain = this._getHostname(url);
const color = this._commands
.filter(c => this._getHostname(c[3]) === domain)
.map(c => c[5])[0];
this._commands.forEach(([key, name, url]) => { return color || null;
if (key === query) {
callback(url);
exists = true;
}
});
return exists;
} }
_prepPath(url, splitPath) { _getHostname(url) {
const path = this._shiftAndTrim(splitPath, this._pathDelimiter); const parser = document.createElement('a');
parser.href = url;
return parser.hostname.replace(/^www./, '');
}
_prepPath(url, path) {
return this._stripUrlPath(url) + '/' + path; return this._stripUrlPath(url) + '/' + path;
} }
@@ -802,14 +862,15 @@
} }
class Form { class Form {
constructor({ help, instantRedirect, newTab, suggester, queryParser }) { constructor(options) {
this._formEl = $.el('#search-form'); this._formEl = $.el('#search-form');
this._inputEl = $.el('#search-input'); this._inputEl = $.el('#search-input');
this._help = help; this._colors = options.colors;
this._suggester = suggester; this._help = options.help;
this._queryParser = queryParser; this._suggester = options.suggester;
this._instantRedirect = instantRedirect; this._queryParser = options.queryParser;
this._newTab = newTab; this._instantRedirect = options.instantRedirect;
this._newTab = options.newTab;
this._inputElVal = ''; this._inputElVal = '';
this._bindMethods(); this._bindMethods();
this._registerEvents(); this._registerEvents();
@@ -834,33 +895,24 @@
_clearPreview() { _clearPreview() {
this._inputEl.value = this._inputElVal; this._inputEl.value = this._inputElVal;
this._inputEl.focus(); this._inputEl.focus();
this._setBackgroundFromQuery(this._inputElVal);
} }
_handleKeydown(e) { _handleKeydown(e) {
if ($.isUp(e) || $.isDown(e) || $.isRemove(e)) return;
switch ($.key(e)) { switch ($.key(e)) {
case 'alt': case 'alt':
case 'ctrl': case 'ctrl':
case 'enter': case 'enter':
case 'shift': case 'shift':
case 'super': case 'super': return;
break; case 'escape': this._clearInput(); return;
case '?': if (!$.bodyClassHas('form')) this._help.toggle(); return;
case 'escape':
this._clearInput();
break;
case '?':
if (!this._inputElVal) {
e.preventDefault();
this._help.toggle();
break;
}
default:
if ($.isUp(e) || $.isDown(e) || $.isRemove(e)) break;
$.bodyClassAdd('form');
this._inputEl.focus();
} }
$.bodyClassAdd('form');
this._inputEl.focus();
} }
_handleKeypress(e) { _handleKeypress(e) {
@@ -868,12 +920,12 @@
const newQuery = this._inputEl.value + newChar; const newQuery = this._inputEl.value + newChar;
const validChar = newChar.length && $.key(e) !== 'enter'; const validChar = newChar.length && $.key(e) !== 'enter';
const queryDiffers = this._inputElVal !== newQuery; const queryDiffers = this._inputElVal !== newQuery;
const { isKey, color } = this._queryParser.parse(newQuery);
this._setBackground(color);
if ( if (this._instantRedirect && isKey) {
this._instantRedirect &&
this._queryParser.instantRedirect(newQuery, this._submitWithValue)
) {
e.preventDefault(); e.preventDefault();
this._submitWithValue(newQuery);
} else if (this._suggester && validChar && queryDiffers) { } else if (this._suggester && validChar && queryDiffers) {
this._suggester.suggest(newQuery); this._suggester.suggest(newQuery);
this._inputElVal = newQuery; this._inputElVal = newQuery;
@@ -882,9 +934,12 @@
_handleKeyup(e) { _handleKeyup(e) {
const newQuery = this._inputEl.value; const newQuery = this._inputEl.value;
if (!newQuery) $.bodyClassRemove('form'); const queryDiffers = this._inputElVal !== newQuery;
this._setBackgroundFromQuery(newQuery);
if (this._suggester && $.isRemove(e) && this._inputElVal !== newQuery) { if (!newQuery) {
$.bodyClassRemove('form');
} else if (this._suggester && $.isRemove(e) && queryDiffers) {
this._suggester.suggest(newQuery); this._suggester.suggest(newQuery);
this._inputElVal = newQuery; this._inputElVal = newQuery;
} }
@@ -892,6 +947,7 @@
_previewValue(value) { _previewValue(value) {
this._inputEl.value = value; this._inputEl.value = value;
this._setBackgroundFromQuery(value);
} }
_redirect(redirect) { _redirect(redirect) {
@@ -904,16 +960,29 @@
this._inputEl.addEventListener('keypress', this._handleKeypress); this._inputEl.addEventListener('keypress', this._handleKeypress);
this._inputEl.addEventListener('keyup', this._handleKeyup); this._inputEl.addEventListener('keyup', this._handleKeyup);
this._formEl.addEventListener('submit', this._submitForm, false); this._formEl.addEventListener('submit', this._submitForm, false);
this._suggester.setOnClick(this._submitWithValue);
this._suggester.setOnHighlight(this._previewValue); if (this._suggester) {
this._suggester.setOnUnhighlight(this._clearPreview); this._suggester.setOnClick(this._submitWithValue);
this._suggester.setOnHighlight(this._previewValue);
this._suggester.setOnUnhighlight(this._clearPreview);
}
}
_setBackground(color) {
this._formEl.style.backgroundColor = color;
}
_setBackgroundFromQuery(query) {
if (this._colors) {
this._setBackground(this._queryParser.parse(query).color);
}
} }
_submitForm(e) { _submitForm(e) {
if (e) e.preventDefault(); if (e) e.preventDefault();
const query = this._inputEl.value.trim(); const query = this._inputEl.value;
if (this._suggester) this._suggester.success(query);
this._clearInput(); this._clearInput();
this._suggester.success(query);
this._redirect(this._queryParser.parse(query).redirect); this._redirect(this._queryParser.parse(query).redirect);
} }
@@ -927,7 +996,6 @@
<script> <script>
const getHelp = () => { const getHelp = () => {
return new Help({ return new Help({
categories: CONFIG.categories,
commands: CONFIG.commands, commands: CONFIG.commands,
newTab: CONFIG.newTab, newTab: CONFIG.newTab,
}); });
@@ -943,6 +1011,7 @@
return CONFIG.influencers.map(i => { return CONFIG.influencers.map(i => {
return new availableInfluencers[i.name]({ return new availableInfluencers[i.name]({
limit: i.limit, limit: i.limit,
queryParser: getQueryParser(),
defaultSuggestions: CONFIG.defaultSuggestions, defaultSuggestions: CONFIG.defaultSuggestions,
}); });
}); });
@@ -968,6 +1037,7 @@
}); });
new Form({ new Form({
colors: CONFIG.colors,
help: getHelp(), help: getHelp(),
instantRedirect: CONFIG.instantRedirect, instantRedirect: CONFIG.instantRedirect,
newTab: CONFIG.newTab, newTab: CONFIG.newTab,