Skip to content

Commit

Permalink
fix: Update to readme, demo, added cdn scripts
Browse files Browse the repository at this point in the history
  • Loading branch information
frankpagan committed Apr 27, 2021
1 parent 3334753 commit bb69220
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 111 deletions.
102 changes: 102 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<html>
<head>
<title>Render | CoCreateJS</title>

<!-- CoCreate Favicon -->
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
</head>
<body>

<div data-template_id="abc1" data-fetch_collection="render_test">
<div class="template card {{render2.collection}} card margin:10px firstname"
data-value="{{render2.data._id}}"
data-template_id="abc1"
data-render_array="render2.data">
<div class="card-body padding:15px" data-collection="{{render2.collection}}">
<h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
<h3 data-value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
<input value="{{ render2.collection }}"/>
<h3 class="email" value="{{render2.data.email}}">--</h3>
<textarea value="{{render2.data.lastname}}"></textarea>
<h3 data-attribute="{{render2.data.personal_info.email}}" name="email" value="{{render2.data.personal_info.email}}"></h3>

<div class="template card "
data-render_array="render2.data.testing_array">

<h3 data-attribute="{{render2.data.testing_array.email}}" name="email" class="{{render2.data.testing_array.email}}" value="{{render2.data.testing_array.email}}"></h3>
<h3 value="{{render2.collection}}"></h3>

<h3 value="{{render2.data.personal_info.email}}"></h3>
</div>
<div class="template card "
data-render_array="render2.data.string_array" data-render_key="string_">

<h3 name="test"
data-attribute="{{string_.--}}"
class="{{string_.--}}"
value="{{string_.--}}"></h3>
</div>
</div>
</div>
</div>


<pre>
<h1>Paste in your browser console</h1>

/** Example of array object from db -- render2 is an example of data-render_id**/
CoCreate.render.data({
selector: '[data-template_id=abc1]',
data: {
render2: {
collection : 'dededede',
data: [{
_id : '123kijfhgfkel45',
firstname : 'Jin',
lastname : 'codingmachinine',
personal_info : {email:'[email protected]','phone':'56666'},
email: '[email protected]',
testing_array : [
{email:'[email protected]','phone':'0','home':'home1'},
{email:'[email protected]','phone':'1','home':'home2'},
{email:'[email protected]','phone':'2','home':'home3'},
{email:'[email protected]','phone':'3','home':'home4'},
{email:'[email protected]','phone':'4','home':'home5'},
],
string_array: ['string1', 'string2', 1, 3]
},{
_id : '5678efe32qd2ol',
firstname : 'jean',
lastname : 'Mendoza',
personal_info : {email:'[email protected]','phone':'56666'},
email: '[email protected]',
testing_array : [
{email:'[email protected]','phone':'10','home':'home11'},
{email:'[email protected]','phone':'11','home':'home12'},
{email:'[email protected]','phone':'12','home':'home13'},
{email:'[email protected]','phone':'13','home':'home14'},
{email:'[email protected]','phone':'14','home':'home15'},
{email:'[email protected]','phone':'15','home':'home16'},
{email:'[email protected]','phone':'16','home':'home17'},
{email:'[email protected]','phone':'17','home':'home18'},
{email:'[email protected]','phone':'18','home':'home19'}
],
string_array: ['string1', 'string2', 1, 3]
},
]
}
}
})

</pre>
<script>
var config = {
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
organization_Id: '5de0387b12e200ea63204d6c'
}
</script>

<!-- CoCreate JS CDN -->
<script src="https://cdn.cocreate.app/render/latest/CoCreate-render.min.js" ></script>
</body>
</html>
102 changes: 0 additions & 102 deletions demo/render.html

This file was deleted.

21 changes: 12 additions & 9 deletions docs/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -12,12 +11,11 @@
<meta name="robots" content="index,follow" />
<meta property="og:image" content="https://cdn.cocreate.app/docs/render.png">

<!-- CoCreate CSS -->
<!-- CoCreate CSS CDN -->
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css"/>
<link rel="stylesheet" href="https://ws.cocreate.app/docs.css" data-collection="apples" data-document_id="6069ff5042ef8ff5175a5c8d" name="css" type="text/css" />
</head>

<body>

<nav class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px" data-main_content_id="content" data-scroll="sticky-nav,hide-nav" data-scroll_up="10" data-scroll_down="10" data-collection="components" data-document_id="60395ef42b3ac232657040fd" name="html">
</nav>
<sidenav id="menuL" class="cocreate-sidenav background:whitesmoke" data-main_content="content" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="expanded">
Expand All @@ -44,7 +42,7 @@ <h2>CoCreate-render</h2>
<p class="max-width:500px margin:20px_10px line-height:1.5">CoCreate-render javascript component. Easy configuration using data-attributes and highly styleable.</p>
<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" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-install-section">
<div id="render-install" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#render-install-section">
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#render-install"]'>
<h2 class="padding:5px_0px">Install</h2>
<a class="margin-left:10px display:none" href="#render-install"><i class="fas fa-link"></i></a>
Expand All @@ -55,7 +53,7 @@ <h2 class="padding:5px_0px">Install</h2>
<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/render/latest/CoCreate-render.min.js&lt;/script&gt;</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" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-usage-section">
<div id="render-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#render-usage-section">
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#render-usage"]'>
<h2 class="padding:5px_0px">Usage</h2>
<a class="margin-left:10px display:none" href="#render-usage"><i class="fas fa-link"></i></a>
Expand Down Expand Up @@ -145,7 +143,7 @@ <h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
})
</code></pre>

<div id="render-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-attributes-section">
<div id="render-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#render-attributes-section">
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#render-attributes"]'>
<h2 class="padding:5px_0px">Attributes</h2>
<a class="margin-left:10px display:none" href="#render-attributes"><i class="fas fa-link"></i></a>
Expand Down Expand Up @@ -222,7 +220,7 @@ <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Ev
</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" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#boilerplate-demo-section">
<div id="render-demo" class="border-bottom:1px_solid_lightgrey" data-scroll data-scroll_intersect="color:dodgerblue" data-scroll_target="#render-demo-section">
<span class="display:flex align-items:center width:fit-content" data-hover="display:block!important" data-hover_target='[href="#render-demo"]'>
<h2 class="padding:5px_0px">Demo</h2>
<a class="margin-left:10px display:none" href="#render-demo"><i class="fas fa-link"></i></a>
Expand All @@ -249,14 +247,19 @@ <h2 class="padding:5px_0px">Demo</h2>
</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="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover border-radius:50%">
<i class="fas fa-pencil-alt"></i>
</button>
</main>

<script>
var config = {
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
organization_Id: '5de0387b12e200ea63204d6c'
}
</script>
<!--CoCreateJS-->

<!--CoCreateJS CDN-->
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
</body>

Expand Down

0 comments on commit bb69220

Please sign in to comment.