Skip to content

Commit 33fd477

Browse files
frankpaganfrankpagan
committed
fix: rename data-element_id to element_id
1 parent 7bcea84 commit 33fd477

File tree

3 files changed

+131
-116
lines changed

3 files changed

+131
-116
lines changed

‎demo/index.html‎

Lines changed: 107 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,110 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>Clone | CoCreateJS</title>
5-
<!-- CoCreate Favicon -->
6-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7-
8-
<style>
9-
.stage{
10-
background-color:gray;
11-
margin:15px;
12-
padding-top:10px;
13-
}
14-
.card{
15-
background-color:beige;
16-
margin:15px;
17-
min-height:100px;
18-
19-
}
20-
.tasklist{
21-
background-color:lightgray;
22-
margin:15px;
23-
24-
}
25-
span {
26-
display: inline-block;
27-
28-
}
29-
</style>
30-
</head>
31-
<body>
32-
33-
<a data-clone_id="stage" class="cloneBtn" actions="createClone">New Stage</a>
34-
<!--<div id="saveFetch1" -->
35-
<!-- class="domEditor" -->
36-
<!-- name='clonehtml7' -->
37-
<!-- collection="module_activity124" -->
38-
<!-- document_id="5fbd3b198b0e4d7391255615" -->
39-
<!-- pass_id="me1234">-->
40-
41-
<div class="Sortable">
42-
43-
<div id="stage" class="Sortable stage template" style="padding:15px" class="">
44-
<span style="color:#fff; font-size:20px" class="noDrag">Stage</span>
45-
<span style="float:right;"><a data-clone_id="stage" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
46-
47-
<div class="Sortable" dnd-group-name="cards" data-place1_id="[prefix]-place_id">
48-
<div id="card" class="card template" style="padding:15px">
49-
<span class="noDrag">Card</span>
50-
<span style="float:right;"><a data-clone_id="card" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
51-
52-
<div class="Sortable" dnd-group-name="taskliste">
53-
<div id="tasklist" class="tasklist template" style="">
54-
<span class="noDrag">Tasklist</span>
55-
<span style="float:right;"><a data-clone_id="tasklist" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
56-
57-
<form collection="module_activity" class="Sortable" dnd-group-name="task-itemse" id="testForm">
58-
<div id="task-item" style="" class="template">
59-
<div style="display:inline-block;width: calc(100% - 20px);">
60-
<input class="floating-label" data-module_activity_id="5d8c79e7e4be424681b5e48d" name="taskname" placeholder="Task Name"></div>
61-
<span style="float:right;"><a data-clone_id="task-item" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
62-
</div>
63-
</form>
64-
<a data-clone_id="task-item" class="cloneBtn noDrag" style="display: block">Add Task</a>
65-
</div><!-- Cloneable Tasklist element -->
66-
</div><!-- Sortable Tasklist Container -->
67-
68-
<div style=width="100%" class="noDrag">
69-
<input id="tasklist-name"><a data-clone_id="tasklist" class="cloneBtn noDrag" style="display: block" data-clone_name="tasklist-name">New Tasklist</a>
70-
71-
72-
</div>
73-
74-
</div><!-- Cloneable Card element -->
75-
</div><!-- Sortable Card Container -->
76-
77-
<a data-clone_id="card" class="cloneBtn noDrag" data-clone_name="card-name">New Card</a><input id="card-name">
78-
79-
</div><!-- sortable and clonable stage -->
80-
81-
</div><!-- sortable project -->
82-
83-
<!--</div><!-- saveFetch -->-->
84-
85-
<script>
86-
var config = {
87-
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
88-
organization_Id: '5de0387b12e200ea63204d6c',
89-
host: 'ws.cocreate.app'
90-
}
91-
</script>
92-
93-
<!--<script src="../dist/CoCreate-clone.js"></script>-->
94-
<script src="../../../CoCreateJS/dist/CoCreate.js" ></script>
95-
96-
</body>
3+
4+
<head>
5+
<title>Clone | CoCreateJS</title>
6+
<!-- CoCreate Favicon -->
7+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8+
9+
<style>
10+
.stage {
11+
background-color: gray;
12+
margin: 15px;
13+
padding-top: 10px;
14+
}
15+
16+
.card {
17+
background-color: beige;
18+
margin: 15px;
19+
min-height: 100px;
20+
21+
}
22+
23+
.tasklist {
24+
background-color: lightgray;
25+
margin: 15px;
26+
27+
}
28+
29+
span {
30+
display: inline-block;
31+
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
38+
<a data-clone_id="stage" actions="createClone">New Stage</a>
39+
<!--<div id="saveFetch1" -->
40+
<!-- class="domEditor" -->
41+
<!-- name='clonehtml7' -->
42+
<!-- collection="module_activity124" -->
43+
<!-- document_id="5fbd3b198b0e4d7391255615" -->
44+
<!-- pass_id="me1234">-->
45+
46+
<div class="Sortable">
47+
48+
<div id="stage" class="Sortable stage template" style="padding:15px" class="">
49+
<span style="color:#fff; font-size:20px" class="noDrag">Stage</span>
50+
<span style="float:right;"><a data-clone_id="stage" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
51+
52+
<div class="Sortable" dnd-group-name="cards" data-place1_id="[prefix]-place_id">
53+
54+
<div id="card" class="card template" style="padding:15px">
55+
<span class="noDrag">Card</span>
56+
<span style="float:right;"><a data-clone_id="card" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
57+
58+
<div class="Sortable" dnd-group-name="taskliste">
59+
<div id="tasklist" class="tasklist template">
60+
<span class="noDrag">Tasklist</span>
61+
<span style="float:right;"><a data-clone_id="tasklist" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
62+
63+
<form collection="module_activity" class="Sortable" dnd-group-name="task-itemse" id="testForm">
64+
<div id="task-item" style="" class="template">
65+
<div style="display:inline-block;width: calc(100% - 20px);">
66+
<input class="floating-label" data-module_activity_id="5d8c79e7e4be424681b5e48d" name="taskname" placeholder="Task Name"></div>
67+
<span style="float:right;"><a data-clone_id="task-item" class="deleteBtn noDrag"><i class="fas fa-times"></i></a></span>
68+
</div>
69+
</form>
70+
<a data-clone_id="task-item" class="cloneBtn noDrag" style="display: block">Add Task</a>
71+
</div>
72+
<!-- Cloneable Tasklist element -->
73+
</div>
74+
<!-- Sortable Tasklist Container -->
75+
76+
<div style=width="100%" class="noDrag">
77+
<input id="tasklist-name"><a data-clone_id="tasklist" actions="createClone" class=" noDrag" style="display: block" data-clone_name="tasklist-name">New Tasklist</a>
78+
79+
80+
</div>
81+
82+
</div>
83+
<!-- Cloneable Card element -->
84+
</div>
85+
<!-- Sortable Card Container -->
86+
87+
<a data-clone_id="card" actions="createClone" class="noDrag" data-clone_name="card-name">New Card</a><input id="card-name">
88+
89+
</div>
90+
<!-- sortable and clonable stage -->
91+
92+
</div>
93+
<!-- sortable project -->
94+
95+
<!--</div><!-- saveFetch -->
96+
97+
<script>
98+
var config = {
99+
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
100+
organization_Id: '5de0387b12e200ea63204d6c',
101+
host: 'ws.cocreate.app'
102+
}
103+
</script>
104+
105+
<!--<script src="../dist/CoCreate-clone.js"></script>-->
106+
<script src="../../../CoCreateJS/dist/CoCreate.js"></script>
107+
108+
</body>
109+
97110
</html>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"webpack-log": "^3.0.1"
6363
},
6464
"dependencies": {
65+
"@cocreate/clone": "^1.1.2",
6566
"@cocreate/docs": "^1.1.32",
6667
"@cocreate/observer": "^1.2.8",
6768
"@cocreate/utils": "^1.0.16",

‎src/index.js‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import utils from '@cocreate/utils'
22
import uuid from '@cocreate/uuid'
3+
// import action from '@cocreate/action'
34

45
const CoCreateClone = {
56
__cloneBtnClass: 'cloneBtn',
@@ -8,29 +9,29 @@ const CoCreateClone = {
89
init: function() {
910
this.__initButtonEvent();
1011

11-
CoCreate.socket.listen('CoCreateClone-insert', function(data) {
12-
let {selector, element_str, position} = data;
13-
if (!selector) return
12+
// CoCreate.socket.listen('CoCreateClone-insert', function(data) {
13+
// let {selector, element_str, position} = data;
14+
// if (!selector) return
1415

15-
let container = document.querySelector(selector)
16+
// let container = document.querySelector(selector)
1617

17-
if (container) {
18-
if (position == "after") position = "afterend";
19-
else position = "beforebegin";
18+
// if (container) {
19+
// if (position == "after") position = "afterend";
20+
// else position = "beforebegin";
2021

21-
container.insertAdjacentHTML(position, element_str)
22-
}
23-
})
22+
// container.insertAdjacentHTML(position, element_str)
23+
// }
24+
// })
2425

25-
CoCreate.socket.listen('CoCreateClone-delete', function(data) {
26-
let {element_id} = data;
27-
if (!element_id) return
26+
// CoCreate.socket.listen('CoCreateClone-delete', function(data) {
27+
// let {element_id} = data;
28+
// if (!element_id) return
2829

29-
let selected_el = document.getElementById(element_id)
30-
if (selected_el) {
31-
selected_el.remove();
32-
}
33-
})
30+
// let selected_el = document.getElementById(element_id)
31+
// if (selected_el) {
32+
// selected_el.remove();
33+
// }
34+
// })
3435
},
3536

3637
__initButtonEvent: function() {
@@ -88,7 +89,7 @@ const CoCreateClone = {
8889
// clonedItem.setAttribute('prefix', prefix);
8990
this.__createDynamicCloneId(clonedItem, prefix);
9091

91-
//. create data-element_id for dnd
92+
//. create element_id for dnd
9293
this.__createDnDElementId(clonedItem);
9394

9495
if (clone_position === "after") {
@@ -237,11 +238,11 @@ const CoCreateClone = {
237238
let dnd_elements = document.querySelectorAll('[draggable="true"], [droppable="true"]')
238239

239240
dnd_elements.forEach((el) => {
240-
el.setAttribute('data-element_id', uuid.generate());
241+
el.setAttribute('element_id', uuid.generate(6));
241242
})
242243

243244
if (clonedItem.getAttribute('draggable') == "true" || clonedItem.getAttribute('droppable') == "true") {
244-
clonedItem.setAttribute('data-element_id', uuid.generate());
245+
clonedItem.setAttribute('element_id', uuid.generate(6));
245246
}
246247
},
247248

@@ -258,7 +259,7 @@ const CoCreateClone = {
258259
})
259260

260261
if (exist || !clone_name) {
261-
return uuid.generate();
262+
return uuid.generate(6);
262263
} else {
263264
return clone_name;
264265
}

0 commit comments

Comments
 (0)