templating.html

<!DOCTYPE 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://CoCreateJS.com" />

		<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.CoCreateJS.com/docs/action.png"
							hover="display:block!important"
							hover-query=".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/CoCreateJS/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-query="#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">&lt;div array="contacts" render-query="[template]"&gt;&lt;/div&gt;</code></pre> -->

						<!-- SandBox -->
						<div
							src="./components/playground.html"
							input-query=".playground-code textarea"
							input-attribute="key"
							input-value="fetch-demo"></div>
					</section>
					<section
						class="padding:35px_0px"
						scroll
						scroll-intersect="color:dodgerblue"
						scroll-query="#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-query-key
							to one or more elements to filter the results
						</p>
						<!-- <pre><code class="language-html">&lt;input filter-query-key="name" filter-selector /&gt;</code></pre> -->

						<!-- SandBox -->
						<div
							src="./components/playground.html"
							input-query=".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-query-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-query-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/CoCreateJS/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-query="$document main, nav, 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>