Compare commits
4 Commits
fe3d7465ae
...
81322e81a2
Author | SHA1 | Date |
---|---|---|
Dylan Lom | 81322e81a2 | |
Dylan Lom | 44cfe71d0d | |
Dylan Lom | 3702767a44 | |
Dylan Lom | a02cc85b7f |
|
@ -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)
|
13
DjlLipsum.js
13
DjlLipsum.js
|
@ -1,14 +1,15 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @property {string} baseText Text that textContent will be based on.
|
* @property {string} baseText - Text that textContent will be based on.
|
||||||
* @property {number | undefined} length Length of text to be displayed (in characters).
|
* @property {number | undefined} length - Length of text to be displayed (in characters). If wrap is false, this is inferred as maximum length.
|
||||||
* 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} 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 {boolean} wrap Whether baseText should return to the start if the length
|
|
||||||
* condition hasn't been satisfied.
|
* 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.
|
* text.
|
||||||
*/
|
*/
|
||||||
|
// TODO: Allow child elements
|
||||||
|
// TODO: Implement attributeChangedCallback
|
||||||
class DjlLipsum extends HTMLElement {
|
class DjlLipsum extends HTMLElement {
|
||||||
baseText; // string
|
baseText; // string
|
||||||
length; // number|undefined
|
length; // number|undefined
|
||||||
|
|
10
DjlScript.js
10
DjlScript.js
|
@ -1,11 +1,11 @@
|
||||||
/**
|
/**
|
||||||
* Inline, editable code tag.
|
* 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>.
|
* JavaScript. On submit re-executes and renders <code>.
|
||||||
* @property {HTMLElement} code HTML Code element.
|
* @property {HTMLElement} code - HTML Code element.
|
||||||
* @property {HTMLFormElement} form HTML Form element.
|
* @property {HTMLFormElement} form - HTML Form element.
|
||||||
* @property {HTMLInputElement} input HTML Input element.
|
* @property {HTMLInputElement} input - HTML Input element.
|
||||||
* @property {string} sourceCode User input source code.
|
* @property {string} sourceCode - User input source code.
|
||||||
*/
|
*/
|
||||||
class DjlScript extends HTMLElement {
|
class DjlScript extends HTMLElement {
|
||||||
code; // HTMLElement
|
code; // HTMLElement
|
||||||
|
|
21
example.html
21
example.html
|
@ -5,26 +5,28 @@
|
||||||
<title>Web Components Example.</title>
|
<title>Web Components Example.</title>
|
||||||
<!-- TODO: Use your own style sheet? -->
|
<!-- 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"/>
|
<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="DjlLipsum.js"></script>
|
||||||
|
<script defer src="DjlScript.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<article id="djl-lipsum">
|
<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>
|
<blockquote>
|
||||||
<p><djl-lipsum></djl-lipsum></p>
|
<p><djl-lipsum></djl-lipsum></p>
|
||||||
</blockquote>
|
</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>
|
<blockquote>
|
||||||
<p><djl-lipsum random-start></djl-lipsum></p>
|
<p><djl-lipsum random-start></djl-lipsum></p>
|
||||||
</blockquote>
|
</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>
|
<blockquote>
|
||||||
<p><djl-lipsum length="25"></djl-lipsum></p>
|
<p><djl-lipsum length="25"></djl-lipsum></p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
<p>You can provide arbitrary text to display (instead of lipsum) by giving it inside the element</p>
|
||||||
<blockquote>
|
<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>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<p><djl-lipsum random-start length="250" wrap>You can also combine all three attributes.</djl-lipsum></p>
|
<p><djl-lipsum random-start length="250" wrap>You can also combine all three attributes.</djl-lipsum></p>
|
||||||
|
@ -32,8 +34,17 @@
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article id="djl-script">
|
<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>['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>
|
<p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
|
||||||
</article>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"about": {
|
||||||
|
"name": "Dylan Lom",
|
||||||
|
"dob": "2020-10-09T00:00:00+1000",
|
||||||
|
"pets": [ "Banjo", "Big Bird" ]
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue