@cocreate/render
Version:
A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
550 lines (529 loc) • 18.2 kB
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>CoCreate-render Documentation | CoCreateJS</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico" />
<meta
name="description"
content="A simple yet powerful drag-and-drop solution powered by javascript." />
<meta
name="keywords"
content="drag and drop, colaboration, dnd utility, drag and drop utility" />
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/render.png" />
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<!-- Navbar -->
<nav
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
content_id="content"
scroll="sticky-nav,"
scroll-up="5"
scroll-down="5"
path="../"
src="../components/navbar.html"></nav>
<sidenav
id="menuL"
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
resizable
resize-query="[content_id='content']"
resize-property="margin-left"
resize-value="width">
<menu
array="files"
object="603717b07de7fb350ae9fec8"
key="src"></menu>
<div resize="right"></div>
</sidenav>
<main
class="padding-top:15px padding:15px@lg@xl"
content_id="content"
id="CoCreate-render">
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
<div class="display:flex align-items:center">
<h2>CoCreate-render</h2>
</div>
<div
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
<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/render.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/CoCreate-dnd"
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">
CoCreate-render javascript component. Easy configuration using
HTML5 attributes or Javscript api and highly styleable.
</h1>
<div id="render-section" class="display:flex flex-wrap:wrap">
<div
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
<div
id="render-install"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#render-install-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#render-install']">
<h2 class="padding:5px_0px">Install</h2>
<a
class="margin-left:10px display:none"
href="#render-install"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<pre><code class="language-bash">npm i @cocreate/render</code></pre>
<p class="padding:10px_0px line-height:1.5">
Or you can use cdn link:
</p>
<pre><code class="language-html"><script>https://cdn.cocreate.app/render/latest/CoCreate-render.min.js</script></code></pre>
<p class="padding:10px_0px line-height:1.5">
for styling please refer to #id-style
</p>
<div
id="render-usage"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#render-usage-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#render-usage']">
<h2 class="padding:5px_0px">Usage</h2>
<a
class="margin-left:10px display:none"
href="#render-usage"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<p class="padding:10px_0px line-height:1.5">
CoCreate-render would use that set attributes and
renders the elements based on html and json data.
</p>
<h3
class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">
Example
</h3>
<p class="padding:10px_0px line-height:1.5"></p>
<h4 class="margin-top:20px padding:5px_0px">
HTML Template
</h4>
<div class="margin-top:10px">
<pre><code class="language-html">
<div template_id="abc1" array="render_test">
<div class="template card {{render2.array}} card margin:10px firstname"
value="{{render2.data._id}}"
template_id="abc1"
render="render2.data">
<div class="card-body padding:15px" array="{{render2.array}}">
<h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
<h3 value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
<input value="{{ render2.array }}"/>
<h3 class="email" value="{{render2.data.email}}">--</h3>
<textarea value="{{render2.data.lastname}}"></textarea>
<h3 data-attribute="{{render2.data.personal_info.email}}" key="email" value="{{render2.data.personal_info.email}}"></h3>
<div class="template card "
render="render2.data.testing_array">
<h3 data-attribute="{{render2.data.testing_array.email}}" key="email" class="{{render2.data.testing_array.email}}" value="{{render2.data.testing_array.email}}"></h3>
<h3 value="{{render2.array}}"></h3>
<h3 value="{{render2.data.personal_info.email}}"></h3>
</div>
<div class="template card "
render="render2.data.string_array" render-as="string_">
<h3 key="test"
data-attribute="{{string_.--}}"
class="{{string_.--}}"
value="{{string_.--}}"></h3>
</div>
</div>
</div>
</div>
</code></pre>
</div>
<h4 class="margin-top:40px padding:5px_0px">
CoCreate-render usage
</h4>
<p class="padding:10px_0px line-height:1.5">Description.</p>
<pre><code class="language-html">
CoCreate.render.data({
selector: '[template=abc1]',
data: {
render2: {
array : 'dededede',
data: [{
_id : '123kijfhgfkel45',
firstname : 'Jin',
lastname : 'codingmachinine',
personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
email: 'tesing@gamil.com',
testing_array : [
{email:'jeanmendozar@gmail.com','phone':'0','home':'home1'},
{email:'frank@gmail.com','phone':'1','home':'home2'},
{email:'jose@gmail.com','phone':'2','home':'home3'},
],
string_array: ['string1', 'string2', 1, 3]
},{
_id : '5678efe32qd2ol',
firstname : 'jean',
lastname : 'Mendoza',
personal_info : {email:'jeanmendozar@gmail.com','phone':'56666'},
email: 'tesing2@gamil.com',
testing_array : [
{email:'1ana@gmail.com','phone':'16','home':'home17'},
{email:'1rosa@gmail.com','phone':'17','home':'home18'},
{email:'1nuevo@gmail.com','phone':'18','home':'home19'}
],
string_array: ['string1', 'string2', 1, 3]
},
]}
})
</code></pre>
<div
id="render-attributes"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#render-attributes-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#render-attributes']">
<h2 class="padding:5px_0px">Attributes</h2>
<a
class="margin-left:10px display:none"
href="#render-attributes"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<ul class="list-style-type:none">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>render</span>
<span class="cocreate-badge warning"
>optional</span
><span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
To render the array data, this attribute should
define by the object selector path
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>render-as</span>
<span class="cocreate-badge warning"
>optional</span
><span class="cocreate-badge"
>Default: render's value</span
>
</h4>
<p>If render defined, this attribute can define</p>
<p>Default value is value of render</p>
</li>
</ul>
<h4
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Funcations
</h4>
<ul class="list-style-type:none">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>setValue(elements, data, [stateTo])</span>
</h4>
<p>This is main function.</p>
<div>
<p>
<strong>elements</strong>
<span class="cocreate-badge warning"
>Type:NoteList</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>Dom elements for render</p>
</div>
<div>
<p>
<strong>data</strong>
<span class="cocreate-badge warning"
>Type:object</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>Data to render</p>
</div>
<div>
<p>
<strong>stateTo</strong
><span class="cocreate-badge warning"
>Type:string</span
><span class="cocreate-badge warning"
>optional</span
>
</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>render(selector, data)</span>
</h4>
<div>
<p>
<strong>selector</strong>
<span class="cocreate-badge warning"
>Type:String</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>The selector of element to render</p>
</div>
<div>
<p>
<strong>data</strong>
<span class="cocreate-badge warning"
>Type:object</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>Data to render</p>
</div>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>setArray(element, data)</span>
</h4>
<div>
<p>
<strong>element</strong>
<span class="cocreate-badge warning"
>Type:Node</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>
Element to render the array. Geneeral it
will be template.
</p>
</div>
<div>
<p>
<strong>data</strong>
<span class="cocreate-badge warning"
>Type:object</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>Data to render</p>
</div>
</li>
</ul>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
How Does It Works
</h2>
<p>
CoCreate-render works based on attributes and template,
The attributes to render should be wrapper "{{ }}", and
attributes can include the combine "{{}}" wrapper.
</p>
<p>
To render the array data, Render need to define
<code class="language-js">class="template"</code>.
<code class="language-js">render</code>
</p>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Effects and Styles
</h2>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Events
</h2>
</div>
<div
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
<!-- SandBox -->
<div
id="render-demo"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#render-demo-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#render-demo']">
<h2 class="padding:5px_0px">Demo</h2>
<a
class="margin-left:10px display:none"
href="#render-demo"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div
class="position:sticky top:0 padding:15px_0px height:100vh">
<!-- SandBox -->
<div
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
id="playground">
<div
id="demo-code"
resizable
class="position:relative height:50%">
<textarea
type="code"
lang="html"
array="demos"
object=""
key="demo"
save="false"
id="demo"
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
<div
resize="bottom"
class="background:lightgrey"></div>
</div>
<div
id="demo-preview"
class="position:relative overflow:auto background-color:white">
<div class="demopreview padding:20px"></div>
</div>
<div
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
<a
class="margin-right:10px"
id="eye"
show="#eye-slash"
hide="#eye, #demo-preview"
toggle="code-height"
toggle-query="#demo-code"
><i
class="height:18px"
src="/assets/svg/eye.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="eye-slash"
show="#eye, #demo-preview"
hide="#eye-slash"
toggle="code-height"
toggle-query="#demo-code"
><i src="/assets/svg/eye-slash.svg"></i
></a>
<a
class="margin-right:10px"
id="code"
show="#code-slash"
hide="#code, #demo-code"
><i src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="code-slash"
show="#code, #demo-code"
hide="#code-slash"
><i
class="height:18px"
src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:5px"
fullscreen
fullscreen-query="#playground"></a>
</div>
</div>
<!-- End SandBox -->
</div>
</div>
</div>
<button
href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
target="_blank"
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
<i src="../assets/svg/pencil-alt.svg"></i>
</button>
</main>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>