SM: Added modal 0.0.4 changes - callback fix.

Steven Morrison · Steven Morrison · commit 807928b487ca · 2017-04-01T19:55:15.000+01:00
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <title>Task Manager</title>
+    <meta charset="utf-8"/>
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/modal.css" />
 </head>
@@ -42,7 +43,7 @@ <h3 class="category-name">{{ cat.name }}</h3>
         </ul>
 
         <!-- Modal component -->
-        <zaffri-modal v-bind:data="modalConfig"></zaffri-modal>
+        <zaffri-modal v-bind:data="modalConfig" v-on:hide_modal_emit="modalCallback"></zaffri-modal>
     </section>
 
     <!-- Modal Component markup -->
diff --git a/js/app.js b/js/app.js
@@ -13,6 +13,22 @@ var app = new Vue({
     data: {
         newCategory: '',
         modalConfig: {
+             // Modal visibility
+            visible: false,
+
+            // type: notify || confirm
+            type: "confirm",
+
+            // display data
+            title: "Delete",
+            messageBody: "Are you sure you want to delete this?",
+            confirmText: "Confirm",
+
+            // Only required for confirm modal
+            cancelText: "Cancel",
+            callbackData: {}
+        },
+        /*modalConfig: {
             // Modal visibility
             visible: false,
 
@@ -43,7 +59,7 @@ var app = new Vue({
                 }
                 console.log("DATA: " + JSON.stringify(data));
             }
-        },
+        },*/
         categories: [] // all app data
     },
     created: function() {
@@ -138,16 +154,22 @@ var app = new Vue({
             }
         },
         showModal: function(index, type, parentIndex = null) { // parentIndex for tasks (cat index)
-            // Modal action
-            this.modalConfig.callbackData.type = type;
-            this.modalConfig.callbackData.index = index;
-            this.modalConfig.callbackData.parentIndex = parentIndex;
+            // Assign callback data
+            this.modalConfig.callbackData = {
+                type: type,
+                index: index,
+                parentIndex: parentIndex
+            }
+            
             // Set visible
             this.modalConfig.visible = true;
         },
-        hideModal: function(action) {
-            // this.modalConfig.visible = false;
+        modalCallback: function(action) {
+            this.modalConfig.visible = false;
             
+            console.log('Action: ' + action);
+            console.log('Data: ' + JSON.stringify(this.modalConfig.callbackData));
+
             // if action = true (confirm clicked)
             /*if(action == true) {
                 var actionData = this.zaffriModal.action;
diff --git a/js/modal.js b/js/modal.js
@@ -1,6 +1,6 @@
 /* --------------------------------------------------------
 	VueJS - Modal Component
-	Version: 	0.0.3
+	Version: 	0.0.4
 	Author: 	Steven Morrison
 	Website:	www.zaffri.com
 	GitHub:		github.com/Zaffri
@@ -11,15 +11,11 @@ var ZaffriModal = Vue.component('zaffri-modal', {
     props: ['data'],
     methods: {
         closeModal: function(action = null) {
-            var callbackData = {};
-
-            if(this.data.callbackData != undefined) callbackData = this.data.callbackData;
-            if(this.data.confirmCallback != undefined) this.confirmCallback(action, callbackData);
-
+            this.$emit('hide_modal_emit', action);
             this.data.visible = false;
         },
         confirmCallback: function(action, callbackData) {
             this.data.confirmCallback(action, callbackData);
         }
     }
-});
+});
