Skip to content

Commit ed1ca81

Browse files
frankpaganfrankpagan
committed
update to redme
1 parent 9edf9ef commit ed1ca81

5 files changed

Lines changed: 40 additions & 162 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@ A simple HTML5 and pure javascript component. Easy configuration using data-attr
66
![GitHub](https://img.shields.io/github/license/CoCreate-app/CoCreate-attributes?style=for-the-badge)
77
![GitHub labels](https://img.shields.io/github/labels/CoCreate-app/CoCreate-attributes/help%20wanted?style=for-the-badge)
88

9-
![CoCreate-boilerplate](https://cdn.cocreate.app/docs/CoCreate-boilerplate.gif)
9+
![CoCreate-attributes](https://cdn.cocreate.app/docs/CoCreate-attributes.gif)
1010

1111
## [Docs & Demo](https://cocreate.app/docs/attributes)
1212

1313

14-
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/boilerplate)
14+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/attributes)
1515

1616
## CDN
1717
```html
18-
<script src="https://cdn.cocreate.app/boilerplate/latest/CoCreate-boilerplate.min.js"></script>
18+
<script src="https://cdn.cocreate.app/attributes/latest/CoCreate-attributes.min.js"></script>
1919
```
2020
```html
21-
<script src="https://cdn.cocreate.app/boilerplate/latest/CoCreate-boilerplate.min.css"></script>
21+
<script src="https://cdn.cocreate.app/attributes/latest/CoCreate-attributes.min.css"></script>
2222
```
2323

2424
## NPM
2525
```shell
26-
$ npm install @cocreate/boilerplate
26+
$ npm install @cocreate/attributes
2727
```
2828

2929
# Table of Contents
@@ -60,7 +60,7 @@ CoCreate-attributes is maintained and funded by CoCreate. The names and logos fo
6060

6161
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-attributes/blob/master/CONTRIBUTING.md) guide for details.
6262

63-
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-boilerplate/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-boilerplate/pulls) or merely upvote or comment on existing issues or pull requests.
63+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-attributes/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-attributes/pulls) or merely upvote or comment on existing issues or pull requests.
6464

6565
We appreciate your continued support, thank you!
6666

‎demo/CoCreate-builder.html‎

Lines changed: 5 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9-
<title>CoCreate-builder | CoCreate</title>
9+
<title>CoCreate-attributes | CoCreateJS</title>
1010
<meta name="description" content="Website and web app Builder framework using Cocreate Componets" />
1111
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
1212
<meta name="robots" content="index,follow" />
1313

14-
<!-- CoCreate CSS -->
14+
<!-- CoCreate CSS CDN -->
1515
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
1616

1717

@@ -29,124 +29,20 @@
2929
</head>
3030

3131
<body>
32-
<!-- Navbar -->
33-
<div class="nav display:flex align-items:center background:whitesmoke" data-main_content_id="canvas" data-scroll_effect="hide-nav" data-scroll_up="1" data-scroll_down="1">
3432

