Quick search (#29)

* readme

* add quick search

* fix errors

* fix errors part 2
This commit is contained in:
Gerome Matilla 2020-06-19 10:39:25 +08:00 committed by GitHub
parent de310a154f
commit 7b45ba5c2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 140 additions and 58 deletions

View File

@ -51,6 +51,16 @@
+ <kbd>swipe up</kbd> - opens weather screen + <kbd>swipe up</kbd> - opens weather screen
+ <kbd>swipe down</kbd> - opens search box + <kbd>swipe down</kbd> - opens search box
## Quick search
+ `r/` + `subreddit name` will open the subreddit.
+ `w/` + `search query` to search in wikipedia.
+ `u/` + `search query` to search for an image/photo in unsplash.
+ `a/` + `search query` to search a product in amazon.
+ `e/` + `search query` to search a product in ebay.
+ `y/` + `search query` to search a video in youtube.
+ `n/` + `comic id` to search a "comic" in a certain "comic" website.
## Customization and Settings ## Customization and Settings
#### Changing the colors, blur strength, and animation speed on-the-fly #### Changing the colors, blur strength, and animation speed on-the-fly
@ -106,6 +116,18 @@ const searchEngines = {
} }
``` ```
#### Adding more quick search urls
Add more quick search shortcuts by editing the `quickSearchData` object in `js/config.js`. Make sure to follow the format below:
```js
const quickSearchData = {
'r/': {
urlPrefix: 'https://reddit.com/r/'
},
...
```
#### Set your OpenWeatherMap API key #### Set your OpenWeatherMap API key
Setting up your OpenWeatherMap credential is a breeze. Setting up your OpenWeatherMap credential is a breeze.

View File

@ -281,12 +281,14 @@
<script src='js/background-set.js'></script> <script src='js/background-set.js'></script>
<script src='js/clock.js'></script> <script src='js/clock.js'></script>
<script src='js/dock-buttons.js'></script> <script src='js/dock-buttons.js'></script>
<script src='js/profile-image.js'></script>
<script src='js/search-engine-settings.js'></script> <script src='js/search-engine-settings.js'></script>
<script src='js/search-query-send.js'></script> <script src='js/search-query-send.js'></script>
<script src='js/search-box-key-events.js'></script>
<script src='js/show-search-box.js'></script> <script src='js/show-search-box.js'></script>
<script src='js/centered-box.js'></script> <script src='js/centered-box.js'></script>
<script src='js/profile-image.js'></script>
<script src='js/greeter-date-message.js'></script> <script src='js/greeter-date-message.js'></script>
<script src='js/theme-engine.js'></script> <script src='js/theme-engine.js'></script>

View File

