Add custom commands

KorySchneider · Mar 26, 2017 · b99e6e7 · b99e6e7
2 parents 4618663 + 5812f6d
commit b99e6e7
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -6,15 +6,17 @@ Tab lives [here](https://koryschneider.github.io/tab-a-startpage). Please read b
 ### Contents
 
  - [Usage](#usage)
- 
+
    - [Intro](#intro)
-   
+
    - [Examples](#examples)
- 
+
    - [Menus](#menus)
-
+
+   - [Custom Commands](#custom-commands)
+
  - [Chrome Extension](#chrome-extension)
- 
+
  - [Bugs & Suggestions](#bugs-&-extensions)
 
 
@@ -25,45 +27,62 @@ The purpose of this site is to use short, simple commands to access and search w
 
 The syntax is as follows: `command;query[;n]`
 
-Commands are shortcuts for sites (e.g. `y` for YouTube). You can search sites by separating the command and your query with a semicolon. If you wanted to search YouTube for cat videos, you would enter: `y;cat videos`. If you simply enter a command and no query, it will take you to that site. <sup>(Note that leading/trailing spaces get stripped, so entering `y; cat videos` will do the same thing.)</sup>
+Commands are shortcuts for sites (e.g. `y` for YouTube). You can search sites by separating the command and your query with a semicolon. If you wanted to search YouTube for cats, you would enter: `y;cats`. If you simply enter a command and no query, it will take you to that site. <sup>(Note that leading/trailing spaces get stripped, so entering `y; cats` will do the same thing.)</sup>
 
 For a full list of commands and what they do, refer to the command list in the help menu. <sup>(see [menus](#menus) section below)</sup>
 
 #### Examples
 Here some sample inputs and what they do:
 
- - `y;cat videos` searches YouTube for 'cat videos'.
+ - `y;cats` searches YouTube for 'cats'.
 
  - `r;askreddit` takes you to the AskReddit subreddit.
 
- - `n;fargo` searches Netflix for 'fargo'.
-
- - `imdb;pulp fiction` searches Internet Movie DataBase for 'pulp fiction'.
+ - `github.com` goes to github.com
 
- - `t;gmail.com` opens gmail.com in the current tab.
+ - `n;pulp fiction` searches Netflix for 'pulp fiction'.
 
  - `a;popsicles;n` searches Amazon for popsicles in a new tab.
 
- 
+
 Some commands behave slightly differently. For example, the `r` command will take you to a subreddit rather than searching Reddit (e.g. `r;askreddit`). With this particular command you can also do things like `r;askreddit/top?t=month` to quickly get where you want to be. The `t` command takes a URL instead of a query, e.g. `t;gmail.com`.
 
 If you do not enter a command, the input will be taken as a query and the default command will be executed. The default default command is Google, but this can be changed in the options menu. <sup>(again, see [menus](#menus) section below).</sup>
 
-
-
 #### Menus
 There are two menus you can access: help and options.
 
  - To get to the _help_ menu, enter `help` or `?`. <sup>(you can also click on the clock)</sup>
 
  - To get to the _options_ menu, enter `options` or `settings`.
 
+#### Custom Commands
+You can add your own custom commands in the options menu.
+Custom commands are specified using [JSON](https://en.wikipedia.org/wiki/Json).
+The format is as follows (using YouTube as an example):
+
+    {
+      "command": "y",
+      "url": "https://www.youtube.com",
+      "search": "/results?search_query="
+    }
+
+__Explanation of each item__:
+
+ - `command` - This is what you type into the input box.
+
+ - `url` - The base site; this is where you will be redirected to if you enter `command` by itself.
+
+ - `search` - When you add a query to your command (e.g. `y;cats`), `search` will be appended to `url`, and then your query will be appended to *that* to form the full search URL, like this: `https://youtube.com/results?search_query=cats`.
+
+__!!__ Note that built-in commands have precidence over custom commands. Check the help menu to make sure that what you choose for `command` is not already taken.
+
+To figure out what `search` should be for your custom command, go to the website you want to add and do a search (for anything), then look at and dissect the URL you are taken to.
 
+If the website you wish to add a command for does not have a search engine, you may leave the `search` value blank (but do not remove it entirely).
 
 ## Chrome extension
-Replaces the new tab page with tab startpage. Highly recommended - [get it here!](https://chrome.google.com/webstore/detail/tab-a-startpage/gedoejjmdjalipopahiffdghibcodjcj)
+Replaces the new tab page with tab startpage. [Highly recommended - get it here!](https://chrome.google.com/webstore/detail/tab-a-startpage/gedoejjmdjalipopahiffdghibcodjcj)
 
 ## Bugs & Suggestions
-If something is not working right, please let me know by creating an issue
-[here](https://github.com/koryschneider/tab-a-startpage/issues). Feel free to
-leave suggestions there as well. Thanks!
+If something is not working right or you have an idea to make this startpage better, please let me know by [opening an issue](https://github.com/koryschneider/tab-a-startpage/issues) or emailing [tab.startpage@gmail.com](mailto:tab.startpage@gmail.com). Thanks!
diff --git a/commands.js b/commands.js
@@ -1,93 +1,106 @@
 var COMMANDS = [
-  { command: 'g',
-    url: 'https://www.google.com',
-    search: '/search?q=',
-    'help-command': 'g (;&ltquery&gt)',
-    'help-desc': 'Google',
-    'options-text': 'Search Google'
+  {
+    "command": "g",
+    "url": "https://www.google.com",
+    "search": "/search?q=",
+    "help-command": "g (;&ltquery&gt)",
+    "help-desc": "Google",
+    "options-text": "Search Google"
   },
-  { command: 'dg',
-    url: 'https://duckduckgo.com',
-    search: '/?q=',
-    'help-command': 'dg (;&ltquery&gt)',
-    'help-desc': 'DuckDuckGo',
-    'options-text': 'Search DuckDuckGo'
+  {
+    "command": "dg",
+    "url": "https://duckduckgo.com",
+    "search": "/?q=",
+    "help-command": "dg (;&ltquery&gt)",
+    "help-desc": "DuckDuckGo",
+    "options-text": "Search DuckDuckGo"
   },
-  { command: 'r',
-    url: 'https://www.reddit.com',
-    search: '/r/',
-    'help-command': 'r (;&ltsubreddit&gt)',
-    'help-desc': 'Reddit',
-    'options-text': 'Go to subreddit'
+  {
+    "command": "r",
+    "url": "https://www.reddit.com",
+    "search": "/r/",
+    "help-command": "r (;&ltsubreddit&gt)",
+    "help-desc": "Reddit",
+    "options-text": "Go to subreddit"
   },
-  { command: 'y',
-    url: 'https://www.youtube.com',
-    search: '/results?search_query=',
-    'help-command': 'y (;&ltquery&gt)',
-    'help-desc': 'YouTube',
-    'options-text': 'Search YouTube'
+  {
+    "command": "y",
+    "url": "https://www.youtube.com",
+    "search": "/results?search_query=",
+    "help-command": "y (;&ltquery&gt)",
+    "help-desc": "YouTube",
+    "options-text": "Search YouTube"
   },
-  { command: 'a',
-    url: 'https://smile.amazon.com',
-    search: '/s/?field-keywords=',
-    'help-command': 'a (;&ltquery&gt)',
-    'help-desc': 'Amazon',
-    'options-text': 'Search Amazon'
+  {
+    "command": "a",
+    "url": "https://smile.amazon.com",
+    "search": "/s/?field-keywords=",
+    "help-command": "a (;&ltquery&gt)",
+    "help-desc": "Amazon",
+    "options-text": "Search Amazon"
   },
-  { command: 'w',
-    url: 'https://www.wikipedia.org',
-    search: '/w/index.php?title=Special:Search&search=',
-    'help-command': 'w (;&ltquery&gt)',
-    'help-desc': 'Wikipedia',
-    'options-text': 'Search Wikipedia'
+  {
+    "command": "w",
+    "url": "https://www.wikipedia.org",
+    "search": "/w/index.php?title=Special:Search&search=",
+    "help-command": "w (;&ltquery&gt)",
+    "help-desc": "Wikipedia",
+    "options-text": "Search Wikipedia"
   },
-  { command: 'wa',
-    url: 'https://www.wolframalpha.com',
-    search: '/input/?i=',
-    'help-command': 'wa (;&ltquery&gt)',
-    'help-desc': 'Wolfram Alpha',
-    'options-text': 'Search Wolfram Alpha'
+  {
+    "command": "wa",
+    "url": "https://www.wolframalpha.com",
+    "search": "/input/?i=",
+    "help-command": "wa (;&ltquery&gt)",
+    "help-desc": "Wolfram Alpha",
+    "options-text": "Search Wolfram Alpha"
   },
-  { command: 'imdb',
-    url: 'https://www.imdb.com',
-    search: '/find?s=all&q=',
-    'help-command': 'imdb (;&ltquery&gt)',
-    'help-desc': 'Internet Movie Database',
-    'options-text': 'Search Internet Movie Database'
+  {
+    "command": "imdb",
+    "url": "https://www.imdb.com",
+    "search": "/find?s=all&q=",
+    "help-command": "imdb (;&ltquery&gt)",
+    "help-desc": "Internet Movie Database",
+    "options-text": "Search Internet Movie Database"
   },
-  { command: 'n',
-    url: 'https://www.netflix.com',
-    search: '/search?q=',
-    'help-command': 'n (;&ltquery&gt)',
-    'help-desc': 'Netflix',
-    'options-text': 'Search Netflix'
+  {
+    "command": "n",
+    "url": "https://www.netflix.com",
+    "search": "/search?q=",
+    "help-command": "n (;&ltquery&gt)",
+    "help-desc": "Netflix",
+    "options-text": "Search Netflix"
   },
-  { command: 'gm',
-    url: 'https://www.google.com',
-    search: '/maps?q=',
-    'help-command': 'gm (;&ltquery&gt)',
-    'help-desc': 'Google Maps',
-    'options-text': 'Search Google Maps'
+  {
+    "command": "gm",
+    "url": "https://www.google.com",
+    "search": "/maps?q=",
+    "help-command": "gm (;&ltquery&gt)",
+    "help-desc": "Google Maps",
+    "options-text": "Search Google Maps"
   },
-  { command: 'i',
-    url: 'https://inbox.google.com',
-    search: '/search/',
-    'help-command': 'i (;&ltquery&gt)',
-    'help-desc': 'Google Inbox',
-    'options-text': 'Search Google Inbox'
+  {
+    "command": "i",
+    "url": "https://inbox.google.com",
+    "search": "/search/",
+    "help-command": "i (;&ltquery&gt)",
+    "help-desc": "Google Inbox",
+    "options-text": "Search Google Inbox"
   },
-  { command: 'img',
-    url: 'https://www.google.com',
-    search: '/search?tbm=isch&q=',
-    'help-command': 'img (;&ltquery&gt)',
-    'help-desc': 'Google Images',
-    'options-text': 'Search Google Images'
+  {
+    "command": "img",
+    "url": "https://www.google.com",
+    "search": "/search?tbm=isch&q=",
+    "help-command": "img (;&ltquery&gt)",
+    "help-desc": "Google Images",
+    "options-text": "Search Google Images"
   },
-  { command: 'k',
-    url: 'https://keep.google.com',
-    search: '/#search/text=',
-    'help-command': 'k (;&ltquery&gt)',
-    'help-desc': 'Google Keep',
-    'options-text': 'Search Google Keep'
+  {
+    "command": "k",
+    "url": "https://keep.google.com",
+    "search": "/#search/text=",
+    "help-command": "k (;&ltquery&gt)",
+    "help-desc": "Google Keep",
+    "options-text": "Search Google Keep"
   }
 ];
diff --git a/css.css b/css.css
@@ -82,7 +82,7 @@ button {
   border: 0;
   color: var(--bg-color);
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
+  transition: all 0.17s cubic-bezier(.25,.8,.25,1);
   border-radius: 4px;
 }
 .menuBtn:hover {
@@ -95,6 +95,8 @@ button {
   outline: none;
 }
 
+#addCommandBtn,
+#customCommandsHelpBtn,
 #submitIssueBtn {
   background-color: #928374;
   margin-right: 5px;
@@ -146,3 +148,14 @@ button {
 #input-box::selection {
   background: #458588;
 }
+
+#customCommandsTextarea {
+  background-color: #3c3836;
+  outline: 1px solid var(--bg-color);
+  border: 1px solid var(--bg-color);
+  color: var(--text-color);
+}
+#customCommandsTextarea:focus {
+  /*outline: 1px solid var(--text-color);*/
+  outline: none;
+}