Skip to content

Commit 9a7bcda

Browse files
frankpaganfrankpagan
committed
fix demo
1 parent f7131a9 commit 9a7bcda

3 files changed

Lines changed: 191 additions & 152 deletions

File tree

‎demo/iframe.html‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h3 data-element_id="UOSXmIxqpp150457" data-coc-type="default" data-coc-name=""
2727
<i class="fa fa-bar-chart" data-element_id="ZQenEPBhsE150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true"></i>
2828
<p data-element_id="ekQoVrkKdk150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true" class="">Chart Image</p>
2929
</li>
30-
<li data-element_id="HbcHnLofUV150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true" class="">
30+
<li id="new" data-element_id="HbcHnLofUV150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true" class="">
3131
<i class="fa fa-sign-in" data-element_id="sAnZqodgEX150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true"></i>
3232
<p data-element_id="QUZRBeyhMg150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true" class="">Login Form</p>
3333
<p data-element_id="eacVXBRQPH150457" data-coc-type="default" data-coc-name="" data-coc-draggable="true" data-coc-droppable="true" data-coc-option="true" data-coc-editable="true" data-coc-hoverable="true" class="">Login Form</p>
@@ -46,17 +46,9 @@ <h3 data-element_id="UOSXmIxqpp150457" data-coc-type="default" data-coc-name=""
4646
</div>
4747

4848

49-
<script>
50-
var config = {
51-
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
52-
organization_Id: '5de0387b12e200ea63204d6c',
53-
host: 'server.cocreate.app:8088'
54-
}
55-
</script>
56-
5749
<!--CoCreateJS CDN-->
5850
<!--<script src="https://cdn.cocreate.app/attributes/latest/CoCreate-attributes.min.js" ></script>-->
59-
<script src="https://server.cocreate.app/CoCreateJS/dist/CoCreate.js"></script>
51+
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
6052

6153
</body>
6254
</html>

‎demo/index.html‎

