@cocreate/filter
Version:
A JavaScript api define attributes for filtering color, description, text, price or any list of document stored in db. Great for creating custom components like fetch, calender, datatables etc.
603 lines (582 loc) • 18.4 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-filter 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/filter.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-filter">
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
<div class="display:flex align-items:center">
<h2>CoCreate-filter</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/filter.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>
<p class="max-width:500px margin:20px_10px line-height:1.5">
CoCreate-filter javascript component. Easy configuration using
HTML5 attributes or Javscript api and highly styleable.
</p>
<div id="filter-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="filter-install"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#filter-install-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#filter-install']">
<h2 class="padding:5px_0px">Install</h2>
<a
class="margin-left:10px display:none"
href="#filter-install"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<pre><code class="language-bash">npm i @cocreate/filter</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/filter/latest/CoCreate-filter.min.js</script></code></pre>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">
Dependencies components
</h2>
<p class="padding:10px_0px line-height:1.5">
<strong>CoCreate.js</strong>,
<strong>CoCreate-utils.js</strong>
</p>
<div
id="filter-usage"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#filter-usage-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#filter-usage']">
<h2 class="padding:5px_0px">Usage</h2>
<a
class="margin-left:10px display:none"
href="#filter-usage"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<p class="padding:10px_0px line-height:1.5">
CoCreate-filter is basic component that make the the
readDocuments parameters to fetch the data from db by
attributes.
</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="filter" filter-query-key="name" filter-query-value="testing" filter-operator="$eq"></div>
<div template_id="filter" filter-query-key="age" filter-query-value="10" filter-operator="$gt"></div>
<div template_id="filter" filter-sort-key="age" filter-sort-direction="asc"></div>
...
<input template_id="filter" filter-query-key="description" filter-operator="$in"/>
....
<div array="testing" template_id="filter"
filter-query-key="filter"
filter-query-value="testing"
data-fitler_operator="$ne"
>....</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">
//. Function
</code></pre>
<div
id="filter-attributes"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#filter-attributes-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#filter-attributes']">
<h2 class="padding:5px_0px">Attributes</h2>
<a
class="margin-left:10px display:none"
href="#filter-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>{container_id}</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge danger"
>required</span
>
</h4>
<p>
This attribute should be defined. This attribute
name is difference for each component.
</p>
<p>
Template wrapper case: the attribute name is
<code class="language-js">template_id</code>
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-query-key</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Collections's field name for filter.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-value</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
Collection's field value for filter. If
filter-query-key defined, this attribute should
defined too
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-value-type</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>string | raw . Default value is string</p>
<p>
raw case, it will make values array from string
by "," separation
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-operator</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Define the filter operator.</p>
<p>
Operators: includes | $range | $eq | $ne | $lt |
$lte | $gt | $gte | $in | $nin | $geoWithin
</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-sort-name</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Field name to sorting.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>value</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>The value for sorting.</p>
<p>value="asc | desc". Default value is asc</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>filter-on</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>Available value: loadmore | scroll | total.</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>export_type</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
To export the fetched data, This attribute will
be use
</p>
<p>Available value: json | cvs</p>
</li>
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>import</span>
<span class="cocreate-badge success"
>string</span
>
<span class="cocreate-badge warning"
>optional</span
>
</h4>
<p>
When import the file content into selected
array, This attribute will be use
</p>
<p>Available value: true</p>
</li>
</ul>
<h4
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
Functions
</h4>
<ul class="list-style-type:none">
<li
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>init(elements, mainAttri, type)</span>
</h4>
<p>
To apply filter into the componentis, the
component should call this function
</p>
<div class="padding-left:1rem">
<p>
- <strong>elements</strong>
<span class="cocreate-badge warning"
>Type:Node</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>Dom elements for container</p>
</div>
<div class="padding-left:1rem">
<p>
- <strong>mainAttr</strong>
<span class="cocreate-badge warning"
>Type:string</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>
This is the container's attribute name. Ex:
template wrapper case-
<code class="language-js">template_id</code>
</p>
</div>
<div class="padding-left:1rem">
<p>
- <strong>type</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>fetchData(item)</span></h4>
<p>
To fetch the data, the component should call
this function.
</p>
<div class="padding-left:1rem">
<p>
- <strong>item</strong>
<span class="cocreate-badge warning"
>Type:object</span
><span class="cocreate-badge danager"
>required</span
>
</p>
<p>
This paramter is the returned value by
init() function
</p>
</div>
</li>
</ul>
<h2
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
How Does It Works
</h2>
<p>
CoCreate-filter build the filter object based on
attributes
</p>
<p>
To make filter object , Filter should define
<code class="language-js">data-{container_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>fetchData</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="filter-demo"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-query="#filter-demo-section">
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-query="[href='#filter-demo']">
<h2 class="padding:5px_0px">Demo</h2>
<a
class="margin-left:10px display:none"
href="#filter-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>
</main>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>