zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
178 lines (162 loc) • 6.67 kB
HTML
<html lang="es">
<head>
<meta charset="utf-8">
<title>External macros tests</title>
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<script src="http://127.0.0.1:9966/externalMacros.js" defer></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="block1">
<h4>Simple macros</h4>
<div id="t1">
<p>
Before use macro
</p>
<b data-use-macro="'copyright@externalMacros-definitions.html'">
Macro goes here
</b>
<p>
In the middle of 2 macros
</p>
<b data-use-macro="'copyright@externalMacros-definitions.html'">
Macro goes here
</b>
<p>
After use macro
</p>
</div>
<h4>Dynamic macro</h4>
<div id="t2">
<b data-use-macro="'dynamicMacro@externalMacros-definitions.html'">
Macro goes here
</b>
</div>
<h4>Dynamic macro reading var (var = undefined)</h4>
<div id="t3">
<b data-define="id string:t3-1" data-use-macro="'dynamicMacroReadingVar@externalMacros-definitions.html'">
Macro goes here
</b>
</div>
<h4>Dynamic macro reading var (var = 1)</h4>
<div id="t4">
<b data-define="var 1; id string:t4-1" data-use-macro="'dynamicMacroReadingVar@externalMacros-definitions.html'">
Macro goes here
</b>
</div>
<h4>Dynamic macro reading var (items = [10 20 30])</h4>
<div id="t5">
<b data-define="items [10 20 30]" data-use-macro="'list@externalMacros-definitions.html'">
Macro goes here
</b>
</div>
<h4>Macro using 1 slot</h4>
<div id="t6">
<p data-use-macro="'sidebar@externalMacros-definitions.html'">
<em data-fill-slot="'additional_info'">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</p>
</div>
<h4>Macro using 2 slots</h4>
<div id="t7">
<div data-use-macro="'enhacedSidebar@externalMacros-definitions.html'">
<div data-fill-slot="'links'">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/otherProducts">Other products</a></li>
</ul>
</div>
<em data-fill-slot="'additional_info'">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</div>
</div>
<h4>Macro using 2 slots but only defining 1</h4>
<div id="t8">
<div data-use-macro="'enhacedSidebar@externalMacros-definitions.html'">
<em data-fill-slot="'additional_info'">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</div>
</div>
<h4>Dynamic macro using 1 slot (items = [10 20 30])</h4>
<div id="t9">
<b data-define="items [10 20 30]" data-use-macro="'dynamicListWith1Slot@externalMacros-definitions.html'">
<em data-fill-slot="'additional_info'">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</b>
</div>
</div>
<div id="block2">
<h4>External macro test using var</h4>
<div id="t10">
<b data-define="macroKey 'futureCopyright@externalMacros-definitions2.html'"
data-use-macro="macroKey">
Macro goes here
</b>
</div>
</div>
<div id="block3">
<h4>3 external macros in 3 different external macro files test using var</h4>
<div id="t11">
<b data-define="macroKey 'copyright@externalMacros-definitions.html'"
data-use-macro="macroKey">
Macro goes here
</b>
<b data-define="macroKey 'futureCopyright@externalMacros-definitions2.html'"
data-use-macro="macroKey">
Macro goes here
</b>
<b data-define="macroKey 'futureCopyright@externalMacros-definitions3.html'"
data-use-macro="macroKey">
Macro goes here
</b>
</div>
</div>
<div id="block4">
<h4>Simple external macros with local calls</h4>
<div id="t12">
<p>
Before use macro
</p>
<b data-use-macro="'copyright@externalMacros-definitions.html'">
Macro goes here
</b>
<p>
In the middle of 2 macros
</p>
<b data-use-macro="'enhancedCopyright@externalMacros-definitions.html'">
Macro goes here
</b>
<p>
After use macro
</p>
</div>
</div>
<div id="block5">
<h4>Using define tags in macro use and macro call</h4>
<b data-use-macro="'copyright4@externalMacros-definitions4.html'"
data-define="notInMacroVar 'It also works!'">
Macro goes here
</b>
</div>
<h4>Slot evaluation</h4>
<div id="t15">
<div data-use-macro="'enhacedSidebar@externalMacros-definitions.html'"
data-define="linksSlot 'links';
additionalInfoSlot 'additional_info'">
<div data-fill-slot="linksSlot">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/otherProducts">Other products</a></li>
<li><a data-attributes="href '/sales'">Sales!</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>