// 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/>.
/**
* Lazy loaded list of items.
*
* @module core_message/message_drawer_lazy_load_list
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(
[
'jquery',
'core/custom_interaction_events'
],
function(
$,
CustomEvents
) {
var SELECTORS = {
ROOT: '[data-region="lazy-load-list"]',
LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]',
CONTENT_CONTAINER: '[data-region="content-container"]',
EMPTY_MESSAGE: '[data-region="empty-message-container"]',
PLACEHOLDER: '[data-region="placeholder-container"]'
};
/**
* Flag element as loading.
*
* @param {Object} root The section container element.
*/
var startLoading = function(root) {
root.attr('data-loading', true);
};
/**
* Flag element as not loading.
*
* @param {Object} root The section container element.
*/
var stopLoading = function(root) {
root.attr('data-loading', false);
};
/**
* Check if the element is loading.
*
* @param {Object} root The section container element.
* @return {Bool}
*/
var isLoading = function(root) {
return root.attr('data-loading') === 'true';
};
/**
* Get user id
*
* @param {Object} root The section container element.
* @return {Number} Logged in user id.
*/
var getUserId = function(root) {
return root.attr('data-user-id');
};
/**
* Get the section content container element.
*
* @param {Object} root The section container element.
* @return {Object} The section content container element.
*/
var getContentContainer = function(root) {
return root.find(SELECTORS.CONTENT_CONTAINER);
};
/**
* Get the root element.
*
* @param {Object} containerElement The container element to search in.
* @return {Object} The list root element.
*/
var getRoot = function(containerElement) {
return containerElement.find(SELECTORS.ROOT);
};
/**
* Show the loading icon.
*
* @param {Object} root The section container element.
*/
var showLoadingIcon = function(root) {
root.find(SELECTORS.LOADING_ICON_CONTAINER).removeClass('hidden');
};
/**
* Hide the loading icon.
*
* @param {Object} root The section container element.
*/
var hideLoadingIcon = function(root) {
root.find(SELECTORS.LOADING_ICON_CONTAINER).addClass('hidden');
};
/**
* Show the empty message.
*
* @param {Object} root The section container element.
*/
var showEmptyMessage = function(root) {
root.find(SELECTORS.EMPTY_MESSAGE).removeClass('hidden');
};
/**
* Hide the empty message.
*
* @param {Object} root The section container element.
*/
var hideEmptyMessage = function(root) {
root.find(SELECTORS.EMPTY_MESSAGE).addClass('hidden');
};
/**
* Show the placeholder element.
*
* @param {Object} root The section container element.
*/
var showPlaceholder = function(root) {
root.find(SELECTORS.PLACEHOLDER).removeClass('hidden');
};
/**
* Hide the placeholder element.
*
* @param {Object} root The section container element.
*/
var hidePlaceholder = function(root) {
root.find(SELECTORS.PLACEHOLDER).addClass('hidden');
};
/**
* Show the section content container.
*
* @param {Object} root The section container element.
*/
var showContent = function(root) {
getContentContainer(root).removeClass('hidden');
};
/**
* Hide the section content container.
*
* @param {Object} root The section container element.
*/
var hideContent = function(root) {
getContentContainer(root).addClass('hidden');
};
/**
* If the section has loaded all content.
*
* @param {Object} root The section container element.
* @return {Bool}
*/
var hasLoadedAll = function(root) {
return root.attr('data-loaded-all') == 'true';
};
/**
* If the section has loaded all content.
*
* @param {Object} root The section container element.
* @param {Bool} value If all items have been loaded.
*/
var setLoadedAll = function(root, value) {
root.attr('data-loaded-all', value);
};
/**
* If the section can load more items.
*
* @param {Object} root The section container element.
* @return {Bool}
*/
var canLoadMore = function(root) {
return !hasLoadedAll(root) && !isLoading(root);
};
/**
* Load all items in this container from callback and render them.
*
* @param {Object} root The section container element.
* @param {Function} loadCallback The callback to load items.
* @param {Function} renderCallback The callback to render the results.
* @return {Object} jQuery promise
*/
var loadAndRender = function(root, loadCallback, renderCallback) {
var userId = getUserId(root);
startLoading(root);
return loadCallback(root, userId)
.then(function(items) {
if (items.length > 0) {
var contentContainer = getContentContainer(root);
return renderCallback(contentContainer, items, userId)
.then(function() {
return items;
});
} else {
return items;
}
})
.then(function(items) {
stopLoading(root);
root.attr('data-seen', true);
if (!items.length) {
setLoadedAll(root, true);
}
return items;
})
.catch(function() {
stopLoading(root);
root.attr('data-seen', true);
return;
});
};
/**
* First load of this section.
*
* @param {Object} root The section container element.
* @param {Function} loadCallback The callback to load items.
* @param {Function} renderCallback The callback to render the results.
* @return {Object} promise
*/
var initialLoadAndRender = function(root, loadCallback, renderCallback) {
getContentContainer(root).empty();
showPlaceholder(root);
hideContent(root);
return loadAndRender(root, loadCallback, renderCallback)
.then(function(items) {
hidePlaceholder(root);
if (!items.length) {
showEmptyMessage(root);
} else {
showContent(root);
}
return;
})
.catch(function() {
hidePlaceholder(root);
showContent(root);
return;
});
};
/**
* Listen to, and handle events in this section.
*
* @param {Object} root The section container element.
* @param {Function} loadCallback The callback to load items.
* @param {Function} renderCallback The callback to render the results.
*/
var registerEventListeners = function(root, loadCallback, renderCallback) {
CustomEvents.define(root, [
CustomEvents.events.scrollBottom
]);
root.on(CustomEvents.events.scrollBottom, function() {
if (canLoadMore(root)) {
showLoadingIcon(root);
loadAndRender(root, loadCallback, renderCallback)
.then(function() {
return hideLoadingIcon(root);
})
.catch(function() {
return hideLoadingIcon(root);
});
}
});
};
/**
* Setup the section.
*
* @param {Object} root The section container element.
* @param {Function} loadCallback The callback to load items.
* @param {Function} renderCallback The callback to render the results.
*/
var show = function(root, loadCallback, renderCallback) {
root = $(root);
if (!root.attr('data-init')) {
registerEventListeners(root, loadCallback, renderCallback);
initialLoadAndRender(root, loadCallback, renderCallback);
root.attr('data-init', true);
}
};
return {
show: show,
getContentContainer: getContentContainer,
getRoot: getRoot,
setLoadedAll: setLoadedAll,
showEmptyMessage: showEmptyMessage,
hideEmptyMessage: hideEmptyMessage,
showContent: showContent,
hideContent: hideContent
};
});