Merge branch 'dev' of https://github.com/oslabs-beta/OverVue into dev

Author: jchan444

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

@@ -106,15 +106,17 @@ export default {
     },
     //METHODS FOR DRAG-AND-DROP
     startDrag (event, id) {
-      //add a class of 'currentlyDragging' to the HTML element that you are currently dragging
+      //add a class to make the html element currently being drag transparent
       event.target.classList.add('currentlyDragging')
       const dragId = id;
+      //store the id of dragged element
       if (this.activeComponent === '') this.setSelectedIdDrag(dragId)
       else this.setIdDrag(dragId)
     },
     dragEnter (event, id) {
       event.preventDefault();
       const dropId = id;
+      //store the id of the html element whose location the dragged html element could be dropped upon
       if (this.activeComponent === '') this.setSelectedIdDrop(dropId)
       else this.setIdDrop(dropId)
     },
@@ -123,7 +125,7 @@ export default {
       event.preventDefault();
     },
     endDrag (event) {
-      //remove the 'currentlyDragging' class after the HTML is dropped
+      //remove the 'currentlyDragging' class after the HTML is dropped to remove transparency
       event.preventDefault();
       event.target.classList.remove('currentlyDragging')
       //invoke the action that will use the idDrag and idDrop to sort the HtmlList

src/components/left-sidebar/ComponentTab/Icons.vue

@@ -14,7 +14,7 @@ Description:
       <br />
       <span>{{ elementName }}</span>
     </button>
-<!-- Child Component Icons-->
+<!-- Icons for activeComponent's Child Components-->
     <button
       @click.prevent="changeState(elementName)"
       v-for="(elementName, idx) in childrenComp"
@@ -27,7 +27,6 @@ Description:
       <span>{{ elementName }}</span>
     </button>
 
-
   </section>
 </template>
 

src/components/right-sidebar/HTMLQueue.vue

@@ -147,6 +147,7 @@ export default {
       })
       return newTitle;
     },
+    //make child components in htmlList exceptions
     moreExceptions: function () {
       let childComponent = [];
       if(this.activeComponent) {
@@ -179,15 +180,17 @@ export default {
     },
     //METHODS FOR DRAG-AND-DROP
     startDrag(event, id) {
-      //add a class of 'currentlyDragging' to the HTML element that you are currently dragging
+      //add a class to make the html element currently being drag transparent
       event.target.classList.add('currentlyDragging')
       const dragId = id;
+      //store the id of dragged element
       if (this.activeComponent === '') this.setSelectedIdDrag(dragId)
       else this.setIdDrag(dragId)
     },
     dragEnter(event, id) {
       event.preventDefault();
       const dropId = id;
+      //store the id of the html element whose location the dragged html element could be dropped upon
       if (this.activeComponent === '') this.setSelectedIdDrop(dropId)
       else this.setIdDrop(dropId)
     },
@@ -196,7 +199,7 @@ export default {
       event.preventDefault();
     },
     endDrag(event) {
-      //remove the 'currentlyDragging' class after the HTML is dropped
+      //remove the 'currentlyDragging' class after the HTML is dropped to remove transparency
       event.preventDefault();
       event.target.classList.remove('currentlyDragging')
       //invoke the action that will use the idDrag and idDrop to sort the HtmlList

src/store/mutations.js

@@ -330,7 +330,7 @@ const mutations = {
         }
       }
     }
-    //update the component name in the htmlList of all components if it is a child component
+    //update the the htmlList, find child components within the htmlLists with the old value, update it to the new value
     for (const item of Object.values(state.componentMap)) {
       if (item.htmlList) {
         const newArray = [...item.htmlList];
@@ -495,25 +495,26 @@ const mutations = {
     }
     state.activeHTML = "";
   },
-
+  //Drag-andDrop
+  //store id of dragged html element in activeComponent
   [types.SET_ID_DRAG]: (state, payload) => {
     const componentName = state.activeComponent;
     state.componentMap[componentName].idDrag = payload;
   },
-
+  //store id of html element whose place the dragged html element is dropped on in activeComponent
   [types.SET_ID_DROP]: (state, payload) => {
     const componentName = state.activeComponent;
     state.componentMap[componentName].idDrop = payload;
   },
-
+  //store id of dragged selected html element when creating a component
   [types.SET_SELECTED_ID_DRAG]: (state, payload) => {
     state.selectedIdDrag = payload;
   },
-
+  //store id of html element whose place the dragged selected html element will be dropped when creating a component
   [types.SET_SELECTED_ID_DROP]: (state, payload) => {
     state.selectedIdDrop = payload;
   },
-
+  // use idDrag and idDrop to rearrange the htmlList of the activeComponent to perform drag-and-drop functionality
   [types.DRAG_DROP_SORT_HTML_ELEMENTS]: (state) => {
     const componentName = state.activeComponent;
     const idDrag = state.componentMap[componentName].idDrag;
@@ -525,27 +526,32 @@ const mutations = {
       const htmlList = state.componentMap[componentName].htmlList.slice(0)
 
       if (state.activeLayer.id === "") {
+        //find the indexes belonging to the html elements with idDrag and idDrop
         htmlList.forEach((el, i) => {
           if (el.id === idDrag) {
             indexDrag = i;
           } else if (el.id === idDrop) {
             indexDrop = i;
           }
         })
+        //use the indexes to rearrange htmlList
         const draggedEl = htmlList.splice(indexDrag, 1)[0]
         htmlList.splice(indexDrop, 0, draggedEl)
       } else {
+        //Use breadFirstSearchParent to find the parent and indexes of nested html elements with idDrag and idDrop
         const nestedDrag = breadthFirstSearchParent(htmlList, idDrag);
         const nestedDrop = breadthFirstSearchParent(htmlList, idDrop);
+        //use the indexes and parents to rearrange htmlList
         let nestedEl = nestedDrag.evaluated.children.splice(nestedDrag.index, 1)[0]
         nestedDrop.evaluated.children.splice(nestedDrop.index, 0, nestedEl)
       }
       state.componentMap[componentName].htmlList = htmlList;
     }
+    //reset the ids
     state.componentMap[componentName].idDrag = '';
     state.componentMap[componentName].idDrop = '';
   },
-
+// use selectedIdDrag and selectedIdDrop to rearrange the selectedElementList to perform drag-and-drop functionality
   [types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS]: (state) => {
     const selectedIdDrag = state.selectedIdDrag;
     const selectedIdDrop = state.selectedIdDrop;
@@ -555,19 +561,20 @@ const mutations = {
 
       let indexDrag;
       let indexDrop;
-
+      //find the indexes belonging to the html elements with the selectedIdDrag and selectedIdDrop
       htmlList.forEach((el, i) => {
         if (el.id === selectedIdDrag) {
           indexDrag = i;
         } else if (el.id === selectedIdDrop) {
           indexDrop = i;
         }
       })
-
+      //use the indexes to delete the dragged element and place them into the new location
       const draggedEl = htmlList.splice(indexDrag, 1)[0]
       htmlList.splice(indexDrop, 0, draggedEl)
       state.selectedElementList = htmlList;
     }
+    //reset the ids
     state.selectedIdDrag = '';
     state.selectedIdDrop = '';
   },