zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
753 lines (693 loc) • 33.4 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8">
<title>Update tests</title>
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<script src="http://127.0.0.1:9966/update.js" defer></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<h1>Update</h1>
<h2>Simple TALContent</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 TALAttributes</h2>
<div id="t2">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t2-1"
data-attributes="maxlength number1;
placeholder text1"></textarea>
</li>
</ol>
</div>
<h2>Simple TALDefine</h2>
<div id="t3">
<ol data-define="text2 string:${text1}${number1};
text3 string:${text1}100">
<li>number1 = <span id="t3-1" data-content="number1">a number</span></li>
<li>text1 = <span id="t3-2" data-content="text1">a text</span></li>
<li>text2 = <span id="t3-3" data-content="text2">a text</span></li>
<li>text3 = <span id="t3-4" data-content="text3">a text</span></li>
</ol>
</div>
<h2>Simple TALDefine (2)</h2>
<div id="t3b">
<ol data-define="text2 string:${text1}${number1};
text3 string:${text1}${number2};
text4 string:${text2}${text3}${number3}">
<li>text4 = <span id="t3b-1" data-content="text4">a text</span></li>
</ol>
</div>
<h2>Simple TALRepeat</h2>
<div id="t4">
<ol>
<li data-repeat="item items">
item n = <span data-content="item" data-attributes="class 'item4'">an item</span>
</li>
</ol>
</div>
<h2>Simple METALUseMacro</h2>
<div id="t5">
<div data-use-macro="externalMacro">
Macro goes here
</div>
</div>
<h2>Simple TALCondition</h2>
<div id="t6">
<ol data-declare="number1 number;
text1 string;
boolean1 boolean;
boolean2 boolean"
data-condition="or: boolean1 boolean2">
<li>number1 = <span id="t6-1" data-content="number1">an integer</span></li>
<li>text1 = <span id="t6-2" data-content="text1">a text</span></li>
</ol>
</div>
<h2>Simple I18NLanguage and I18nDomain</h2>
<div id="t7" data-domain="i18nBundle" data-language="language">
<ol>
<li>
¡Hola mundo! =
<span id="t7-1"
data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span>
</li>
<li>
Ella ha encontrado 10 resultados =
<span id="t7-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="t7-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="t7-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="t7-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</h2>
<div id="t8">
<ol data-declare="number1 number;
text1 string">
<li>a string = <span id="t8-1" data-content="string:${text1}${number1}">a string</span></li>
</ol>
</div>
<h2>Var in macro</h2>
<div id="t9">
<div data-use-macro="internalMacro">
Macro goes here
</div>
<p data-define-macro="macro1">
This is macro1 and value of var1 is <span data-content="var1" data-attributes="id 't9-1'">value of var1</span>
</p>
<p data-define-macro="macro2">
This is macro2 and value of var1 is <span data-content="var1" data-attributes="id 't9-1'">value of var1</span>
</p>
</div>
<h2>Simple TALContent with indexExpressions = false</h2>
<div id="t10">
<ol data-declare="number1 number;
text1 string">
<li>number1 = <span id="t10-1" data-content="number1">an integer</span></li>
<li>text1 = <span id="t10-2" data-content="text1">a text</span></li>
</ol>
</div>
<h2>Simple METALFillSlot</h2>
<div id="t11">
<div data-use-macro="'dynamicListWith2Slots@externalMacros-definitions.html'">
<div data-fill-slot="slot">
My custom slot
</div>
</div>
</div>
<h2>Mixing TALContent and TALAttributes</h2>
<div id="t12">
<ol data-declare="number1 number;
text1 string">
<li>
Textarea:
<textarea id="t12-1"
data-attributes="maxlength number1;
placeholder text1"
data-content="string:placeholder is ${text1}"></textarea>
</li>
</ol>
</div>
<h2>Update text element by index TALRepeat</h2>
<div id="t13">
<ol>
<li data-repeat="item items13">
item n = <span data-content="item" data-attributes="class 'item13'">an item</span>
</li>
</ol>
</div>
<h2>Update text element by element TALRepeat</h2>
<div id="t14">
<ol>
<li data-repeat="item items14">
item n = <span data-content="item" data-attributes="class 'item14'">an item</span>
</li>
</ol>
</div>
<h2>Delete text element by index TALRepeat</h2>
<div id="t15">
<ol>
<li data-repeat="item items15">
item n = <span data-content="item" data-attributes="class 'item15'">an item</span>
</li>
</ol>
</div>
<h2>Delete text element by element TALRepeat</h2>
<div id="t16">
<ol>
<li data-repeat="item items16">
item n = <span data-content="item" data-attributes="class 'item16'">an item</span>
</li>
</ol>
</div>
<h2>Insert text element by index = 2 TALRepeat</h2>
<div id="t17">
<ol>
<li data-repeat="item items17">
item n = <span data-content="item" data-attributes="class 'item17'">an item</span>
</li>
</ol>
</div>
<h2>Insert text element by index = '_first_' TALRepeat</h2>
<div id="t18">
<ol>
<li data-repeat="item items18">
item n = <span data-content="item" data-attributes="class 'item18'">an item</span>
</li>
</ol>
</div>
<h2>Insert text element by index = '_last_' TALRepeat</h2>
<div id="t19">
<ol>
<li data-repeat="item items19">
item n = <span data-content="item" data-attributes="class 'item19'">an item</span>
</li>
</ol>
</div>
<h2>Update object element by index TALRepeat</h2>
<div id="t20">
<ol>
<li data-repeat="item items20">
<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>
</div>
<h2>Update object element by index TALRepeat</h2>
<div id="t21">
<ol>
<li data-repeat="item items21">
<span data-content="item/name" data-attributes="class 'itemName21'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription21'">an item description</span>
</li>
</ol>
</div>
<h2>Delete object element by index TALRepeat</h2>
<div id="t22">
<ol>
<li data-repeat="item items22">
<span data-content="item/name" data-attributes="class 'itemName22'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription22'">an item description</span>
</li>
</ol>
</div>
<h2>Delete object element by index TALRepeat</h2>
<div id="t23">
<ol>
<li data-repeat="item items23">
<span data-content="item/name" data-attributes="class 'itemName23'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription23'">an item description</span>
</li>
</ol>
</div>
<h2>Insert object element by index = 2 TALRepeat</h2>
<div id="t24">
<ol>
<li data-repeat="item items24">
<span data-content="item/name" data-attributes="class 'itemName24'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription24'">an item description</span>
</li>
</ol>
</div>
<h2>Insert object element by index = '_first_' TALRepeat</h2>
<div id="t25">
<ol>
<li data-repeat="item items25">
<span data-content="item/name" data-attributes="class 'itemName25'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription25'">an item description</span>
</li>
</ol>
</div>
<h2>Insert object element by index = '_last_' TALRepeat</h2>
<div id="t26">
<ol>
<li data-repeat="item items26">
<span data-content="item/name" data-attributes="class 'itemName26'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription26'">an item description</span>
</li>
</ol>
</div>
<h2>Update object nested element by index TALRepeat</h2>
<div id="t27">
<ol>
<li data-repeat="object objectList27">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName27'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription27'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Update object nested element by index and selecting by search TALRepeat</h2>
<div id="t28">
<ol>
<li data-repeat="object objectList28">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName28'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription28'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Update object nested element by index and selecting by search TALRepeat</h2>
<div id="t29">
<ol>
<li data-repeat="object objectList29">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName29'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription29'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Update object nested element by element and selecting by search TALRepeat</h2>
<div id="t30">
<ol>
<li data-repeat="object objectList30">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName30'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription30'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Delete object nested element by index TALRepeat</h2>
<div id="t31">
<ol>
<li data-repeat="object objectList31">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName31'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription31'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Delete object nested element by element and selecting by search TALRepeat</h2>
<div id="t32">
<ol>
<li data-repeat="object objectList32">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName32'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription32'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = 2 TALRepeat</h2>
<div id="t33">
<ol>
<li data-repeat="object objectList33">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName33'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription33'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = 2 and selecting by search TALRepeat</h2>
<div id="t34">
<ol>
<li data-repeat="object objectList34">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName34'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription34'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = '_first_' TALRepeat</h2>
<div id="t35">
<ol>
<li data-repeat="object objectList35">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName35'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription35'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = '_first_' and selecting by search TALRepeat</h2>
<div id="t36">
<ol>
<li data-repeat="object objectList36">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName36'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription36'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = '_last_' TALRepeat</h2>
<div id="t37">
<ol>
<li data-repeat="object objectList37">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName37'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription37'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = '_last_' and selecting by search TALRepeat</h2>
<div id="t38">
<ol>
<li data-repeat="object objectList38">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName38'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription38'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Combined actions starting from an empty array and selecting by search TALRepeat</h2>
<div id="t39">
<ol>
<li data-repeat="object objectList39">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName39'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription39'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Properties of objects updated</h2>
<div id="t40">
<span data-content="object/id" data-attributes="id 't40-1'">the id of the object</span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName40'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription40'">an item description</span>
</li>
</ol>
</div>
<h2>Multiple delete object nested element by index and selecting by search TALRepeat</h2>
<div id="t41">
<ol>
<li data-repeat="object objectList41">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName41'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription41'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Multiple delete object nested element by element and selecting by search TALRepeat</h2>
<div id="t42">
<ol>
<li data-repeat="object objectList42">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName42'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription42'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Multiple insert object nested element by index = 2 and selecting by search TALRepeat</h2>
<div id="t43">
<ol>
<li data-repeat="object objectList43">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName43'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription43'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Multiple insert object nested element by index = '_first_' and selecting by search TALRepeat</h2>
<div id="t44">
<ol>
<li data-repeat="object objectList44">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName44'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription44'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Multiple insert object nested element by index = '_last_' and selecting by search TALRepeat</h2>
<div id="t45">
<ol>
<li data-repeat="object objectList45">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName45'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription45'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert object nested element by index = 2 and selecting by numeric/_first_/_last_ search TALRepeat test</h2>
<div id="t46">
<ol>
<li data-repeat="object objectList46">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName46'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription46'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Combined actions starting from an empty array with conditions TALRepeat/TALCondition</h2>
<div id="t47">
<div data-condition="not: objectList47"
data-attributes="id 'objectList47_noObject'">
No object
</div>
<ol data-condition="objectList47">
<li data-repeat="object objectList47">
<span data-content="object/id" data-attributes="class 'objectId47'"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName47'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription47'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Combined actions starting from an empty array deleting and selecting by search TALRepeat</h2>
<div id="t48">
<ol>
<li data-repeat="object objectList48">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName48'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription48'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert and delete item nested element by index using the loop var with partial render TALRepeat</h2>
<div id="t49">
<div id="t49-inside">
<div data-condition="not: objectList49" data-attributes="id 'noElements49'">
No elements
</div>
<ol>
<li data-repeat="object objectList49">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName49'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription49'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
</div>
<h2>Update object nested element using | operator</h2>
<div id="t50">
<ol>
<li data-repeat="object objectList50">
<span data-content="object/id" data-attributes="class 'objectId50'"></span>:
<span data-content="object/text | '-'" data-attributes="class 'objectText50'"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName50'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription50'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Multiple properties of objects updated</h2>
<div id="t51">
<ol>
<li data-repeat="object objectList51">
<span data-content="object/id" data-attributes="class 'objectId51'"></span>:
<span data-content="object/text | '-'" data-attributes="class 'objectText51'"></span>
<br>
<div data-content="object/longText | '-'" data-attributes="class 'objectLongText51'"></div>
<div data-content="object/anotherLongText | '-'" data-attributes="class 'anotherLongText51'"></div>
</li>
</ol>
</div>
<h2>Update array and array deleting TALRepeat</h2>
<div id="t52">
<ol>
<li data-repeat="object objectList52">
<span data-content="object/id"></span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName52'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription52'">an item description</span>
</li>
</ol>
</li>
</ol>
</div>
<h2>Insert/update/delete object element by index = '_last_' with attributes in table TALRepeat</h2>
<div id="t53">
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr data-repeat="item items53" data-attributes="class item/name">
<td data-content="item/name" data-attributes="class 'itemName53'">an item name</td>
<td data-content="item/description" data-attributes="class 'itemDescription53'">an item description</td>
</tr>
</table>
</div>
<h2>Object updated</h2>
<div id="t54">
<span data-content="object/id" data-attributes="id 't54-1'">the id of the object</span>
<ol>
<li data-repeat="item object/items">
<span data-content="item/name" data-attributes="class 'itemName54'">an item name</span>:
<span data-content="item/description" data-attributes="class 'itemDescription54'">an item description</span>
</li>
</ol>
</div>
<h2>Simple TALContent removing node outside ZPT</h2>
<div id="t55">
<ol data-declare="number1 number">
<li>number1 (v1) = <span id="t55-1" data-content="number1">an integer</span></li>
<li>number1 (v2) = <span id="t55-2" data-content="number1">an integer</span></li>
</ol>
</div>
<h2>Insert and delete item nested element by index using the loop var TALRepeat and 2 TALCondition</h2>
<div id="t56">
<div>
<div data-condition="not: stringList56">
<span id="noElements56">No elements</span>
</div>
<div data-condition="stringList56">
<ol id="elements56">
<li data-repeat="string stringList56">
<span data-content="string" data-attributes="class 'itemString56'">an item</span>
</li>
</ol>
</div>
</div>
</div>
</body>
</html>