Skip to content

Commit 049d21a

Browse files
codeByCandlelightcodeByCandlelight
authored
Merge pull request #5 from oslabs-beta/html_display
Added functionality for displaying type of HTML elements in components
2 parents f4560f1 + d031afb commit 049d21a

File tree

7 files changed

+122
-33
lines changed

7 files changed

+122
-33
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ yarn-debug.log*
1313
yarn-error.log*
1414
/coverage
1515
package-lock.json
16+
vetur.config.js
1617

1718
# Editor directories and files
1819
.idea

‎src/components/CodeSnippet.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export default {
142142
children.forEach(name => {
143143
childrenComponentNames += ` ${name},\n`
144144
})
145+
// eslint-disable-next-line no-useless-escape
145146
return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n</style>`
146147
}
147148
},

‎src/components/ComponentDisplay.vue

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ Description:
55
-->
66

77
<template>
8-
<div class="component-display grid-bg" :style="mockBg" v-on:click ="handleClick">
8+
<div
9+
class="component-display grid-bg"
10+
:style="mockBg"
11+
v-on:click="handleClick"
12+
>
913
<VueDraggableResizable
1014
class-name="component-box"
1115
v-for="componentData in activeRouteArray"
12-
ref ="boxes"
16+
ref="boxes"
1317
:key="componentData.componentName"
14-
:id ="componentData.componentName"
18+
:id="componentData.componentName"
1519
:x="componentData.x"
1620
:y="componentData.y"
1721
:z="componentData.z"
@@ -29,19 +33,43 @@ Description:
2933
<div class="component-title">
3034
<p>{{ componentData.componentName }}</p>
3135
</div>
36+
<p> Elements in Component: </p>
37+
<p
38+
v-for="htmlElement in componentMap[componentData.componentName]
39+
.htmlList"
40+
:key="htmlElement"
41+
>
42+
{{ htmlElement.text }}
43+
</p>
3244
<q-menu context-menu>
33-
<q-list color='black' class="menu">
45+
<q-list color="black" class="menu">
3446
<q-item clickable v-ripple v-close-popup @click="handleAddChild">
35-
<q-item-section style="color: white">Update Children</q-item-section>
47+
<q-item-section style="color: white"
48+
>Update Children</q-item-section
49+
>
3650
<q-item-section avatar>
3751
<q-icon color="primary" name="add" />
3852
</q-item-section>
3953
</q-item>
4054
<q-item clickable v-ripple v-close-popup>
41-
<q-item-section class='layer' style="color: pink">Layer</q-item-section>
42-
<q-btn class='btn' color='transparent' text-color='primary' label='-' @click='(e)=>handleLayer(e)'/>
43-
<p id='counter' style="color: white"> {{componentData.z}} </p>
44-
<q-btn class='btn' color='transparent' text-color='primary' label='+' @click='(e)=>handleLayer(e)'/>
55+
<q-item-section class="layer" style="color: white"
56+
>Layer</q-item-section
57+
>
58+
<q-btn
59+
class="btn"
60+
color="transparent"
61+
text-color="primary"
62+
label="-"
63+
@click="e => handleLayer(e)"
64+
/>
65+
<p id="counter" style="color: white">{{ componentData.z }}</p>
66+
<q-btn
67+
class="btn"
68+
color="transparent"
69+
text-color="primary"
70+
label="+"
71+
@click="e => handleLayer(e)"
72+
/>
4573
</q-item>
4674
</q-list>
4775
</q-menu>
@@ -142,7 +170,12 @@ export default {
142170
// console.log('Lineage', lineage);
143171
}
144172
const routes = Object.keys(this.routes)
145-
const exceptions = new Set(['App', ...lineage, ...routes, ...this.testModel])
173+
const exceptions = new Set([
174+
'App',
175+
...lineage,
176+
...routes,
177+
...this.testModel
178+
])
146179
return Object.keys(this.componentMap).filter(component => {
147180
if (!exceptions.has(component)) return component
148181
})
@@ -158,7 +191,9 @@ export default {
158191
mockBg () {
159192
return this.imagePath[this.activeRoute]
160193
? {
161-
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`
194+
background: `url("${
195+
this.userImage
196+
}") center/contain no-repeat rgba(223, 218, 218, 0.886)`
162197
}
163198
: {}
164199
}
@@ -167,16 +202,19 @@ export default {
167202
// if there are no active component, all boxes are unhighlighted
168203
if (this.activeComponent === '') {
169204
if (this.$refs.boxes) {
170-
this.$refs.boxes.forEach((element) => {
205+
this.$refs.boxes.forEach(element => {
171206
element.enabled = false
172207
element.$emit('deactivated')
173208
element.$emit('update:active', false)
174209
})
175210
}
176211
} else {
177212
// if a component is set to active, highlight it
178-
this.$refs.boxes.forEach((element) => {
179-
if (this.activeComponent === element.$attrs.id && element.enabled === false) {
213+
this.$refs.boxes.forEach(element => {
214+
if (
215+
this.activeComponent === element.$attrs.id &&
216+
element.enabled === false
217+
) {
180218
element.enabled = true
181219
element.$emit('activated')
182220
element.$emit('update:active', true)
@@ -228,8 +266,12 @@ export default {
228266
routeArray: this.routes[this.activeRoute],
229267
activeComponentData: this.activeComponentData
230268
}
231-
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y ||
232-
payload.w !== this.initialSize.w || payload.h !== this.initialSize.h) {
269+
if (
270+
payload.x !== this.initialPosition.x ||
271+
payload.y !== this.initialPosition.y ||
272+
payload.w !== this.initialSize.w ||
273+
payload.h !== this.initialSize.h
274+
) {
233275
this.updateComponentSize(payload)
234276
}
235277
},
@@ -245,7 +287,10 @@ export default {
245287
}
246288
// console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
247289
// console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
248-
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y) {
290+
if (
291+
payload.x !== this.initialPosition.x ||
292+
payload.y !== this.initialPosition.y
293+
) {
249294
this.updateComponentPosition(payload)
250295
}
251296
},
@@ -281,7 +326,7 @@ export default {
281326
282327
// unhighlights all inactive components
283328
onActivated (componentData) {
284-
this.$refs.boxes.forEach((element) => {
329+
this.$refs.boxes.forEach(element => {
285330
if (element.$attrs.id !== componentData.componentName) {
286331
element.enabled = false
287332
element.$emit('deactivated')
@@ -408,12 +453,13 @@ export default {
408453
height: 10px;
409454
transition: none;
410455
}
411-
.btn:hover, .btn:focus, .btn:active {
456+
.btn:hover,
457+
.btn:focus,
458+
.btn:active {
412459
color: white;
413460
background-color: transparent;
414461
}
415462
#counter {
416463
margin-top: 20px;
417464
}
418-
419465
</style>

‎src/components/CreateComponent.vue

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ Description:
77
<template>
88
<div class="home-sidebar drawer-menu">
99
<br />
10-
<form v-on:submit.prevent="createComponent" v-on:click="resetActiveComponent">
10+
<form
11+
v-on:submit.prevent="createComponent"
12+
v-on:click="resetActiveComponent"
13+
>
1114
<q-input
1215
standout="bg-secondary text-white"
1316
bottom-slots
@@ -51,7 +54,12 @@ export default {
5154
ParentMultiselect
5255
},
5356
computed: {
54-
...mapState(['componentMap', 'selectedElementList', 'activeComponent', 'activeHTML']),
57+
...mapState([
58+
'componentMap',
59+
'selectedElementList',
60+
'activeComponent',
61+
'activeHTML'
62+
]),
5563
componentNameInputValue: {
5664
get () {
5765
return this.$store.state.componentNameInputValue
@@ -77,8 +85,12 @@ export default {
7785
event.preventDefault()
7886
return false
7987
}
88+
// boilerplate properties for each component upon creation
8089
const component = {
81-
componentName: this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, ''),
90+
componentName: this.componentNameInputValue.replace(
91+
/[^a-z0-9-_.]/gi,
92+
''
93+
),
8294
x: 0,
8395
y: 20,
8496
z: 0,

‎src/components/HomeQueue.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default {
8181
})
8282
return newTitle
8383
}
84-
84+
8585
},
8686
methods: {
8787
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),

‎src/components/Icons.vue

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ Description:
1515
<br />
1616
<i :class="iconString"></i>
1717
<br />
18-
<span class="white--text"
19-
>{{ elementName }}</span>
18+
<span class="white--text">{{ elementName }}</span>
2019
</button>
2120
</section>
2221
</template>
@@ -33,13 +32,22 @@ export default {
3332
},
3433
name: 'Icons',
3534
computed: {
36-
...mapState(['icons', 'activeComponent', 'componentMap', 'selectedElementList', 'activeHTML', 'activeLayer'])
35+
...mapState([
36+
'icons',
37+
'activeComponent',
38+
'componentMap',
39+
'selectedElementList',
40+
'activeHTML',
41+
'activeLayer'
42+
])
3743
},
3844
methods: {
3945
// Logic to decide where to place selected html element
4046
changeState (elementName) {
4147
// if no active component & creating a new component: add html to selectedElement list
42-
if (this.activeComponent === '') { this.$emit('getClickedIcon', { elementName, date: Date.now() }) } else {
48+
if (this.activeComponent === '') {
49+
this.$emit('getClickedIcon', { elementName, date: Date.now() })
50+
} else {
4351
if (this.activeHTML === '' && this.activeLayer.id === '') {
4452
// if active component & no active html: add html to component's htmlList no nesting
4553
this.$emit('activeElement', { elementName, date: Date.now() })
@@ -60,9 +68,11 @@ export default {
6068
if (this.activeComponent === '') {
6169
this.elementStorage = {}
6270
this.selectedElementList.forEach(el => {
71+
// if user adds an element and the element is not inside of component, give it a value of 1
6372
if (!this.elementStorage[el.text]) {
6473
this.elementStorage[el.text] = 1
6574
} else {
75+
// otherwise increment count by 1
6676
this.elementStorage[el.text] += 1
6777
}
6878
})
@@ -76,7 +86,10 @@ export default {
7686
if (this.activeComponent) {
7787
this.elementStorage = {}
7888
if (this.activeLayer.id !== '' && this.activeHTML === '') {
79-
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
89+
let activeLayerObj = breadthFirstSearch(
90+
this.componentMap[this.activeComponent].htmlList,
91+
this.activeLayer.id
92+
)
8093
activeLayerObj.children.forEach(el => {
8194
if (!this.elementStorage[el.text]) {
8295
this.elementStorage[el.text] = 1
@@ -99,7 +112,10 @@ export default {
99112
if (this.activeComponent) {
100113
this.elementStorage = {}
101114
if (this.activeLayer.id !== '' && this.activeHTML === '') {
102-
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
115+
let activeLayerObj = breadthFirstSearch(
116+
this.componentMap[this.activeComponent].htmlList,
117+
this.activeLayer.id
118+
)
103119
activeLayerObj.children.forEach(el => {
104120
if (!this.elementStorage[el.text]) {
105121
this.elementStorage[el.text] = 1
@@ -108,7 +124,10 @@ export default {
108124
}
109125
})
110126
} else if (this.activeHTML !== '') {
111-
let activeHtmlObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeHTML)
127+
let activeHtmlObj = breadthFirstSearch(
128+
this.componentMap[this.activeComponent].htmlList,
129+
this.activeHTML
130+
)
112131
activeHtmlObj.children.forEach(el => {
113132
if (!this.elementStorage[el.text]) {
114133
this.elementStorage[el.text] = 1
@@ -133,7 +152,10 @@ export default {
133152
activeHTML: function () {
134153
this.elementStorage = {}
135154
if (this.activeHTML !== '') {
136-
let activeHtmlObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeHTML)
155+
let activeHtmlObj = breadthFirstSearch(
156+
this.componentMap[this.activeComponent].htmlList,
157+
this.activeHTML
158+
)
137159
activeHtmlObj.children.forEach(el => {
138160
if (!this.elementStorage[el.text]) {
139161
this.elementStorage[el.text] = 1
@@ -143,7 +165,10 @@ export default {
143165
})
144166
} else {
145167
if (this.activeLayer.id !== '' && this.activeHTML === '') {
146-
let activeLayerObj = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
168+
let activeLayerObj = breadthFirstSearch(
169+
this.componentMap[this.activeComponent].htmlList,
170+
this.activeLayer.id
171+
)
147172
activeLayerObj.children.forEach(el => {
148173
if (!this.elementStorage[el.text]) {
149174
this.elementStorage[el.text] = 1

‎src/store/actions.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,12 @@ const actions = {
2222
which are determined by the choices made on the left hand panel
2323
*/
2424
const { componentName } = payload
25+
// if the component name doesn't already exist,
26+
// then add the component to the display
2527
if (!state.componentMap[componentName]) {
2628
commit(types.ADD_COMPONENT_TO_COMPONENT_MAP, payload)
29+
// if the component isn't already a child,
30+
// add it as child to the homeview display
2731
if (!state.parentSelected.length) {
2832
commit(
2933
types.ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN,

0 commit comments

Comments
 (0)