Skip to content

Commit ab49459

Browse files
sashafirsovsashafirsov
committed
1 parent 96225ed commit ab49459

6 files changed

+67
-58
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,5 @@ dist
105105

106106
# TernJS port file
107107
.tern-port
108+
109+
.gradle

‎demo/demo.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
main{ display: flex; flex-wrap: wrap; justify-content:space-evenly; }
2+
html-demo-element{margin: 1rem 0;}

‎demo/index.html

+10-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<style>
6-
6+
@import "demo.css";
77
</style>
88
</head>
99
<body>
@@ -12,22 +12,24 @@ <h1> slotted-element demo </h1>
1212
<a href="https://github.com/sashafirsov/slotted-element"><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">git</a> |
1313
<a href="render-from-json.html"> fetch-element demo </a> |
1414
<a href="template-demo.html"> template demo </a>
15+
1516
<p>
1617
<var>slotted-element</var> is web component implementing slots without shadow DOM.
1718
It is based on <var>fetch-element</var> component to fetch data and render from retrieved JSON or HTML.
1819
</p>
19-
<html-demo-element>
20+
<main>
21+
<html-demo-element legend="From url">
2022
<slotted-element src="embedded.html"></slotted-element>
2123
</html-demo-element>
2224

23-
<html-demo-element title="Error case">
25+
<html-demo-element legend="Error case">
2426
<slotted-element src="https://badUrl.heck">
2527
<p slot="loading" hidden>Loading... ⏳ </p>
2628
<p slot="error" hidden>Something went wrong. 😭 </p>
2729
</slotted-element>
2830
</html-demo-element>
2931

30-
<html-demo-element title="Content would be placed inside of 'loaded' slot ">
32+
<html-demo-element legend="Content would be placed inside of 'loaded' slot ">
3133
<slotted-element src="embedded.html">
3234
<fieldset>
3335
<legend> Slots located in wrapper </legend>
@@ -38,7 +40,7 @@ <h1> slotted-element demo </h1>
3840
</slotted-element>
3941
</html-demo-element>
4042

41-
<html-demo-element>
43+
<html-demo-element legend="From key:value JSON">
4244
<slotted-element src="doc.json">
4345
<fieldset>
4446
<legend> <b>doc.json</b> as table </legend>
@@ -47,11 +49,11 @@ <h1> slotted-element demo </h1>
4749
</slotted-element>
4850
</html-demo-element>
4951

50-
<html-demo-element title="array dwarfs.json as table">
52+
<html-demo-element legend="array dwarfs.json as table">
5153
<slotted-element src="dwarfs.json"></slotted-element>
5254
</html-demo-element>
53-
54-
<script type="module" src="https://unpkg.com/[email protected].1/html-demo-element.js"></script>
55+
</main>
56+
<script type="module" src="https://unpkg.com/[email protected].5/html-demo-element.js"></script>
5557
<script type="module" src="../slotted-element.js"></script>
5658

5759
</body>

‎demo/render-from-json.html

+27-24
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,40 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>render table from json - FetchElement</title>
6-
<script type="module" src="https://unpkg.com/[email protected]/html-demo-element.js"></script>
6+
<script type="module" src="https://unpkg.com/[email protected]/html-demo-element.js"></script>
7+
<style>
8+
@import "demo.css";
9+
</style>
710
</head>
811
<body>
912
<h1> fetch-element render from JSON demo </h1>
1013
<a href="https://github.com/sashafirsov/slotted-element"><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">git</a> |
1114
<a href="index.html"> slotted-element demo </a>
12-
13-
<html-demo-element title="Custom renderer">
14-
<json-render-element src="doc.json"></json-render-element>
15-
<script type="module">
16-
import FetchElement from '../fetch-element.js';
17-
window.customElements.define('json-render-element',
18-
class JsonElement extends FetchElement
19-
{
20-
render(json)
15+
<main>
16+
<html-demo-element legend="Custom renderer">
17+
<json-render-element src="doc.json"></json-render-element>
18+
<script type="module">
19+
import FetchElement from '../fetch-element.js';
20+
window.customElements.define('json-render-element',
21+
class JsonElement extends FetchElement
2122
{
22-
return `<h1>${ json.name }</h1>
23-
<img src="${ json.portrait }" alt="" />
24-
`;
25-
}
26-
});
27-
</script>
28-
</html-demo-element>
29-
30-
<html-demo-element title="Default as table">
31-
<fetch-element src="doc.json"></fetch-element>
32-
</html-demo-element>
23+
render(json)
24+
{
25+
return `<h1>${ json.name }</h1>
26+
<img src="${ json.portrait }" alt="" />
27+
`;
28+
}
29+
});
30+
</script>
31+
</html-demo-element>
3332

34-
<html-demo-element title="Array as table">
35-
<fetch-element src="dwarfs.json"></fetch-element>
36-
</html-demo-element>
33+
<html-demo-element legend="Default as table">
34+
<fetch-element src="doc.json"></fetch-element>
35+
</html-demo-element>
3736

37+
<html-demo-element legend="Array as table">
38+
<fetch-element src="dwarfs.json"></fetch-element>
39+
</html-demo-element>
40+
</main>
3841
</body>
3942
</html>

