-
-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
192 lines (179 loc) · 6.9 KB
/
index.html
File metadata and controls
192 lines (179 loc) · 6.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attributes | CoCreateJS</title>
<!-- CoCreate Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<!-- Main Container -->
<div main-content_id="canvas" class="height:100vh overflow:scroll">
<iframe
id="canvas"
src="./iframe.html"
frameborder="0"
width="100%"
height="100%"></iframe>
</div>
<!-- CoCreate SideNav Right -->
<sidenav
id="menuR"
class="position:fixed top:0px right:0px overflow:hidden background:gainsboro height:100vh width:300px"
resizable
resize-query="[content_id='content']"
resize-property="margin-right"
resize-value="width">
<h1 id="new" class="background:green">testing</h1>
<div class="padding:5px height:100vh overflow:auto">
<form class="width:250px">
<input
attribute="myAttribute"
type="text"
class="floating-label attr"
placeholder="Draggable"
attribute-query="iframe; .rrr" />
<input
attribute="myAttribute"
type="text"
class="floating-label attr"
placeholder="Draggable"
attribute-query="iframe;" />
<input
id="margin-left"
class="floating-label z-index:0 text_color"
placeholder="margin-left"
attribute="classstyle"
attribute-property="margin-left"
attribute-query="iframe;"
active />
<input
class="floating-label z-index:0 text_color"
placeholder="background"
attribute="style"
attribute-property="background"
attribute-query="#new"
active />
<a
actions="attributes"
attribute="class"
attribute-query="#new"
value="woohoo"
active
>click</a
>
<p>Set Attribute:</p>
<input
type="checkbox"
id="vehicle11"
key="vehicle1"
value="1"
attribute="someAttr"
attribute-query="#new" /><label for="vehicle1"
>value1</label
><br />
<input
type="checkbox"
id="vehicle21"
key="vehicle1"
value="2"
attribute="someAttr"
attribute-query="#new" /><label for="vehicle2"
>value1</label
><br />
<p>different name:</p>
<input
type="radio"
id="vehicle12"
key="vehicleb"
value="green"
attribute="classstyle"
attribute-query="#new"
attribute-property="background" /><label for="vehicle1"
>background:green</label
><br />
<input
type="radio"
id="vehicle214"
key="vehicleb"
value="blue"
attribute="classstyle"
attribute-query="#new"
attribute-property="color" /><label for="vehicle2"
>color:blue</label
><br />
<!--<p>same name:</p>-->
<!--<input type="checkbox" id="vehicle31" key="sameee" value="background:green;" attribute="style" attribute-query="#new"><label for="vehicle3">background:green</label><br>-->
<!--<input type="checkbox" id="vehicle41" key="sameee" value="color:blue;" attribute="style" attribute-query="#new"><label for="vehicle4">color:blue</label><br/>-->
<!--<input id="radio1" type="radio" key="radiotest" value="background:green;" attribute="style" attribute-query="#new">-->
<!--<label for="radio1">background:green</label>-->
<!--<input id="radio2" type="radio" key="radiotest" value="color:blue;" attribute="style" attribute-query="#new">-->
<!--<label for="radio2">color:blue</label>-->
<!--<select key="cars" id="cars" attribute="style" attribute-query="#new">-->
<!-- <option value="background:green;">background:green;</option>-->
<!-- <option value="color:blue;">color:blue;</option>-->
<!-- <option value="mercedes">Mercedes</option>-->
<!-- <option value="audi">Audi</option>-->
<!--</select>-->
<!--<br>-->
<!--<select key="cars" id="cars" attribute="class" attribute-query="#new" multiple>-->
<!-- <option value="class1">class1</option>-->
<!-- <option value="class2">class2</option>-->
<!-- <option value="class3">class3</option>-->
<!-- <option value="class4">class4</option>-->
<!--</select>-->
<!--<select key="cars" id="cars" attribute="myAttribute" attribute-query="#new" multiple>-->
<!-- <option value="class1">myAttribute </option>-->
<!-- <option value="class2">myAttribute class2</option>-->
<!-- <option value="class3">myAttribute class3</option>-->
<!-- <option value="class4">myAttribute class4</option>-->
<!--</select>-->
<!--<input type="checkbox" id="classxxx" key="classxxx" value="classxxx" attribute="class" attribute-query="#new" checked><label for="classxxx">add class: classxxx</label><br>-->
<!--<cocreate-select sortable class="floating-label" attribute="style" attribute-query="#new" key="selectField4" placeholder="Single Options">-->
<!-- <input class="option-search" placeholder="Search">-->
<!-- <ul class="options overflow:auto">-->
<!-- <cc-option class="option" value="background:green;">-->
<!-- <h3>background:green;</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="color:blue;">-->
<!-- <h3>color:blue;</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="value 3">-->
<!-- <h3>sss</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="value 3">-->
<!-- <h3>value 3</h3>-->
<!-- </cc-option>-->
<!-- </ul>-->
<!--</cocreate-select>-->
<!--<cocreate-select class="floating-label" attribute="style" attribute-query="#new" key="selectField4" multiple placeholder="Single Options">-->
<!-- <input class="option-search" placeholder="Search">-->
<!-- <ul class="options overflow:auto">-->
<!-- <cc-option class="option" value="background:green;">-->
<!-- <h3>background:green;</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="color:blue;">-->
<!-- <h3>color:blue;</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="value 3">-->
<!-- <h3>sss</h3>-->
<!-- </cc-option>-->
<!-- <cc-option class="option" value="value 3">-->
<!-- <h3>value 3</h3>-->
<!-- </cc-option>-->
<!-- </ul>-->
<!--</cocreate-select>-->
</form>
</div>
<div resize="left"></div>
</sidenav>
<!-- End CoCreate SideNav Right -->
<!-- end floating btn -->
<!--<script src="../dist/CoCreate-attributes.js"></script>-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>