* @output wp-includes/js/customize-views.js
if ( ! wp || ! wp.customize ) { return; }
* wp.customize.HeaderTool.CurrentView
* Displays the currently selected header image, or a placeholder in lack
* Instantiate with model wp.customize.HeaderTool.currentHeader.
* @memberOf wp.customize.HeaderTool
* @alias wp.customize.HeaderTool.CurrentView
* @augments wp.Backbone.View
api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
template: wp.template('header-current'),
this.listenTo(this.model, 'change', this.render);
this.$el.html(this.template(this.model.toJSON()));
var elements = $('#customize-control-header_image .actions .remove');
if (this.model.get('choice')) {
* 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
* @memberOf wp.customize.HeaderTool
* @alias wp.customize.HeaderTool.ChoiceView
* @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',
'click .choice,.random': 'select',
'click .close': 'removeImage'
this.model.get('header').url,
this.listenTo(this.model, 'change:selected', this.toggleSelected);
if (_.contains(properties, api.get().header_image)) {
api.HeaderTool.currentHeader.set(this.extendedModel());
this.$el.html(this.template(this.extendedModel()));
toggleSelected: function() {
this.$el.toggleClass('selected', this.model.get('selected'));
extendedModel: function() {
var c = this.model.get('collection');
return _.extend(this.model.toJSON(), {
api.HeaderTool.currentHeader.set(this.extendedModel());
preventJump: function() {
var container = $('.wp-full-overlay-sidebar-content'),
scroll = container.scrollTop();
container.scrollTop(scroll);
removeImage: function(e) {
* 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
* @augments wp.Backbone.View
api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
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.collection.each(this.addOne, this);
addOne: function(choice) {
choice.set({ collection: this.collection });
view = new api.HeaderTool.ChoiceView({ model: choice });
this.$el.append(view.render().el);
var title = this.$el.parents().prev('.customize-control-title'),
randomButton = this.$el.find('.random').parent();
if (this.collection.shouldHideTitle()) {
title.add(randomButton).hide();
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
* @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, _ );