@cocreate/cocreatejs
Version:
A collaborative low code headless CMS and Javascript framework for building collaborative no code platforms, apps and UI's. Build powerful applications using HTML5 attributes or Javascript api.
471 lines (451 loc) • 22.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CoCreateJS - Templating</title>
<meta
name="description"
content="Fetch, filter and render a list of data using HTML." />
<meta name="keywords" content="web apps, AI, design, development" />
<meta name="robots" content="index, follow" />
<meta name="author" content="CoCreate" />
<meta name="generator" content="CoCreateJS" />
<!-- Canonical Tag -->
<link rel="canonical" href="https://cocreate.app" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
parse="true" />
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-121709453-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-121709453-1");
</script>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<nav
content_id="content"
scroll="sticky-nav,"
scroll-up="5"
scroll-down="5"
path="../"
src="../components/navbar.html"></nav>
<!-- Main Content -->
<main class="padding:15px padding:25px@lg@xl" content_id="content">
<section>
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
<div class="display:flex align-items:center">
<h2>Templating</h2>
</div>
<div
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px">
<div
class="display:flex align-items:center transition:0.3s padding-left:10px"
share-network="true"
share-text="Enter decription here"
share-title="testing im a title"
share-height="600"
share-width="700"
share-media="https://cdn.cocreate.app/docs/action.png"
hover="display:block!important"
hover-selector=".social-networks">
<div class="display:none social-networks">
<a
class="margin-right:15px"
share-network="twitter"
title="Share on twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
class="margin-right:15px"
share-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
class="margin-right:15px"
share-network="instagram"
title="Share on instagram"
><i src="/assets/svg/instagram.svg"></i
></a>
</div>
<a
class="margin-right:15px"
share-network="share"
title="Share on share"
><i src="/assets/svg/share-alt.svg"></i
></a>
</div>
<a
href="https://github.com/CoCreate-app/CoCreateJS"
target="_blank"
class=""
><i src="/assets/svg/github.svg"></i
></a>
</div>
</div>
<h1
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
Fetch, filter and render a list of data using HTML. Great
for creating blogs, shopping items, datatables, etc.
</h1>
</section>
<div
id="xxxxx-section"
class="display:flex flex-wrap:wrap justify-content:space-between">
<div
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
<section
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#fetch-item">
<h2
id="fetch"
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
Fetch
</h2>
<p class="padding:10px_0px line-height:1.5">
Fetching and rendering a list is done by applying
array to an element and nesting a template within
</p>
<!-- <pre><code class="language-html"><div array="contacts" render-selector="[template]"></div></code></pre> -->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="fetch-demo"></div>
</section>
<section
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#filter-item">
<h3 id="filter" class="padding-top:20px">Filter</h3>
<p class="padding:10px_0px line-height:1.5">
Add attribute filter-selector and filter-key to one
or more elements to filter the results
</p>
<!-- <pre><code class="language-html"><input filter-key="name" filter-selector /></code></pre> -->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="filter-demo"></div>
</section>
</div>
<!-- end column -->
<section
class="flex-grow:1 width:300px max-width:400px@md@lg@xl padding:0px_10px padding-bottom:10px margin:20px_0px">
<h2
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
Templating Attributes
</h2>
<ul
class="list-style-type:none position:sticky top:0 height:100vh overflow:auto">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>template_id</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
Template identifier. This attribute should be
define.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>Array name to fetch data. It is required.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>key</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Define the field name to fetch array</p>
<p>
If this value defined, it will fetch the special
field's value
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-limit</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Fetch the item's count on page load or when
updated. If attribute is empty or not used,
total items will be fetch.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-on</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Available value: loadmore | scroll | total.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-key</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Array's object key to filter.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-value</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Array's object value to filter. If filter-key
defined, this attribute should be defined too
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-value-type</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
string | number | object | array . Default value
is string
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-operator</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Define the filter operator.</p>
<p>
Operators: includes | $range | $eq | $ne | $lt |
$lte | $gt | $gte | $in | $nin
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-logical-operator</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Define the filter operator.</p>
<p>Operators: and | or</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-case-sensitive</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Define the filter operator.</p>
<p>true | false defauts to false</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-search</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
define on input elemens. Will perform a search
for the value across all keys in the array
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-sort-key</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Field key to sorting.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-sort-direction</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Available value: asc | desc.</p>
<p>
Fetch order value on page load or when updated.
If attribute is empty or not used Default's to
asc.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-sort-toggle</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Available value: asc | desc.</p>
<p>
Fetch order value on page load or when updated.
If attribute is empty or not used Default's to
asc.
</p>
</li>
</ul>
</section>
</div>
<!-- Previous & Next -->
<section
class="width:100% margin-top:20px display:flex flex-wrap:wrap">
<div
class="padding:30px_15px border:1px_solid_#ddd flex-basis:50%">
<p>Previous Topic</p>
<p class="font-size:20px font-size:12px@xs">
<a href="./elements.html"
>Using CoCreateJS attributes on html elements</a
>
</p>
</div>
<div
class="padding:30px_15px border:1px_solid_#ddd flex-basis:50% text-align:right">
<p>Next Topic</p>
<p class="font-size:20px font-size:12px@xs">
<a href="./logic.html"
>Applying logic and sharing data between pages</a
>
</p>
</div>
</section>
<button
href="https://github.com/CoCreate-app/CoCreateJS/tree/master/docs/elements.html?message=docs%3A%20describe%20your%20change..."
target="_blank"
class="button-round">
<i src="../assets/svg/pencil-alt.svg"></i>
</button>
</main>
<!-- Footer -->
<footer
id="spreadtheword"
content_id="content"
path="../"
src="../components/footer.html"
class="margin-left:0px!important@xs@sm@md"></footer>
<!-- Sidenav -->
<sidenav
id="menuL"
class="top:0px left:0px width:0px width:300px@xl"
resizable
resize-selector="document; main, document; nav, document; footer"
resize-attribute="style"
resize-property="margin-left">
<menu path="../" src="./components/menu.html"></menu>
<div resize="right"></div>
</sidenav>
<script src="../dist/CoCreate.js"></script>
<!-- <script src="../dist/CoCreate.js"></script> -->
</body>
</html>