35-
<!-- Menu Icon Animations -->
36-
<a class="nav-toggle menu_icon--Vdots" data-toggle_sidenav="menuL">
37-
<div class="circle"></div>
38-
<div class="circle"></div>
39-
<div class="circle"></div>
40-
<div class="circle"></div>
41-
<div class="circle"></div>
42-
</a>
43-
44-
<!-- Horizontal Scroll Nav/Tabs -->
45-
<ul class="cocreate-scroll display:inline-flex direction:rtl font-size:24px align-items:center list-style-type:none width:100% height:50px">
46-
47-
<!-- Modal Controls -->
48-
<li class="margin-right:15px">
49-
<a class="btn-modal-close"><i class="fas fa-times"></i></a>
50-
</li>
51-
<li class="margin-right:15px"><a class="btn-modal-maximize"><i data-transform_to="far fa-window-restore" class="far fa-window-maximize">
52-
</i></a>
53-
</li>
54-
<li class="margin-right:15px"><a class="btn-modal-minimize"><i class="far fa-window-minimize">
55-
</i></a>
56-
</li>
57-
58-
<!-- fullscreen toogle and icon transform-->
59-
<li class="margin-right:15px">
60-
<a class="fs-toggle"><i data-transform_to="fas fa-compress" class="fas fa-expand"></i></a>
61-
</li>
62-
63-
<!-- Open code Editor in modal-->
64-
<li class="margin-right:15px">
65-
<a target="modal" href="code-editor.html" data-modal_header="true" data-pass_collection="blocks" data-pass_document_id="" data-pass_to="form-fields" data-modal_width="100%" data-modal_height="100%" data-modal_color="#229954">
66-
<i class="fa fa-code"></i>
67-
</a>
68-
</li>
69-
70-
<!-- Builder Controls -->
71-
<li class="margin-right:15px">
72-
<a id="clean-canvas">
73-
<i class="far fa-trash-alt"></i>
74-
</a>
75-
</li>
76-
<li class="margin-right:15px">
77-
<a id='element-borders' class=""><i class="far fa-square"></i></a>
78-
</li>
79-
<li class="margin-right:15px">
80-
<a id="redo-canvas" class=""><i class="fas fa-redo-alt"></i></a>
81-
</li>
82-
<li class="margin-right:15px">
83-
<a id='undo-canvas' class=""><i class="fas fa-undo-alt"></i></a>
84-
</li>
85-
86-
<li class="margin-right:15px">
87-
<a id="desktop-view" class=""><i class="fas fa-desktop"></i></a>
88-
</li>
89-
<li class="margin-right:15px">
90-
<a id="tablet-view" class=""><i class="fas fa-tablet-alt"></i></a>
91-
</li>
92-
<li class="margin-right:15px">
93-
<a id="mobile-view" class=""><i class="fas fa-mobile-alt"></i></a>
94-
</li>
95-
</ul>
96-
</div>
97-
98-
<!-- Modal viewport -->
99-
<div class="position:fixed margin-top:50px" data-main_content_id="canvas" id="modal-viewport"></div>
10033

10134
<!-- Main Container -->
10235
<div data-main_content_id="canvas" class="height:100vh overflow:scroll">
10336
<iframe data-vdom_id="test" id="canvas" src="./iframe.html" frameborder="0" width="100%" height="100%"></iframe>
10437
</div>
10538

106-
<!-- CoCreate SideNav Left -->
107-
<div id="menuL" class="cocreate-sidenav background:gainsboro" data-main_content="canvas" sidenav-default_desktop="expanded" sidenav-default_tablet="offcanvas" sidenav-default_phone="offcanvas" sidenav-ontoggle_desktop="offcanvas" sidenav-ontoggle_tablet="offcanvas">
108-
<div class="">
109-
<ul class="overflow:scroll height:100vh margin:5px background:white padding:0 padding-left:5px">
110-
<div data-vdom_target="test" data-group_name="test"></div>
111-
<!-- CoCreate Render to get list of blocks -->
112-
<div data-template_id="template1" data-fetch_collection="blocks" data-filter_name="menu-position" data-filter_value="0" data-filter_value_type="number" data-filter_operator="$ne" data-order_by="menu-position" data-order_type="asc" data-pass_to="blocks">
113-
</div>
114-
115-
<!-- template -->
116-
<li data-CoC-draggable="true" class="template menuItem" id="header" data-insert-html='{{html}}'>
117-
<span data-collection="" data-document_id="" name="icon" data-pass_id="blocks" class="padding-10px"></span>
118-
<span data-collection="" data-document_id="" name="name" data-pass_id="blocks"></span>
119-
<div class="float-right">
120-
<a target="modal" href="block-form.html" data-pass_collection="blocks" data-pass_document_id="" data-pass_id="blocks" data-pass_to="form-fields" data-modal_width="320px" data-modal_height="100%" data-modal_color="#229954">
121-
<i class="fas fa-pencil-alt"></i>
122-
</a>
123-
</div>
124-
<span data-collection="" data-document_id="" name="html" data-pass_id="blocks"></span>
125-
</li>
126-
127-
</ul>
128-
</div>
129-
130-
<div class="resizeHandler"></div>
131-
</div>
132-
<!-- End CoCreate SideNav Left -->
39+
13340

