paged_container.js

define(["jquery", "underscore", "common/js/components/utils/view_utils", "js/views/container", "js/utils/module", "gettext",
        "common/js/components/views/feedback_notification", "js/views/paging_header", "common/js/components/views/paging_footer"],
    function ($, _, ViewUtils, ContainerView, ModuleUtils, gettext, NotificationView, PagingHeader, PagingFooter) {
        var PagedContainerView = ContainerView.extend({

            initialize: function(options) {
                var self = this;
                ContainerView.prototype.initialize.call(this);
                this.page_size = this.options.page_size;
                // Reference to the page model
                this.page = options.page;
                // XBlocks are rendered via Django views and templates rather than underscore templates, and so don't
                // have a Backbone model for us to manipulate in a backbone collection. Here, we emulate the interface
                // of backbone.paginator so that we can use the Paging Header and Footer with this page. As a
                // consequence, however, we have to manipulate its members manually.
                this.collection = {
                    currentPage: 0,
                    totalPages: 0,
                    totalCount: 0,
                    sortDirection: "desc",
                    start: 0,
                    _size: 0,
                    // Paging header and footer expect this to be a Backbone model they can listen to for changes, but
                    // they cannot. Provide the bind function for them, but have it do nothing.
                    bind: function() {},
                    // size() on backbone collections shows how many objects are in the collection, or in the case
                    // of paginator, on the current page.
                    size: function() { return self.collection._size; },
                    // Toggles the functionality for showing and hiding child previews.
                    showChildrenPreviews: true,

                    // PagingFooter expects to be able to control paging through the collection instead of the view,
                    // so we just make these functions act as pass-throughs
                    setPage: function (page) {
                        self.setPage(page - 1);
                    },

                    nextPage: function () {
                        self.nextPage();
                    },

                    previousPage: function() {
                        self.previousPage();
                    },

                    getPage: function () {
                        return self.collection.currentPage + 1;
                    },

                    hasPreviousPage: function () {
                        return self.collection.currentPage > 0;
                    },

                    hasNextPage: function () {
                        return self.collection.currentPage < self.collection.totalPages - 1;
                    },

                    getTotalPages: function () {
                        return this.totalPages;
                    },

                    getPageNumber: function () {
                        return this.getPage();
                    },

                    getTotalRecords: function () {
                        return this.totalCount;
                    },

                    getPageSize: function () {
                        return self.page_size;
                    }
                };
            },

            new_child_view: 'container_child_preview',

            render: function(options) {
                options = options || {};
                options.page_number = typeof options.page_number !== "undefined"
                    ? options.page_number
                    : this.collection.currentPage;
                return this.renderPage(options);
            },

            renderPage: function(options) {
                var self = this,
                    view = this.view,
                    xblockInfo = this.model,
                    xblockUrl = xblockInfo.url();

                return $.ajax({
                    url: decodeURIComponent(xblockUrl) + "/" + view,
                    type: 'GET',
                    cache: false,
                    data: this.getRenderParameters(options.page_number, options.force_render),
                    headers: { Accept: 'application/json' },
                    success: function(fragment) {
                        self.handleXBlockFragment(fragment, options);
                        self.processPaging({ requested_page: options.page_number });
                        self.page.updatePreviewButton(self.collection.showChildrenPreviews);
                        self.page.renderAddXBlockComponents();
                        if (options.force_render) {
                            var target = $('.studio-xblock-wrapper[data-locator="' + options.force_render + '"]');
                            // Scroll us to the element with a little buffer at the top for context.
                            ViewUtils.setScrollOffset(target, ($(window).height() * .10));
                        }
                    }
                });
            },

            getRenderParameters: function(page_number, force_render) {
                // Options should at least contain page_number.
                return {
                    page_size: this.page_size,
                    enable_paging: true,
                    page_number: page_number,
                    force_render: force_render
                };
            },

            getPageCount: function(total_count) {
                if (total_count === 0) {
                    return 1;
                }
                return Math.ceil(total_count / this.page_size);
            },

            setPage: function(page_number, additional_options) {
                additional_options = additional_options || {};
                var options = _.extend({page_number: page_number}, additional_options);
                this.render(options);
            },

            nextPage: function() {
                var collection = this.collection,
                    currentPage = collection.currentPage,
                    lastPage = collection.totalPages - 1;
                if (currentPage < lastPage) {
                    this.setPage(currentPage + 1);
                }
            },

            previousPage: function() {
                var collection = this.collection,
                    currentPage = collection.currentPage;
                if (currentPage > 0) {
                    this.setPage(currentPage - 1);
                }
            },

            processPaging: function(options){
                // We have the Django template sneak us the pagination information,
                // and we load it from a div here.
                var $element = this.$el.find('.xblock-container-paging-parameters'),
                    total = $element.data('total'),
                    displayed = $element.data('displayed'),
                    start = $element.data('start'),
                    previews = $element.data('previews');

                this.collection.currentPage = options.requested_page;
                this.collection.totalCount = total;
                this.collection.totalPages = this.getPageCount(total);
                this.collection.start = start;
                this.collection._size = displayed;
                this.collection.showChildrenPreviews = previews;

                this.processPagingHeaderAndFooter();
            },

            processPagingHeaderAndFooter: function(){
                // Rendering the container view detaches the header and footer from the DOM.
                // It's just as easy to recreate them as it is to try to shove them back into the tree.
                if (this.pagingHeader)
                    this.pagingHeader.undelegateEvents();
                if (this.pagingFooter)
                    this.pagingFooter.undelegateEvents();

                this.pagingHeader = new PagingHeader({
                    view: this,
                    el: this.$el.find('.container-paging-header')
                });
                this.pagingFooter = new PagingFooter({
                    collection: this.collection,
                    el: this.$el.find('.container-paging-footer')
                });

                this.pagingHeader.render();
                this.pagingFooter.render();
            },

            refresh: function(xblockView, block_added, is_duplicate) {
                if (!block_added) {
                    return
                }
                if (is_duplicate) {
                    // Duplicated blocks can be inserted onto the current page.
                    var xblock = xblockView.xblock.element.parents(".studio-xblock-wrapper").first();
                    var all_xblocks = xblock.parent().children(".studio-xblock-wrapper");
                    var index = all_xblocks.index(xblock);
                    if ((index + 1 <= this.page_size) && (all_xblocks.length > this.page_size)) {
                        // Pop the last XBlock off the bottom.
                        all_xblocks[all_xblocks.length - 1].remove();
                        return
                    }
                }
                this.collection.totalCount += 1;
                this.collection._size +=1;
                if (this.collection.totalCount == 1) {
                    this.render();
                    return
                }
                this.collection.totalPages = this.getPageCount(this.collection.totalCount);
                var target_page = this.collection.totalPages - 1;
                // If we're on a new page due to overflow, or this is the first item, set the page.
                if (((this.collection.currentPage) != target_page) || this.collection.totalCount == 1) {
                    var force_render = xblockView.model.id;
                    if (is_duplicate) {
                        // The duplicate should be on the next page if we've gotten here.
                        target_page = this.collection.currentPage + 1;
                    }
                    this.setPage(
                        target_page,
                        {force_render: force_render}
                    );

                } else {
                    this.pagingHeader.render();
                    this.pagingFooter.render();
                }
            },

            acknowledgeXBlockDeletion: function (locator){
                this.notifyRuntime('deleted-child', locator);
                this.collection._size -= 1;
                this.collection.totalCount -= 1;
                var current_page = this.collection.currentPage;
                var total_pages = this.getPageCount(this.collection.totalCount);
                this.collection.totalPages = total_pages;
                // Starts counting from 0
                if ((current_page + 1) > total_pages) {
                    // The number of total pages has changed. Move down.
                    // Also, be mindful of the off-by-one.
                    this.setPage(total_pages - 1)
                } else if ((current_page + 1) != total_pages) {
                    // Refresh page to get any blocks shifted from the next page.
                    this.setPage(current_page)
                } else {
                    // We're on the last page, just need to update the numbers in the
                    // pagination interface.
                    this.pagingHeader.render();
                    this.pagingFooter.render();
                }
            },

            sortDisplayName: function() {
                return gettext("Date added");  // TODO add support for sorting
            },

            togglePreviews: function(){
                var self = this,
                    xblockUrl = this.model.url();
                return $.ajax({
                    // No runtime, so can't get this via the handler() call.
                    url: '/preview' + decodeURIComponent(xblockUrl) + "/handler/trigger_previews",
                    type: 'POST',
                    data: JSON.stringify({ showChildrenPreviews: !this.collection.showChildrenPreviews}),
                    dataType: 'json'
                })
                .then(self.render).promise();
            }
        });

        return PagedContainerView;
    }); // end define();