HTML attributes API: configure the addon via HTML attributes (#56)

By default the search modal is shown when pressing `/`. However, we want
this to be configurable by the user. This can be achieved by passing
`show-modal-keycode` attribute to the web component as follows:

```html
<readthedocs-search show-modal-keycode="220">
</readthedocs-search>
```

In this case, it will be shown when pressing `\`.

I think this is a good pattern for static values that won't be changed
from the dashboard or similar in a dynamic way.

Related #13

Author: humitos

public/index.html

@@ -16,6 +16,12 @@ <h1>Documentation Addons</h1>
       <li><a href="/pelican">Pelican</a></li>
     </ul>
 
+    <h2>Search</h2>
+
+    <p>Nothing to see here, just a placeholder to put the <code>readthedocs-search</code> tag.</p>
+    <p>Currently, it modifies the tag to be shown when pressing <code>\</code> (keycode 220) instead of <code>/</code> (keycode 191)</p>
+    <readthedocs-search show-modal-keycode="220"></readthedocs-search>
+
     <h2>Notification</h2>
 
     <readthedocs-notification class="raised toast"></readthedocs-notification>

src/search.js

@@ -41,6 +41,7 @@ export class SearchElement extends LitElement {
       state: true,
     },
     cssFormFocusClasses: { state: true },
+    showModalKeycode: { type: Number, attribute: "show-modal-keycode" },
   };
 
   static styles = styleSheet;
@@ -63,6 +64,7 @@ export class SearchElement extends LitElement {
     this.currentQueryRequest = null;
     this.defaultFilter = null;
     this.filters = [];
+    this.showModalKeycode = 191;
   }
 
   loadConfig(config) {
@@ -481,7 +483,7 @@ export class SearchElement extends LitElement {
       this.closeModal();
     }
     // Show the modal with `/`
-    else if (e.keyCode === 191 && !this.show) {
+    else if (e.keyCode === this.showModalKeycode && !this.show) {
       // prevent opening "Quick Find" in Firefox
       e.preventDefault();
       this.showModal();