@cocreate/builder
Version:
A simple builder component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
501 lines (481 loc) • 14.5 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 | 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>
<!--<nav class="nav display:flex position:relative align-items:center box-shadow-bottom" content_id="canvas" scroll=", hide-nav" scroll-up="5" scroll-down="5" array="files" object="60de0fae14b5ab0c2dd2feb9" key="src">-->
<nav
class="nav display:flex position:relative align-items:center box-shadow-bottom"
content_id="canvas"
scroll=", hide-nav"
scroll-up="5"
scroll-down="5">
<!-- Menu Icon Arrow Left Animations -->
<a
class="menu_icon arrow-left"
click="active"
toggle="width:0px,width:310px"
toggle-query="#menuL"
toggle-attribute="style">
<span></span>
<span></span>
<span></span>
</a>
<!-- Horizontal Scroll Nav/Tabs -->
<ul
class="direction:rtl display:inline-flex align-items:center overflow:auto font-size:20px 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>
<!-- Save and Make live -->
<li class="margin-right:15px">
<a
actions="saveDomText"
state_id="builder"
array=""
object=""
key="src"
><i src="/assets/svg/save.svg"></i
></a>
</li>
<!-- Builder Controls -->
<li class="margin-right:15px">
<a id="redo-canvas" class=""
><i src="/assets/svg/redo-alt.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a id="undo-canvas" class=""
><i src="/assets/svg/undo-alt.svg"></i
></a>
</li>
<li
class="margin-right:15px min-width:40px line-height:40px border-radius:50% text-align:center background:whitesmoke"
selected-value="max-width:100%"
selected-query=".canvas-container"
selected-group="screen-size"
selected>
<a id="desktop-view" class=""
><i src="/assets/svg/desktop.svg"></i
></a>
</li>
<li
class="margin-right:15px min-width:40px line-height:40px border-radius:50% text-align:center background:whitesmoke"
selected-value="max-width:768px"
selected-query=".canvas-container"
selected-group="screen-size">
<a id="tablet-view" class=""
><i src="/assets/svg/tablet-alt.svg"></i
></a>
</li>
<li
class="margin-right:15px min-width:40px line-height:40px border-radius:50% text-align:center background:whitesmoke"
selected-value="max-width:375px"
selected-query=".canvas-container"
selected-group="screen-size">
<a id="mobile-view" class=""
><i src="/assets/svg/mobile-alt.svg"></i
></a>
</li>
<li
actions="disableLinks"
link-query="#canvas;"
class="margin-right:15px"
show="[actions='enableLinks']"
hide="[actions='disableLinks']">
<i src="/assets/svg/link.svg"></i>
</li>
<li
actions="enableLinks"
link-query="#canvas;"
class="margin-right:15px color:red"
hidden
show="[actions='disableLinks']"
hide="[actions='enableLinks']">
<i src="/assets/svg/unlink.svg"></i>
</li>
<!-- Render Code Editor -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="../code-editor/index.html"
modal-width="900px"
modal-color="#229954">
<i src="/assets/svg/code.svg"></i>
<div
state_id="builder"
state-array=""
state-object=""
key=""
state_to="code-editor"></div>
</a>
</li>
<li class="margin-right:15px">
<a id="element-borders" class=""
><i src="/assets/svg/square.svg"></i
></a>
</li>
<li class="margin-right:15px padding-left:15px">
<a id="clean-canvas"
><i
class="height:18px"
src="/assets/svg/trash-alt.svg"></i
></a>
</li>
</ul>
<!-- Menu Icon Arrow Right Animations -->
<a
class="menu_icon arrow-right"
click="active"
toggle="width:0px,width:260px"
toggle-query="#menuR"
toggle-attribute="style">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- Modal viewport -->
<div
id="modal-viewport"
class="position:fixed z-index:12!important"></div>
<!-- Main Container -->
<main content_id="canvas" class="height:100vh">
<div class="canvas-container height:100% margin:auto">
<iframe
contenteditable
sortable
id="canvas"
state_id="builder"
array=""
object=""
key="src"
read="false"
update="false"
crud="false"
frameborder="0"
width="100%"
height="100%"></iframe>
</div>
</main>
<!-- SideNav Left -->
<sidenav
id="menuL"
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:260px width:0px@xs@sm@md"
resizable
resize-query="[content_id='canvas']"
resize-property="margin-left"
resize-value="width">
<div
class="domEditor"
array="files"
object="60de0fae14b5ab0c2dd2feba"
key="src"></div>
<div resize="right"></div>
</sidenav>
<!-- SideNav Right -->
<sidenav
id="menuR"
class="position:fixed top:0px right:0px overflow:hidden background:whitesmoke height:100vh width:310px width:0px@xs@sm@md"
resizable
resize-query="[content_id='canvas']"
resize-property="margin-right"
resize-value="width">
<input type="hidden" attribute="eid" />
<div
class="domEditor"
array="files"
object="60de0fae14b5ab0c2dd2febb"
key="src"></div>
<div resize="left"></div>
</sidenav>
<!-- Selected Toolbar -->
<toolbar
toolbar-placement="top"
toolbar-query="iframe;"
toolbar-event="click"
config-key="selectable"
class="position:absolute pointer-events:none display:none">
<tools
class="display:flex justify-content:space-between width:100% color:white font-size:11px">
<span
class="padding:2px_5px background:dodgerblue border:1px_dodgerblue_solid"
tagname></span>
<!--<span class="padding:3px background:dodgerblue pointer-events:auto"><i src="/assets/svg/arrows-alt.svg"></i></span>-->
<div
class="display:flex align-items:center padding:2px_5px background:dodgerblue border:1px_dodgerblue_solid pointer-events:auto">
<span actions="cloneElement" class="margin-right:10px"
><i src="/assets/svg/clone.svg"></i
></span>
<span actions="deleteElement" class="margin-right:10px"
><i src="/assets/svg/trash-alt.svg"></i
></span>
<span actions="previousElement" class="margin-right:10px"
><i src="/assets/svg/arrow-up.svg"></i
></span>
<span actions="nextElement"
><i src="/assets/svg/arrow-down.svg"></i
></span>
</div>
</tools>
<div
class="height:100% width:100% border:2px_dodgerblue_solid"></div>
</toolbar>
<!-- Hover Toolbar -->
<toolbar
toolbar-placent="top"
toolbar-query="iframe;"
toolbar-event="mouseover"
config-key="hoverable"
class="position:absolute pointer-events:none display:none">
<tools
class="tools display:flex align-items:center color:white font-size:11px">
<span
class="padding:2px_5px background:dodgerblue border:1px_dodgerblue_solid"
tagname></span>
</tools>
<div
class="height:100% width:100% border:1px_dodgerblue_solid"></div>
</toolbar>
<!-- End Hover Toolbar -->
<!-- Collaboration Toolbar -->
<div
toolbar-placent="top"
toolbar-query="iframe;"
toolbar-event="mouseup"
config-key="editable"
class="toolbar position:absolute pointer-events:none display:none">
<tools
class="display:flex align-items:center width:fit-content background:gainsboro border-radius:5px pointer-events:auto">
<div
actions="nodeName"
node-name="b"
node-target="#canvas;"
class="padding:5px"
id="bold-button">
<i src="/assets/svg/bold.svg"></i>
</div>
<div
actions="nodeName"
node-name="i"
node-target="#canvas;"
id="italic-button">
<i src="/assets/svg/italic.svg"></i>
</div>
<div id="link-button" show="#link" hide="#link">
<i src="/assets/svg/link.svg"></i>
</div>
<div
id="link"
class="position:absolute display:flex align-items:center transition:0.4s background:gainsboro height:28px border-radius:5px"
hidden>
<input type="text" key="" />
<div
actions="nodeName"
node-name="a"
node-target="#canvas;"
id="nodename">
<i src="/assets/svg/link.svg"></i>
</div>
<div hide="#link">
<i src="/assets/svg/times.svg"></i>
</div>
</div>
<div
actions="nodeName"
node-name="q"
node-target="#canvas;"
id="quote-button">
<i src="/assets/svg/quote-right.svg"></i>
</div>
<div
id="heading-btn"
hover="width:fit-content"
hover-query="#headings">
<i src="/assets/svg/heading.svg"></i>
</div>
<div
id="headings"
hover="width:fit-content"
hover-query="#headings"
class="position:absolute display:flex align-items:center transition:0.4s width:0px background:gainsboro overflow:hidden height:28px border-radius:5px">
<div
actions="nodeName"
node-name="h1"
node-target="#canvas;"
id="header-1-button">
<i src="/assets/svg/heading.svg"></i><sub>1</sub>
</div>
<div
actions="nodeName"
node-name="h2"
node-target="#canvas;"
id="header-2-button">
<i src="/assets/svg/heading.svg"></i><sub>2</sub>
</div>
<div
actions="nodeName"
node-name="h3"
node-target="#canvas;"
id="header-3-button">
<i src="/assets/svg/heading.svg"></i><sub>3</sub>
</div>
<div
actions="nodeName"
node-name="h4"
node-target="#canvas;"
id="header-4-button">
<i src="/assets/svg/heading.svg"></i><sub>4</sub>
</div>
<div
actions="nodeName"
node-name="h5"
node-target="#canvas;"
id="header-5-button">
<i src="/assets/svg/heading.svg"></i><sub>5</sub>
</div>
<div
actions="nodeName"
node-name="h6"
node-target="#canvas;"
id="header-6-button">
<i src="/assets/svg/heading.svg"></i><sub>6</sub>
</div>
</div>
<div
id="show-controls"
show="#sidebar-controls"
hide="#sidebar-controls">
<i src="/assets/svg/plus.svg"></i>
</div>
<div
id="sidebar-controls"
class="display:flex align-items:center"
hidden>
<div id="image-button">
<i src="/assets/svg/camera.svg"></i>
</div>
<div id="video-button">
<i src="/assets/svg/play.svg"></i>
</div>
<div id="tweet-button">
<i src="/assets/svg/twitter.svg"></i>
</div>
<div id="divider-button">
<i src="/assets/svg/minus.svg"></i>
</div>
</div>
</tools>
<div class="height:100% width:100% pointer-events:none"></div>
</div>
<!-- End Collaboration Toolbar -->
<!-- element-config -->
<script config-query="iframe; html" array="" object="" key="">
[
{
selector: "*",
draggable: true,
droppable: true,
selectable: true,
hoverable: true
},
{ selector: "html, head", droppable: true },
{
selector: "body",
droppable: true,
selectable: true,
hoverable: true
},
{
selector: "h1, h2, h3, h4, h5, h6, p, span, blockquote",
editable: true,
draggable: true,
selectable: true,
hoverable: true,
mouseover: true
},
{
selector: "input, textarea, select",
draggable: true,
selectable: true,
hoverable: true
},
{
selector: "div.quill",
draggable: true,
selectable: true,
hoverable: true
},
{
selector: "div.nav",
tagname: "navbar",
draggable: true,
droppable: true,
selectable: true,
hoverable: true
},
{ selector: "div.floating-label_field", draggable: true },
{
selector: "a.menu_icon",
tagname: "icon",
draggable: true,
selectable: true,
hoverable: true
},
{ selector: "a.menu_icon span", selectable: false }
];
</script>
<!-- element-config Example using html elements and attributes to define config -->
<!--<element-config config-query="iframe; html" array="" object="" key="" style="display:none">-->
<!-- <config selector="*" editable="true" draggable="true" selectable="true" hoverable="true" mouseover="true"></config>-->
<!-- <config selector="h1, h2, h3, h4, h5, h6, p, span, blockquote" editable="true" draggable="true" selectable="true" hoverable="true" mouseover="true"></config>-->
<!--</element-config>-->
<!--<script src="https://CoCreate.app/dist/CoCreate.js"></script>-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>