Lines changed: 112 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,127 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Attributes | CoCreateJS</title>
5-
<!-- CoCreate Favicon -->
6-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7-
</head>
8-
<body>
9-
10-
<!-- Main Container -->
11-
<div data-main_content_id="canvas" class="height:100vh overflow:scroll">
12-
<iframe data-vdom_id="test" id="canvas" src="./iframe.html" frameborder="0" width="100%" height="100%"></iframe>
13-
</div>
14-
15-
16-
<!-- CoCreate SideNav Right -->
17-
<div id="menuR" class="cocreate-sidenav sidenav-right background:gainsboro" data-main_content="canvas" sidenav-default_desktop="expanded" sidenav-default_tablet="expanded" sidenav-default_phone="expanded">
18-
<div class="padding:5px overflow:overlay">
19-
<form>
20-
<input data-attribute_sync="myAttribute" type="text" class="floating-label attr" placeholder="Draggable" data-attribute_target="#new">
21-
<p>different name:</p>
22-
<input type="checkbox" id="vehicle11" name="vehicle1" value="background:green;" data-attribute_sync="style" data-attribute_target="#new"><label for="vehicle1">background:green</label><br>
23-
<input type="checkbox" id="vehicle21" name="vehicle2" value="color:blue;" data-attribute_sync="style" data-attribute_target="#new"><label for="vehicle2">color:blue</label></br>
24-
<p>same name:</p>
25-
<input type="checkbox" id="vehicle31" name="sameee" value="background:green;" data-attribute_sync="style" data-attribute_target="#new"><label for="vehicle3">background:green</label><br>
26-
<input type="checkbox" id="vehicle41" name="sameee" value="color:blue;" data-attribute_sync="style" data-attribute_target="#new"><label for="vehicle4">color:blue</label></br>
27-
<input id="radio1" type="radio" name="radiotest" value="background:green;" data-attribute_sync="style" data-attribute_target="#new">
28-
<label for="radio1">background:green</label>
29-
<input id="radio2" type="radio" name="radiotest" value="color:blue;" data-attribute_sync="style" data-attribute_target="#new">
30-
<label for="radio2">color:blue</label>
31-
32-
33-
<select name="cars" id="cars" data-attribute_sync="style" data-attribute_target="#new">
34-
<option value="background:green;">background:green;</option>
35-
<option value="color:blue;">color:blue;</option>
36-
<option value="mercedes">Mercedes</option>
37-
<option value="audi">Audi</option>
38-
</select>
39-
<br>
40-
<br>
41-
<br>
42-
43-
<select name="cars" id="cars" data-attribute_sync="class" data-attribute_target="#new" multiple>
3+
4+
<head>
5+
<title>Attributes | CoCreateJS</title>
6+
<!-- CoCreate Favicon -->
7+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8+
</head>
9+
10+
<body>
11+
12+
<!-- Main Container -->
13+
<div data-main_content_id="canvas" class="height:100vh overflow:scroll">
14+
<iframe data-vdom_id="test" id="canvas" src="./iframe.html" frameborder="0" width="100%" height="100%"></iframe>
15+
</div>
16+
17+
18+
<!-- CoCreate SideNav Right -->
19+
<div id="menuR" class="cocreate-sidenav sidenav-right background:gainsboro" data-main_content="canvas" sidenav-default_desktop="expanded" sidenav-default_tablet="expanded" sidenav-default_phone="expanded">
20+
<div class="padding:5px height:100vh overflow:auto">
21+
<form>
22+
<h1 id="new">testing</h1>
23+
<input data-attributes="myAttribute" type="text" class="floating-label attr" placeholder="Draggable" data-attributes_target="#canvas; #new">
24+
<input id="margin-left" class="floating-label z-index:0 text_color" placeholder="" data-attributes="classstyle" data-attributes_property="margin-left" data-attributes_target="#canvas; #new" active>
25+
26+
27+
<p>Set Attribute:</p>
28+
<input type="checkbox" id="vehicle11" name="vehicle1" value="background:green;" data-attributes="someAttr" data-attributes_target="#canvas; #new"><label for="vehicle1">value1</label><br>
29+
<input type="checkbox" id="vehicle21" name="vehicle2" value="color:blue;" data-attributes="someAttr" data-attributes_target="#canvas; #new"><label for="vehicle2">value1</label></br>
30+
31+
32+
<p>different name:</p>
33+
<input type="checkbox" id="vehicle11" name="vehicle1" value="background:green;" data-attributes="style" data-attributes_target="#canvas; #new"><label for="vehicle1">background:green</label><br>
34+
<input type="checkbox" id="vehicle21" name="vehicle2" value="color:blue;" data-attributes="style" data-attributes_target="#canvas; #new"><label for="vehicle2">color:blue</label></br>
35+
36+
<p>same name:</p>
37+
<input type="checkbox" id="vehicle31" name="sameee" value="background:green;" data-attributes="style" data-attributes_target="#canvas; #new"><label for="vehicle3">background:green</label><br>
38+
<input type="checkbox" id="vehicle41" name="sameee" value="color:blue;" data-attributes="style" data-attributes_target="#canvas; #new"><label for="vehicle4">color:blue</label></br>
39+
<input id="radio1" type="radio" name="radiotest" value="background:green;" data-attributes="style" data-attributes_target="#canvas; #new">
40+
<label for="radio1">background:green</label>
41+
<input id="radio2" type="radio" name="radiotest" value="color:blue;" data-attributes="style" data-attributes_target="#canvas; #new">
42+
<label for="radio2">color:blue</label>
43+
44+
45+
<select name="cars" id="cars" data-attributes="style" data-attributes_target="#canvas; #new">
46+
<option value="background:green;">background:green;</option>
47+
<option value="color:blue;">color:blue;</option>
48+
<option value="mercedes">Mercedes</option>
49+
<option value="audi">Audi</option>
50+
</select>
51+
<br>
52+
<br>
53+
<br>
54+
55+
<select name="cars" id="cars" data-attributes="class" data-attributes_target="#canvas; #new" multiple>
4456
<option value="class1">class1</option>
4557
<option value="class2">class2</option>
4658
<option value="class3">class3</option>
4759
<option value="class4">class4</option>
4860
</select>
49-
<select name="cars" id="cars" data-attribute_sync="myAttribute" data-attribute_target="#new" multiple>
61+
<select name="cars" id="cars" data-attributes="myAttribute" data-attributes_target="#canvas; #new" multiple>
5062
<option value="class1">myAttribute </option>
5163
<option value="class2">myAttribute class2</option>
5264
<option value="class3">myAttribute class3</option>
5365
<option value="class4">myAttribute class4</option>
5466
</select>
55-
56-
<input type="checkbox" id="classxxx" name="classxxx" value="classxxx" data-attribute_sync="class" data-attribute_target="#new" checked><label for="classxxx">add class: classxxx</label><br>
57-
<div thename="volvo" data-element_id="a">volvo</div>
58-
<div thename="saab" data-element_id="b">saab</div>
59-
<div id="new" thename="" data-element_id="c" style="font-size:18px;" class="class1 class2 classxxx">#ff0000</div>
60-
<div thename="audi" data-element_id="d">audi</div>
61-
62-
<cocreate-select
63-
class="sortable floating-label"
64-
data-attribute_sync="style"
65-
data-attribute_target="#new"
66-
name="selectField4"
67-
placeholder="Single Options">
68-
<input class="option-search" placeholder="Search">
69-
<ul class="options overflow:overlay">
70-
<li class="option"value="background:green;">
71-
<h3>background:green;</h3>
72-
</li>
73-
<li class="option" value="color:blue;">
74-
<h3 >color:blue;</h3>
75-
</li>
76-
<li class="option" value="value 3">
77-
<h3 >sss</h3>
78-
</li>
79-
<li class="option" value="value 3">
80-
<h3 >value 3</h3>
81-
</li>
82-
</ul>
83-
</cocreate-select>
84-
<cocreate-select
85-
class="sortable floating-label"
86-
data-attribute_sync="style"
87-
data-attribute_target="#new"
88-
name="selectField4"
89-
multiple
90-
placeholder="Single Options">
91-
<input class="option-search" placeholder="Search">
92-
<ul class="options overflow:overlay">
93-
<li class="option"value="background:green;">
94-
<h3>background:green;</h3>
95-
</li>
96-
<li class="option" value="color:blue;">
97-
<h3 >color:blue;</h3>
98-
</li>
99-
<li class="option" value="value 3">
100-
<h3 >sss</h3>
101-
</li>
102-
<li class="option" value="value 3">
103-
<h3 >value 3</h3>
104-
</li>
105-
</ul>
106-
</cocreate-select>
107-
108-
109-
</form>
110-
</div>
111-
<div class="resizeHandler"></div>
112-
</div>
113-
<!-- End CoCreate SideNav Right -->
114-
115-
<!-- floating btn -->
116-
<a class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover round z-index:12" target="modal" href="block-form.html" pass-collection="blocks" modal-width="320px" modal-height="100%" modal-color="#229954" pass_to="render">
67+
68+
<input type="checkbox" id="classxxx" name="classxxx" value="classxxx" data-attributes="class" data-attributes_target="#canvas; #new" checked><label for="classxxx">add class: classxxx</label><br>
69+
<div thename="volvo" data-element_id="a">volvo</div>
70+
<div thename="saab" data-element_id="b">saab</div>
71+
<div id="new" thename="" data-element_id="c" style="font-size:18px;" class="class1 class2 classxxx">#ff0000</div>
72+
<div thename="audi" data-element_id="d">audi</div>
73+
74+
<cocreate-select class="sortable floating-label" data-attributes="style" data-attributes_target="#canvas; #new" name="selectField4" placeholder="Single Options">
75+
<input class="option-search" placeholder="Search">
76+
<ul class="options overflow:overlay">
77+
<cc-option class="option" value="background:green;">
78+
<h3>background:green;</h3>
79+
</cc-option>
80+
<cc-option class="option" value="color:blue;">
81+
<h3>color:blue;</h3>
82+
</cc-option>
83+
<cc-option class="option" value="value 3">
84+
<h3>sss</h3>
85+
</cc-option>
86+
<cc-option class="option" value="value 3">
87+
<h3>value 3</h3>
88+
</cc-option>
89+
</ul>
90+
</cocreate-select>
91+
<cocreate-select class="floating-label" data-attributes="style" data-attributes_target="#canvas; #new" name="selectField4" multiple placeholder="Single Options">
92+
<input class="option-search" placeholder="Search">
93+
<ul class="options overflow:overlay">
94+
<cc-option class="option" value="background:green;">
95+
<h3>background:green;</h3>
96+
</cc-option>
97+
<cc-option class="option" value="color:blue;">
98+
<h3>color:blue;</h3>
99+
</cc-option>
100+
<cc-option class="option" value="value 3">
101+
<h3>sss</h3>
102+
</cc-option>
103+
<cc-option class="option" value="value 3">
104+
<h3>value 3</h3>
105+
</cc-option>
106+
</ul>
107+
</cocreate-select>
108+
109+
110+
</form>
111+
</div>
112+
<div class="resizeHandler"></div>
113+
</div>
114+
<!-- End CoCreate SideNav Right -->
115+
116+
<!-- floating btn -->
117+
<a class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue grow-hover round z-index:12" target="modal" href="block-form.html" pass-collection="blocks" modal-width="320px" modal-height="100%" modal-color="#229954" pass_to="render">
117118
<i class="fa fa-plus"></i>
118119
</a>
119-
<!-- end floating btn -->
120-
121-
<script>
122-
var config = {
123-
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
124-
organization_Id: '5de0387b12e200ea63204d6c',
125-
host: 'ws.cocreate.app'
126-
}
127-
</script>
128-
129-
<!--<script src="../dist/CoCreate-attributes.js"></script>-->
130-
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
131-
132-
</body>
120+
<!-- end floating btn -->
121+
122+
<!--<script src="../dist/CoCreate-attributes.js"></script>-->
123+
<script src="../../../CoCreateJS/dist/CoCreate.js"></script>
124+
125+
</body>
126+
133127
</html>

0 commit comments

Comments
 (0)