Add TODO's

Simplify example.html
* Don't use djl-lipsum elements instead of p tags * Add section headers * Wrap references to properties in code tags
2021-05-27 01:29:37 +10:00 · 2021-05-27 01:28:47 +10:00 · 2021-05-27 01:19:34 +10:00 · 2021-05-27 01:19:13 +10:00
5 changed files with 76 additions and 16 deletions
--- a/DjlJson.js
+++ b/DjlJson.js
@ -0,0 +1,41 @@
+/**
+ * Retrieve content from remote JSON source
+ * Displays textContent while loading, then replaces with JSON response
+ * @property {string} src         - URI to remote JSON
+ * @property {string} prop        - Property of JSON to display
+ * @property {string} placeholder - Interim content to display while retrieving and reading JSON
+ */
+// TODO: Add callback prop
+// TODO: Allow accessing local objects
+// TODO: Implement attributeChangedCallback and re-fetch
+class DjlJson extends HTMLElement {
+  src; // string
+  prop; // string
+  placeholder; // string
+
+  constructor() {
+    super();
+
+    this.src = this.getAttribute('src')
+    this.prop = this.getAttribute('prop').split('.')
+    this.placeholder = this.textContent
+
+    fetch(this.src)
+      .then(resp => {
+        if (!resp.ok)
+          throw new Error(`Unabled to retrieve resouce ${this.src} (${resp.statusText})`)
+        return resp.json()
+      })
+      .then(json => this.getProp(json, this.prop))
+      .then(prop => this.textContent = prop)
+      .catch(err => { console.error(err); this.textContent = err })
+  }
+
+  getProp(obj, prop) {
+    if (!prop.length) return obj
+    return this.getProp(obj[prop[0]], prop.slice(1))
+  }
+
+}
+
+customElements.define('djl-json', DjlJson)
--- a/DjlLipsum.js
+++ b/DjlLipsum.js
@ -1,14 +1,15 @@
 /**
 * 
- * @property {string} baseText Text that textContent will be based on.
- * @property {number | undefined} length Length of text to be displayed (in characters).
- * If wrap is false, this is inferred as maximum length.
- * @property {boolean} randomStart Whether baseText should pick a random word to start on.
- * @property {boolean} wrap Whether baseText should return to the start if the length
+ * @property {string} baseText           - Text that textContent will be based on.
+ * @property {number | undefined} length - Length of text to be displayed (in characters). If wrap is false, this is inferred as maximum length.
+ * @property {boolean} randomStart       - Whether baseText should pick a random word to start on.
+ * @property {boolean} wrap              - Whether baseText should return to the start if the length
 * condition hasn't been satisfied.
- * @property {string} lipsum Lorem Ipsum text. Used as a fallback if no user supplied
+ * @property {string} lipsum             - Lorem Ipsum text. Used as a fallback if no user supplied
 * text.
 */
+// TODO: Allow child elements
+// TODO: Implement attributeChangedCallback
 class DjlLipsum extends HTMLElement {
  baseText; // string
  length; // number|undefined
--- a/DjlScript.js
+++ b/DjlScript.js
@ -1,11 +1,11 @@
 /**
 * Inline, editable code tag. 
- * Executed and rendered as <cod\> initially; on click displays an <input> of the
+ * Executed and rendered as <code> initially; on click displays an <input> of the
 * JavaScript. On submit re-executes and renders <code>.
- * @property {HTMLElement} code HTML Code element.
- * @property {HTMLFormElement} form HTML Form element.
- * @property {HTMLInputElement} input HTML Input element.
- * @property {string} sourceCode User input source code.
+ * @property {HTMLElement} code       - HTML Code element.
+ * @property {HTMLFormElement} form   - HTML Form element.
+ * @property {HTMLInputElement} input - HTML Input element.
+ * @property {string} sourceCode      - User input source code.
 */
 class DjlScript extends HTMLElement {
  code; // HTMLElement
--- a/example.html
+++ b/example.html
@ -5,26 +5,28 @@
    <title>Web Components Example.</title>
    <!-- TODO: Use your own style sheet? -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.1.min.css"/>
-    <script defer src="DjlScript.js"></script>
+    <script defer src="DjlJson.js"></script>
    <script defer src="DjlLipsum.js"></script>
+    <script defer src="DjlScript.js"></script>
  </head>

  <body>
    <article id="djl-lipsum">
-      <p><djl-lipsum>This is a djl-lipsum element. Without a value, it outputs lorem ipsum</djl-lipsum></p>
+      <p>Below is a djl-lipsum element. Without a value, it outputs lorem ipsum</p>
      <blockquote>
        <p><djl-lipsum></djl-lipsum></p>
      </blockquote>
-      <p><djl-lipsum>The random-start property starts the text at a random word.</djl-lipsum></p>
+      <p>The <code>random-start</code> property starts the text at a random word.</p>
      <blockquote>
        <p><djl-lipsum random-start></djl-lipsum></p>
      </blockquote>
-      <p><djl-lipsum>You can limit the length of the text with the length property.</djl-lipsum></p>
+      <p>You can limit the length of the text with the <code>length</code> property.</p>
      <blockquote>
        <p><djl-lipsum length="25"></djl-lipsum></p>
      </blockquote>
+      <p>You can provide arbitrary text to display (instead of lipsum) by giving it inside the element</p>
      <blockquote>
-        <p><djl-lipsum length="250" wrap>You can combine the length and wrap attributes to get placeholder text that wraps around until text is length long.</djl-lipsum></p>
+          <djl-lipsum length="250" wrap>You can combine the length and wrap attributes to get placeholder text that wraps around until text is length long.</djl-lipsum>
      </blockquote>
      <blockquote>
        <p><djl-lipsum random-start length="250" wrap>You can also combine all three attributes.</djl-lipsum></p>
@ -32,8 +34,17 @@
    </article>

    <article id="djl-script">
+      <p>Below are some examples of the djl-code element. It executes the JavaScript given as it's text, and allows editing and re-execution by clicking on it</p>
      <p><djl-script>['This','is','a','djl-script','element', '(click', 'on', 'me', 'to', 'edit).'].join(' ');</djl-script></p>
      <p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
    </article>
+
+
+    <article id="djl-json">
+      <p>Below are some examples of the djl-json element. It retrieves a JSON document from <code>src</code>, and displays the property <code>prop</code></p>
+      <p>My name in example.json is: <djl-json src="example.json" prop="about.name">loading...</djl-json></p>
+      <p>My pets are called: <djl-json src="example.json" prop="about.pets">loading...</djl-json></p>
+    </article>
+    </article>
  </body>
 </html>
--- a/example.json
+++ b/example.json
@ -0,0 +1,7 @@
+{
+    "about": {
+        "name": "Dylan Lom",
+        "dob": "2020-10-09T00:00:00+1000",
+        "pets": [ "Banjo", "Big Bird" ]
+    }
+}
Author	SHA1	Message	Date
Dylan Lom	81322e81a2	Add TODO's	2021-05-27 01:29:37 +10:00
Dylan Lom	44cfe71d0d	Simplify example.html * Don't use djl-lipsum elements instead of p tags * Add section headers * Wrap references to properties in code tags	2021-05-27 01:28:47 +10:00
Dylan Lom	3702767a44	Tidy up JSDoc comments	2021-05-27 01:19:34 +10:00
Dylan Lom	a02cc85b7f	Add DjlJson element Still rudimentary, liable to change * Add supporting example.json * Include some basic examples in example.html	2021-05-27 01:19:13 +10:00