Skip to content

Commit b0dd2b5

Browse files
jchan444jchan444
committed
Added persisting slider values changing diff HTML
1 parent d764f31 commit b0dd2b5

File tree

3 files changed

+75
-53
lines changed

3 files changed

+75
-53
lines changed

‎src/components/Canvas.vue‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,20 @@
5858
<div v-if="element.text === 'button'"
5959
class="htmlButton"
6060
:style="[element.x !== 0 ? {'top': element.x} : {'top': '70%'},
61-
element.y !== 0 ? {'left': element.y} : {'left': '60%'},
62-
element.w !== 0 ? {'width': element.w} : {'width': '25%'},
63-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
61+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '60%'},
62+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '25%'},
63+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
64+
element.z !== 0 ? {'z-index' : element.z + '%'} : {'z-index' : '0'},
6465
{'background-color': componentData.color}]">
6566
<p class="innerHtmlText">{{element.text}}</p>
6667
</div>
6768
<div v-if="element.text === 'div'"
6869
class="htmlDiv"
69-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
70-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
71-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
72-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
73-
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
70+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
71+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
72+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
73+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
74+
element.z !== 0 ? {'z-index' : element.z + '%'} : {'z-index' : '0'},
7475
{'background-color': componentData.color}]"
7576
>
7677
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
@@ -82,6 +83,7 @@
8283
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
8384
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
8485
element.h !== 0 ? {'height' : element.h} : {'height' : '20%'},
86+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
8587
{'background-color': componentData.color}]"
8688
>
8789
<p class="innerHtmlText" style="font-size: 3em">Lorem Ipsum</p>
@@ -92,6 +94,7 @@
9294
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
9395
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
9496
element.h !== 0 ? {'height' : element.h} : {'height' : '15%'},
97+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
9598
{'background-color': componentData.color}]"
9699
>
97100
<p class="innerHtmlText" style="font-size: 2.5em">dolor sit amet</p>
@@ -102,6 +105,7 @@
102105
element.y !== 0 ? {'left': element.y} : {'left': '18%'},
103106
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
104107
element.h !== 0 ? {'height' : element.h} : {'height' : '12%'},
108+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
105109
{'background-color': componentData.color}]"
106110
>
107111
<p class="innerHtmlText" style="font-size: 2.2em">consectetur adipiscing elit</p>
@@ -112,6 +116,7 @@
112116
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
113117
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
114118
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
119+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
115120
{'background-color': componentData.color}]"
116121
>
117122
<p class="innerHtmlText" style="font-size: 2em">sed do eiusmod tempor incididunt</p>
@@ -122,6 +127,7 @@
122127
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
123128
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
124129
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
130+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
125131
{'background-color': componentData.color}]"
126132
>
127133
<p class="innerHtmlText" style="font-size: 2em">ut labore et dolore magna aliqua</p>
@@ -131,7 +137,8 @@
131137
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
132138
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
133139
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
134-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
140+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},element.z !== 0 ?
141+
{'z-index' : element.z} : {'z-index' : '0'},
135142
{'background-color': componentData.color}]"
136143
>
137144
<p class="innerHtmlText" style="font-size: 2em">Ut enim ad minim veniam</p>
@@ -143,6 +150,7 @@
143150
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
144151
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
145152
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
153+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
146154
{'background-color': componentData.color}]"
147155
>
148156
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
@@ -154,6 +162,7 @@
154162
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
155163
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
156164
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
165+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
157166
{'background-color': componentData.color}]"
158167
>
159168
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
@@ -166,6 +175,7 @@
166175
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
167176
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
168177
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
178+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
169179
{'background-color': componentData.color}]"
170180
>
171181
</div>
@@ -175,6 +185,7 @@
175185
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
176186
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
177187
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
188+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
178189
{'background-color': componentData.color}]"
179190
>
180191
</div>
@@ -184,6 +195,7 @@
184195
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
185196
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
186197
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
198+
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
187199
{'background-color': componentData.color}]"
188200
>
189201
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

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

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
<p class="title">Adjust Height and Elevation:</p>
1717
<q-slider
1818
v-model="heightText"
19-
:min="0"
2019
:max="100"
2120
vertical
2221
label
@@ -97,7 +96,12 @@
9796
label="-"
9897
@click="(e) => handleLayer(e)"
9998
/>
100-
<p id="counter">{{ z }}</p>
99+
<!--nested for loop to iterate to display current z-index for selected htmlElement-->
100+
<template v-for="element in this.routes[this.activeRoute]">
101+
<template v-for="element1 in element.htmlList">
102+
<p v-if="element1.id === this.activeHTML" id="counter" :key="element1.id">{{ element1.z }} </p>
103+
</template>
104+
</template>
101105
<q-btn
102106
class="minorAction"
103107
color="transparent"
@@ -126,6 +130,23 @@ export default {
126130
z: '0',
127131
}
128132
},
133+
134+
mounted () {
135+
//for loop to access nested HTML elements of components - sets height/width/top/left sliders to current value of selected HTML element
136+
for (let i = 0; i <this.routes[this.activeRoute].length; i++) {
137+
for (let j = 0; j < this.routes[this.activeRoute][i].htmlList.length; j++) {
138+
if(this.activeHTML === this.routes[this.activeRoute][i].htmlList[j].id) {
139+
this.heightText = this.routes[this.activeRoute][i].htmlList[j].h;
140+
this.widthText = this.routes[this.activeRoute][i].htmlList[j].w;
141+
this.topText = this.routes[this.activeRoute][i].htmlList[j].x;
142+
this.leftText = this.routes[this.activeRoute][i].htmlList[j].y;
143+
}
144+
}
145+
}
146+
147+
148+
},
149+
129150
computed: {
130151
...mapState([
131152
'activeComponent',
@@ -154,6 +175,7 @@ export default {
154175
'addActiveComponentWidth',
155176
'addActiveComponentTop',
156177
'addActiveComponentLeft',
178+
'updateComponentLayer',
157179
'updateHTMLLayer',
158180
]),
159181
submitClass(element, idNum) {
@@ -212,51 +234,35 @@ export default {
212234
this.leftText = '';
213235
},
214236
215-
// addLayer(z, idNum) {
216-
// const payload = {
217-
// activeHTML: idNum,
218-
// z: z,
219-
// };
220-
// payload.z++;
221-
// this.z++;
222-
// console.log(this.activeComponentObj.htmlList[0].z)
223-
// this.updateHTMLLayer(payload);
224-
// console.log('+ clicked!')
225-
// console.log(this.activeComponentObj.htmlList[0].z)
226-
// },
237+
//function that adds/subtracts z-index on html Elements
238+
handleLayer(e) {
239+
e.preventDefault();
227240
228-
// subtractLayer(z, idNum) {
229-
// const payload = {
230-
// activeHTML: idNum,
231-
// z: z,
232-
// };
241+
let HTMLZ;
233242
234-
235-
// payload.z--;
236-
// this.z--;
237-
// this.updateHTMLLayer(payload);
238-
239-
// console.log('- clicked!')
240-
// },
243+
for (let i = 0; i <this.routes[this.activeRoute].length; i++) {
244+
for (let j = 0; j < this.routes[this.activeRoute][i].htmlList.length; j++) {
245+
if(this.activeHTML === this.routes[this.activeRoute][i].htmlList[j].id) {
246+
HTMLZ = this.routes[this.activeRoute][i].htmlList[j].z
247+
}
248+
}
249+
}
241250
242-
handleLayer(e) {
243-
e.preventDefault();
244251
const payload = {
245252
activeComponent: this.activeComponent,
253+
activeHTML: this.activeHTML,
246254
routeArray: this.routes[this.activeRoute],
247-
activeComponentData: this.activeComponentData,
248-
z: this.activeComponentData.z,
255+
z: HTMLZ,
249256
};
250-
257+
251258
if (e.target.innerText === "+") {
252259
payload.z++;
253-
console.log('+ clicked!')
260+
254261
}
255-
if (e.target.innerText === "–" && payload.z > 0) {
262+
if (e.target.innerText === "-" && payload.z > 0) {
256263
payload.z--;
257-
console.log('- clicked!')
258264
}
259-
this.updateComponentLayer(payload);
265+
this.updateHTMLLayer(payload);
260266
},
261267
262268
activeRouteArray() {

‎src/store/mutations.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -781,11 +781,15 @@ const mutations = {
781781
},
782782

783783
[types.UPDATE_HTML_LAYER]: (state, payload) => {
784-
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
785-
if (payload.id === el.id) {
786-
el.z = payload.z
787-
}
788-
})
784+
const updatedComponent = state.routes[state.activeRoute].filter(
785+
(element) => element.componentName === payload.activeComponent
786+
)[0];
787+
788+
const updatedHTML = updatedComponent.htmlList.filter((element) => element.id === payload.activeHTML)[0]
789+
790+
updatedHTML.z = payload.z;
791+
// state.componentMap[payload.activeComponent].htmlList.z = payload.z;
792+
789793
},
790794

791795
[types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
@@ -880,28 +884,28 @@ const mutations = {
880884
[types.ADD_ACTIVE_COMPONENT_HEIGHT]: (state, payload) => {
881885
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
882886
if (payload.id === el.id) {
883-
el.h = payload.height + '%'
887+
el.h = payload.height
884888
}
885889
})
886890
},
887891
[types.ADD_ACTIVE_COMPONENT_WIDTH]: (state, payload) => {
888892
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
889893
if (payload.id === el.id) {
890-
el.w = payload.width + '%'
894+
el.w = payload.width
891895
}
892896
})
893897
},
894898
[types.ADD_ACTIVE_COMPONENT_TOP]: (state, payload) => {
895899
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
896900
if (payload.id === el.id) {
897-
el.x = payload.top + '%'
901+
el.x = payload.top
898902
}
899903
})
900904
},
901905
[types.ADD_ACTIVE_COMPONENT_LEFT]: (state, payload) => {
902906
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
903907
if (payload.id === el.id) {
904-
el.y = payload.left + '%'
908+
el.y = payload.left
905909
}
906910
})
907911
},

0 commit comments

Comments
 (0)