paging_footer.js 2.11 KB
Newer Older
1
define(["underscore", "js/views/baseview"], function(_, BaseView) {
2

3
    var PagingFooter = BaseView.extend({
4 5 6 7 8 9 10 11 12 13
        events : {
            "click .next-page-link": "nextPage",
            "click .previous-page-link": "previousPage",
            "change .page-number-input": "changePage"
        },

        initialize: function(options) {
            var view = options.view,
                collection = view.collection;
            this.view = view;
14
            this.template = this.loadTemplate('paging-footer');
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
            collection.bind('add', _.bind(this.render, this));
            collection.bind('remove', _.bind(this.render, this));
            collection.bind('reset', _.bind(this.render, this));
            this.render();
        },

        render: function() {
            var view = this.view,
                collection = view.collection,
                currentPage = collection.currentPage,
                lastPage = collection.totalPages - 1;
            this.$el.html(this.template({
                current_page: collection.currentPage,
                total_pages: collection.totalPages
            }));
30 31
            this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
            this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
            return this;
        },

        changePage: function() {
            var view = this.view,
                collection = view.collection,
                currentPage = collection.currentPage + 1,
                pageInput = this.$("#page-number-input"),
                pageNumber = parseInt(pageInput.val(), 10);
            if (pageNumber && pageNumber !== currentPage) {
                view.setPage(pageNumber - 1);
            }
            pageInput.val(""); // Clear the value as the label will show beneath it
        },

        nextPage: function() {
            this.view.nextPage();
        },

        previousPage: function() {
            this.view.previousPage();
        }
    });

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