diff --git a/README.md b/README.md
index f09c3f0..2eb377e 100644
--- a/README.md
+++ b/README.md
@@ -8,9 +8,9 @@ Inspired by [/r/startpages](https://www.reddit.com/r/startpages)—the idea is t
To go to a site, enter the corresponding key. To view the available sites and their keys, press `?`. If your input doesn't match any of the commands, a generic Google search will be triggered. For example:
-* Entering `r` would redirect you to [www.reddit.com](https://www.reddit.com).
-* Entering `t` would redirect you to [twitch.tv](https://www.twitch.tv).
-* Entering `cats` would search [Google for cats](https://encrypted.google.com/search?q=cats).
+- Entering `r` would redirect you to [www.reddit.com](https://www.reddit.com).
+- Entering `t` would redirect you to [twitch.tv](https://www.twitch.tv).
+- Entering `cats` would search [Google for cats](https://encrypted.google.com/search?q=cats).
On mobile, you can click the clock to focus the search input.
@@ -18,26 +18,34 @@ On mobile, you can click the clock to focus the search input.
You can search any of the sites by typing a colon after the site's key, followed by your search query. For example:
-* Entering `g:tilde` would search [GitHub for tilde](https://github.com/search?q=tilde).
-* Entering `s:radiohead` would search [SoundCloud for radiohead](https://soundcloud.com/search?q=radiohead).
+- Entering `g:tilde` would search [GitHub for tilde](https://github.com/search?q=tilde).
+- Entering `s:radiohead` would search [SoundCloud for radiohead](https://soundcloud.com/search?q=radiohead).
### Specific Locations
You can go to a specific location on a site by typing a forward slash after the site's key, followed by the location on the site you'd like to be redirected to. For example:
-* Entering `r/r/startpages` would redirect you to [www.reddit.com/r/startpages](https://www.reddit.com/r/startpages)
-* Entering `h/popular` would redirect you to [hypem.com/popular](http://hypem.com/popular).
+- Entering `r/r/startpages` would redirect you to [www.reddit.com/r/startpages](https://www.reddit.com/r/startpages)
+- Entering `h/popular` would redirect you to [hypem.com/popular](http://hypem.com/popular).
### URL Redirects
If you enter in a full domain or URL, you will be redirected to said domain or URL. For example:
-* Entering `stallman.org` would redirect you to [stallman.org](https://stallman.org/).
-* Entering `https://smile.amazon.com` would redirect you to [smile.amazon.com](https://smile.amazon.com/).
+- Entering `stallman.org` would redirect you to [stallman.org](https://stallman.org/).
+- Entering `https://smile.amazon.com` would redirect you to [smile.amazon.com](https://smile.amazon.com/).
+
+### Query Paramater
+
+Additionally, you can pass any query via the `q` query param. For example:
+
+- Going to `file:///path/to/tilde/index.html?q=cats` would search [Google for cats](https://encrypted.google.com/search?q=cats).
+
+This allows you to invoke Tilde with your native browser search bar.
## Configuration
-The above is just the beginning. Open up the [index.html](index.html) file and read through the `CONFIG`!
+The above is _just the beginning_. Open up the [index.html](index.html) file and read through the `CONFIG`!
## License
diff --git a/index.html b/index.html
index e8d5434..7e5b915 100644
--- a/index.html
+++ b/index.html
@@ -83,14 +83,10 @@
pathDelimiter: '/',
// the delimiter between the hours and minutes in the clock
- clockDelimiter: ' ',
+ clockDelimiter: ' ',
// change clock to twelve hour format
twelveHour: false,
-
- // note: you can pass in your search query via the q query param
- // e.g. going to file:///path/to/tilde/index.html?q=hamsters is equivalent
- // to typing "hamsters" and pressing enter
};
@@ -220,12 +216,12 @@
.search-suggestion b::after {
content: ' ';
position: absolute;
- top: 51%;
right: 0;
+ bottom: -.4em;
left: 0;
height: 3px;
background-color: var(--color0);
- opacity: .8;
+ opacity: .3;
}
.search-suggestion.highlight b::after {
@@ -374,7 +370,7 @@
@@ -420,6 +416,8 @@
case 91: return 'super';
}
},
+
+ pad: v => ('0' + v.toString()).slice(-2),
};
class Clock {
@@ -429,21 +427,13 @@
this._form = options.form;
this._twelveHour = options.twelveHour;
this._setTime = this._setTime.bind(this);
- this._registerEvents();
- this._start();
- }
-
- _pad(num) {
- return ('0' + num.toString()).slice(-2);
- }
-
- _registerEvents() {
this._el.addEventListener('click', this._form.show);
+ this._start();
}
_setTime() {
const date = new Date();
- let hours = this._pad(date.getHours());
+ let hours = $.pad(date.getHours());
let amPm = '';
if (this._twelveHour) {
@@ -457,7 +447,7 @@
`${date.getHours() > 12 ? 'PM' : 'AM'}`;
}
- const minutes = this._pad(date.getMinutes());
+ const minutes = $.pad(date.getMinutes());
this._el.innerHTML = `${hours}${this._delimiter}${minutes}${amPm}`;
this._el.setAttribute('datetime', date.toTimeString());
}
@@ -474,8 +464,8 @@
this._commands = options.commands;
this._newTab = options.newTab;
this._toggled = false;
+ this._handleKeydown = this._handleKeydown.bind(this);
this._buildAndAppendLists();
- this._bindMethods();
this._registerEvents();
}
@@ -484,10 +474,6 @@
this._toggled ? $.bodyClassAdd('help') : $.bodyClassRemove('help');
}
- _bindMethods() {
- this._handleKeydown = this._handleKeydown.bind(this);
- }
-
_buildAndAppendLists() {
const lists = document.createElement('ul');
lists.classList.add('categories');
@@ -506,18 +492,20 @@
}
_buildListCommands(category) {
- return this._commands.map(([cmdCategory, name, key, url]) => {
- if (cmdCategory === category) {
- return (
- `
-
- ${key}
- ${name}
-
- `
- );
- }
- }).join('');
+ return this._commands
+ .map(([cmdCategory, name, key, url]) => {
+ if (cmdCategory === category) {
+ return (
+ `
+
+ ${key}
+ ${name}
+
+ `
+ );
+ }
+ })
+ .join('');
}
_getCategories() {
@@ -544,7 +532,6 @@
}
addItem() {}
-
getSuggestions() {}
_addSearchPrefix(items, query) {
@@ -619,14 +606,19 @@
});
if (!exists) history.push([query, 1]);
- this._setHistory(this._sort(history));
+
+ const sorted = history
+ .sort((current, next) => current[1] - next[1])
+ .reverse();
+
+ this._setHistory(sorted);
}
getSuggestions(query) {
return new Promise(resolve => {
const suggestions = this._getHistory()
.map(([item]) => item)
- .filter(item => this._itemContainsQuery(query, item))
+ .filter(item => query && !$.ieq(item, query) && $.iin(item, query))
.slice(0, this._limit);
resolve(suggestions);
@@ -642,10 +634,6 @@
return this._history;
}
- _itemContainsQuery(query, item) {
- return query && !$.ieq(item, query) && $.iin(item, query);
- }
-
_save(history) {
localStorage.setItem(this._storeName, JSON.stringify(history));
}
@@ -654,10 +642,6 @@
this._history = history;
this._save(history);
}
-
- _sort(history) {
- return history.sort((current, next) => current[1] - next[1]).reverse();
- }
}
class Suggester {
@@ -666,7 +650,7 @@
this._influencers = options.influencers;
this._limit = options.limit;
this._suggestionEls = [];
- this._bindMethods();
+ this._handleKeydown = this._handleKeydown.bind(this);
this._registerEvents();
}
@@ -692,8 +676,9 @@
if (input === '') this._clearSuggestions();
Promise.all(this._getInfluencerPromises(input)).then(res => {
- const suggestions = this._flattenAndUnique(res);
+ const suggestions = Suggester._flattenAndUnique(res);
this._clearSuggestions();
+
if (suggestions.length) {
this._appendSuggestions(suggestions, input);
this._registerSuggestionEvents();
@@ -702,8 +687,13 @@
});
}
+ // [[1, 2], [1, 2, 3, 4]] -> [1, 2, 3, 4]
+ static _flattenAndUnique(array) {
+ return [...new Set([].concat.apply([], array))];
+ }
+
_appendSuggestions(suggestions, input) {
- suggestions.some((suggestion, i) => {
+ for (const [i, suggestion] of suggestions.entries()) {
const match = new RegExp($.escapeRegex(input), 'ig');
const suggestionHtml = suggestion.replace(match, `${input}`);
@@ -721,16 +711,12 @@
`,
);
- return i + 1 >= this._limit;
- });
+ if (i + 1 >= this._limit) break;
+ }
this._suggestionEls = $.els('.js-search-suggestion');
}
- _bindMethods() {
- this._handleKeydown = this._handleKeydown.bind(this);
- }
-
_clearClickEvents() {
this._suggestionEls.forEach(el => {
const callback = this._onClick.bind(null, el.value);
@@ -745,11 +731,6 @@
this._el.innerHTML = '';
}
- // [[1, 2], [1, 2, 3, 4]] -> [1, 2, 3, 4]
- _flattenAndUnique(array) {
- return [...new Set([].concat.apply([], array))];
- }
-
_focusNext(e) {
const exists = this._suggestionEls.some((el, i) => {
if (el.classList.contains('highlight')) {
@@ -797,12 +778,18 @@
}
_registerSuggestionEvents() {
- this._suggestionEls.forEach(el => {
- const value = el.getAttribute('data-suggestion');
- el.addEventListener('mouseover', this._highlight.bind(this, el));
- el.addEventListener('mouseout', this._unHighlight.bind(this));
- el.addEventListener('click', this._onClick.bind(null, value));
- });
+ const noHighlightUntilMouseMove = () => {
+ window.removeEventListener('mousemove', noHighlightUntilMouseMove);
+
+ this._suggestionEls.forEach(el => {
+ const value = el.getAttribute('data-suggestion');
+ el.addEventListener('mouseover', this._highlight.bind(this, el));
+ el.addEventListener('mouseout', this._unHighlight.bind(this));
+ el.addEventListener('click', this._onClick.bind(null, value));
+ });
+ };
+
+ window.addEventListener('mousemove', noHighlightUntilMouseMove);
}
_unHighlight(e) {
@@ -845,12 +832,12 @@
if (res.isSearch && searchPath) {
res.split = this._searchDelimiter;
- res.query = this._shiftAndTrim(splitSearch, res.split);
- res.redirect = this._prepSearch(url, searchPath, res.query);
+ res.query = QueryParser._shiftAndTrim(splitSearch, res.split);
+ res.redirect = QueryParser._prepSearch(url, searchPath, res.query);
} else if (res.isPath) {
res.split = this._pathDelimiter;
- res.path = this._shiftAndTrim(splitPath, res.split);
- res.redirect = this._prepPath(url, res.path);
+ res.path = QueryParser._shiftAndTrim(splitPath, res.split);
+ res.redirect = QueryParser._prepPath(url, res.path);
} else {
res.redirect = url;
}
@@ -859,48 +846,41 @@
}
if (key === '*') {
- res.redirect = this._prepSearch(url, searchPath, query);
+ res.redirect = QueryParser._prepSearch(url, searchPath, query);
}
});
}
- res.color = this._getColorFromUrl(res.redirect);
+ res.color = QueryParser._getColorFromUrl(this._commands, res.redirect);
return res;
}
- _getColorFromUrl(url) {
- const domain = this._getHostname(url);
- const color = this._commands
- .filter(c => this._getHostname(c[3]) === domain)
- .map(c => c[5])[0];
+ static _getColorFromUrl(commands, url) {
+ const domain = new URL(url).hostname;
- return color || null;
+ return commands
+ .filter(c => new URL(c[3]).hostname === domain)
+ .map(c => c[5])[0] || null;
}
- _getHostname(url) {
- const parser = document.createElement('a');
- parser.href = url;
- return parser.hostname.replace(/^www./, '');
+ static _prepPath(url, path) {
+ return QueryParser._stripUrlPath(url) + '/' + path;
}
- _prepPath(url, path) {
- return this._stripUrlPath(url) + '/' + path;
- }
-
- _prepSearch(url, searchPath, query) {
+ static _prepSearch(url, searchPath, query) {
if (!searchPath) return url;
- const baseUrl = this._stripUrlPath(url);
+ const baseUrl = QueryParser._stripUrlPath(url);
const urlQuery = encodeURIComponent(query);
searchPath = searchPath.replace('{}', urlQuery);
return baseUrl + searchPath;
}
- _shiftAndTrim(arr, delimiter) {
+ static _shiftAndTrim(arr, delimiter) {
arr.shift();
return arr.join(delimiter).trim();
}
- _stripUrlPath(url) {
+ static _stripUrlPath(url) {
const parser = document.createElement('a');
parser.href = url;
return `${parser.protocol}//${parser.hostname}`;
@@ -918,7 +898,12 @@
this._instantRedirect = options.instantRedirect;
this._newTab = options.newTab;
this._inputElVal = '';
- this._bindMethods();
+ this._clearPreview = this._clearPreview.bind(this);
+ this.show = this.show.bind(this);
+ this._handleInput = this._handleInput.bind(this);
+ this._handleKeydown = this._handleKeydown.bind(this);
+ this._previewValue = this._previewValue.bind(this);
+ this._submitForm = this._submitForm.bind(this);
this._registerEvents();
this._loadQueryParam();
}
@@ -934,17 +919,6 @@
this._inputEl.focus();
}
- _bindMethods() {
- this.hide = this.hide.bind(this);
- this.show = this.show.bind(this);
- this._clearPreview = this._clearPreview.bind(this);
- this._handleKeydown = this._handleKeydown.bind(this);
- this._handleInput = this._handleInput.bind(this);
- this._previewValue = this._previewValue.bind(this);
- this._submitForm = this._submitForm.bind(this);
- this._submitWithValue = this._submitWithValue.bind(this);
- }
-
_clearPreview() {
this._previewValue(this._inputElVal);
this._inputEl.focus();