‎demo/template-demo.html

+9-8
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="utf-8">
55
<style>
6-
6+
@import "demo.css";
77
</style>
8-
<script type="module" src="https://unpkg.com/[email protected].1/html-demo-element.js"></script>
8+
<script type="module" src="https://unpkg.com/[email protected].5/html-demo-element.js"></script>
99
<script type="module" src="../slotted-element.js"></script>
1010

1111
</head>
@@ -17,14 +17,15 @@ <h1> slotted-element with template demo </h1>
1717
<p>
1818
<var>slotted-element</var> is web component implementing slots without shadow DOM. There are 3 ways of template use:
1919
</p>
20-
<html-demo-element title="1. Inline HTML">
20+
<main>
21+
<html-demo-element legend="1. Inline HTML">
2122
<slotted-element>
2223
<h6>inline HTML with slots 🎉</h6>
2324
<p slot="loading" > Not triggered as "src" attribute is not set. </p>
2425
</slotted-element>
2526
</html-demo-element>
2627

27-
<html-demo-element title="2. Template defined by ID">
28+
<html-demo-element legend="2. Template defined by ID">
2829
<template id="template-with-slots">
2930
<h6>template HTML with slots 🥳</h6>
3031
<slot name="slot0" hidden>
@@ -38,7 +39,7 @@ <h6>template HTML with slots 🥳</h6>
3839
</html-demo-element>
3940

4041

41-
<html-demo-element title="2a. Template defined by ID, slots redefined in body.">
42+
<html-demo-element legend="2a. Template defined by ID, slots redefined in body.">
4243
<template id="template-with-slots2">
4344
<h6>template by ID, inline HTML redefines slots 🥳</h6>
4445
<slot name="slot0">slot0 in template would be overridden. </slot>
@@ -49,7 +50,7 @@ <h6>template by ID, inline HTML redefines slots 🥳</h6>
4950
</slotted-element>
5051
</html-demo-element>
5152

52-
<html-demo-element title="3. template defined as property getter">
53+
<html-demo-element legend="3. template defined as property getter">
5354
<demo3-element>
5455
<p slot="slot0">slot0 is overridden in body!</p>
5556
</demo3-element>
@@ -70,7 +71,7 @@ <h6>template by ID, inline HTML redefines slots 🥳</h6>
7071
</html-demo-element>
7172

7273

73-
<html-demo-element title="3a. template defined as instance set property">
74+
<html-demo-element legend="3a. template defined as instance set property">
7475
<slotted-element id="demo3a">
7576
<p slot="slot0">slot0 is overridden in body!</p>
7677
</slotted-element>
@@ -85,6 +86,6 @@ <h6>template by ID, inline HTML redefines slots 🥳</h6>
8586
});
8687
</script>
8788
</html-demo-element>
88-
89+
</main>
8990
</body>
9091
</html>

‎fetch-element.js

+17-18
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ FetchElement extends HTMLElement
1818
{
1919
static get observedAttributes(){ return [ 'src', 'method', 'headers', 'state', 'status', 'error', 'skiprender' ]; }
2020

21+
static get mime2mod(){ return { 'application/json':'./render/json.js'
22+
, 'text/html': FetchElement.prototype.renderHtml
23+
}}
24+
2125
get headers(){ return {} }
2226

2327
abort(){}
@@ -105,33 +109,28 @@ FetchElement extends HTMLElement
105109
try
106110
{ if( this.hasAttribute('skiprender') )
107111
return;
112+
113+
let mod = this.constructor.mime2mod[ this.contentType.split(';')[0] ];
114+
if( typeof mod === 'string' )
115+
mod = (await import(mod)).default;
116+
108117
this.state = 'rendering';
109118

110-
if( this.contentType.includes( 'xml' ) )
111-
{
112-
const xml = ( new window.DOMParser() ).parseFromString( result, "text/xml" );
113-
this.render( xml, this.contentType, this.status, this.responseHeaders );
114-
// todo xslt from xml
115-
}else if( this.contentType.includes( 'html' ) )
116-
{
117-
this.setContent(result);
118-
await wait4DomUpdated();
119-
this.render( result, this.contentType, this.status, this.responseHeaders );
120-
await wait4DomUpdated();
121-
}else if( this.contentType.includes( 'json' ) )
122-
{
123-
await wait4DomUpdated();
124-
const html = this.render( result, this.contentType, this.status, this.responseHeaders );
125-
this.setContent( html || this.json2table( result, [] ) );
126-
await wait4DomUpdated();
127-
}
119+
return ( mod || this.render ).call( this, result, this.contentType, this.status, this.responseHeaders );
128120
}finally
129121
{
130122
this.state = 'loaded';
131123
}
132124
}
133125

134126
render( data, contentType, httpCode, responseHeaders ){}
127+
async renderHtml( data, contentType, httpCode, responseHeaders )
128+
{
129+
this.setContent( data );
130+
await wait4DomUpdated();
131+
this.render( ...arguments );
132+
await wait4DomUpdated();
133+
}
135134

136135
onError( error )
137136
{

0 commit comments

Comments
 (0)