initial commit

client/General/modal/modal.css

@@ -0,0 +1,65 @@
+/* The Modal (background) */
+.mymodal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 10; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100vh; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.mymodal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.mymodal-header, .mymodal-footer {
+    padding: 2px 16px;
+    background-color: #4169e1;
+    color: white;
+}
+
+.mymodal-body {
+    padding: 2px 16px;
+}

client/General/modal/modal.html

@@ -0,0 +1,16 @@
+<template name="myModal">
+    <div id="genModal" class="modal mymodal">
+        <div class="mymodal-content">
+            <div class="mymodal-header">
+                <h4>{{modalHeader}}</h4>
+            </div>
+            <div class="mymodal-body">
+                <p class="flow-text">{{modalBody}}</p>
+            </div>
+            <div class="mymodal-footer">
+                <a href="#" id="cancel" class="modal-close waves-effect waves-orange btn-flat white-text">Cancel</a>
+                <a href="#" id="continue" class="waves-effect waves-green btn-flat white-text">Continue</a>
+            </div>
+        </div>
+    </div>
+</template>

client/General/modal/modal.js

@@ -0,0 +1,41 @@
+
+
+Template.myModal.onCreated(function() {
+    
+});
+
+Template.myModal.onRendered(function() {
+    $('.modal').modal();
+});
+
+Template.myModal.helpers({
+    modalHeader: function() {
+        return Session.get("confirmationDialogTitle");
+    },
+    modalBody: function() {
+        return Session.get("confirmationDialogContent");
+    }
+});
+
+Template.myModal.events({
+    'click #continue' (event) {
+        event.preventDefault();
+
+        let callFunction = Session.get("eventConfirmCallBackFunction");
+        let functionPassId = Session.get("eventConfirmNecessaryId"); // <-- this can be an actual ID, an object, a function, whatever...
+
+        if (functionPassId == "disallowCom") {
+            $("#genModal").modal('close');
+            return;
+        } else {
+            $("#genModal").modal('close');
+
+            window[callFunction](functionPassId); // <-- calls the function and passed the Id on confirm.
+        }       
+    },
+    'click #cancel' (event) {
+        event.preventDefault();
+
+        $("#genModal").modal('close');
+    },
+});