zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
289 lines (266 loc) • 12 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8">
<title>Reactive tests</title>
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<script src="/node_modules/qunit/qunit/qunit.js" defer></script>
<script type="module" src="js/app/reactive.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<h1>Reactive</h1>
<h2>Simple TALContent autoCommit true</h2>
<div id="t1">
<ol data-declare="number1 number;
text1 string">
<li>number1 = <span id="t1-1" data-content="number1">an integer</span></li>
<li>text1 = <span id="t1-2" data-content="text1">a text</span></li>
</ol>
</div>
<h2>Simple TALContent autoCommit false</h2>
<div id="t2">
<ol data-declare="number1 number;
text1 string">
<li>number1 = <span id="t2-1" data-content="number1">an integer</span></li>
<li>text1 = <span id="t2-2" data-content="text1">a text</span></li>
</ol>
</div>
<h2>Simple TALAttributes autoCommit true</h2>
<div id="t3">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t3-1"
data-attributes="maxlength number1;
placeholder text1"></textarea>
</li>
</ol>
</div>
<h2>Simple TALAttributes autoCommit false</h2>
<div id="t4">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t4-1"
data-attributes="maxlength number1;
placeholder text1"></textarea>
</li>
</ol>
</div>
<h2>Simple TALRepeat autoCommit true</h2>
<div id="t5">
<ol>
<li data-repeat="item items">
item n = <span data-content="item" data-attributes="class 'item5'">an item</span>
</li>
</ol>
</div>
<h2>Simple TALRepeat autoCommit false</h2>
<div id="t6">
<ol>
<li data-repeat="item items">
item n = <span data-content="item" data-attributes="class 'item6'">an item</span>
</li>
</ol>
</div>
<h2>Simple METALUseMacro autoCommit true</h2>
<div id="t7">
<div data-use-macro="externalMacro">
Macro goes here
</div>
</div>
<h2>Simple METALUseMacro autoCommit false</h2>
<div id="t8">
<div data-use-macro="externalMacro">
Macro goes here
</div>
</div>
<h2>Simple TALCondition autoCommit true, last action false</h2>
<div id="t9">
<ol data-declare="number1 number;
text1 string;
boolean1 boolean;
boolean2 boolean"
data-condition="or: boolean1 boolean2">
<li>number1 = <span id="t9-1" data-content="number1">an integer</span></li>
<li>text1 = <span id="t9-2" data-content="text1">a text</span></li>
</ol>
</div>
<h2>Simple I18NLanguage and I18nDomain autoCommit true</h2>
<div id="t10" data-domain="i18nBundle" data-language="language">
<ol>
<li>
¡Hola mundo! =
<span id="t10-1"
data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span>
</li>
<li>
Ella ha encontrado 10 resultados =
<span id="t10-2"
data-content="tr: 'Results msg' ( GENDER 'female'; RES 10 )">Must be 'Ella ha encontrado 10 resultados'</span>
</li>
<li>
1355.23 as number = 1.355,23 =
<span id="t10-3"
data-content="trNumber: 1355.23">Must be 1.355,23</span>
</li>
<li>
1355.23 as currency in euros = 1.355,23 € =
<span id="t10-4"
data-content="trCurrency: 'EUR' 1355.23">Must be 1.355,23 €</span>
</li>
<li>
Inline 12/20/2012 3:00:00 UTC as datetime = jueves, 21 de diciembre de 2012 =
<span id="t10-5"
data-content="trDate:
( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) )
(
weekday 'long';
year 'numeric';
month 'long';
day 'numeric' )">Must be jueves, 21 de diciembre de 2012</span>
</li>
</ol>
</div>
<h2>Simple I18NLanguage and I18nDomain autoCommit false</h2>
<div id="t11" data-domain="i18nBundle" data-language="language">
<ol>
<li>
¡Hola mundo! =
<span id="t11-1"
data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span>
</li>
<li>
Ella ha encontrado 10 resultados =
<span id="t11-2"
data-content="tr: 'Results msg' ( GENDER 'female'; RES 10 )">Must be 'Ella ha encontrado 10 resultados'</span>
</li>
<li>
1355.23 as number = 1.355,23 =
<span id="t11-3"
data-content="trNumber: 1355.23">Must be 1.355,23</span>
</li>
<li>
1355.23 as currency in euros = 1.355,23 € =
<span id="t11-4"
data-content="trCurrency: 'EUR' 1355.23">Must be 1.355,23 €</span>
</li>
<li>
Inline 12/20/2012 3:00:00 UTC as datetime = jueves, 21 de diciembre de 2012 =
<span id="t11-5"
data-content="trDate:
( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) )
(
weekday 'long';
year 'numeric';
month 'long';
day 'numeric' )">Must be jueves, 21 de diciembre de 2012</span>
</li>
</ol>
</div>
<h2>2 vars in TALContent autoCommit true</h2>
<div id="t12">
<ol data-declare="number1 number;
text1 string">
<li>a string = <span id="t12-1" data-content="string:${text1}${number1}">a string</span></li>
</ol>
</div>
<h2>2 vars in TALContent autoCommit false</h2>
<div id="t13">
<ol data-declare="number1 number;
text1 string">
<li>a string = <span id="t13-1" data-content="string:${text1}${number1}">a string</span></li>
</ol>
</div>
<h2>Var in macro autoCommit true</h2>
<div id="t14">
<div data-use-macro="internalMacro">
Macro goes here
</div>
<p data-define-macro="macro1">
<span data-attributes="id 't14-1'">This is macro1 and value of var1 is <span data-content="var1">value of var1</span></span>
</p>
<p data-define-macro="macro2">
<span data-attributes="id 't14-1'">This is macro2 and value of var1 is <span data-content="var1">value of var1</span></span>
</p>
</div>
<h2>Var in macro autoCommit false</h2>
<div id="t15">
<div data-use-macro="internalMacro">
Macro goes here
</div>
<p data-define-macro="macro3">
<span data-attributes="id 't15-1'">This is macro1 and value of var1 is <span data-content="var1">value of var1</span></span>
</p>
<p data-define-macro="macro4">
<span data-attributes="id 't15-1'">This is macro2 and value of var1 is <span data-content="var1">value of var1</span></span>
</p>
</div>
<h2>Simple METALFillSlot autoCommit true</h2>
<div id="t16">
<div data-use-macro="'dynamicListWith2Slots@externalMacros-definitions.html'">
<div data-fill-slot="slot">
My custom slot
</div>
</div>
</div>
<h2>Mixing TALContent and TALAttributes autoCommit true</h2>
<div id="t17">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t17-1"
data-attributes="maxlength number1;
placeholder text1"
data-content="string:placeholder is ${text1}"></textarea>
</li>
</ol>
</div>
<h2>Mixing TALContent and TALAttributes autoCommit false</h2>
<div id="t18">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t18-1"
data-attributes="maxlength number1;
placeholder text1"
data-content="string:placeholder is ${text1}"></textarea>
</li>
</ol>
</div>
<h2>Combined actions starting from an empty array and selecting by search TALRepeat autoCommit true</h2>
<div id="t19">
<ol>
<li data-repeat="object objectList19">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName19'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription19'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Combined actions starting from an empty array and selecting by search TALRepeat autoCommit false</h2>
<div id="t20">
<ol>
<li data-repeat="object objectList20">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName20'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription20'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
</body>
</html>