edx-platform/lms/static/js/edxnotes/views/tab_panel.js

// eslint-disable-next-line no-shadow-restricted-names
(function(define, undefined) {
    'use strict';

    define(['gettext', 'underscore', 'backbone', 'js/edxnotes/views/note_item',
        'common/js/components/views/paging_header', 'common/js/components/views/paging_footer',
        'edx-ui-toolkit/js/utils/html-utils'],
    function(gettext, _, Backbone, NoteItemView, PagingHeaderView, PagingFooterView, HtmlUtils) {
        var TabPanelView = Backbone.View.extend({
            tagName: 'section',
            className: 'tab-panel',
            title: '',
            titleTemplate: HtmlUtils.template('<h2 class="sr"><%- text %></h2>'),
            attributes: {
                tabindex: -1
            },

            initialize: function(options) {
                this.children = [];
                this.options = _.extend({}, options);
                if (this.options.createHeaderFooter) {
                    this.pagingHeaderView = new PagingHeaderView({collection: this.collection});
                    this.pagingFooterView = new PagingFooterView({collection: this.collection, hideWhenOnePage: true});
                }
                if (this.hasOwnProperty('collection')) {
                    this.listenTo(this.collection, 'page_changed', this.render);
                }
            },

            render: function() {
                HtmlUtils.setHtml(
                    this.$el,
                    this.getTitle()
                );
                this.renderView(this.pagingHeaderView);
                this.renderContent();
                this.renderView(this.pagingFooterView);
                return this;
            },

            renderView: function(view) {
                if (this.options.createHeaderFooter && this.collection.models.length) {
                    this.$el.append(view.render().el);
                    view.delegateEvents();
                }
            },

            renderContent: function() {
                return this;
            },

            getNotes: function(collection) {
                var container = document.createDocumentFragment(),
                    scrollToTag = this.options.scrollToTag,
                    view = this.title,
                    notes = _.map(collection, function(model) {
                        var note = new NoteItemView({model: model, scrollToTag: scrollToTag, view: view});
                        container.appendChild(note.render().el);
                        return note;
                    });

                this.children = this.children.concat(notes);
                return container;
            },

            getTitle: function() {
                return this.title ? this.titleTemplate({text: gettext(this.title)}) : '';
            },

            remove: function() {
                _.invoke(this.children, 'remove');
                this.children = null;
                Backbone.View.prototype.remove.call(this);
                return this;
            }
        });

        return TabPanelView;
    });
}).call(this, define || RequireJS.define);