@cocreate/builder
Version:
A simple builder component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
190 lines (176 loc) • 5.05 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>Builder Settings | CoCreate</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon.ico" />
<link
rel="stylesheet"
href="./index.css"
array="files"
object="610cb468c0e9580010e5ba50"
key="src"
type="text/css" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<!-- Modal Viewport -->
<div id="modal-viewport" hidden></div>
<!-- Navbar -->
<nav
class="nav display:flex align-items:center background:whitesmoke"
content_id="content"
scroll="sticky-nav, hide-nav"
scroll-up="5"
scroll-down="5">
<!-- Horizontal Scroll Nav/Tabs -->
<ul
class="display:inline-flex direction:rtl overflow:auto font-size:20px align-items:center list-style-type:none width:100% height:50px">
<!-- Modal Controls -->
<li class="margin-right:15px">
<a actions="closeModal"
><i class="height:18px" src="/assets/svg/times.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="minMaxModal">
<i
toggle="/assets/svg/window-restore.svg, /assets/svg/window-maximize.svg"
toggle-attribute="src"
class="height:18px"
src="/assets/svg/window-maximize.svg"></i>
</a>
</li>
<li class="margin-right:15px">
<a actions="parkModal"
><i
class="height:18px"
src="/assets/svg/window-minimize.svg"></i
></a>
</li>
<!-- fullscreen toogle and icon transform-->
<li class="margin-right:15px">
<a fullscreen>
<i class="height:18px" src="/assets/svg/expand.svg"></i>
<i
class="height:18px"
src="/assets/svg/compress.svg"></i>
</a>
</li>
<!-- Render Module Form -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../modules/form.html"
modal-width="320px">
<i class="height:18px" src="/assets/svg/cog.svg"></i>
<div
state_id="module-form"
state-array="modules"
state-object=""
state_to="form-fields"></div>
<div
state_id="datatable"
state-filter-query-value=""
state_to="module_id"></div>
</a>
</li>
<!-- Render Code Editor -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../code-editor/index.html">
<i class="height:18px" src="/assets/svg/code.svg"></i>
<div
state_id="render"
state-array=""
state-object=""
state-key=""
state_to="code-editor"></div>
</a>
</li>
<!-- Render Builder -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../builder/index.html">
<i
class="height:18px"
src="/assets/svg/palette.svg"></i>
<div
state_id="render"
state-array=""
state-object=""
state-key=""
state_to="builder"></div>
</a>
</li>
<!-- deleteDocument-->
<li class="margin-right:15px">
<a
actions="deleteDocument, closeModal"
array=""
object=""
state_id="form-fields">
<i
class="height:18px"
src="/assets/svg/trash-alt.svg"></i>
</a>
</li>
</ul>
</nav>
<main class="padding:10px" content_id="content">
<form
array="modules"
object="5f94ff945412e75f9b414a3e"
autocomplete="off">
<input type="hidden" key="module_id" state_id="module_id" />
<input
type="text"
object=""
key="name"
class="floating-label"
placeholder="Name"
state_id="form-fields"
array="module_activities" />
<cocreate-select
sortable
class="floating-label"
key="units"
array="modules"
object="5f94ff945412e75f9b414a3e"
placeholder=""
multiple="">
<input
placeholder="Search"
search_id="search-units"
search-query=".option" />
<ul
class="options overflow:auto"
array="modules"
filter-query-value="5f94ff945412e75f9b414a3e"
filter-query-key="_id.$eq"
key="units"
render-query="[template]"
search_id="search-units">
<li class="option" template value="{{units.--}}">
<h3 value="{{units.--}}">Unit Name</h3>
</li>
</ul>
</cocreate-select>
<button
actions="save"
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/save.svg"></i>
</button>
</form>
</main>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>