Quick search (#29)

* readme

* add quick search

* fix errors

* fix errors part 2

README.md

@@ -51,6 +51,16 @@
 + <kbd>swipe up</kbd> - opens weather screen
 + <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
 
 #### 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
 
 Setting up your OpenWeatherMap credential is a breeze. 

index.html

@@ -281,12 +281,14 @@
 	<script src='js/background-set.js'></script>
 	<script src='js/clock.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-query-send.js'></script>
+	<script src='js/search-box-key-events.js'></script>
 
 	<script src='js/show-search-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/theme-engine.js'></script>

js/auto-suggestion.js

@@ -4,8 +4,6 @@ class AutoSuggestion {
 		this._searchBox = document.querySelector('#searchBox');
 		this._suggestionsUL = document.querySelector('#suggestions');
 		this._suggestionsContainer = document.querySelector('#suggestionsContainer');
-
-		this._registerSearchBoxOnKeyUpEvent();
 	}
 
 	hideSuggestions = () => {
@@ -88,7 +86,7 @@ class AutoSuggestion {
 			const button = document.createElement('button');
 			button.type = 'button';
 			button.className = 'phraseButton';
-			button.innerHTML = phrases;
+			button.innerText = phrases;
 
 			// Create input events
 			this._phraseEvents(button);
@@ -102,7 +100,7 @@ class AutoSuggestion {
 		this._showSuggestions();
 	}
 
-	_fetchSuggestion = () => {
+	fetchSuggestions = () => {
 
 		const endpoint = 'https://duckduckgo.com/ac/';
 		const callback = 'autocompleteCallback';
@@ -119,22 +117,4 @@ class AutoSuggestion {
 		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;
-	}
-
 }

js/clock.js

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

js/config.js

@@ -1,11 +1,41 @@
 class Config {
 
 	constructor() {
+		this.getQuickSearchData = this.getQuickSearchData.bind(this);
 		this.getSearchEngines = this.getSearchEngines.bind(this);
 		this.getWebSites = this.getWebSites.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 = () => {
 
 		const searchEngines = {

js/script.js

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

js/search-box-key-events.js

@@ -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);
+	}
+}

js/search-query-send.js

@@ -2,9 +2,7 @@ class SearchQuerySend {
 
 	constructor() {
 		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
@@ -20,39 +18,39 @@ class SearchQuerySend {
 		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;
 		}
 
 		// 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);
-	}
 }

js/web-menu.js

@@ -139,7 +139,7 @@ class WebMenu {
 		for (let i = 0; i < li.length; i++) {
 
 			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 (txtValue.toUpperCase().indexOf(filter) !== -1) {