Search: define which element & event shows the modal (#58)

Define two new attributes `show-modal-selector` and `show-modal-event`
to allow the user defining which HTML element will show the modal.

![Peek 2023-04-20
09-45](https://user-images.githubusercontent.com/244656/233418904-c8cf3246-5deb-4320-ac8d-4139e999f9f3.gif)

In this example, when clicking on the `input` it will show the modal.

.pre-commit-config.yaml

@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: "v2.7.1"
+    hooks:
+      - id: prettier
+        args: ["--write", "src/**", "*.js", "*.json"]

public/index.html

@@ -20,7 +20,12 @@ <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>
+    <readthedocs-search
+        trigger-keycode="220"
+        trigger-selector="#search-input"
+    ></readthedocs-search>
+
+    <p>Clicking in the following input should show the search modal: <input id="search-input" placeholder="Search docs" /></p>
 
     <h2>Notification</h2>
 

src/search.js

@@ -41,7 +41,9 @@ export class SearchElement extends LitElement {
       state: true,
     },
     cssFormFocusClasses: { state: true },
-    showModalKeycode: { type: Number, attribute: "show-modal-keycode" },
+    triggerKeycode: { type: Number, attribute: "trigger-keycode" },
+    triggerSelector: { type: String, attribute: "trigger-selector" },
+    triggerEvent: { type: String, attribute: "trigger-event" },
   };
 
   static styles = styleSheet;
@@ -64,7 +66,9 @@ export class SearchElement extends LitElement {
     this.currentQueryRequest = null;
     this.defaultFilter = null;
     this.filters = [];
-    this.showModalKeycode = 191;
+    this.triggerKeycode = 191;
+    this.triggerSelector = null;
+    this.triggerEvent = "focusin";
   }
 
   loadConfig(config) {
@@ -483,20 +487,43 @@ export class SearchElement extends LitElement {
       this.closeModal();
     }
     // Show the modal with `/`
-    else if (e.keyCode === this.showModalKeycode && !this.show) {
+    else if (e.keyCode === this.triggerKeycode && !this.show) {
       // prevent opening "Quick Find" in Firefox
       e.preventDefault();
       this.showModal();
     }
   };
 
+  _handleShowModalUser = (e) => {
+    e.preventDefault();
+    this.showModal();
+  };
+
   connectedCallback() {
     super.connectedCallback();
     // open search modal if "forward slash" button is pressed
     document.addEventListener("keydown", this._handleShowModal);
+
+    if (this.triggerSelector) {
+      let element = document.querySelector(this.triggerSelector);
+      if (element !== undefined) {
+        element.addEventListener(this.triggerEvent, this._handleShowModalUser);
+      }
+    }
   }
+
   disconnectedCallback() {
     document.removeEventListener("keydown", this._handleShowModal);
+    if (this.triggerSelector) {
+      let element = document.querySelector(this.triggerSelector);
+      if (element !== undefined) {
+        element.removeEventListener(
+          this.triggerEvent,
+          this._handleShowModalUser
+        );
+      }
+    }
+
     super.disconnectedCallback();
   }
 }