L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-57445 block_myoverview: refactor event_list render

Browse Source 
Part of MDL-55611 epic.
This commit is contained in:
Cameron Ball
2017-04-03 11:35:38 +08:00
committed by Damyon Wiese
parent ed9c238cae
commit 10a8ea172b
2 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocks/myoverview/amd/build/event_list.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
define(["jquery","core/notification","core/templates","core/custom_interaction_events","block_myoverview/calendar_events_repository"],function(a,b,c,d,e){var f=86400,g={EVENT_LIST:'[data-region="event-list"]',EVENT_LIST_GROUP_CONTAINER:'[data-region="event-list-group-container"]',LOADING_ICON_CONTAINER:'[data-region="loading-icon-container"]',VIEW_MORE_BUTTON:'[data-action="view-more"]'},h=function(a){a.attr("data-loaded-all",!0)},i=function(a){return!!a.attr("data-loaded-all")},j=function(a){var b=a.find(g.LOADING_ICON_CONTAINER),c=a.find(g.VIEW_MORE_BUTTON);a.addClass("loading"),b.removeClass("hidden"),c.prop("disabled",!0)},k=function(a){var b=a.find(g.LOADING_ICON_CONTAINER),c=a.find(g.VIEW_MORE_BUTTON);a.removeClass("loading"),b.addClass("hidden"),i(a)||c.prop("disabled",!1)},l=function(a){return a.hasClass("loading")},m=function(a,b){return a.removeClass("hidden"),c.render("block_myoverview/event-list-items",{events:b}).done(function(b,d){c.appendNodeContents(a.find(g.EVENT_LIST),b,d)})},n=function(a,b,c,d){var e=d.orderTime||0,g=a+b*f;if(c){var h=a+c*f;return e>=g&&e<h}return e>=g},o=function(b,c){var d=[],e=new Date,f=Math.floor(e.setHours(0,0,0,0)/1e3),h=b.find(g.EVENT_LIST_GROUP_CONTAINER),i=0;return h.each(function(){var b=a(this),e=+b.attr("data-start-day"),g=+b.attr("data-end-day")||0,h=c.filter(function(a){return n(f,e,g,a)});h.length&&(i+=h.length,d.push(m(b,h)))}),a.when.apply(null,d).then(function(){return i})},p=function(c){c=a(c);var d=+c.attr("data-limit"),f=+c.attr("data-offset"),g=new Date,i=Math.floor(g.setHours(0,0,0,0)/1e3);return l(c)?a.Deferred().resolve():(j(c),e.queryFromTime(i,d,f).then(function(a){if((!a.length||a.length<d)&&h(c),a.length)return c.attr("data-offset",f+a.length),o(c,a).then(function(b){b<a.length&&h(c)})}).fail(b.exception).always(function(){k(c)}))},q=function(a){d.define(a,[d.events.activate]),a.on(d.events.activate,g.VIEW_MORE_BUTTON,function(){p(a)})};return{init:function(b){b=a(b),p(b),q(b)},load:p,registerEventListeners:q}});
define(["jquery","core/notification","core/templates","core/custom_interaction_events","block_myoverview/calendar_events_repository"],function(a,b,c,d,e){var f=86400,g={EVENT_LIST:'[data-region="event-list"]',EVENT_LIST_GROUP_CONTAINER:'[data-region="event-list-group-container"]',LOADING_ICON_CONTAINER:'[data-region="loading-icon-container"]',VIEW_MORE_BUTTON:'[data-action="view-more"]'},h=function(a){a.attr("data-loaded-all",!0)},i=function(a){return!!a.attr("data-loaded-all")},j=function(a){var b=a.find(g.LOADING_ICON_CONTAINER),c=a.find(g.VIEW_MORE_BUTTON);a.addClass("loading"),b.removeClass("hidden"),c.prop("disabled",!0)},k=function(a){var b=a.find(g.LOADING_ICON_CONTAINER),c=a.find(g.VIEW_MORE_BUTTON);a.removeClass("loading"),b.addClass("hidden"),i(a)||c.prop("disabled",!1)},l=function(a){return a.hasClass("loading")},m=function(a,b){return a.removeClass("hidden"),c.render("block_myoverview/event-list-items",{events:b}).done(function(b,d){c.appendNodeContents(a.find(g.EVENT_LIST),b,d)})},n=function(a,b){var c=b.orderTime||0;return c-a},o=function(a,b){var c=Math.floor((new Date).setHours(0,0,0,0)/1e3),d=+b.attr("data-start-day")*f,e=+b.attr("data-end-day")*f,g=n(c,a);return e?d<=g&&g<e:d<=g},p=function(b){return function(c){return o(c,a(b))}},q=function(b,c){var d=0;return a.when.apply(a,a.map(b.find(g.EVENT_LIST_GROUP_CONTAINER),function(b){var e=c.filter(p(b));return e.length?(d+=e.length,m(a(b),e)):null})).then(function(){return d})},r=function(c){c=a(c);var d=+c.attr("data-limit"),f=+c.attr("data-offset"),g=new Date,i=Math.floor(g.setHours(0,0,0,0)/1e3);return l(c)?a.Deferred().resolve():(j(c),e.queryFromTime(i,d,f).then(function(a){if((!a.length||a.length<d)&&h(c),a.length)return c.attr("data-offset",f+a.length),q(c,a).then(function(b){b<a.length&&h(c)})}).fail(b.exception).always(function(){k(c)}))},s=function(a){d.define(a,[d.events.activate]),a.on(d.events.activate,g.VIEW_MORE_BUTTON,function(){r(a)})};return{init:function(b){b=a(b),r(b),s(b)}}});
blocks/myoverview/amd/src/event_list.js
+64 -42
View File
@@ -129,34 +129,67 @@ define(['jquery', 'core/notification', 'core/templates',
};
/**
* A filter function to check if the given calendar event falls within the
* specified time range.
* Determine the time (in seconds) from the given timestamp until the calendar
* event will need actioning.
*
* @method filterByDay
* @method timeUntilEvent
* @private
* @param {int} seedTime The start timestamp from which to calculate
* @param {int} startDayOffset The number of days to offset from the seedTime when
* calculating the start of the time range
* @param {int} endDayOffset The number of days to offset from the seedTime when
* calculating the end of the time range
* @param {object} calendarEvent The list of calendar events
* @param {int} timestamp The time to compare with
* @param {object} event The calendar event
* @return {int}
*/
var timeUntilEvent = function(timestamp, event) {
var orderTime = event.orderTime || 0;
return orderTime - timestamp;
};
/**
* Check if the given calendar event should be added to the given event
* list group container. The event list group container will specify a
* day range for the time boundary it is interested in.
*
* If only a start day is specified for the container then it will be treated
* as an open catchment for all events that begin after that time.
*
* @method eventBelongsInContainer
* @private
* @param {object} event The calendar event
* @param {object} container The group event list container
* @return {bool}
*/
var filterByDay = function(seedTime, startDayOffset, endDayOffset, calendarEvent) {
var orderTime = calendarEvent.orderTime || 0,
startTime = seedTime + (startDayOffset * SECONDS_IN_DAY);
var eventBelongsInContainer = function(event, container) {
var todayTime = Math.floor(new Date().setHours(0, 0, 0, 0) / 1000),
timeUntilContainerStart = +container.attr('data-start-day') * SECONDS_IN_DAY,
timeUntilContainerEnd = +container.attr('data-end-day') * SECONDS_IN_DAY,
timeUntilEventNeedsAction = timeUntilEvent(todayTime, event);
if (!endDayOffset) {
return (orderTime >= startTime);
if (!timeUntilContainerEnd) {
return timeUntilContainerStart <= timeUntilEventNeedsAction;
} else {
var endTime = seedTime + (endDayOffset * SECONDS_IN_DAY);
return (orderTime >= startTime && orderTime < endTime);
return timeUntilContainerStart <= timeUntilEventNeedsAction &&
timeUntilEventNeedsAction < timeUntilContainerEnd;
}
};
/**
* Render the given calendar events in the container element.
* Return a function that can be used to filter a list of events based on the day
* range specified on the given event list group container.
*
* @method getFilterCallbackForContainer
* @private
* @param {object} container Event list group container
* @return {function}
*/
var getFilterCallbackForContainer = function(container) {
return function(event) {
return eventBelongsInContainer(event, $(container));
};
};
/**
* Render the given calendar events in the container element. The container
* elements must have a day range defined using data attributes that will be
* used to group the calendar events according to their order time.
*
* @method render
* @private
@@ -165,30 +198,21 @@ define(['jquery', 'core/notification', 'core/templates',
* @return {promise} Resolved with a count of the number of rendered events
*/
var render = function(root, calendarEvents) {
var promises = [],
date = new Date(),
todayTime = Math.floor(date.setHours(0, 0, 0, 0) / 1000),
eventListGroups = root.find(SELECTORS.EVENT_LIST_GROUP_CONTAINER),
renderCount = 0;
var renderCount = 0;
// For each event list group find the events from the calender event
// list that fit in the day range they are listening for and render
// the events within that group.
eventListGroups.each(function() {
var group = $(this),
startDay = +group.attr('data-start-day'),
endDay = +group.attr('data-end-day') || 0,
groupCalendarEvents = calendarEvents.filter(function(value) {
return filterByDay(todayTime, startDay, endDay, value);
});
// Loop over each of the element list groups and find the set of calendar events
// that belong to that group (as defined by the group's day range). The matching
// list of calendar events are rendered and added to the DOM within that group.
return $.when.apply($, $.map(root.find(SELECTORS.EVENT_LIST_GROUP_CONTAINER), function(container) {
var events = calendarEvents.filter(getFilterCallbackForContainer(container));
if (groupCalendarEvents.length) {
renderCount += groupCalendarEvents.length;
promises.push(renderGroup(group, groupCalendarEvents));
if (events.length) {
renderCount += events.length;
return renderGroup($(container), events);
} else {
return null;
}
});
return $.when.apply(null, promises).then(function() {
})).then(function() {
return renderCount;
});
};
@@ -266,8 +290,6 @@ define(['jquery', 'core/notification', 'core/templates',
root = $(root);
load(root);
registerEventListeners(root);
},
load: load,
registerEventListeners: registerEventListeners,
}
};
});