Publication layout

publication-base.js

define(
    ['marionette', 'model/publication', 'collection/issue/sections'],
    function(Marionette, PublicationModel, SectionCollection)
    {
        var PublicationBaseLayout = Marionette.Layout.extend(
        {
            id: 'publication',

            events: {
                'click nav a': 'navigate'
            },

            initialize: function(options)
            {
                options = options.fetch;
                this.model = App.modelFactory.publication(options.id);
                var promise = this.model.fetch();

                this.regionViewOptions = {
                    model: this.model,
                    context: options,
                    promise: promise
                };
            },

            navigate: function(e)
            {
                e.preventDefault();
                App.router.navigate($(e.currentTarget).attr('href'), true);
            }
        });

        return PublicationBaseLayout;
    }
);

publication-configuration-default-sections-region.js

define(
    ['marionette', 'view/list/item/publication/configuration/default-section', 'hbs!template/detail/publication/configuration/default-sections'],
    function(Marionette, PublicationConfigurationDefaultSectionView, PublicationConfigurationDefaultSectionsTemplate)
    {
        var PublicationConfigurationDefaultSectionsView = Marionette.CompositeView.extend(
        {
            template: PublicationConfigurationDefaultSectionsTemplate,

            itemView: PublicationConfigurationDefaultSectionView,
            itemViewContainer: '.sections',
            itemViewOptions: function()
            {
                return { publication: this.model };
            },

            events: {
                'click button.add-new-section': 'addNewSection'
            },

            onRender: function()
            {
                this.makeSectionsSortable();

                this.collection.on('reset', this.render, this);
                this.collection.on('add remove sort', this.save, this);
            },

            makeSectionsSortable: function()
            {
                var view = this;
                var defaults = App.defaults.sortable;
                var options = $.extend({}, defaults,
                {
                    items: '> .issue-section',
                    handle: '.head',
                    forceHelperSize: false,
                    forcePlaceholderSize: false,
                    appendTo: 'parent',

                    // Content highlight classes
                    activate: function() { view.$el.addClass(defaults.activeClass); },
                    over: function() { view.$el.addClass(defaults.hoverClass); },
                    out: function() { view.$el.removeClass(defaults.hoverClass); },
                    deactivate: function() { view.$el.removeClass(defaults.activeClass + ' ' + defaults.hoverClass); },

                    helper: function(e, element)
                    {
                        return $(element).data('helper').clone();
                    },

                    update: function(e, ui)
                    {
                        var section = ui.item;
                        section.trigger('drop', section.index());
                        view.$(view.itemViewContainer).sortable('refreshPositions');
                    }
                });

                this.$(this.itemViewContainer).sortable(options);
            },

            addNewSection: function()
            {
                this.collection.addNewSection.call(this.collection);
                this.collection.trigger('reset');
            },

            save: function()
            {
                this.model.save.call(this.model);
            }
        });

        return PublicationConfigurationDefaultSectionsView;
    }
);

publication-configuration.js

define(
    [
        'view/detail/publication/base', 'hbs!template/detail/publication/configuration',
        'view/detail/publication/configuration/name-logo', 'view/detail/publication/configuration/default-sections', 'view/detail/publication/configuration/palette'
    ],
    function(
        PublicationBaseLayout, PublicationConfigurationTemplate,
        PublicationConfigurationNameLogoView, PublicationConfigurationDefaultSectionsView, PublicationConfigurationPaletteView
    ){
        var PublicationConfigurationView = PublicationBaseLayout.extend(
        {
            className: 'configuration',
            template: PublicationConfigurationTemplate,

            regions: {
                nameLogo: '[data-region="name-logo"]',
                palette: '[data-region="palette"]',
                defaultSections: '[data-region="default-sections"]'
            },

            onShow: function()
            {
                this.regionViewOptions.promise.done(_.bind(this.renderRegions, this));
                App.panelStates.trigger('change:left change:right');
            },

            renderRegions: function()
            {
                this.nameLogo.show(new PublicationConfigurationNameLogoView(this.regionViewOptions));
                this.palette.show(new PublicationConfigurationPaletteView($.extend({}, this.regionViewOptions, { collection: this.model.get('palette') })));
                this.defaultSections.show(new PublicationConfigurationDefaultSectionsView($.extend({}, this.regionViewOptions, { collection: this.model.get('defaultSections') })));
            }
        });

        return PublicationConfigurationView;
    }
);