Skip to content

Commit f223c30

Browse files
katherinek123katherinek123
committed
resolved merge conflicts
2 parents 209e7cd + c4fbe91 commit f223c30

File tree

9 files changed

+253
-29
lines changed

9 files changed

+253
-29
lines changed

‎src/components/composables/useCreateComponent.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export function useCreateComponent(importObj) {
4141
state: [],
4242
parent: {},
4343
isActive: false,
44+
idDrag: '',
45+
idDrop: '',
4446
color: "#ffffff85",
4547
htmlAttributes: {
4648
class: "",

‎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: 2 additions & 1 deletion
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>"],
@@ -248,7 +249,7 @@ export default {
248249
styleString += `.${this.activeComponentObj.htmlAttributes.class} {\nbackground-color: ${this.activeComponentObj.color};
249250
width: ${this.activeComponentObj.w}px;
250251
height: ${this.activeComponentObj.h}px;
251-
z-index: ${this.activeComponentObj.z}px;
252+
z-index: ${this.activeComponentObj.z};
252253
}\n`
253254
}
254255

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

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,42 @@ Description:
55
-->
66

77
<template>
8-
<section class="html-queue">
8+
<section class="html-queue" @dragover="dragOver($event), false">
99
<span class='list-title' v-if='this.activeLayer.id !== ""'>
1010
<i class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
11+
1112
&nbsp; &nbsp; Viewing Elements in {{ this.activeComponent }} '{{ depth }}'
1213
<hr>
1314
</span>
1415
<span class='list-title' v-else-if='!this.activeComponent'></span>
16+
1517
<div group="people" class="list-group">
18+
1619
<p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
20+
<div v-for="(element) in renderList" :key="element[1] + Date.now()" @dragenter="dragEnter($event, element[2])">
21+
<div id="tooltipCon" :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
22+
@dragstart="startDrag($event, element[2])" @dragend="endDrag($event)" draggable="true">
23+
<!--invisible button for tooltip-->
24+
<button class="attributeButton" @click="setActiveElement(element)">
25+
<div class="tooltip"> Edit {{ element[0] }} attributes </div>
26+
</button>
27+
<i v-if='activeComponent === "" || exceptions.includes(element[0])'></i>
28+
<i v-else class="fas fa fa-angle-double-down fa-md"
29+
@click="setLayer({ text: element[0], id: element[2] })"></i>
30+
{{ element[0] }}
31+
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
32+
</div>
33+
</div>
34+
</div>
35+
36+
<!--START OF CHANGES-->
37+
<!-- &nbsp; &nbsp; Viewing Elements in {{ this.activeComponent }} '{{ depth }}'
38+
<hr>
39+
</span>
40+
<span class='list-title' v-else-if='!this.activeComponent'></span>
41+
<div group="people" class="list-group">
42+
<p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
43+
1744
<div id="tooltipCon" :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
1845
v-for="(element) in renderList" :key="element[1] + Date.now()">
1946
@@ -25,21 +52,23 @@ Description:
2552
{{ element[0] }}
2653
<i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
2754
</div>
28-
</div>
55+
</div> -->
2956

3057
<!-- attribute pop-up -->
3158
<q-dialog v-model="attributeModal">
3259
<!-- @update:model-value="setActiveElement" -->
3360
<div class="AttributeBox">
34-
<p class="title">Added attributes to {{ this.activeComponent }}</p>
61+
<p class="title">Add attributes to: {{ this.activeComponent }}</p>
62+
<!--attribute child-->
3563
<div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
3664
:key="element.id + Date.now()">
3765
<p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
3866
</div>
67+
3968
<div class="formBox">
4069
<q-form autofocus v-on:submit.prevent="submitClass">
4170
<p class="title">Add Class Name:</p>
42-
<q-input label="Add your note here" filled dark autofocus true hide-bottom-space v-model="classText"
71+
<q-input label="Add your class here" filled dark autofocus true hide-bottom-space v-model="classText"
4372
@keyup.enter="submitClass"></q-input>
4473
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
4574
:disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
@@ -53,6 +82,7 @@ Description:
5382

5483
<script>
5584
85+
import { keys } from 'localforage'
5686
import { mapState, mapActions } from 'vuex'
5787
import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../../store/types'
5888
import { breadthFirstSearch } from '../../utils/search.util'
@@ -106,16 +136,12 @@ export default {
106136
107137
},
108138
methods: {
109-
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'openAttributeModal', 'addActiveComponentClass, addBinding']),
139+
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements', 'openAttributeModal', 'addActiveComponentClass']),
110140
deleteElement(id) {
111141
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
112-
else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
113-
},
114-
setActiveElement(element) {
115-
if (this.activeComponent !== '') {
116-
this.setActiveHTML(element);
117-
this.openAttributeModal(element);
118-
}
142+
this.setActiveHTML(element);
143+
this.openAttributeModal(element);
144+
119145
},
120146
setLayer(element) {
121147
this.setActiveLayer(element)
@@ -126,6 +152,32 @@ export default {
126152
this.upOneLayer(this.activeLayer.id)
127153
}
128154
},
155+
//METHODS FOR DRAG-AND-DROP
156+
startDrag(event, id) {
157+
//add a class of 'currentlyDragging' to the HTML element that you are currently dragging
158+
event.target.classList.add('currentlyDragging')
159+
const dragId = id;
160+
if (this.activeComponent === '') this.setSelectedIdDrag(dragId)
161+
else this.setIdDrag(dragId)
162+
},
163+
dragEnter(event, id) {
164+
event.preventDefault();
165+
const dropId = id;
166+
if (this.activeComponent === '') this.setSelectedIdDrop(dropId)
167+
else this.setIdDrop(dropId)
168+
},
169+
dragOver(event) {
170+
//needed stop the dragend animation so endDrag is invoked automatically
171+
event.preventDefault();
172+
},
173+
endDrag(event) {
174+
//remove the 'currentlyDragging' class after the HTML is dropped
175+
event.preventDefault();
176+
event.target.classList.remove('currentlyDragging')
177+
//invoke the action that will use the idDrag and idDrop to sort the HtmlList
178+
if (this.activeComponent === '') this.dragDropSortSelectedHtmlElements()
179+
else this.dragDropSortHtmlElements()
180+
},
129181
submitClass(element, idNum) {
130182
if (element === '') {
131183
return;
@@ -182,11 +234,12 @@ li {
182234
height: 35px;
183235
padding-top: 6px;
184236
text-align: center;
237+
cursor: move;
185238
}
186239
187240
.list-group-item-selected {
188241
display: inline-block;
189-
margin: 2px 1.5%;
242+
margin: 4px 1.5%;
190243
min-width: 175px;
191244
width: 30%;
192245
border-radius: 0.5cm;
@@ -195,6 +248,7 @@ li {
195248
height: 35px;
196249
padding-top: 6px;
197250
text-align: center;
251+
cursor: move;
198252
}
199253
200254
.fa-trash:hover {
@@ -239,11 +293,18 @@ hr {
239293
border: 1px solid grey
240294
}
241295
296+
.currentlyDragging {
297+
opacity: 1;
298+
}
299+
300+
.ignoreByDragover {
301+
pointer-events: none;
302+
}
242303
243304
#tooltipCon {
244305
position: relative;
245306
cursor: pointer;
246-
margin-top: 2em;
307+
margin-top: 1em;
247308
}
248309
249310
.tooltip {
@@ -268,8 +329,6 @@ hr {
268329
}
269330
270331
271-
272-
273332
.AttributeBox {
274333
background-color: $subsecondary;
275334
color: $menutext;

‎src/store/actions.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,30 @@ const actions = {
316316
[types.upOneLayer]: ({ commit }, payload) => {
317317
commit(types.UP_ONE_LAYER, payload);
318318
},
319+
//FOR MUTATING HTML WITH DRAG AND DROP
320+
[types.setIdDrag]: ({ commit }, payload) => {
321+
commit(types.SET_ID_DRAG, payload)
322+
},
323+
324+
[types.setIdDrop]: ({ commit }, payload) => {
325+
commit(types.SET_ID_DROP, payload)
326+
},
327+
328+
[types.setSelectedIdDrag]: ({ commit }, payload) => {
329+
commit(types.SET_SELECTED_ID_DRAG, payload)
330+
},
331+
332+
[types.setSelectedIdDrop]: ({ commit }, payload) => {
333+
commit(types.SET_SELECTED_ID_DROP, payload)
334+
},
335+
336+
[types.dragDropSortHtmlElements]: ({ commit }, payload) => {
337+
commit(types.DRAG_DROP_SORT_HTML_ELEMENTS)
338+
},
339+
340+
[types.dragDropSortSelectedHtmlElements]: ({ commit }, payload) => {
341+
commit(types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS)
342+
},
319343

320344
// end of HTML segment ////////////////////////////////////////////////
321345

0 commit comments

Comments
 (0)