jtdal
Version:
Small template engine based on Zope TAL, using data attributes
316 lines (311 loc) • 12.5 kB
HTML
<html>
<head>
<title>jTDAL - data-tdal-attributes test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm">
</div>
</div>
<div class="row">
<div class="col-sm">
<h1>Condition test</h1>
<code>Data:
{
'url': 'https://picsum.photos/id/1025/480/320'
}
</code>
<div class="row" id="results-tdal-condition">
</div>
</div>
<div class="col-sm">
<h1>Condition in repeat test</h1>
<code>Data:
{
items:
[
{ 'URL': 'https://picsum.photos/id/1025/480/320' },
{ 'url': 'https://picsum.photos/id/1025/480/320' },
{ 'Url': 'https://picsum.photos/id/1025/480/320' },
{ 'url': 'https://picsum.photos/id/1026/480/320' }
]
}
</code>
<div class="row" id="results-tdal-condition-in-repeat">
</div>
</div>
<div class="col-sm">
<h1>Attributes test</h1>
<code>Data:
{
'url': 'https://picsum.photos/id/1025/480/320'
}
</code>
<div class="row" id="results-tdal-attributes">
</div>
</div>
<div class="col-sm">
<h1>Repeat test</h1>
<code>Data:
{
'items':
[
1025,
1062,
244,
40,
495,
582
]
}
</code>
<div class="row" id="results-tdal-repeat">
</div>
</div>
<div class="col-sm">
<h1>Macro test</h1>
<code>Data:
{
'items':
[
10,
9,
8,
7,
6,
5
]
}
</code>
<div class="row" id="results-tdal-macro">
</div>
</div>
</div>
</div>
<script id="template-tdal-condition" type="text/html">
<div class="card">
<h4 class="section">Show if URL is missing</h4>
<div class="section">
<code><div data-tdal-condition="!url" data-tdal-content="STRING:URL is missing: {url}">URL is missing</div></code>
</div>
<div class="section">
<div data-tdal-condition="!url" data-tdal-content="STRING:URL is missing: {url}">URL is missing</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if URL exists</h4>
<div class="section">
<code><div data-tdal-condition="url" data-tdal-content="STRING:URL exists: {url}">URL exists</div></code>
</div>
<div class="section">
<div data-tdal-condition="url" data-tdal-content="STRING:URL exists: {url}">URL exists</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if URL is missing</h4>
<div class="section">
<code><div data-tdal-condition="!URL" data-tdal-content="STRING:URL is missing: {URL}">URL is missing</div></code>
</div>
<div class="section">
<div data-tdal-condition="!URL" data-tdal-content="STRING:URL is missing: {URL}">URL is missing</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if URL exists</h4>
<div class="section">
<code><div data-tdal-condition="URL" data-tdal-content="STRING:URL exists: {URL}">URL exists</div></code>
</div>
<div class="section">
<div data-tdal-condition="URL" data-tdal-content="STRING:URL exists: {URL}">URL exists</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if truthy is FALSE</h4>
<div class="section">
<code><div data-tdal-content="truthy | STRING:After check">Default text</div></code>
</div>
<div class="section">
<div data-tdal-content="truthy | STRING:After check">Default text</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if falsey is FALSE</h4>
<div class="section">
<code><div data-tdal-content="falsey | STRING:After check">Default text</div></code>
</div>
<div class="section">
<div data-tdal-content="falsey | STRING:After check">Default text</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if URL is missing or exists (using conditional STRING)</h4>
<div class="section">
<code><div data-tdal-content="STRING:{?url}URL exists: {url}{?url}{?!url}URL is missing: {url}{?!url}">URL is missing</div></code>
</div>
<div class="section">
<div data-tdal-content="STRING:{?url}URL exists: {url}{?url}{?!url}URL is missing: {url}{?!url}">URL is missing</div>
</div>
</div>
<div class="card">
<h4 class="section">Show if URL is missing or exists (using conditional STRING)</h4>
<div class="section">
<code><div data-tdal-content="STRING:{?URL}URL exists: {URL}{?URL}{?!URL}URL is missing: {URL}{?!URL}">URL is missing</div></code>
</div>
<div class="section">
<div data-tdal-content="STRING:{?URL}URL exists: {URL}{?URL}{?!URL}URL is missing: {URL}{?!URL}">URL is missing</div>
</div>
</div>
</script>
<script id="template-tdal-condition-in-repeat" type="text/html">
<div class="card" data-tdal-repeat="item items">
<h4 class="section">Show if URL is missing</h4>
<div class="section">
<code><div data-tdal-condition="!item/url" data-tdal-content="STRING:URL is missing: {item/url}">URL is missing</div></code>
</div>
<div class="section">
<div data-tdal-condition="!item/url" data-tdal-content="STRING:URL is missing: {item/url}">URL is missing</div>
</div>
</div>
<div class="card" data-tdal-repeat="item items">
<h4 class="section">Show if URL exists</h4>
<div class="section">
<code><div data-tdal-condition="item/url" data-tdal-content="STRING:URL exists: {item/url}">URL exists</div></code>
</div>
<div class="section">
<div data-tdal-condition="item/url" data-tdal-content="STRING:URL exists: {item/url}">URL exists</div>
</div>
</div>
</script>
<script id="template-tdal-attributes" type="text/html">
<div class="card">
<h4 class="section">Keeping default image</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src TRUE" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src TRUE" />
</div>
<div class="card">
<h4 class="section">Keeping default image</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist | TRUE" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist | TRUE" />
</div>
<div class="card">
<h4 class="section">Using {url}</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src url" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src url" />
</div>
<div class="card">
<h4 class="section">Using {url}</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist | url | TRUE" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist | url | TRUE" />
</div>
<div class="card">
<h4 class="section">Using {url} in STRING</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}" />
</div>
<div class="card">
<h4 class="section">Using {url} in STRING</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}?blur=5" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}?blur=5" />
</div>
<div class="card">
<h4 class="section">Attribute false: removing src</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src FALSE" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src FALSE" />
</div>
<div class="card">
<h4 class="section">Attribute false: removing src</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src FALSE | TRUE" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src FALSE | TRUE" />
</div>
<div class="card">
<h4 class="section">Value missing: removing src</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src not-exist" />
</div>
</script>
<script id="template-tdal-repeat" type="text/html">
<div class="card" data-tdal-repeat="item items">
<h4 class="section" data-tdal-content="text REPEAT/item/number"></h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:https://picsum.photos/id/{item}/480/320" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:https://picsum.photos/id/{item}/480/320" />
</div>
<div class="card" data-tdal-repeat="itema items">
<h4 class="section" data-tdal-content="text REPEAT/itema/number"></h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:https://picsum.photos/id/{itema}/480/320" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:https://picsum.photos/id/{itema}/480/320" />
</div>
</script>
<script id="macro-tdal-card" type="text/html">
<div class="card">
<h4 class="section" data-tdal-content="STRING:Using url and item for src (blur value: {item})">Using url and item for src</h4>
<div class="section">
<code><img src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}?blur={item}" /></code>
</div>
<img class="section media" src="https://picsum.photos/id/1025/480/320?blur=10" data-tdal-attributes="src STRING:{url}?blur={item}" />
</div>
</script>
<script id="template-tdal-macro" type="text/html">
<div data-tdal-content="structure MACRO:card" style="background-color: lightpink"></div>
<div data-tdal-replace="structure MACRO:card" style="background-color: hotpink"></div>
<div data-tdal-repeat="item items" data-tdal-replace="structure MACRO:card" style="background-color: deeppink"></div>
</script>
<script type="module">
import jTDAL from 'https://unpkg.com/jtdal/jTDAL.min.js';
const templateEngine = new jTDAL( [ [ 'card', document.getElementById( 'macro-tdal-card' ).innerHTML ] ] );
const template = [
templateEngine.CompileToFunction( document.getElementById( 'template-tdal-condition' ).innerHTML ),
templateEngine.CompileToFunction( document.getElementById( 'template-tdal-condition-in-repeat' ).innerHTML ),
templateEngine.CompileToFunction( document.getElementById( 'template-tdal-attributes' ).innerHTML ),
templateEngine.CompileToFunction( document.getElementById( 'template-tdal-repeat' ).innerHTML ),
templateEngine.CompileToFunction( document.getElementById( 'template-tdal-macro' ).innerHTML )
];
let params = {
truthy: true,
falsey: false,
'url': 'https://picsum.photos/id/1025/480/320'
};
let a = template[ 0 ]( params );
document.getElementById( 'results-tdal-condition' ).innerHTML = template[ 0 ]( params );
document.getElementById( 'results-tdal-attributes' ).innerHTML = template[ 2 ]( params );
params = {
items: [
{ 'URL': 'https://picsum.photos/id/1025/480/320' },
{ 'url': 'https://picsum.photos/id/1025/480/320' },
{ 'Url': 'https://picsum.photos/id/1025/480/320' },
{ 'url': 'https://picsum.photos/id/1026/480/320' }
]
};
document.getElementById( 'results-tdal-condition-in-repeat' ).innerHTML = template[ 1 ]( params );
params = { 'items': [ 1025, 1062, 244, 40, 495, 582 ] };
document.getElementById( 'results-tdal-repeat' ).innerHTML = template[ 3 ]( params );
params = { 'url': 'https://picsum.photos/id/1025/480/320', 'items': [ 10, 9, 8, 7, 6, 5 ] };
document.getElementById( 'results-tdal-macro' ).innerHTML = template[ 4 ]( params );
</script>
</body>
</html>