@cocreate/api
Version:
A simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. CoCreate-api includes the client component and server side for api processing. Thirdparty apis can be accessible using HTML5 attribut
240 lines (205 loc) • 14.6 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-api Documentation | CoCreateJS </title>
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
<meta name="description" content="An api helper component in vanilla javascript to setup thirdparty api intergrations. Apis can be accessible using HTML5 attributes and/or JavaScript API" />
<meta name="keywords" content="drag and drop, collaboration, dnd utility, drag and drop utility" />
<meta name="robots" content="index,follow" />
<meta property="og:image" content="https://cdn.cocreate.app/docs/api.png">
<link rel="stylesheet" href="/docs/index.css" array="files" object="60888216117c640e7596303f" key="src" type="text/css" save="true" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<nav
class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
content_id="content"
scroll="sticky-nav,hide-nav"
scroll-up="10"
scroll-down="10"
array="files"
object="60395ef42b3ac232657040fd"
key="src">
</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-api">
<div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
<div class="display:flex align-items:center">
<h2>CoCreate-api</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/api.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-api is a simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. CoCreate-api includes the
client component and server side for api processing.</h1> -->
<div id="api-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="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-install-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-install']">
<h2 class="padding:5px_0px">Install</h2>
<a class="margin-left:10px display:none" href="#api-install"><i src="/assets/svg/link.svg"></i></a>
</span>
</div>
<pre><code class="language-bash">npm i @cocreate/api</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/api/latest/CoCreate-api.min.js</script></code></pre>
<div>
<h2 id="api-dependencies" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
<a class="display:none" href="#api-dependencies"><i src="/assets/svg/link.svg"></i></a>
</div>
<p class="padding:10px_0px line-height:1.5">
<strong>CoCreate.js</strong>,
<strong>CoCreate-action.js</strong>,
<strong>CoCreate-render.js</strong>,
</p>
<div id="api-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-usage-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-usage']">
<h2 class="padding:5px_0px">Usage</h2>
<a class="margin-left:10px display:none" href="#api-usage"><i src="/assets/svg/link.svg"></i></a>
</span>
</div>
<h4 class="margin-top:20px padding:5px_0px">Install package</h4>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-bash">npm i @cocreate/api</code></pre>
</p>
<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/api/latest/CoCreate-api.min.js</script></code></pre>
<div>
<h2 id="api-server-run" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
<a class="display:none" href="#api-server-run"><i src="/assets/svg/link.svg"></i></a>
</div>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-javascript">npm run start</code></pre>
<p>Server's default port is 8081.</p>
</p>
<h4 class="margin-top:20px padding:5px_0px">Client side</h4>
<p class="padding:10px_0px line-height:1.5">
In order to the client to use the local server, it should be set as follows.
<pre><code class="language-javascript">
</code></pre>
</p>
<div>
<h2 id="api-functions" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">CoCreate-api functions</h2>
<a class="display:none" href="#api-functions"><i src="/assets/svg/link.svg"></i></a>
</div>
<ul class="list-style-type:none ">
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>register(module_name, instance)</span><span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
<p>The function that register cocreate-api module.</p>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-javascript">CoCreateApi.register('stripe', CoCreateStripe)</code></pre>
</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>send(module_name, action_name, data)</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge danger">required</span></h4>
<p>The function that send the data into server by module_name and action</p>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-javascript">CoCreateApi.send('stripe', 'createCustomer', {
name: 'Name',
email: 'test@gmail.com',
...
})</code></pre>
</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>render(module_name, action_name, data)</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>The function to render data into template</p>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-javascript">CoCreate.api.render('stripe', 'createCustomer', {name: 'Name', email: 'test@gmail.com', ...})</code></pre>
</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4><span>getFormData(moudle_name, action_name, container)</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
<p>The function is that get module data from form</p>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-javascript">
let container = btn.closest("form") || document;
let data = CoCreateApi.getFormData('stripe', 'createCustomer', container);
CoCreateApi.send(this.id, 'createCustomer', [data]);
</code></pre>
</p>
<p>HTML Example</p>
<p class="padding:10px_0px line-height:1.5">
<pre><code class="language-html">
<form>
<input stripe="createCustomer.name">
<div stripe="createCustomer.address" stripe_array="address">
<input stripe="address.home.city">
<input stripe="address.work">
</div>
<div stripe="createCustomer.address" xxx_array="address">
<input stripe="address.home.city">
<input stripe="address.name">
<input stripe="address.line1">
<div stripe="address.billing" xxx_array="b">
<input stripe="b.address1">
<input stripe="b.city">
<input stripe="b.code.zip">
<input stripe="b.code.postal">
</div>
</div>
<button actions='createCustomer'>Create Form</button>
</form>
</code></pre>
</p>
</li>
</ul>
<h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">How Does It Works</h2>
<p>CoCreate-fetch works based on cocreate.js and template. </p>
<p>To fetch the array data, the template wrapper should define <code class="language-js">document</code>. <code class="language-js">template_id</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>
<h4><span></span><span class="cocreate-badge success"></span></h4>
</div>
<div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
<!-- SandBox -->
<div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-demo-section">
<span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-demo']">
<h2 class="padding:5px_0px">Demo</h2>
<a class="margin-left:10px display:none" href="#api-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>
<button href="https://github.com/CoCreate-app/CoCreate-api/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 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>