zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
233 lines (210 loc) • 8.07 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Macros tests</title>
<link rel="stylesheet" href="/node_modules/qunit/qunit/qunit.css">
<script src="http://127.0.0.1:9966/macros.js" defer></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<h4>Simple macros</h4>
<div id="t1">
<p>
Before use macro
</p>
<b data-use-macro="'copyright'">
Macro goes here
</b>
<p>
In the middle of 2 macros
</p>
<b data-use-macro="'copyright'">
Macro goes here
</b>
<p>
After use macro
</p>
</div>
<h4>Dynamic macro</h4>
<div id="t2">
<b data-use-macro="'dynamicMacro'">
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'">
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'">
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'">
Macro goes here
</b>
</div>
<h4>Macro using 1 slot</h4>
<div id="t6">
<p data-use-macro="'sidebar'">
<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'">
<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'">
<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'">
<em data-fill-slot="'additional_info'">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</b>
</div>
<h4>Using var as macro id (using copyright)</h4>
<div id="t10" data-define="copyrightMacroId 'copyright'">
<b data-use-macro="copyrightMacroId">
Macro goes here
</b>
</div>
<h4>Using var as macro id (using newCopyright)</h4>
<div id="t11" data-define="copyrightMacroId 'newCopyright'">
<b data-use-macro="copyrightMacroId">
Macro goes here
</b>
</div>
<h4>Macro using 2 slots and vars</h4>
<div id="t12">
<div data-use-macro="'enhacedSidebar'"
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>
</ul>
</div>
<em data-fill-slot="additionalInfoSlot">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</div>
</div>
<h4>Macro using 2 slots and vars (first is null)</h4>
<div id="t13">
<div data-use-macro="'enhacedSidebar'"
data-define="additionalInfoSlot 'additional_info'">
<div data-fill-slot="linksSlot">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/otherProducts">Other products</a></li>
</ul>
</div>
<em data-fill-slot="additionalInfoSlot">
Make sure to check out our <a href="/specials">specials</a>.
</em>
</div>
</div>
<h4>Using define tags in macro use and macro call</h4>
<div id="t14">
<div data-use-macro="'define'"
data-define="notInMacroVar 'It also works!'">
Macro goes here
</div>
</div>
<h4>Slot evaluation</h4>
<div id="t15">
<div data-use-macro="'enhacedSidebar'"
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>
<!-- Macro definitions -->
<p data-define-macro="copyright">
Copyright 2009, <em>Foo, Bar, and Associates</em> Inc.
</p>
<p data-define-macro="newCopyright">
Copyright 2017, <em>Foo, Bar, and Associates</em> Inc.
</p>
<p data-define-macro="dynamicMacro">
Dynamic text: <span data-content="string:A test of a dynamic macro" data-attributes="id string:t2-1">A text</span>
</p>
<p data-define-macro="dynamicMacroReadingVar">
Var value: <span data-content="var" data-attributes="id id">The var value</span>
</p>
<ul data-define-macro="list">
<li data-repeat="item items">
<span data-content="item" data-attributes="class string:listItems1">An item</span>
</li>
</ul>
<div data-define-macro="sidebar">
Links
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
<span data-define-slot="additional_info"></span>
</div>
<div data-define-macro="enhacedSidebar">
Links
<div data-define-slot="links">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/support">Support</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</div>
<span data-define-slot="additional_info"></span>
</div>
<ul data-define-macro="dynamicListWith1Slot">
<li data-repeat="item items">
<span data-content="item">An item</span>
</li>
<li>
<span data-define-slot="additional_info"></span>
</li>
</ul>
<ul data-define-macro="define"
data-define="inMacroVar 'It works!'">
<li>inMacroVar: <span data-content="inMacroVar" data-attributes="id 't14-1'">Must be 'It works!'</span></li>
<li>notInMacroVar: <span data-content="notInMacroVar" data-attributes="id 't14-2'">Must be 'It also works!'</span></li>
</ul>
</body>
</html>