@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.
1,715 lines (1,679 loc) • 61.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreateJS Objects Documentation</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<meta
name="description"
content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know" />
<meta
name="keywords"
content="helper classes, utility classes, css framework, css library, inline style classes" />
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/boilerplate.png" />
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true"
parse="true" />
<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>
<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>
<main
class="padding-top:15px padding:15px@lg@xl"
content_id="content"
id="cocreate-xxxxx">
<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/boilerplate.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="margin-right:15px"
><i src="/assets/svg/github.svg"></i
></a>
</div>
</div>
<p class="max-width:500px margin-bottom:20px">
Learn how to convert your html into a dynamic realtime
application.
</p>
<div
array=""
object=""
key=""
id="crud_objects"
class="padding:35px_0px">
<h1>CRUD Objects</h1>
<p class="max-width:500px margin-bottom:20px">
Simple objects you can use to create custom components.
</p>
<a
href="#create-crud"
id="create-crud"
show=".create,.crudplusicon"
hide=".create,.crud">
<h3
class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
<span class="create crudplusicon" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="create crud"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Create Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey create crud">
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.createDocument({
array: "string",
object: {
name1: "hello"
name2: "hello1"
}
})
</code>
</pre>
</div>
</div>
<a
href="#read-crud"
id="read-crud"
show=".read,.crudplusicon"
hide=".read,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="read crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="read crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Read Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey read crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>_id</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>object to read from</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>name</span>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
names of values to from CMS. If not used
whole object will be fetched
</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string
,array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.readDocument({
array: "module",
object : {
_id: "",
name: ''
...
}
})
</code>
</pre>
</div>
</div>
<a
href="#update-crud"
id="update-crud"
show=".update,.crudplusicon"
hide=".update,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="update crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="update crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Update Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey update crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none">
<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>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</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 to save to</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>Document _id to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.updateDocument({
array: "test123",
object: {
_id: "object",
name1: "hello",
name2: "hello1"
},
updateName: ["name3", "name4"],
deleteName: ["name3", "name4"],
upsert: true|false //default to true
})
</code>
</pre>
</div>
</div>
<a
href="#delete-crud"
id="delete-crud"
show=".delete,.crudplusicon"
hide=".delete,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="delete crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="delete crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Delete Document Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey delete crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</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 to save to</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>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.deleteDocument({
array: "module",
object: {
_id: ""
}
})
</code>
</pre>
</div>
</div>
<a
href="#readlist"
id="readlist"
show=".readlist,.crudplusicon"
hide=".readlist,.crud">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="readlist crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="readlist crud" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Read Document Filter Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey readlist crud"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>element</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>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<a
href="#readlist-operator"
id="readlist-operator"
show=".readlist-operator,.crudplusicon"
hide=".readlist-operator,.operator">
<h4>
<span
class="readlist-operator crudplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span
class="readlist-operator crud"
hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>operator</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
The operator object for read object list
</p>
</a>
<div
class="display:flex flex-wrap:wrap readlist-operator operator"
hidden>
<div
class="flex-grow:1 width:300px padding:0px_10px">
<ul
class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>fetch</span>
<span
class="cocreate-badge success"
>object</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
{name: the field name for
fetching, value: the value
for fetching}
</p>
<p>
If the "fetch" parameter
define, result will fetch
the items that is [name] =
value
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filters</span>
<span
class="cocreate-badge success"
>array[object]</span
>
<span
class="cocreate-badge danger"
>required</span
>
</h4>
<p>
The data structure for each
item: {name:
<span
class="cocreate-badge success"
>string</span
>, operator:
<span
class="cocreate-badge success"
>string</span
>, value:
<span
class="cocreate-badge success"
>array</span
>}
</p>
<div class="padding-left:15px">
<p>
<strong>name:</strong>
The field name
</p>
<p>
<strong
>operator:</strong
>
Query operator (includes
| $range | $eq | $ne |
$lt | $lte | $gt | $gte
| $in | $nin |
$geoWithin)
</p>
<p>
<strong>value:</strong>
The operator values
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>orders</span>
<span
class="cocreate-badge success"
>array[object]</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
The data structure for each
item: {name:
<span
class="cocreate-badge success"
>string</span
>, type:
<span
class="cocreate-badge success"
>integer</span
>}
</p>
<div class="padding-left:15px">
<p>
<strong>name:</strong>
The field name
</p>
<p>
<strong>type:</strong>
The order type(-1: desc,
1: asc)
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>search</span>
<span
class="cocreate-badge success"
>object</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>All fields values search</p>
<div class="padding-left:15px">
<p>
<strong>type</strong
><span
class="cocreate-badge success"
>string(or|and)</span
>: The search type (or |
and)
</p>
<p>
<strong>value</strong
><span
class="cocreate-badge success"
>array</span
>: The search values
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>index</span>
<span
class="cocreate-badge success"
>integer</span
>
<span
class="cocreate-badge danger"
>required</span
>
</h4>
<p>
Set the start index that
fetch items. If don't need
it, index can define 0
</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>count</span>
<span
class="cocreate-badge success"
>integer</span
>
<span
class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Set the count that fetch
items. If count didn't
defined, it will fetch whole
result items
</p>
</li>
</ul>
</div>
</div>
</li>
<!-- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>is_array</span> <span class="cocreate-badge success">boolean</span> <span class="cocreate-badge warning">optional</span></h4>
<p>If is_array is true, all array get (this case, operator is ignored). default value is false </p>
</li> -->
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>export</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
If export is true, it will downlod the file
about response
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crud.readDcoumentList {
array: "modules",
filter: {
query: [{
name: 'field1',
value: [v1, v2, ...],
operator: "includes | $range | $eq | $ne | $lt | $lte | $gt | $gte | $in | $nin | $geoWithin"
}, {
name: "_id",
opreator: "in",
value: ["id1"]
}
],
sort: [{
name: 'field-x',
type: 1 | -1
}],
search: {
type: 'or | and',
value: [value1, value2]
},
indexinteger),
count: 0 (integer)
}
-------- response data -----------
object: [] // array
</code>
Example:
<code class="language-js">
crud.readDocument({
"key": "2061acef-0451-4545-f754-60cf8160",
"organization_id": "5ff747727005da1c272740ab",
"array": "module_activity",
"metadata": "",
// TODO: update to new filters
"filter": {
"query": [
{
"name": "color",
"value": [ "red", "blue" ],
"operator": "in"
}
],
"sort": [
{
"name": "name",
"type": 'asc'
}
],
"search": {
"operator": "or",
"value": [ "test" ]
},
"index": 0,
"limit": 20
}
})
</code>
</pre>
</div>
</div>
</div>
<div
array=""
object=""
key=""
id="crdt-objects"
class="padding:35px_0px">
<h1>CRDT Objects</h1>
<p class="max-width:500px margin-bottom:20px">
Conflict resolving objects to create collaborative apps.
</p>
<a
href="#crdt-init"
id="crdt-init"
show=".init-crdt,.crdtplusicon"
hide=".init-crdt,.crdt">
<h3
class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
<span class="init-crdt crdtplusicon" hidden
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="init-crdt crdt"
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Init CRDT Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey init-crdt crdt">
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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>create namespace</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>rooms</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>creates room</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.init({
array: "module",
object: "",
name: ""
})
</code>
</pre>
</div>
</div>
<a
href="#crdt-get"
id="crdt-get"
show=".get-crdt,.crdtplusicon"
hide=".get-crdt,.crdt">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="get-crdt crdtplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="get-crdt crdt" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Get Data CRDT Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey get-crdt crdt"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>data</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>element</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>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.getText({
array: 'module_activities',
object: '5e4802ce3ed96d38e71fc7e5',
name: 'name'
})
</code>
</pre>
</div>
</div>
<a
href="#crdt-update"
id="crdt-update"
show=".update-crdt,.crdtplusicon"
hide=".update-crdt,.crdt">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="update-crdt crdtplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="update-crdt crdt" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Update Data CRDT Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey update-crdt crdt"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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 to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>object</span>
<span class="cocreate-badge success"
>_id</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>object to insert-crdt from</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>name</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>value</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>start</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>crud</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>data to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>element</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">
<h4>
<span>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.updateText({
array: 'module_activities',
object: '5e4802ce3ed96d38e71fc7e5',
name: 'name',
value: 'T',
start: 8,
})
</code>
</pre>
</div>
</div>
<a
href="#crdt-replace"
id="crdt-replace"
show=".replace-crdt,.crdtplusicon"
hide=".replace-crdt,.crdt">
<h3
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="replace-crdt crdtplusicon"
><i
class="height:16px"
src="/assets/svg/plus.svg"></i
></span>
<span class="replace-crdt crdt" hidden
><i
class="height:16px"
src="/assets/svg/minus.svg"></i
></span>
<span>Replace Data CRDT Parameters</span>
</h3>
</a>
<div
class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey replace-crdt crdt"
hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>broadcast</span>
<span class="cocreate-badge success"
>boolean</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>broadcast or only save to db</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 to save to</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>array to save to</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>name</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>name to save</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>value</span>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>characters to insert</p>
</li>
<li class="padding:15px_0px">
<h4>
<span>element</span>
<span
class="cocreate-badge success border-bottom:1px_solid_lightgrey"
>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>metaData</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge success"
>array</span
>
<span class="cocreate-badge success"
>object</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Additonal data in the form of a string ,
array or object
</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.replaceText({
array: "module",
object: "",
name: "",
value: "",
})
</code>
</pre>
</div>
</div>
</div>
<!-- <div array="" object="" key="" id="cursor_objects" class="padding:35px_0px">
<h1>Cursor Objects</h1>
<p class="max-width:500px margin-bottom:20px">Send and receive cursor positions</p>
<a href="#send-cursor" id="send-cursor" show=".send-cursor,.cursorplusicon" hide=".send-cursor,.cursors">
<h3 class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">
<span class="send-cursor cursorplusicon" hidden><i class="height:16px" src="/assets/svg/plus.svg"></i></span>
<span class="send-cursor cursors"><i class="height:16px" src="/assets/svg/minus.svg"></i></span>
<span> Send Cursor position Parameters</span>
</h3>
</a>
<div class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey send-cursor cursors">
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<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 to save to</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>Document _id to save to</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>name</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
<p>Save data onChange. 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>startPosition</span> <span class="cocreate-badge success">string</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">
<h4><span>endPositon</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge success">array</span> <span class="cocreate-badge success">object</span> <span class="cocreate-badge warning">optional</span></h4>
<p>Additonal data in the form of a string , array or object </p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.sendPosition({
array:"module_activities",
object:"5e4802ce3ed96d38e71fc7e5",
name:"name",
start: 2,
end: 2,
)}
</code>
</pre>
</div>
</div>
<a href="#get-cursor" id="get-cursor" show=".get-cursor,.cursorplusicon" hide=".get-cursor,.cursors">
<h3 class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<span class="get-cursor cursorplusicon"><i class="height:16px" src="/assets/svg/plus.svg"></i></span>
<span class="get-cursor cursors" hidden><i class="height:16px" src="/assets/svg/minus.svg"></i></span>
<span>Get Cursor position Parameters</span>
</h3>
</a>
<div class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey get-cursor cursors" hidden>
<div class="flex-grow:1 width:300px padding:0px_10px">
<ul class="list-style-type:none padding-right:15px">
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>data</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
<p>array to save to</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>object</span> <span class="cocreate-badge success">_id</span> <span class="cocreate-badge danger">required</span></h4>
<p>object to get-cursor from</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>data</span> <span class="cocreate-badge success">object</span> <span class="cocreate-badge warning">optional</span></h4>
<p>data to save</p>
</li>
</ul>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px">
<pre>
<code class="language-js">
crdt.getPosition(function(data))
</code>
</pre>
</div>
</div>
</div> -->
<!-- <div array="" object="" key="" id="cursor_objects" class="padding:35px_0px">-->
<!-- <h1>Component register</h1>-->
<!-- <p class="max-width:500px margin-bottom:20px">Register your components save function to run with form Btn</p>-->
<!-- <a href="#component-registry" id="component-registry" show=".component-registry" hide=".component-registry">-->
<!-- <h3 class="padding:15px_0px border-top border-bottom:1px_solid_lightgrey">-->
<!-- <span class="component-registry" hidden><i class="height:16px" src="/assets/svg/plus.svg"></i></span>-->
<!-- <span class="component-registry"><i class="height:16px" src="/assets/svg/minus.svg"></i></span>-->
<!-- <span> Register Component Parameters</span>-->
<!-- </h3>-->
<!-- </a>-->
<!-- <div class="display:flex flex-wrap:wrap border-bottom:1px_solid_lightgrey component-registry">-->
<!-- <div class="flex-grow:1 width:300px padding:0px_10px">-->
<!-- <ul class="list-style-type:none padding-right:15px">-->
<!-- <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 to save to</p>-->
<!-- </li>-->
<!-- <li class="padding:15px_0px border-bot