HTML attributes API: configure the addon via HTML attributes

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 169)</p>
+    <readthedocs-search show-modal-keycode="220"></readthedocs-search>
+
     <h2>Notification</h2>
 
     <readthedocs-notification class="raised toast"></readthedocs-notification>

src/search.js

@@ -54,6 +54,7 @@ export class SearchElement extends LitElement {
 
     // TODO: expand the default supported styles
     this.className = this.className || "raised floating";
+    this.showModalKeycode = parseInt(this.getAttribute("show-modal-keycode")) || 169;
 
     this.config = {};
     this.show = false;
@@ -481,7 +482,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();