demo helper script

2 files changed, 93 insertions, 0 deletions

diff --git a/www/demo.js b/www/demo.js
new file mode 100644
index 00000000..b7cf4b5f
--- /dev/null
+++ b/www/demo.js
@@ -0,0 +1,53 @@
+function addScript(url) {
+    var myScript = document.createElement('script');
+    myScript.setAttribute('src', url);
+    document.head.appendChild(myScript);
+}
+
+function interpolate(str) {
+    var returnStr = "";
+    var charArray = Array.from(str);
+    while (charArray.length > 0) {
+        var current = charArray.shift();
+        if (current === "$" && charArray[0] === "{") {
+            var evalStr = "(function() { return "
+            charArray.shift();
+            while (charArray.length > 0 && charArray[0] !== "}") {
+                evalStr += charArray.shift()
+            }
+            charArray.shift();
+            evalStr += " })()";
+            console.log("Evaling", evalStr);
+            returnStr += eval(evalStr);
+        } else {
+            returnStr += current;
+        }
+    }
+    return returnStr;
+}
+
+function initMockRequests() {
+    if(typeof MockRequests === "undefined" ||
+        typeof htmx === "undefined" ||
+        typeof _hyperscript === "undefined") {
+        console.log("Not defined yet");
+        setTimeout(initMockRequests, 20);
+    } else {
+        console.log("defining");
+        htmx.findAll("template").forEach(function(elt){
+            if(elt.getAttribute("url")){
+                MockRequests.setDynamicMockUrlResponse(elt.getAttribute("url"),
+                    {dynamicResponseModFn:
+                            function(request, response) {
+                                return interpolate(elt.innerHTML);
+                            },
+                    usePathnameForAllQueries: true});
+            }
+        });
+    }
+}
+
+addScript("https://unpkg.com/htmx.org@1.6.1/dist/htmx.js");
+addScript("https://unpkg.com/hyperscript.org@0.9.4/dist/_hyperscript_w9y.min.js");
+addScript("https://unpkg.com/mock-requests@1.3.2/index.js");
+initMockRequests();
diff --git a/www/demo.md b/www/demo.md
new file mode 100644
index 00000000..35a1e50a
--- /dev/null
+++ b/www/demo.md
@@ -0,0 +1,40 @@
+---
+layout: layout.njk
+title: </> htmx - high power tools for html
+---
+
+# htmx demo helper script
+
+By adding the script tag below to your demo site (e.g. jsFiddle) you will have a full installation of
+<a href="https://htmx.org">htmx</a> and <a href="https://hyperscript.org">hyperscript</a> for your
+demo.
+
+
+Additionally, you can add mock responses by simply adding `template` tags with the
+`url` attribute. The response for that url will be the innerHTML of the template. You
+    may embed simple expressions in the template with a `${}` syntax.
+
+## Code
+
+Copy this to your demo site:
+
+```html
+  <script src="https://htmx.org/demo.js"></script>
+```
+
+## Example
+
+This is an example of the code in action:
+
+```html
+<script src="https://htmx.org/demo.js"></script>
+<!-- post to /foo -->
+<button hx-post="/foo" hx-target="#result">Count Up</button> <output id="result"></output>
+<!-- respond to /foo -->
+<script>
+    globalInt = 0;
+</script>
+<template url="/foo">
+    ${globalInt++}
+</template>
+```