13441
<!-- CoCreate SideNav Right -->
13542
<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">
13643
<div class="padding:5px cocreate-scroll">
13744
<form>
13845
<input data-attribute_sync="myAttribute" type="text" class="floating-label attr" placeholder="Draggable" data-attribute_target="#new">
139-
<!--<input data-attribute_sync="innerText" type="text" class="floating-label attr" placeholder="style-text" data-attribute_target="#new">-->
140-
<!--<input data-attribute_sync="innerText" type="color" class="floating-label attr" placeholder="style-color" data-attribute_target="#new">-->
141-
<!--<input data-attribute_sync="innerText" type="date" class="floating-label" placeholder="style-data-time" data-attribute_target="#new">-->
142-
<!--<input type="search" class="floating-label" placeholder="Search" data-attribute_sync="innerText" data-attribute_target="#new">-->
143-
<!--<input type="date" class="floating-label" placeholder="Date" data-attribute_sync="innerText" data-attribute_target="#new">-->
144-
<!--<input type="time" class="floating-label" placeholder="Time" data-attribute_sync="innerText" data-attribute_target="#new">-->
145-
<!--<input type="datetime-local" class="floating-label" placeholder="Date Time" data-attribute_sync="innerText" data-attribute_target="#new">-->
146-
<!--<textarea class="floating-label" data-realtime="" placeholder="Text Area" data-attribute_sync="innerText" data-attribute_target="#new"></textarea>-->
147-
148-
149-
<!--<h3 data-attribute_sync="innerText" data-attribute_target="#new" contenteditable>test</h3>-->
15046

15147

15248
<p>different name:</p>
@@ -175,13 +71,6 @@
17571
<br>
17672
<br>
17773
<br>
178-
<!-- multiple -->
179-
<!--<select name="cars" id="cars" data-attribute_sync="style" data-attribute_target="#new" multiple>-->
180-
<!-- <option value="background:green;">background:green;</option>-->
181-
<!-- <option value="color:blue;">color:blue;</option>-->
182-
<!-- <option value="mercedes">Mercedes</option>-->
183-
<!-- <option value="audi">Audi</option>-->
184-
<!--</select>-->
18574

18675
<select name="cars" id="cars" data-attribute_sync="class" data-attribute_target="#new" multiple>
18776
<option value="class1">class1</option>
@@ -250,32 +139,6 @@ <h3 >value 3</h3>
250139
</ul>
251140
</cocreate-select>
252141

253-
<!--<cocreate-select class="floating-label sortable" multiple-->
254-
<!-- data-attribute_sync="style" -->
255-
<!-- data-attribute_target="#new"-->
256-
<!-- name="selectField1" -->
257-
<!-- placeholder="Multiple Documents" -->
258-
<!-- data-limit_selectable="3">-->
259-
260-
<!-- <input class="option-search" placeholder="Search">-->
261-
262-
<!-- <ul class="selectable--list cocreate-scroll">-->
263-
<!-- <li class="selectable"value="background: red;">-->
264-
<!-- <h3 value="hello">background: red;</h3>-->
265-
<!-- </li>-->
266-
<!-- <li class="selectable" value="color: blue;">-->
267-
<!-- <h3 >color: blue;</h3>-->
268-
<!-- </li>-->
269-
<!-- <li class="selectable" value="font-size: 30px;">-->
270-
<!-- <h3 >font-size: 30px;</h3>-->
271-
<!-- </li>-->
272-
<!-- <li class="selectable" value="noy a css">-->
273-
<!-- <h3 >noy a css</h3>-->
274-
<!-- </li>-->
275-
<!-- </ul>-->
276-
277-
<!--</cocreate-select>-->
278-
279142

280143
</form>
281144
</div>
@@ -297,8 +160,8 @@ <h3 >value 3</h3>
297160
}
298161
</script>
299162

300-
<!--<script defer src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>-->
301-
<script defer src="https://server.cocreate.app/CoCreate-components/CoCreate-attributes/dist/CoCreate-attributes.js"></script>
163+
<!--CoCreateJS CDN-->
164+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
302165

303166

304167
</body>

‎demo/domEditorPanel.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9-
<title>CoCreate-domEditorPanel | CoCreate</title>
9+
<title>CoCreate-attributes | CoCreateJS</title>
1010
<meta name="description" content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know" />
1111
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
1212
<meta name="robots" content="index,follow" />
1313

14-
<!-- CoCreate CSS -->
14+
<!-- CoCreate CSS CDN -->
1515
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
1616

1717
<!-- Font Awesome -->
@@ -81,9 +81,8 @@ <h3>value 3</h3>
8181
}
8282
</script>
8383

84-
<!--CoCreateJS-->
84+
<!--CoCreateJS CDN-->
8585
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
86-
<script defer src="../../CoCreate-domEditorPanel/src/domEditorPanel.js"></script>
8786
</body>
8887

8988
</html>

‎demo/iframe.html‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9-
<title>CoCreate-vdom | CoCreate</title>
9+
<title>CoCreate-attributes | CoCreateJS</title>
1010
<meta name="description" content="Utility first css framework, design faster and improve on your css by using native inline styles as classes. No learning curve, use what you already know" />
1111
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
1212
<meta name="robots" content="index,follow" />
1313

