HTML Examples/WP.iso/wordpress/wp-includes/js/customize-views.js

JavaScript | 2017-09-08 | 4.9 KB | 199 lines

(function( $, wp, _ ) {

    if ( ! wp || ! wp.customize ) { return; }
    var api = wp.customize;

    /**
     * wp.customize.HeaderTool.CurrentView
     *
     * Displays the currently selected header image, or a placeholder in lack
     * thereof.
     *
     * Instantiate with model wp.customize.HeaderTool.currentHeader.
     *
     * @memberOf wp.customize.HeaderTool
     * @alias wp.customize.HeaderTool.CurrentView
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
        template: wp.template('header-current'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.render();
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.setButtons();
            return this;
        },

        setButtons: function() {
            var elements = $('#customize-control-header_image .actions .remove');
            if (this.model.get('choice')) {
                elements.show();
            } else {
                elements.hide();
            }
        }
    });


    /**
     * wp.customize.HeaderTool.ChoiceView
     *
     * Represents a choosable header image, be it user-uploaded,
     * theme-suggested or a special Randomize choice.
     *
     * Takes a wp.customize.HeaderTool.ImageModel.
     *
     * Manually changes model wp.customize.HeaderTool.currentHeader via the
     * `select` method.
     *
     * @memberOf wp.customize.HeaderTool
     * @alias wp.customize.HeaderTool.ChoiceView
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{
        template: wp.template('header-choice'),

        className: 'header-view',

        events: {
            'click .choice,.random': 'select',
            'click .close': 'removeImage'
        },

        initialize: function() {
            var properties = [
                this.model.get('header').url,
                this.model.get('choice')
            ];

            this.listenTo(this.model, 'change:selected', this.toggleSelected);

            if (_.contains(properties, api.get().header_image)) {
                api.HeaderTool.currentHeader.set(this.extendedModel());
            }
        },

        render: function() {
            this.$el.html(this.template(this.extendedModel()));

            this.toggleSelected();
            return this;
        },

        toggleSelected: function() {
            this.$el.toggleClass('selected', this.model.get('selected'));
        },

        extendedModel: function() {
            var c = this.model.get('collection');
            return _.extend(this.model.toJSON(), {
                type: c.type
            });
        },

        select: function() {
            this.preventJump();
            this.model.save();
            api.HeaderTool.currentHeader.set(this.extendedModel());
        },

        preventJump: function() {
            var container = $('.wp-full-overlay-sidebar-content'),
                scroll = container.scrollTop();

            _.defer(function() {
                container.scrollTop(scroll);
            });
        },

        removeImage: function(e) {
            e.stopPropagation();
            this.model.destroy();
            this.remove();
        }
    });


    /**
     * wp.customize.HeaderTool.ChoiceListView
     *
     * A container for ChoiceViews. These choices should be of one same type:
     * user-uploaded headers or theme-defined ones.
     *
     * Takes a wp.customize.HeaderTool.ChoiceList.
     *
     * @memberOf wp.customize.HeaderTool
     * @alias wp.customize.HeaderTool.ChoiceListView
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
        initialize: function() {
            this.listenTo(this.collection, 'add', this.addOne);
            this.listenTo(this.collection, 'remove', this.render);
            this.listenTo(this.collection, 'sort', this.render);
            this.listenTo(this.collection, 'change', this.toggleList);
            this.render();
        },

        render: function() {
            this.$el.empty();
            this.collection.each(this.addOne, this);
            this.toggleList();
        },

        addOne: function(choice) {
            var view;
            choice.set({ collection: this.collection });
            view = new api.HeaderTool.ChoiceView({ model: choice });
            this.$el.append(view.render().el);
        },

        toggleList: function() {
            var title = this.$el.parents().prev('.customize-control-title'),
                randomButton = this.$el.find('.random').parent();
            if (this.collection.shouldHideTitle()) {
                title.add(randomButton).hide();
            } else {
                title.add(randomButton).show();
            }
        }
    });


    /**
     * wp.customize.HeaderTool.CombinedList
     *
     * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
     * Backbone object, really) and acts as a bus to feed them events.
     *
     * @memberOf wp.customize.HeaderTool
     * @alias wp.customize.HeaderTool.CombinedList
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{
        initialize: function(collections) {
            this.collections = collections;
            this.on('all', this.propagate, this);
        },
        propagate: function(event, arg) {
            _.each(this.collections, function(collection) {
                collection.trigger(event, arg);
            });
        }
    });

})( jQuery, window.wp, _ );