@ -4,8 +4,6 @@ class AutoSuggestion {
this._searchBox = document.querySelector('#searchBox'); this._searchBox = document.querySelector('#searchBox');
this._suggestionsUL = document.querySelector('#suggestions'); this._suggestionsUL = document.querySelector('#suggestions');
this._suggestionsContainer = document.querySelector('#suggestionsContainer'); this._suggestionsContainer = document.querySelector('#suggestionsContainer');
this._registerSearchBoxOnKeyUpEvent();
} }
hideSuggestions = () => { hideSuggestions = () => {
@ -88,7 +86,7 @@ class AutoSuggestion {
const button = document.createElement('button'); const button = document.createElement('button');
button.type = 'button'; button.type = 'button';
button.className = 'phraseButton'; button.className = 'phraseButton';
button.innerHTML = phrases; button.innerText = phrases;
// Create input events // Create input events
this._phraseEvents(button); this._phraseEvents(button);
@ -102,7 +100,7 @@ class AutoSuggestion {
this._showSuggestions(); this._showSuggestions();
} }
_fetchSuggestion = () => { fetchSuggestions = () => {
const endpoint = 'https://duckduckgo.com/ac/'; const endpoint = 'https://duckduckgo.com/ac/';
const callback = 'autocompleteCallback'; const callback = 'autocompleteCallback';
@ -119,22 +117,4 @@ class AutoSuggestion {
document.querySelector('head').appendChild(script); document.querySelector('head').appendChild(script);
} }
_searchBoxOnKeyUpEvent = e => {
if (e.key === 'Tab') return;
if (this._searchBox.value < 1) {
// Hide suggestions
this.hideSuggestions();
return;
}
// Fetch suggestion/phrases
this._fetchSuggestion();
}
_registerSearchBoxOnKeyUpEvent = () => {
this._searchBox.onkeyup = this._searchBoxOnKeyUpEvent;
}
} }

View File

@ -31,7 +31,7 @@ class Clock {
min = this._appendZero(min); min = this._appendZero(min);
// Update clock id element // Update clock id element
this._clockEl.innerHTML = `${hour}:${min} ${midDay}` ; this._clockEl.innerText = `${hour}:${min} ${midDay}` ;
} }
_startClock = () => { _startClock = () => {

View File

@ -1,11 +1,41 @@
class Config { class Config {
constructor() { constructor() {
this.getQuickSearchData = this.getQuickSearchData.bind(this);
this.getSearchEngines = this.getSearchEngines.bind(this); this.getSearchEngines = this.getSearchEngines.bind(this);
this.getWebSites = this.getWebSites.bind(this); this.getWebSites = this.getWebSites.bind(this);
this.getDockSites = this.getDockSites.bind(this); this.getDockSites = this.getDockSites.bind(this);
} }
getQuickSearchData = () => {
const quickSearchData = {
'r/': {
urlPrefix: 'https://reddit.com/r/'
},
'w/': {
urlPrefix: 'https://wikipedia.org/wiki/'
},
'u/': {
urlPrefix: 'https://unsplash.com/s/photos/'
},
'a/': {
urlPrefix: 'https://amazon.com/s?k='
},
'e/': {
urlPrefix: 'https://ebay.com/sch/?_nkw='
},
'y/': {
urlPrefix: 'https://youtube.com/results?search_query='
},
'n/': {
urlPrefix: 'https://nhentai.net/g/'
}
};
return quickSearchData;
}
getSearchEngines = () => { getSearchEngines = () => {
const searchEngines = { const searchEngines = {

View File

@ -13,7 +13,7 @@ const dockButtons = new DockButtons();
// Instantiate profile image/animation // Instantiate profile image/animation
const profileImage = new ProfileImage(); const profileImage = new ProfileImage();
// Instantiate searchbox events // Instantiate searchbox anim events
const searchBoxShow = new SearchBoxShow(); const searchBoxShow = new SearchBoxShow();
// Instantiate autosuggestion // Instantiate autosuggestion
@ -40,6 +40,9 @@ const greeter = new GreeterDateMessage();
// Instantiate search send // Instantiate search send
const searchQuerySend = new SearchQuerySend(); const searchQuerySend = new SearchQuerySend();
// Instantiate searchbox keydown events
const searchboxKeyEvents = new SearchboxKeyEvents();
// Instantiate theme engine // Instantiate theme engine
const themeEngine = new ThemeEngine(); const themeEngine = new ThemeEngine();

View File

@ -0,0 +1,47 @@
class SearchboxKeyEvents {
constructor() {
this._searchBox = document.querySelector('#searchBox');
this._searchQuerySend = searchQuerySend;
this.sendQuery = this._searchQuerySend.sendQuery;
this._registerSearchBoxOnKeyUpEvent();
}
_searchBoxOnKeyUpEvent = event => {
// Cancel the default action, if needed
event.preventDefault();
if (event.key === 'Tab') return;
// Autosuggestion
if (event.key.length === 1 || event.key === 'Backspace') {
if (this._searchBox.value < 1) {
// Hide suggestions
autoSuggestion.hideSuggestions();
return;
}
// Fetch suggestion/phrases
autoSuggestion.fetchSuggestions();
return;
}
// Search query
// Number 13 is the "Enter" key on the keyboard
if (event.key === 'Enter') {
// Don't accept empty strings
if (searchBox.value < 1) {
return;
}
// Search the web
this.sendQuery();
}
}
_registerSearchBoxOnKeyUpEvent = () => {
this._searchBox.addEventListener('keyup', this._searchBoxOnKeyUpEvent);
}
}

View File

@ -2,9 +2,7 @@ class SearchQuerySend {
constructor() { constructor() {
this._searchBox = document.querySelector('#searchBox'); this._searchBox = document.querySelector('#searchBox');
this._keyUpEvent = this._keyUpEvent.bind(this); this._quickSearchData = config.getQuickSearchData();
this._registerKeyUpEvent();
} }
// Check if search query is a valid url // Check if search query is a valid url
@ -20,39 +18,39 @@ class SearchQuerySend {
return dummyInput.validity.valid; return dummyInput.validity.valid;
} }
// Search query // Open link
_sendQuery = () => { _OpenURL = url => {
window.location.href = encodeURI(url);
}
// If search query is a url, open it // Quick search
if (this._isURL(this._searchBox.value)) { _quickSearch = query => {
window.location.href = encodeURI(this._searchBox.value);
const prefix = query.substring(0, query.indexOf('/') + 1);
// Checks if it's a valid quick search
if (typeof this._quickSearchData[String(prefix)] === 'undefined') {
// The prefix does not exist in the object
return false;
} else {
const webSite = this._quickSearchData[String(prefix)].urlPrefix;
const queryNoSuffix = query.substring(prefix.indexOf('/') + 1);
this._OpenURL(webSite + queryNoSuffix);
return true;
}
}
// Search query
sendQuery = () => {
const searchQuery = this._searchBox.value;
// If quick search, return
if (this._quickSearch(searchQuery)) {
return; return;
} }
// Web search // Web search
window.location.href = encodeURI(searchEngineSettings.getSearchQueryPrefix() + this._searchBox.value); this._OpenURL(searchEngineSettings.getSearchQueryPrefix() + searchQuery);
}; };
_keyUpEvent = event => {
// Cancel the default action, if needed
event.preventDefault();
if (event.key === 'Tab') return;
// Number 13 is the "Enter" key on the keyboard
if (event.key === 'Enter') {
// Don't accept empty strings
if (searchBox.value < 1) {
return;
}
// Search the web
this._sendQuery();
}
}
_registerKeyUpEvent = () => {
this._searchBox.addEventListener('keyup', this._keyUpEvent);
}
} }

View File

@ -139,7 +139,7 @@ class WebMenu {
for (let i = 0; i < li.length; i++) { for (let i = 0; i < li.length; i++) {
a = li[parseInt(i, 10)].getElementsByClassName('webItemName')[0]; a = li[parseInt(i, 10)].getElementsByClassName('webItemName')[0];
txtValue = a.innerHTML || a.textContent || a.innerText; txtValue = a.textContent || a.innerText;
// If an item match, hightlight it and focus // If an item match, hightlight it and focus
// if (txtValue.toUpperCase().indexOf(filter) !== -1) { // if (txtValue.toUpperCase().indexOf(filter) !== -1) {