0.0.20

bahrus · Mar 8, 2024 · 13c3bd5 · 13c3bd5
1 parent 08af453
commit 13c3bd5
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -31,8 +31,30 @@ Suppose we want the input element *be-fetching* adorns to use the input element
 
 ## Example 3 Web Component At Your Service [TODO]
 
+*be-fetching* can be trained to interact with more than one input (or form-associated) element, however.
+
 Like [*be-kvetching*](https://github.com/bahrus/be-kvetching), *be-fetching* can dynamically turn an unknown element into a web component, where that web component serves as a non visible "web component as a service".  But *be-fetching* adds a few bells and whistles on top of what *be-kvetching* provides:
 
+```html
+<label for=operation>Operation:</label>
+<input id=operation value=integrate>
+<label for=expression>Expression:</label>
+<input id=expression value="x^2">
+<newton-microservice 
+    for="operation expression" 
+    be-fetching oninput="({operation, expression}) => ({
+        url: `https://newton.now.sh/api/v2/${operation}/${expression}`
+    })"
+    target=json-viewer[-object]
+    onerror="console.error(href)"
+></newton-microservice>
+<json-viewer -object aria-live=polite></json-viewer>
+```
+
+This will recalculate the integral (in this case) as the user types the expression.
+
+To only recalculate it when focus is lost, and the onchange attribute:
+
 ```html
 <label for=operation>Operation:</label>
 <input id=operation value=integrate>
@@ -43,7 +65,7 @@ Like [*be-kvetching*](https://github.com/bahrus/be-kvetching), *be-fetching* can
     oninput="{
         url: `https://newton.now.sh/api/v2/${operation}/${expression`}`
     }"
-    be-fetching
+    be-fetching onchange
     target=json-viewer[-object]
     credentials=omit 
     onerror="console.error(href)"

diff --git a/demo/Example3.html b/demo/Example3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example 3</title>
+    <script type=importmap>
+        {
+            "imports": {
+                "be-enhanced/": "../node_modules/be-enhanced/",
+                "be-hive/":  "../node_modules/be-hive/",
+                "mount-observer/": "../node_modules/mount-observer/",
+                "trans-render/": "../node_modules/trans-render/",
+                "xtal-element/": "../node_modules/xtal-element/"
+            }
+        }
+    </script>
+    <script type=module>
+        import '../behivior.js';
+    </script>
+</head>
+<body>
+    <label for=operation>Operation:</label>
+    <input id=operation value=integrate>
+    <label for=expression>Expression:</label>
+    <input id=expression value="x^2">
+    <newton-microservice 
+        for="operation expression" 
+        oninput="({operation, expression}) => ({
+            url: `https://newton.now.sh/api/v2/${operation}/${expression}`
+        })"
+        be-fetching
+        target=json-viewer[-object]
+        credentials=omit 
+        onerror="console.error(href)"
+    ></newton-microservice>
+    <json-viewer -object aria-live=polite></json-viewer>
+</body>
+</html>