- Enhancement: Add demo

brettz9 · brettz9 · commit 66c961c42de8 · 2019-10-13T10:53:45.000+08:00
- Docs: Fix browser usage example
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
           "console",
           "Date.now",
           "document.head",
+          "document.querySelector",
           "JSON",
           "Object.keys",
           "XMLHttpRequest"
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ magic is necessary:
 
 <script src="node_modules/jsonpath-plus/dist/index-umd.js"></script>
 <script>
-const result = JSONPath({path: '...', json: ...});
+const result = JSONPath.JSONPath({path: '...', json: ...});
 </script>
 ```
 
diff --git a/demo/index.css b/demo/index.css
@@ -0,0 +1,19 @@
+#jsonpath {
+  width: 90%;
+  margin-bottom: 10px;
+}
+
+.container {
+  float: left;
+  width: 48%;
+}
+
+.container textarea {
+  margin: 2%;
+  width: 98%;
+  height: 565px;
+}
+
+#demoNode {
+  font-size: small;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>JSONPath Demo</title>
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <h2>JSONPath Demo <i id="demoNode">(To demo on Node instead, see the <a href="https://npm.runkit.com/jsonpath-plus">library on Runkit</a>.)</i>
+</h2>
+    <form>
+      <div>
+        <label><b>JSONPath:</b>
+          <input id="jsonpath" placeholder="$.books" />
+        </label>
+      </div>
+      <div id="jsonSampleContainer" class="container">
+        <label><b>JSON sample:</b>
+          <textarea id="jsonSample" placeholder="{&quot;books&quot;: []}"></textarea>
+        </label>
+      </div>
+      <div id="resultContainer" class="container">
+        <label><b>Results:</b>
+          <textarea id="results"></textarea>
+        </label>
+      </div>
+    </form>
+    <script src="../dist/index-umd.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,48 @@
+/* globals JSONPath */
+/* eslint-disable import/unambiguous */
+
+// Todo: Extract testing example paths/contents and use for a
+//         pulldown that can populate examples
+
+// Todo: Make configurable with other JSONPath options
+
+// Todo: Allow source to be treated as an (evaled) JSON object
+
+// Todo: Could add JSON/JS syntax highlighting in sample and result,
+//   ideally with a jsonpath-plus parser highlighter as well
+
+const $ = (s) => document.querySelector(s);
+
+const updateResults = () => {
+    const jsonSample = $('#jsonSample');
+    const reportValidity = () => {
+        // Doesn't work without a timeout
+        setTimeout(() => {
+            jsonSample.reportValidity();
+        });
+    };
+    let json;
+    try {
+        json = JSON.parse(jsonSample.value);
+        jsonSample.setCustomValidity('');
+        reportValidity();
+    } catch (err) {
+        jsonSample.setCustomValidity('Error parsing JSON: ' + err.toString());
+        reportValidity();
+        return;
+    }
+    const result = JSONPath.JSONPath({
+        path: $('#jsonpath').value,
+        json
+    });
+
+    $('#results').value = JSON.stringify(result, null, 2);
+};
+
+$('#jsonpath').addEventListener('change', () => {
+    updateResults();
+});
+
+$('#jsonSample').addEventListener('change', () => {
+    updateResults();
+});
diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "open-docs": "open-cli http://localhost:8084/docs/ts/ && npm start",
     "mocha": "mocha --require test-helpers/node-env.js test",
     "test": "npm run rollup && npm run mocha",
+    "open": "open-cli http://localhost:8084/demo/ && npm start",
     "start": "static -p 8084",
     "rollup": "rollup -c",
     "eslint": "eslint --ext js,md,html .",
