Skip to content

Commit 48322d1

Browse files
katherinek123katherinek123
committed
merged with dev
2 parents 4bc4633 + f223c30 commit 48322d1

File tree

9 files changed

+279
-46
lines changed

9 files changed

+279
-46
lines changed

‎src/components/composables/useCreateComponent.js

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
export function useCreateComponent(importObj) {
22
const createComponent = (importObj) => {
33
let imported = false;
4-
if (importObj.hasOwnProperty('componentName')){
4+
if (importObj.hasOwnProperty('componentName')) {
55
imported = true;
66
//Check if state and actions on import exist in the store. If not, add them.
7-
for (let i = 0; i < importObj.actions.length; i++){
8-
if (!this.userActions.includes(importObj.actions[i])){
7+
for (let i = 0; i < importObj.actions.length; i++) {
8+
if (!this.userActions.includes(importObj.actions[i])) {
99
this.createAction(importObj.actions[i])
1010
}
1111
}
12-
for (let i = 0; i < importObj.state.length; i++){
13-
if (!this.userState.includes(importObj.state[i])){
12+
for (let i = 0; i < importObj.state.length; i++) {
13+
if (!this.userState.includes(importObj.state[i])) {
1414
this.createState(importObj.state[i])
1515
}
1616
}
17-
for (let i = 0; i < importObj.props.length; i++){
18-
if (!this.userProps.includes(importObj.props[i])){
17+
for (let i = 0; i < importObj.props.length; i++) {
18+
if (!this.userProps.includes(importObj.props[i])) {
1919
this.createProp(importObj.props[i])
2020
}
2121
}
@@ -41,23 +41,26 @@ export function useCreateComponent(importObj) {
4141
state: [],
4242
parent: {},
4343
isActive: false,
44+
idDrag: '',
45+
idDrop: '',
4446
color: "#ffffff85",
45-
htmlAttributes:{
46-
class:"",
47-
id:"",
47+
htmlAttributes: {
48+
class: "",
49+
id: "",
50+
binding: "",
4851
}
4952
};
5053

51-
if (imported === true){
54+
if (imported === true) {
5255
component.componentName = importObj.componentName;
5356
component.htmlList = importObj.htmlList;
5457
component.actions = importObj.actions;
5558
component.state = importObj.state;
5659
component.props = importObj.props;
5760
} else {
58-
component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi,"");
61+
component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "");
5962
}
60-
63+
6164
if (!this.componentMap[component.componentName]) {
6265
this.registerComponent(component);
6366
this.setActiveComponent(component.componentName);

‎src/components/left-sidebar/ComponentTab/AttributesSubMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default {
6363
data() {
6464
return {
6565
attributeText: "",
66-
attributeSelection: "ID",
66+
attributeSelection: "id",
6767
deleteText:"",
6868
};
6969
},

‎src/components/left-sidebar/ComponentTab/CreateMenuHTMLQueue.vue

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,30 @@ Description:
55
-->
66

77
<template>
8-
<section class="html-queue">
8+
<section class="html-queue" @dragover="dragOver($event), false">
99
<div
1010
group="people"
1111
class="list-group"
1212
>
13+
1314
<div
14-
:class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
1515
@dblclick.self="setActiveElement(element)"
1616
v-for="(element) in renderList" :key="element[1] + Date.now()"
17+
@dragenter="dragEnter($event, element[2])"
1718
>
18-
<i v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
19-
<i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
20-
{{ element[0] }}
21-
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
19+
<div
20+
:class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
21+
@dblclick.self="setActiveElement(element)"
22+
@dragstart="startDrag($event, element[2])"
23+
@dragend="endDrag($event)"
24+
draggable="true"
25+
>
26+
<i v-if='activeComponent === "" || exceptions.includes(element[0]) '></i>
27+
<i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
28+
{{ element[0] }}
29+
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
30+
</div>
2231
</div>
23-
2432
</div>
2533
</section>
2634
</template>
@@ -78,7 +86,7 @@ export default {
7886
7987
},
8088
methods: {
81-
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
89+
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements']),
8290
deleteElement (id) {
8391
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
8492
else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
@@ -95,7 +103,33 @@ export default {
95103
if (this.activeLayer.id !== '') {
96104
this.upOneLayer(this.activeLayer.id)
97105
}
98-
}
106+
},
107+
//METHODS FOR DRAG-AND-DROP
108+
startDrag (event, id) {
109+
//add a class of 'currentlyDragging' to the HTML element that you are currently dragging
110+
event.target.classList.add('currentlyDragging')
111+
const dragId = id;
112+
if (this.activeComponent === '') this.setSelectedIdDrag(dragId)
113+
else this.setIdDrag(dragId)
114+
},
115+
dragEnter (event, id) {
116+
event.preventDefault();
117+
const dropId = id;
118+
if (this.activeComponent === '') this.setSelectedIdDrop(dropId)
119+
else this.setIdDrop(dropId)
120+
},
121+
dragOver (event) {
122+
//needed stop the dragend animation so endDrag is invoked automatically
123+
event.preventDefault();
124+
},
125+
endDrag (event) {
126+
//remove the 'currentlyDragging' class after the HTML is dropped
127+
event.preventDefault();
128+
event.target.classList.remove('currentlyDragging')
129+
//invoke the action that will use the idDrag and idDrop to sort the HtmlList
130+
if (this.activeComponent === '') this.dragDropSortSelectedHtmlElements()
131+
else this.dragDropSortHtmlElements()
132+
},
99133
},
100134
watch: {
101135
activeComponent: function () {
@@ -135,11 +169,12 @@ li {
135169
height: 35px;
136170
padding-top: 6px;
137171
text-align: center;
172+
cursor: move;
138173
}
139174
140175
.list-group-item-selected {
141176
display: inline-block;
142-
margin: 2px 1.5%;
177+
margin: 4px 1.5%;
143178
min-width: 175px;
144179
width: 30%;
145180
border-radius: 0.5cm;
@@ -148,6 +183,7 @@ li {
148183
height: 35px;
149184
padding-top: 6px;
150185
text-align: center;
186+
cursor: move;
151187
}
152188
153189
.fa-trash:hover {
@@ -190,4 +226,12 @@ li {
190226
hr {
191227
border: 1px solid grey
192228
}
229+
230+
.currentlyDragging {
231+
opacity: .5;
232+
}
233+
234+
.ignoreByDragover {
235+
pointer-events: none;
236+
}
193237
</style>

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export default {
8686
},
8787
// Creates <template> boilerplate
8888
writeTemplateTag(componentName) {
89+
// console.log(this.activeComponentObj)
8990
// create reference object
9091
const htmlElementMap = {
9192
div: ["<div", "</div>"],
@@ -243,6 +244,15 @@ export default {
243244
244245
let htmlArray = this.componentMap[componentName].htmlList;
245246
let styleString = "";
247+
248+
if (this.activeComponentObj.htmlAttributes.class !== "") {
249+
styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
250+
width: ${this.activeComponentObj.w}px;
251+
height: ${this.activeComponentObj.h}px;
252+
z-index: ${this.activeComponentObj.z};
253+
}\n`
254+
}
255+
246256
for (const html of htmlArray) {
247257
if (html.class === ' ') styleString = "";
248258
if (html.class) {

0 commit comments

Comments
 (0)