Merge branch 'MDL-59884-master' of git://github.com/lameze/moodle
authorJun Pataleta <jun@moodle.com>
Wed, 30 Aug 2017 02:10:30 +0000 (10:10 +0800)
committerJun Pataleta <jun@moodle.com>
Wed, 30 Aug 2017 02:10:30 +0000 (10:10 +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
lib/templates/overlay_loading.mustache [new file with mode: 0644]
theme/boost/scss/moodle/core.scss
theme/bootstrapbase/less/moodle/core.less
theme/bootstrapbase/style/moodle.css

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>
diff --git a/lib/templates/overlay_loading.mustache b/lib/templates/overlay_loading.mustache
new file mode 100644 (file)
index 0000000..4cf2a2d
--- /dev/null
@@ -0,0 +1,38 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/overlay_loading
+
+    Moodle overlay loading template.
+
+    The purpose of this template is to render a loading animation using a overlay effect.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    *
+
+    Example context (json):
+    {}
+}}
+<span class="overlay-icon-container hidden" data-region="overlay-icon-container">
+    {{> core/loading }}
+</span>
index f7a36ef..c427200 100644 (file)
@@ -2159,3 +2159,25 @@ $footer-link-color: $bg-inverse-link-color !default;
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}
index 85e2608..69fef7b 100644 (file)
@@ -2385,3 +2385,25 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
     cursor: pointer;
 }
+
+.overlay-icon-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .loading-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        .icon {
+            height: 40px;
+            width: 40px;
+
+        }
+    }
+}
index 23653de..42d89c0 100644 (file)
@@ -4777,6 +4777,24 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 .clickable {
   cursor: pointer;
 }
+.overlay-icon-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.6);
+}
+.overlay-icon-container .loading-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay-icon-container .loading-icon .icon {
+  height: 40px;
+  width: 40px;
+}
 /* admin.less */
 .formtable tbody th {
   font-weight: normal;