adds a simple example

lunu-bounir · Sep 8, 2022 · 2f36fe7 · 2f36fe7
1 parent 74ae936
commit 2f36fe7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 0 deletions.
diff --git a/README → README.md b/README → README.md
diff --git a/example/index.css b/example/index.css
@@ -0,0 +1,9 @@
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+#counter {
+  border: solid 1px;
+  padding: 5px;
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+  <path-view>
+    <span id="counter"></span>
+  </path-view>
+  <textarea id="content" rows="10"></textarea>
+
+  <script type="text/javascript" src="../path-view.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+</body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,26 @@
+const view = document.querySelector('path-view');
+view.build([
+  {title: '1 - This is a Long Text', checked: true},
+  {
+    title: '2 - This is a Long Text',
+    checked: true,
+    extra: {
+      comment: 'You can have extra properties'
+    }
+  },
+  {title: '3 - This is a Long Text'},
+  {title: '4 - This is a Long Text'},
+  {title: '5 - This is a Long Text'},
+  {title: '6 - This is a Long Text'},
+  {title: '7 - This is a Long Text'},
+  {title: '8 - This is a Long Text'},
+  {title: '9 - This is a Long Text'},
+  {title: '10 - This is a Long Text'},
+  {title: '11 - This is a Long Text'},
+  {title: '12 - This is a Long Text'}
+]);
+view.addEventListener('change', e => {
+  document.getElementById('counter').textContent = e.target.value.title;
+  document.getElementById('content').value = JSON.stringify(e.target.value, undefined, '  ');
+});
+view.dispatchEvent(new Event('change'));
diff --git a/screenshot.png b/screenshot.png