MDL-59884 core_calendar: display spinner when reloading month content
authorSimey Lameze <simey@moodle.com>
Tue, 22 Aug 2017 07:38:06 +0000 (15:38 +0800)
committerSimey Lameze <simey@moodle.com>
Wed, 30 Aug 2017 01:48:56 +0000 (09:48 +0800)
calendar/amd/build/calendar.min.js
calendar/amd/build/view_manager.min.js
calendar/amd/src/calendar.js
calendar/amd/src/view_manager.js
calendar/templates/month_detailed.mustache

index c797403..2be6d36 100644 (file)
Binary files a/calendar/amd/build/calendar.min.js and b/calendar/amd/build/calendar.min.js differ
index dc730d3..81b54da 100644 (file)
Binary files a/calendar/amd/build/view_manager.min.js and b/calendar/amd/build/view_manager.min.js differ
index e75671c..fdd4ccd 100644 (file)
@@ -249,13 +249,13 @@ define([
         var body = $('body');
 
         body.on(CalendarEvents.created, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.deleted, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.updated, function() {
-            CalendarViewManager.reloadCurrentMonth();
+            CalendarViewManager.reloadCurrentMonth(root);
         });
         body.on(CalendarEvents.editActionEvent, function(e, url) {
             // Action events needs to be edit directly on the course module.
index eccb0a3..93cfd47 100644 (file)
@@ -28,6 +28,7 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
             ROOT: "[data-region='calendar']",
             CALENDAR_NAV_LINK: "span.calendarwrapper .arrow_link",
             CALENDAR_MONTH_WRAPPER: ".calendarwrapper",
+            LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]'
         };
 
         /**
@@ -55,6 +56,10 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          * @return {promise}
          */
         var refreshMonthContent = function(time, courseid) {
+            var root = $(SELECTORS.ROOT);
+
+            startLoading(root);
+
             return CalendarRepository.getCalendarMonthData(time, courseid)
                 .then(function(context) {
                     return Templates.render('core_calendar/month_detailed', context);
@@ -62,6 +67,9 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
                 .then(function(html, js) {
                     return Templates.replaceNode(SELECTORS.CALENDAR_MONTH_WRAPPER, html, js);
                 })
+                .always(function() {
+                    return stopLoading(root);
+                })
                 .fail(Notification.exception);
         };
 
@@ -90,14 +98,37 @@ define(['jquery', 'core/templates', 'core/notification', 'core_calendar/reposito
          *
          * @return {promise}
          */
-        var reloadCurrentMonth = function() {
-            var root = $(SELECTORS.ROOT),
-                courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
+        var reloadCurrentMonth = function(root) {
+            var courseid = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('courseid'),
                 time = root.find(SELECTORS.CALENDAR_MONTH_WRAPPER).data('current-time');
 
             return refreshMonthContent(time, courseid);
         };
 
+        /**
+         * Set the element state to loading.
+         *
+         * @param {object} root The container element
+         * @method startLoading
+         */
+        var startLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.removeClass('hidden');
+        };
+
+        /**
+         * Remove the loading state from the element.
+         *
+         * @param {object} root The container element
+         * @method stopLoading
+         */
+        var stopLoading = function(root) {
+            var loadingIconContainer = root.find(SELECTORS.LOADING_ICON_CONTAINER);
+
+            loadingIconContainer.addClass('hidden');
+        };
+
         return {
             init: function() {
                 registerEventListeners(SELECTORS.ROOT);
index 9d17086..4b782df 100644 (file)
@@ -34,6 +34,7 @@
 <div id="month-detailed-{{uniqid}}" class="calendarwrapper" data-courseid="{{courseid}}" data-current-time="{{time}}">
     {{> core_calendar/month_header }}
     {{> core_calendar/month_navigation }}
+    {{> core/overlay_loading}}
     <table class="calendarmonth calendartable card-deck m-b-0">
         <thead>
             <tr>