MDL-57445 block_myoverview: change event list loading icon

Part of MDL-55611 epic.
This commit is contained in:
Ryan Wyllie 2017-01-03 07:09:38 +00:00 committed by Damyon Wiese
parent 0fa82f8463
commit 6103ce8b82
6 changed files with 20 additions and 15 deletions

View File

@ -1 +1 @@
define(["jquery","core/notification","core/templates","block_myoverview/calendar_events_repository"],function(a,b,c,d){return{load:function(e){e=a(e);var f=+e.attr("data-start-day"),g=+e.attr("data-end-day"),h=+e.attr("data-limit"),i=+e.attr("data-offset");return e.hasClass("loading")?a.Deferred().resolve():(e.addClass("loading"),d.query_for_user_by_days(f,g,h,i).then(function(a){if(e.attr("data-offset",i+a.length),a.length)return c.render("block_myoverview/event-list-items",{events:a}).done(function(a,b){c.appendNodeContents(e,a,b)})}).fail(b.exception).always(function(){e.removeClass("loading")}))}}});
define(["jquery","core/notification","core/templates","block_myoverview/calendar_events_repository"],function(a,b,c,d){var e={EVENT_LIST:'[data-region="event-list"]',LOADING_ICON_CONTAINER:'[data-region="loading-icon-container"]'};return{load:function(f){f=a(f);var g=+f.attr("data-start-day"),h=+f.attr("data-end-day"),i=+f.attr("data-limit"),j=+f.attr("data-offset"),k=f.find(e.LOADING_ICON_CONTAINER);return f.hasClass("loading")?a.Deferred().resolve():(f.addClass("loading"),k.removeClass("hidden"),d.query_for_user_by_days(g,h,i,j).then(function(a){if(f.attr("data-offset",j+a.length),a.length)return c.render("block_myoverview/event-list-items",{events:a}).done(function(a,b){c.appendNodeContents(f,a,b)})}).fail(b.exception).always(function(){f.removeClass("loading"),k.addClass("hidden")}))}}});

View File

@ -1 +0,0 @@
define([],function(){return{LOADING_EVENTS:"block_myoverview:events-loading",LOADED_EVENTS:"block_myoverview:events-loaded"}});

View File

@ -1 +1 @@
define(["core/custom_interaction_events","block_myoverview/event_list"],function(a,b){var c={VIEW_MORE_BUTTON:'[data-action="view-more"]',EVENT_LIST:'[data-region="event-list"]'},d=function(a){a.each(function(){b.load(this)})};return{init:function(b){var e=b.find(c.EVENT_LIST);d(e),a.define(b,[a.events.activate]),b.on(a.events.activate,c.VIEW_MORE_BUTTON,function(){d(e)})}}});
define(["core/custom_interaction_events","block_myoverview/event_list"],function(a,b){var c={VIEW_MORE_BUTTON:'[data-action="view-more"]',EVENT_LIST_CONTAINER:'[data-region="event-list-container"]'},d=function(a){a.each(function(){b.load(this)})};return{init:function(b){var e=b.find(c.EVENT_LIST_CONTAINER);d(e),a.define(b,[a.events.activate]),b.on(a.events.activate,c.VIEW_MORE_BUTTON,function(){d(e)})}}});

View File

@ -26,6 +26,11 @@ define(['jquery', 'core/notification', 'core/templates',
'block_myoverview/calendar_events_repository'],
function($, Notification, Templates, CalendarEventsRepository) {
var SELECTORS = {
EVENT_LIST: '[data-region="event-list"]',
LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]'
};
return {
/**
* Retrieve a list of calendar events, render and append them to the end of the
@ -41,7 +46,8 @@ define(['jquery', 'core/notification', 'core/templates',
var start = +root.attr('data-start-day'),
end = +root.attr('data-end-day'),
limit = +root.attr('data-limit'),
offset = +root.attr('data-offset');
offset = +root.attr('data-offset'),
loadingIcon = root.find(SELECTORS.LOADING_ICON_CONTAINER);
// Don't load twice.
if (root.hasClass('loading')) {
@ -49,6 +55,7 @@ define(['jquery', 'core/notification', 'core/templates',
}
root.addClass('loading');
loadingIcon.removeClass('hidden');
// Request data from the server.
return CalendarEventsRepository.query_for_user_by_days(
@ -70,6 +77,7 @@ define(['jquery', 'core/notification', 'core/templates',
Notification.exception
).always(function() {
root.removeClass('loading');
loadingIcon.addClass('hidden');
});
}
};

View File

@ -25,7 +25,7 @@ define(['core/custom_interaction_events', 'block_myoverview/event_list'], functi
var SELECTORS = {
VIEW_MORE_BUTTON: '[data-action="view-more"]',
EVENT_LIST: '[data-region="event-list"]',
EVENT_LIST_CONTAINER: '[data-region="event-list-container"]',
};
/**
@ -49,7 +49,7 @@ define(['core/custom_interaction_events', 'block_myoverview/event_list'], functi
* @param {object} jQuery element
*/
init: function(root) {
var containers = root.find(SELECTORS.EVENT_LIST);
var containers = root.find(SELECTORS.EVENT_LIST_CONTAINER);
loadForContainers(containers);

View File

@ -19,16 +19,14 @@
This template renders a list of events for the myoverview block.
}}
<div data-region="event-list-container">
<h5>{{$title}}{{/title}}</h5>
<ul class="list-group event-list"
data-region="event-list"
data-start-day="{{$startday}}0{{/startday}}"
data-end-day="{{$endday}}7{{/endday}}"
data-limit="{{$limit}}10{{/limit}}"
data-offset="{{$offset}}0{{/offset}}">
<div data-region="event-list-container"
data-start-day="{{$startday}}0{{/startday}}"
data-end-day="{{$endday}}7{{/endday}}"
data-limit="{{$limit}}10{{/limit}}"
data-offset="{{$offset}}0{{/offset}}">
<h5>{{$title}}{{/title}} <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span></h5>
<ul class="list-group" data-region="event-list">
{{> block_myoverview/event-list-items }}
</ul>
{{> core/loading }}
</div>