Added initial version.

README.md

@@ -1,3 +1,50 @@
-# modules-search-miyu
+# Lewp module "miyu"
 
-A simple search form that provides the registration of callbacks when the search field changes.
+## Description
+A simple search form that provides the registration of callbacks when the search field changes. In addition to that, it is possible to change the listener event and undo to the previous state.
+
+## Installation
+In the terminal, go either to the global module or site module level of your hierarchy.
+Then invoke the following command.
+```bash
+git clone git@gitlab.com:lewp/modules-search-miyu.git modules/search/miyu
+```
+
+## Dependencies
+
+The module depends on MoViS, which can be found [here](https://gitlab.com/emirror-de/movis).
+Clone this repository into your global or site level lib/js folder:
+```bash
+git clone git@gitlab.com:emirror-de/movis.git lib/js/movis
+```
+
+## Configuration
+In your page file, add the following command to add the module to your page.
+```php
+$this->addModule(
+    "search_miyu",
+    [
+        "button_content_node" => $this->createTextNode('Submit'),
+        "searchinput_placeholder" => 'Input your search term'
+    ]
+);
+```
+
+## Available parameters
+
+| Key | Default value | Example value | Description |
+| ---- | ---- | ---- |---- |
+| button_content_node | $this->createTextNode('Submit') |  | Can be any DOMNode that you want to use. |
+| searchinput_placeholder |  | "Enter your search..." | The value of the placeholder property of the input field. |
+
+## Javascript API
+
+The following JavaScript functions are available. By default, all registered listeners are triggered on the keyup event of the input element.
+
+| Member name | Parameter | Description |
+| ---- | ---- | ---- |
+| addStateListener | callback | You can register a callback function that is triggered on the event that is registered on the input element. |
+removeStateListener | callback | Provides the ability to remove a function that has previously been added. |
+| getState | | Returns the current value of the input element. |
+| undoState | | Restores the last value of the input element and triggers all registered state listener functions. |
+| changeEventListener | newEvent | Provides the ability to use another event than "keyup" to trigger the listener functions. |

etc/config.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+    //"element_type_module" => "form",
+    "dependencies" => [
+        "javascript" => [
+            "movis_js_movis"
+        ]
+    ]
+];

js/00-functions.js

@@ -0,0 +1,41 @@
+// helper function to be able to change the event listener
+function updateState() {
+    states.search = this.value;
+}
+
+// checks if the pressed key equals to return key
+function updateStateOnReturnKey(e) {
+    if (e.keyCode === 13) {
+        updateState.call(this);
+    }
+}
+
+// removes the old event listener and applies the new one
+function changeEvent(newEvent) {
+    // remove the old listener
+    switch (states.event) {
+        case "onenterkey":
+            this.removeEventListener("keyup", updateStateOnReturnKey);
+            break;
+        default:
+            this.removeEventListener(states.event, updateState);
+            break;
+    }
+    states.event = newEvent;
+    // add the new listener
+    switch (newEvent) {
+        case "onenterkey":
+            this.addEventListener("keyup", updateStateOnReturnKey);
+            break;
+        default:
+            this.addEventListener(states.event, updateState);
+            break;
+    }
+}
+
+// updates the search field if the state does not match the value
+function updateSearchInput(state) {
+    if (this.value !== state) {
+        this.value = state;
+    }
+}

js/01-init.js

@@ -0,0 +1,23 @@
+let states = new Movis();
+// add search state
+states.addState("search", "");
+states.addState("event", "keyup");
+
+let searchInput = self.querySelector('input[type="text"]');
+// change state when the search field changes
+searchInput.addEventListener(
+    states.event,
+    updateState
+);
+
+// the following function updates the input field when the state has been undone
+// manually
+states.addStateListener("search", (state) => {
+    updateSearchInput.call(searchInput, state);
+});
+
+// add button behavior
+let submitButton = self.querySelector('button');
+submitButton.addEventListener("click", () => {
+    updateState.call(searchInput)
+});

js/99-return.js

@@ -0,0 +1,17 @@
+return {
+    "addStateListener": (callback) => {
+        states.addStateListener("search", callback);
+    },
+    "removeStateListener": (callback) => {
+        states.removeStateListener("search", callback);
+    },
+    "getState": () => {
+        return states.search;
+    },
+    "undoState": () => {
+        states.undoState("search");
+    },
+    "changeEventListener": (newEvent) => {
+        changeEvent.call(searchInput, newEvent);
+    }
+};

module.php

@@ -0,0 +1,60 @@
+<?php
+
+return new class extends Lewp\Module
+{
+
+    const KEY_OPTIONS_SEARCHINPUT_PLACEHOLDER = "searchinput_placeholder";
+    const KEY_OPTIONS_BUTTON_CONTENT_NODE = "button_content_node";
+
+    private function createSearchInput(string $placeholder)
+    {
+        return $this->createAndSetupElement(
+            'input',
+            '',
+            [
+                "type" => "text",
+                "placeholder" => $placeholder
+            ]
+        );
+    }
+
+    private function createButton($content_node = null)
+    {
+        $button = $this->createAndSetupElement(
+            'button',
+            '',
+            [
+                "type" => "button"
+            ]
+        );
+
+        if (isset($content_node)) {
+            $button->appendChild($this->importNode($content_node, true));
+        } else {
+            $button->appendChild($this->createTextNode('Submit'));
+        }
+
+        return $button;
+    }
+
+    public function run(array $options = []) : bool
+    {
+        $options += [
+            self::KEY_OPTIONS_SEARCHINPUT_PLACEHOLDER => "",
+            self::KEY_OPTIONS_BUTTON_CONTENT_NODE => null
+        ];
+
+        $this->appendChild(
+            $this->createSearchInput(
+                $options[self::KEY_OPTIONS_SEARCHINPUT_PLACEHOLDER]
+            )
+        );
+
+        $this->appendChild(
+            $this->createButton(
+                $options[self::KEY_OPTIONS_BUTTON_CONTENT_NODE]
+            )
+        );
+        return true;
+    }
+};