1/**
  2 * @output wp-includes/js/customize-views.js
  3 */
  4
  5(function( $, wp, _ ) {
  6
  7	if ( ! wp || ! wp.customize ) { return; }
  8	var api = wp.customize;
  9
 10	/**
 11	 * wp.customize.HeaderTool.CurrentView
 12	 *
 13	 * Displays the currently selected header image, or a placeholder in lack
 14	 * thereof.
 15	 *
 16	 * Instantiate with model wp.customize.HeaderTool.currentHeader.
 17	 *
 18	 * @memberOf wp.customize.HeaderTool
 19	 * @alias wp.customize.HeaderTool.CurrentView
 20	 *
 21	 * @constructor
 22	 * @augments wp.Backbone.View
 23	 */
 24	api.HeaderTool.CurrentView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CurrentView.prototype */{
 25		template: wp.template('header-current'),
 26
 27		initialize: function() {
 28			this.listenTo(this.model, 'change', this.render);
 29			this.render();
 30		},
 31
 32		render: function() {
 33			this.$el.html(this.template(this.model.toJSON()));
 34			this.setButtons();
 35			return this;
 36		},
 37
 38		setButtons: function() {
 39			var elements = $('#customize-control-header_image .actions .remove');
 40			var addButton = $('#customize-control-header_image .actions .new');
 41
 42			if (this.model.get('choice')) {
 43				elements.show();
 44				addButton.removeClass('upload-button');
 45			} else {
 46				elements.hide();
 47				addButton.addClass('upload-button');
 48			}
 49		}
 50	});
 51
 52
 53	/**
 54	 * wp.customize.HeaderTool.ChoiceView
 55	 *
 56	 * Represents a choosable header image, be it user-uploaded,
 57	 * theme-suggested or a special Randomize choice.
 58	 *
 59	 * Takes a wp.customize.HeaderTool.ImageModel.
 60	 *
 61	 * Manually changes model wp.customize.HeaderTool.currentHeader via the
 62	 * `select` method.
 63	 *
 64	 * @memberOf wp.customize.HeaderTool
 65	 * @alias wp.customize.HeaderTool.ChoiceView
 66	 *
 67	 * @constructor
 68	 * @augments wp.Backbone.View
 69	 */
 70	api.HeaderTool.ChoiceView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceView.prototype */{
 71		template: wp.template('header-choice'),
 72
 73		className: 'header-view',
 74
 75		events: {
 76			'click .choice,.random': 'select',
 77			'click .close': 'removeImage'
 78		},
 79
 80		initialize: function() {
 81			var properties = [
 82				this.model.get('header').url,
 83				this.model.get('choice')
 84			];
 85
 86			this.listenTo(this.model, 'change:selected', this.toggleSelected);
 87
 88			if (_.contains(properties, api.get().header_image)) {
 89				api.HeaderTool.currentHeader.set(this.extendedModel());
 90			}
 91		},
 92
 93		render: function() {
 94			this.$el.html(this.template(this.extendedModel()));
 95
 96			this.toggleSelected();
 97			return this;
 98		},
 99
100		toggleSelected: function() {
101			this.$el.toggleClass('selected', this.model.get('selected'));
102		},
103
104		extendedModel: function() {
105			var c = this.model.get('collection');
106			return _.extend(this.model.toJSON(), {
107				type: c.type
108			});
109		},
110
111		select: function() {
112			this.preventJump();
113			this.model.save();
114			api.HeaderTool.currentHeader.set(this.extendedModel());
115		},
116
117		preventJump: function() {
118			var container = $('.wp-full-overlay-sidebar-content'),
119				scroll = container.scrollTop();
120
121			_.defer(function() {
122				container.scrollTop(scroll);
123			});
124		},
125
126		removeImage: function(e) {
127			e.stopPropagation();
128			this.model.destroy();
129			this.remove();
130		}
131	});
132
133
134	/**
135	 * wp.customize.HeaderTool.ChoiceListView
136	 *
137	 * A container for ChoiceViews. These choices should be of one same type:
138	 * user-uploaded headers or theme-defined ones.
139	 *
140	 * Takes a wp.customize.HeaderTool.ChoiceList.
141	 *
142	 * @memberOf wp.customize.HeaderTool
143	 * @alias wp.customize.HeaderTool.ChoiceListView
144	 *
145	 * @constructor
146	 * @augments wp.Backbone.View
147	 */
148	api.HeaderTool.ChoiceListView = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.ChoiceListView.prototype */{
149		initialize: function() {
150			this.listenTo(this.collection, 'add', this.addOne);
151			this.listenTo(this.collection, 'remove', this.render);
152			this.listenTo(this.collection, 'sort', this.render);
153			this.listenTo(this.collection, 'change', this.toggleList);
154			this.render();
155		},
156
157		render: function() {
158			this.$el.empty();
159			this.collection.each(this.addOne, this);
160			this.toggleList();
161		},
162
163		addOne: function(choice) {
164			var view;
165			choice.set({ collection: this.collection });
166			view = new api.HeaderTool.ChoiceView({ model: choice });
167			this.$el.append(view.render().el);
168		},
169
170		toggleList: function() {
171			var title = this.$el.parents().prev('.customize-control-title'),
172				randomButton = this.$el.find('.random').parent();
173			if (this.collection.shouldHideTitle()) {
174				title.add(randomButton).hide();
175			} else {
176				title.add(randomButton).show();
177			}
178		}
179	});
180
181
182	/**
183	 * wp.customize.HeaderTool.CombinedList
184	 *
185	 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
186	 * Backbone object, really) and acts as a bus to feed them events.
187	 *
188	 * @memberOf wp.customize.HeaderTool
189	 * @alias wp.customize.HeaderTool.CombinedList
190	 *
191	 * @constructor
192	 * @augments wp.Backbone.View
193	 */
194	api.HeaderTool.CombinedList = wp.Backbone.View.extend(/** @lends wp.customize.HeaderTool.CombinedList.prototype */{
195		initialize: function(collections) {
196			this.collections = collections;
197			this.on('all', this.propagate, this);
198		},
199		propagate: function(event, arg) {
200			_.each(this.collections, function(collection) {
201				collection.trigger(event, arg);
202			});
203		}
204	});
205
206})( jQuery, window.wp, _ );
207