testing overlay during calendar ajax loading sequence

diff --git a/assets/loader.gif b/assets/loader.gif
new file mode 100644 (file)
index 0000000..c049b16
Binary files /dev/null and b/assets/loader.gif differ

diff --git a/css/front.css b/css/front.css
index 8dfad06..c7f273f 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -192,6 +192,25 @@ input[name='contact_fname'], input[name='contact_lname']{
     margin: 0 0 10px 20px;
     position: relative;
 }
+.event-overlay{
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0, 0.5);
+    width: 1110px;
+    height: 900px;
+    z-index: 999;
+}
+.loading{
+/*    display: none;*/
+    height: 31px;
+    width: 128px;
+    background: url('../assets/loader.gif');
+    position: absolute;
+    top:15%;
+    left: 42%;
+    z-index: 999;
+}
 #glm-event-detail-cost:before {
     content: "";
     background-image: url("../assets/cost-icon-24x24.png");

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index e5b61f7..917192d 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -64,7 +64,11 @@
         </div>
     </div>
     <!-- Calendar -->
-    <div id="eventCalendar"></div>
+    <div id="eventCalendar" style='position: relative;'>
+        <div class='event-overlay'>
+            <div class="loading"></div>
+        </div>
+    </div>
 </div>
 
 
@@ -105,13 +109,14 @@
                 type: 'POST',
                 url: '{$ajaxUrl}',
                 data: dat,
+                beforeSend: function(){ $(".event-overlay").show(); },
+                complete: function(){ $(".event-overlay").hide(); },
                 cache: false,
                 success: function (response){
                     var buildingEvents = [];
                     //var events_obj = jQuery.parseJSON(response);
                     var events_obj = response;
                     var events = events_obj.events;
-
                     buildingEvents = $.map(events, function(i, val) {
                         return {
                             title:   i.title,
@@ -131,6 +136,13 @@
         var height = 900;
         // Calendar *****************************************************
         $('#eventCalendar').fullCalendar({
+            loading: function( isLoading, view){
+                if( isLoading){
+                    console.log("loading");
+                } else {
+                    
+                }
+            },
             eventOrder: 'allDay',
             height: height,
             contentHeight: height,