moodle/lib/amd/src/paged_content_factory.js

// 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/>.

/**
 * Factory to create a paged content widget.
 *
 * @module     core/paged_content_factory
 * @copyright  2018 Ryan Wyllie <ryan@moodle.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
define(
[
    'jquery',
    'core/templates',
    'core/notification',
    'core/paged_content',
    'core/paged_content_events',
    'core/pubsub',
    'core/ajax'
],
function(
    $,
    Templates,
    Notification,
    PagedContent,
    PagedContentEvents,
    PubSub,
    Ajax
) {
    var TEMPLATES = {
        PAGED_CONTENT: 'core/paged_content'
    };

    var DEFAULT = {
        ITEMS_PER_PAGE_SINGLE: 25,
        ITEMS_PER_PAGE_ARRAY: [25, 50, 100, 0],
        MAX_PAGES: 3
    };

    /**
     * Get the default context to render the paged content mustache
     * template.
     *
     * @return {object}
     */
    var getDefaultTemplateContext = function() {
        return {
            pagingbar: false,
            pagingdropdown: false,
            skipjs: true,
            ignorecontrolwhileloading: true,
            controlplacementbottom: false
        };
    };

    /**
     * Get the default context to render the paging bar mustache template.
     *
     * @return {object}
     */
    var getDefaultPagingBarTemplateContext = function() {
        return {
            showitemsperpageselector: false,
            itemsperpage: [{value: 35, active: true}],
            previous: true,
            next: true,
            activepagenumber: 1,
            hidecontrolonsinglepage: true,
            pages: []
        };
    };

    /**
     * Calculate the number of pages required for the given number of items and
     * how many of each item should appear on a page.
     *
     * @param  {Number} numberOfItems How many items in total.
     * @param  {Number} itemsPerPage  How many items will be shown per page.
     * @return {Number} The number of pages required.
     */
    var calculateNumberOfPages = function(numberOfItems, itemsPerPage) {
        var numberOfPages = 1;

        if (numberOfItems > 0) {
            var partial = numberOfItems % itemsPerPage;

            if (partial) {
                numberOfItems -= partial;
                numberOfPages = (numberOfItems / itemsPerPage) + 1;
            } else {
                numberOfPages = numberOfItems / itemsPerPage;
            }
        }

        return numberOfPages;
    };

    /**
     * Build the context for the paging bar template when we have a known number
     * of items.
     *
     * @param {Number} numberOfItems How many items in total.
     * @param {Number} itemsPerPage  How many items will be shown per page.
     * @return {object} Mustache template
     */
    var buildPagingBarTemplateContextKnownLength = function(numberOfItems, itemsPerPage) {
        if (itemsPerPage === null) {
            itemsPerPage = DEFAULT.ITEMS_PER_PAGE_SINGLE;
        }

        if ($.isArray(itemsPerPage)) {
            // If we're given a total number of pages then we don't support a variable
            // set of items per page so just use the first one.
            itemsPerPage = itemsPerPage[0];
        }

        var context = getDefaultPagingBarTemplateContext();
        context.itemsperpage = buildItemsPerPagePagingBarContext(itemsPerPage);
        var numberOfPages = calculateNumberOfPages(numberOfItems, itemsPerPage);

        for (var i = 1; i <= numberOfPages; i++) {
            var page = {
                number: i,
                page: "" + i,
            };

            // Make the first page active by default.
            if (i === 1) {
                page.active = true;
            }

            context.pages.push(page);
        }

        context.barsize = 10;
        return context;
    };

    /**
     * Convert the itemsPerPage value into a format applicable for the mustache template.
     * The given value can be either a single integer or an array of integers / objects.
     *
     * E.g.
     * In: [5, 10]
     * out: [{value: 5, active: true}, {value: 10, active: false}]
     *
     * In: [5, {value: 10, active: true}]
     * Out: [{value: 5, active: false}, {value: 10, active: true}]
     *
     * In: [{value: 5, active: false}, {value: 10, active: true}]
     * Out: [{value: 5, active: false}, {value: 10, active: true}]
     *
     * @param {int|int[]} itemsPerPage Options for number of items per page.
     * @return {int|array}
     */
    var buildItemsPerPagePagingBarContext = function(itemsPerPage) {
        var context = [];

        if ($.isArray(itemsPerPage)) {
            // Convert the array into a format accepted by the template.
            context = itemsPerPage.map(function(num) {
                if (typeof num === 'number') {
                    // If the item is just a plain number then convert it into
                    // an object with value and active keys.
                    return {
                        value: num,
                        active: false
                    };
                } else {
                    // Otherwise we assume the caller has specified things correctly.
                    return num;
                }
            });

            var activeItems = context.filter(function(item) {
                return item.active;
            });

            // Default the first item to active if one hasn't been specified.
            if (!activeItems.length) {
                context[0].active = true;
            }
        } else {
            // Convert the integer into a format accepted by the template.
            context = [{value: itemsPerPage, active: true}];
        }

        return context;
    };

    /**
     * Build the context for the paging bar template when we have an unknown
     * number of items.
     *
     * @param {Number} itemsPerPage  How many items will be shown per page.
     * @return {object} Mustache template
     */
    var buildPagingBarTemplateContextUnknownLength = function(itemsPerPage) {
        if (itemsPerPage === null) {
            itemsPerPage = DEFAULT.ITEMS_PER_PAGE_ARRAY;
        }

        var context = getDefaultPagingBarTemplateContext();
        context.itemsperpage = buildItemsPerPagePagingBarContext(itemsPerPage);
        // Only display the items per page selector if there is more than one to choose from.
        context.showitemsperpageselector = $.isArray(itemsPerPage) && itemsPerPage.length > 1;

        return context;
    };

    /**
     * Build the context to render the paging bar template with based on the number
     * of pages to show.
     *
     * @param  {int|null} numberOfItems How many items are there total.
     * @param  {int|null} itemsPerPage  How many items will be shown per page.
     * @return {object} The template context.
     */
    var buildPagingBarTemplateContext = function(numberOfItems, itemsPerPage) {
        if (numberOfItems) {
            return buildPagingBarTemplateContextKnownLength(numberOfItems, itemsPerPage);
        } else {
            return buildPagingBarTemplateContextUnknownLength(itemsPerPage);
        }
    };

    /**
     * Build the context to render the paging dropdown template based on the number
     * of pages to show and items per page.
     *
     * This control is rendered with a gradual increase of the items per page to
     * limit the number of pages in the dropdown. Each page will show twice as much
     * as the previous page (except for the first two pages).
     *
     * By default there will only be 4 pages shown (including the "All" option) unless
     * a different number of pages is defined using the maxPages config value.
     *
     * For example:
     * Items per page = 25
     * Would render a dropdown will 4 options:
     * 25
     * 50
     * 100
     * All
     *
     * @param  {Number} itemsPerPage  How many items will be shown per page.
     * @param  {object} config  Configuration options provided by the client.
     * @return {object} The template context.
     */
    var buildPagingDropdownTemplateContext = function(itemsPerPage, config) {
        if (itemsPerPage === null) {
            itemsPerPage = DEFAULT.ITEMS_PER_PAGE_SINGLE;
        }

        if ($.isArray(itemsPerPage)) {
            // If we're given an array for the items per page, rather than a number,
            // then just use that as the options for the dropdown.
            return {
                options: itemsPerPage
            };
        }

        var context = {
            options: []
        };

        var totalItems = 0;
        var lastIncrease = 0;
        var maxPages = DEFAULT.MAX_PAGES;

        if (config.hasOwnProperty('maxPages')) {
            maxPages = config.maxPages;
        }

        for (var i = 1; i <= maxPages; i++) {
            var itemCount = 0;

            if (i <= 2) {
                itemCount = itemsPerPage;
                lastIncrease = itemsPerPage;
            } else {
                lastIncrease = lastIncrease * 2;
                itemCount = lastIncrease;
            }

            totalItems += itemCount;
            var option = {
                itemcount: itemCount,
                content: totalItems
            };

            // Make the first option active by default.
            if (i === 1) {
                option.active = true;
            }

            context.options.push(option);
        }

        return context;
    };

    /**
     * Build the context to render the paged content template with based on the number
     * of pages to show, items per page, and configuration option.
     *
     * By default the code will render a paging bar for the paging controls unless
     * otherwise specified in the provided config.
     *
     * @param  {int|null} numberOfItems Total number of items.
     * @param  {int|null|array} itemsPerPage  How many items will be shown per page.
     * @param  {object} config  Configuration options provided by the client.
     * @return {object} The template context.
     */
    var buildTemplateContext = function(numberOfItems, itemsPerPage, config) {
        var context = getDefaultTemplateContext();

        if (config.hasOwnProperty('ignoreControlWhileLoading')) {
            context.ignorecontrolwhileloading = config.ignoreControlWhileLoading;
        }

        if (config.hasOwnProperty('controlPlacementBottom')) {
            context.controlplacementbottom = config.controlPlacementBottom;
        }

        if (config.hasOwnProperty('hideControlOnSinglePage')) {
            context.hidecontrolonsinglepage = config.hideControlOnSinglePage;
        }

        if (config.hasOwnProperty('ariaLabels')) {
            context.arialabels = config.ariaLabels;
        }

        if (config.hasOwnProperty('dropdown') && config.dropdown) {
            context.pagingdropdown = buildPagingDropdownTemplateContext(itemsPerPage, config);
        } else {
            context.pagingbar = buildPagingBarTemplateContext(numberOfItems, itemsPerPage);
            if (config.hasOwnProperty('showFirstLast') && config.showFirstLast) {
                context.pagingbar.first = true;
                context.pagingbar.last = true;
            }
        }

        return context;
    };

    /**
     * Create a paged content widget where the complete list of items is not loaded
     * up front but will instead be loaded by an ajax request (or similar).
     *
     * The client code must provide a callback function which loads and renders the
     * items for each page. See PagedContent.init for more details.
     *
     * The function will return a deferred that is resolved with a jQuery object
     * for the HTML content and a string for the JavaScript.
     *
     * The current list of configuration options available are:
     *      dropdown {bool} True to render the page control as a dropdown (paging bar is default).
     *      maxPages {Number} The maximum number of pages to show in the dropdown (only works with dropdown option)
     *      ignoreControlWhileLoading {bool} Disable the pagination controls while loading a page (default to true)
     *      controlPlacementBottom {bool} Render controls under paged content (default to false)
     *
     * @param  {function} renderPagesContentCallback  Callback for loading and rendering the items.
     * @param  {object} config  Configuration options provided by the client.
     * @return {promise} Resolved with jQuery HTML and string JS.
     */
    var create = function(renderPagesContentCallback, config) {
        return createWithTotalAndLimit(null, null, renderPagesContentCallback, config);
    };

    /**
     * Create a paged content widget where the complete list of items is not loaded
     * up front but will instead be loaded by an ajax request (or similar).
     *
     * The client code must provide a callback function which loads and renders the
     * items for each page. See PagedContent.init for more details.
     *
     * The function will return a deferred that is resolved with a jQuery object
     * for the HTML content and a string for the JavaScript.
     *
     * The current list of configuration options available are:
     *      dropdown {bool} True to render the page control as a dropdown (paging bar is default).
     *      maxPages {Number} The maximum number of pages to show in the dropdown (only works with dropdown option)
     *      ignoreControlWhileLoading {bool} Disable the pagination controls while loading a page (default to true)
     *      controlPlacementBottom {bool} Render controls under paged content (default to false)
     *
     * @param  {int|array|null} itemsPerPage  How many items will be shown per page.
     * @param  {function} renderPagesContentCallback  Callback for loading and rendering the items.
     * @param  {object} config  Configuration options provided by the client.
     * @return {promise} Resolved with jQuery HTML and string JS.
     */
    var createWithLimit = function(itemsPerPage, renderPagesContentCallback, config) {
        return createWithTotalAndLimit(null, itemsPerPage, renderPagesContentCallback, config);
    };

    /**
     * Create a paged content widget where the complete list of items is not loaded
     * up front but will instead be loaded by an ajax request (or similar).
     *
     * The client code must provide a callback function which loads and renders the
     * items for each page. See PagedContent.init for more details.
     *
     * The function will return a deferred that is resolved with a jQuery object
     * for the HTML content and a string for the JavaScript.
     *
     * The current list of configuration options available are:
     *      dropdown {bool} True to render the page control as a dropdown (paging bar is default).
     *      maxPages {Number} The maximum number of pages to show in the dropdown (only works with dropdown option)
     *      ignoreControlWhileLoading {bool} Disable the pagination controls while loading a page (default to true)
     *      controlPlacementBottom {bool} Render controls under paged content (default to false)
     *
     * @param  {int|null} numberOfItems How many items are there in total.
     * @param  {int|array|null} itemsPerPage  How many items will be shown per page.
     * @param  {function} renderPagesContentCallback  Callback for loading and rendering the items.
     * @param  {object} config  Configuration options provided by the client.
     * @return {promise} Resolved with jQuery HTML and string JS.
     */
    var createWithTotalAndLimit = function(numberOfItems, itemsPerPage, renderPagesContentCallback, config) {
        config = config || {};

        var deferred = $.Deferred();
        var templateContext = buildTemplateContext(numberOfItems, itemsPerPage, config);

        Templates.render(TEMPLATES.PAGED_CONTENT, templateContext)
            .then(function(html, js) {
                html = $(html);
                var id = html.attr('id');

                // Set the id to the custom namespace provided
                if (config.hasOwnProperty('eventNamespace')) {
                    id = config.eventNamespace;
                }

                var container = html;

                PagedContent.init(container, renderPagesContentCallback, id);

                registerEvents(id, config);

                deferred.resolve(html, js);
                return;
            })
            .fail(function(exception) {
                deferred.reject(exception);
            })
            .fail(Notification.exception);

        return deferred.promise();
    };

    /**
     * Create a paged content widget where the complete list of items is loaded
     * up front.
     *
     * The client code must provide a callback function which renders the
     * items for each page. The callback will be provided with an array where each
     * value in the array is a the list of items to render for the page.
     *
     * The function will return a deferred that is resolved with a jQuery object
     * for the HTML content and a string for the JavaScript.
     *
     * The current list of configuration options available are:
     *      dropdown {bool} True to render the page control as a dropdown (paging bar is default).
     *      maxPages {Number} The maximum number of pages to show in the dropdown (only works with dropdown option)
     *      ignoreControlWhileLoading {bool} Disable the pagination controls while loading a page (default to true)
     *      controlPlacementBottom {bool} Render controls under paged content (default to false)
     *
     * @param  {array} contentItems The list of items to paginate.
     * @param  {Number} itemsPerPage  How many items will be shown per page.
     * @param  {function} renderContentCallback  Callback for rendering the items for the page.
     * @param  {object} config  Configuration options provided by the client.
     * @return {promise} Resolved with jQuery HTML and string JS.
     */
    var createFromStaticList = function(contentItems, itemsPerPage, renderContentCallback, config) {
        if (typeof config == 'undefined') {
            config = {};
        }

        var numberOfItems = contentItems.length;
        return createWithTotalAndLimit(numberOfItems, itemsPerPage, function(pagesData) {
            var contentToRender = [];
            pagesData.forEach(function(pageData) {
                var begin = pageData.offset;
                var end = pageData.limit ? begin + pageData.limit : numberOfItems;
                var items = contentItems.slice(begin, end);
                contentToRender.push(items);
            });

            return renderContentCallback(contentToRender);
        }, config);
    };

    /**
     * Reset the last page number for the generated paged-content
     * This is used when we need a way to update the last page number outside of the getters callback
     *
     * @param {String} id ID of the paged content container
     * @param {Int} lastPageNumber The last page number
     */
    var resetLastPageNumber = function(id, lastPageNumber) {
        PubSub.publish(id + PagedContentEvents.ALL_ITEMS_LOADED, lastPageNumber);
    };

    /**
     * Generate the callback handler for the page limit persistence functionality
     *
     * @param {String} persistentLimitKey
     * @return {callback}
     */
    var generateLimitHandler = function(persistentLimitKey) {
        var callback = function(limit) {
            var args = {
                preferences: [
                    {
                        type: persistentLimitKey,
                        value: limit
                    }
                ]
            };

            var request = {
                methodname: 'core_user_update_user_preferences',
                args: args
            };

            Ajax.call([request]);
        };

        return callback;
    };

    /**
     * Set up any events based on config key values
     *
     * @param {string} namespace The namespace for this component
     * @param {object} config Config options passed to the factory
     */
    var registerEvents = function(namespace, config) {
        if (config.hasOwnProperty('persistentLimitKey')) {
            PubSub.subscribe(namespace + PagedContentEvents.SET_ITEMS_PER_PAGE_LIMIT,
                generateLimitHandler(config.persistentLimitKey));
        }
    };

    return {
        create: create,
        createWithLimit: createWithLimit,
        createWithTotalAndLimit: createWithTotalAndLimit,
        createFromStaticList: createFromStaticList,
        // Backwards compatibility just in case anyone was using this.
        createFromAjax: createWithTotalAndLimit,
        resetLastPageNumber: resetLastPageNumber
    };
});