@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.
725 lines (689 loc) • 36.3 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 - Collaborative Html elements</title>
<meta
name="description"
content="A codeless Javascript framework for building collaborative no code platforms, apps and UI" />
<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>
<!-- Modal Viewport/Boundaries -->
<!--<div class="position:fixed margin-top:50px" content_id="content" id="modal-viewport"></div>-->
<!-- 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>CoCreateJS</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">
Learn how to convert your html into a dynamic realtime
application.
</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="#collaboration-item">
<h2
id="collaborative_elements"
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
Collaborative Elements
</h2>
<p class="padding:10px_0px line-height:1.5">
Simply define a array, object and key. If the array
contains the object and the object contains the key.
Viola! The value is fetched in the input. Like wise,
typing in the input will save the value. If the
array did not exist previously it will be created.
If the object is left empty, typing in the input
will create a new object.
</p>
<pre><code class="language-html"><input array="contacts" object="" key="name"></code></pre>
<p class="padding:10px_0px line-height:1.5">
The attributes array, object and key are at the
center of the CoCreate universe, we take a data
first aproach. By defining these 3 attributes you
can save and fetch data from any input, textarea,
select and thier various types. All other elements
like h1, h2, span, etc will only fetch if the
contenteditable attribute is applied.
</p>
<pre><code class="language-html"><h1 array="contacts" object="" key="name" contenteditable></h1></code></pre>
<p class="padding:10px_0px line-height:1.5">
CoCreateJS by default is collaborative. To turn
collaboration off for an element, apply attribute
realtime="false"
</p>
</section>
<section
id="input"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#input-item">
<h3 class="padding-top:20px">Input</h3>
<!--<p class="padding:10px_0px line-height:1.5">Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.</p>-->
<!--<pre><code class="language-html"><textarea array="" object="" key="name"></textarea></code></pre>-->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="input-demo"></div>
</section>
<section
id="textarea"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#textarea-item">
<h3 class="padding-top:20px">Textarea</h3>
<!--<p class="padding:10px_0px line-height:1.5">Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.</p>-->
<!--<pre><code class="language-html"><textarea array="" object="" key="name"></textarea></code></pre>-->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="textarea-demo"></div>
</section>
<section
id="contenteditable"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#contenteditable-item">
<h3 class="padding-top:20px">Contenteditable</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 contenteditable 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-selector=".playground-code textarea"
input-attribute="key"
input-value="contenteditable-demo"></div>
<!-- End SandBox -->
</section>
<section
id="radio"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#radio-item">
<h3 class="padding-top:20px">Radio</h3>
<!--<p class="padding:10px_0px line-height:1.5">Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.</p>-->
<!--<pre><code class="language-html"><input type="text" array="contacts" object="" key="name"></code></pre>-->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="radio-demo"></div>
</section>
<section
id="checkbox"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#checkbox-item">
<h3 class="padding-top:20px">Checkbox</h3>
<!--<p class="padding:10px_0px line-height:1.5">Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.</p>-->
<!--<pre><code class="language-html"><input type="checkbox" array="contacts" object="" key="name"></code></pre>-->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="checkbox-demo"></div>
</section>
<section
id="select"
class="padding:35px_0px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#select-item">
<h3 class="padding-top:20px">Select</h3>
<!-- <p class="padding:10px_0px line-height:1.5">Now that you have the form tag in place lets add some new inputs or update your current inputs connecting them to the CoCreateJS.</p> -->
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="select-demo"></div>
</section>
<section
id="form"
class="padding-top:35px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#form-item">
<h3 class="padding-top:20px">Form</h3>
<p class="padding:10px_0px line-height:1.5">
The form tag is used for grouping elements and
applying attributes dynamically to it's childeren.
Attributtes added to a form tag will only be applied
to the child elements if the child elements
attribute does not currently contain a value.
</p>
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="form-demo"></div>
</section>
<section
id="actions"
class="padding-top:35px"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#actions-item">
<h3 class="padding-top:20px">Actions</h3>
<p class="padding:10px_0px line-height:1.5">
The actions attribute is used to trigger one or more
actions in the order they were applied. Actions are
chainable and require success of the first to
trigger the next. Many of the CoCreate's components
have actions, you will find the actions defined in
the respective components documentation. Here we
will be introduing the basics as it relates to form
and saving.
</p>
<div class="">
<pre><code class="language-html"><button actions="save"> </button></code></pre>
</div>
<p class="padding:10px_0px line-height:1.5">
Applying and clicking this action will save the
value of the elements in a form to their respective
array, object and key. If a element does not have a
object defined a object will be generated and
applied to all other elements with the same array
defined and do not have a object. Existing object
are never overwriten.
</p>
<!-- SandBox -->
<div
src="./components/playground.html"
input-selector=".playground-code textarea"
input-attribute="key"
input-value="actions-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">
CRUD 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>array</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
Defines a array name where your documents will
be stored. sql equivalent is a table.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
Defines the object by id where your data will be
stored. if left empty one will be generated. sql
equvalient is a row
</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 danger"
>required</span
>
</h4>
<p>
Defines the key in the object containing the
value. sql equvalient is a column
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>contenteditable</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
htmltags can be editable and display will
collaborators cursors.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>realtime</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Save data onChange, if false a btn required to
save. If attribute is empty or not used
Default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>read</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Fetch value on page load or when updated. If
attribute is empty or not used Default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>save</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Save data onChange/submitBtn. If attribute is
empty or not used Default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>update</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
If false the element will not listen to updates
from others. Using a btn will also not save. If
attribute is empty or not used Default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>listen</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
If false the element will not listen to updates
from others. Using a btn will also not save. If
attribute is empty or not used Default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>crud</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
If false the data you insert onChange will not
store in DB. The data will only be retained by
CRDT. If attribute is empty or not used
Default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>crdt</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
If false all data will be stored directly in db
and CRDT will track changes. If attribute is
empty or not used Default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>cursors</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Show collaborators cursor positions. If
attribute is empty or not used Default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Broadcast messages and changes to other
collaborators in the same namespace and room. If
attribute is empty or not used default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast-sender</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Broadcast messages and changes to self. If
attribute is empty or not used default's to
true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast-browser</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Broadcast messages and changes locally to all
open windows, tabs and iframes in current
browser. If attribute is empty or not used
default's to true.
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>namespace</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Define a unique namespace where messages and
changes are sent and received
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>room</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Define a unique room where messages and changes
are sent and received
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>value-prefix</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Adds a prefix to value before saving</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>value-suffix</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Adds a suffix to value before saving</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="#introduction">Getting started</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="./templating.html"
>Fetch a list and render the data using a
template</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>