14-
<!-- CoCreate CSS -->
14+
<!-- CoCreate CSS CDN -->
1515
<link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
16-
<link rel="stylesheet" href="../../CoCreate-vdom/src/CoCreate-vdom.css" type="text/css" />
17-
<link rel="stylesheet" href="../../CoCreate-dnd/src/CoCreate-dnd.css" type="text/css" />
1816

1917
<!-- Font Awesome -->
2018
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous" />
@@ -64,11 +62,8 @@ <h3 data-element_id="UOSXmIxqpp150457" data-coc-type="default" data-coc-name=""
6462
}
6563
</script>
6664

65+
<!-- CoCreate JS CDN -->
6766
<script defer src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
68-
<!--<script defer src="../../CoCreate-domEditor/src/domEditor.js"></script> depricated-->
69-
<script defer src="../../CoCreate-dnd/dist/dnd.js"></script>
70-
<!--<script defer src="../../CoCreate-domEditorPanel/src/domEditorPanel.js"></script>-->
71-
<script src="https://server.cocreate.app/CoCreate-components/CoCreate-selected/src/CoCreate-selected.js"></script>
7267

7368
</body>
7469

‎docs/index.html‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>CoCreate-domEditorPanel Documentation | CoCreateJS </title>
7+
<title>CoCreate-attributes Documentation | CoCreateJS </title>
88
<link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
99
<meta name="description" content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
1010
<meta name="keywords" content="helper classes, utility classes, css framework, css library, inline style classes" />
@@ -44,8 +44,20 @@ <h2>CoCreate-domEditorPanel</h2>
4444
<p class="max-width:500px margin:20px_0px">A simple HTML5, CSS and pure javascript component. Easy configuration using data-attributes and highly styleable.</p>
4545
<div id="domEditorPanel-section" class="display:flex flex-wrap:wrap">
4646
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px">
47+
48+
<div>
49+
<h2 id="attributes-installation" data-hover="display:block" data-target="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Install</h2>
50+
<a class="display:none" href="#attributes-installation"><i class="fas fa-link"></i></a>
51+
</div>
52+
53+
<pre><code class="language-javascript">npm install @cocreate/action</code></pre>
54+
<p class="padding:10px_0px">Or you can use cdn link:</p>
55+
<pre><code class="language-javascript">https://cdn.cocreate.app/latest/cocreate.min.js</code></pre>
4756

48-
<h2 class="border-bottom border-color:medium-gray padding:5px_0px">Reference</h2>
57+
<div>
58+
<h2 id="attributes-reference" data-hover="display:block" data-target="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Reference</h2>
59+
<a class="display:none" href="#attributes-reference"><i class="fas fa-link"></i></a>
60+
</div>
4961
<div class="">
5062
<p class="padding:10px_0px">This is domEditorPanel reference</p>
5163

@@ -58,6 +70,10 @@ <h2 class="border-bottom border-color:medium-gray padding:5px_0px">Reference</h2
5870
<p class="padding:10px_0px">This is domEditorPanel reference</p>
5971
</div>
6072
<h2 class="border-bottom border-color:medium-gray padding:5px_0px">Attributes</h2>
73+
<div>
74+
<h2 id="attributes-attribute" data-hover="display:block" data-target="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Attributes</h2>
75+
<a class="display:none" href="#attributes-attribute"><i class="fas fa-link"></i></a>
76+
</div>
6177
<ul class="list-style-type:none ">
6278
<li class="padding:15px_0px border-bottom border-color:medium-gray">
6379
<h4><span>data-domEditorPanel</span> <span class="cocreate-badge success">string</span> <span class="cocreate-badge warning">optional</span></h4>
@@ -71,8 +87,13 @@ <h4><span>data-domEditorPanel</span> <span class="cocreate-badge success">string
7187
</div>
7288

7389
<div class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom border-color:medium-gray">
90+
7491
<!-- SandBox -->
7592
<h2 class="border-bottom border-color:medium-gray padding:5px_0px">Demo</h2>
93+
<div>
94+
<h2 id="attributes-demo" data-hover="display:block" data-target="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
95+
<a class="display:none" href="#attributes-demo"><i class="fas fa-link"></i></a>
96+
</div>
7697
<div class="position:sticky top:0 padding:15px_0px height:100vh">
7798
<div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
7899
<div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">

0 commit comments

Comments
 (0)