@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.
388 lines (365 loc) • 12.1 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 - Logic</title>
<meta
name="description"
content="Update element attributes, state values between elements, show and hide elements." />
<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>Logic</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-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/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">
Update element attributes, state values between elements,
show and hide elements.
</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="#state-attributes-item">
<h2
id="state-attributes"
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
State Attributes
</h2>
<p class="padding:10px_0px line-height:1.5">
State attributes from elements to elements within
same page or across multiple tabs and windows.
</p>
<pre><code class="language-html"><a actions="state" state-object="test" state_to="A unique id"></a></code></pre>
<!-- SandBox -->
<div
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
id="state-attributes-playground">
<div
id="state-attributes-demo-code"
resizable
class="position:relative height:50%">
<textarea
type="code"
lang="html"
array="demos"
object="619aa8e8a8b6b4001a9dc24e"
key="state-attributes-demo"
save="false"
id="state-attributes-demo"
input-query="$document .state-attributes"
input-attribute="value"
input-events="input, onload"
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
<div
resize="bottom"
class="background:lightgrey"></div>
</div>
<div
id="state-attributes-demo-preview"
class="position:relative overflow:auto">
<div
class="state-attributes padding:20px"></div>
</div>
<div
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
<a
class="margin-right:10px"
id="state-attributes-eye"
show="#state-attributes-eye-slash"
hide="#state-attributes-eye, #state-attributes-demo-preview"
toggle="code-height"
toggle-query="#state-attributes-demo-code"
><i
class="height:18px"
src="/assets/svg/eye.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="state-attributes-eye-slash"
show="#state-attributes-eye, #state-attributes-demo-preview"
hide="#state-attributes-eye-slash"
toggle="code-height"
toggle-query="#state-attributes-demo-code"
><i src="/assets/svg/eye-slash.svg"></i
></a>
<a
class="margin-right:10px"
id="state-attributes-code"
show="#state-attributes-code-slash"
hide="#state-attributes-code, #state-attributes-demo-code"
><i src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="state-attributes-code-slash"
show="#state-attributes-code, #state-attributes-demo-code"
hide="#state-attributes-code-slash"
><i
class="height:18px"
src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:5px"
fullscreen
fullscreen-query="#state-attributes-playground"></a>
</div>
</div>
<!-- End SandBox -->
</section>
<section
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#state-values-item">
<h3 id="state-values" class="padding-top:20px">
State Values
</h3>
<p class="padding:10px_0px line-height:1.5">
State a value from an input to any element
</p>
<!-- <pre><code class="language-html"><h1 type="text" array="contacts" object="" key="name"></h1></code></pre> -->
<!-- SandBox -->
<div
src="./components/playground.html"
input-query=".playground-code textarea"
input-attribute="key"
input-value="state-values-demo"></div>
</section>
<section
class="padding-top:35px"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#conditional-logic-item">
<h3 id="conditional-logic" class="padding-top:20px">
Conditional Logic
</h3>
<p class="padding:10px_0px line-height:1.5">
Add attribute contenteditbale to any html and
element and use it as an input. CoCreateJS also
converts render elements to collaborative rich text
editors or a website builder.
</p>
<pre><code class="language-html"><h1 type="text" array="contacts" object="" key="name"></h1></code></pre>
<!-- SandBox -->
<div
src="./components/playground.html"
input-query=".playground-code textarea"
input-attribute="key"
input-value="conditional-logic-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">
Logic 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>state_id</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>A uinque id to receive state attribute.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>state_to</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>id where the attributes will be stated to.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>state-*</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>State any attribute defined</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>state-overwrite</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Overwrites attribute values</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="./templating.html"
>Fetch a list and render the data using a
template</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="./user-management.html">User Management</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-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>