1 (function( $, wp, _ ) {
3 if ( ! wp || ! wp.customize ) { return; }
4 var api = wp.customize;
7 * wp.customize.HeaderTool.CurrentView
9 * Displays the currently selected header image, or a placeholder in lack
12 * Instantiate with model wp.customize.HeaderTool.currentHeader.
15 * @augments wp.Backbone.View
17 api.HeaderTool.CurrentView = wp.Backbone.View.extend({
18 template: wp.template('header-current'),
20 initialize: function() {
21 this.listenTo(this.model, 'change', this.render);
26 this.$el.html(this.template(this.model.toJSON()));
27 this.setPlaceholder();
32 getHeight: function() {
33 var image = this.$el.find('img'),
34 saved, height, headerImageData;
37 this.$el.find('.inner').hide();
39 this.$el.find('.inner').show();
43 saved = this.model.get('savedHeight');
44 height = image.height() || saved;
48 headerImageData = api.get().header_image_data;
50 if (headerImageData && headerImageData.width && headerImageData.height) {
51 // hardcoded container width
52 height = 260 / headerImageData.width * headerImageData.height;
55 // fallback for when no image is set
63 setPlaceholder: function(_height) {
64 var height = _height || this.getHeight();
65 this.model.set('savedHeight', height);
66 this.$el.height(height);
69 setButtons: function() {
70 var elements = $('#customize-control-header_image .actions .remove');
71 if (this.model.get('choice')) {
81 * wp.customize.HeaderTool.ChoiceView
83 * Represents a choosable header image, be it user-uploaded,
84 * theme-suggested or a special Randomize choice.
86 * Takes a wp.customize.HeaderTool.ImageModel.
88 * Manually changes model wp.customize.HeaderTool.currentHeader via the
92 * @augments wp.Backbone.View
94 api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
95 template: wp.template('header-choice'),
97 className: 'header-view',
100 'click .choice,.random': 'select',
101 'click .close': 'removeImage'
104 initialize: function() {
106 this.model.get('header').url,
107 this.model.get('choice')
110 this.listenTo(this.model, 'change:selected', this.toggleSelected);
112 if (_.contains(properties, api.get().header_image)) {
113 api.HeaderTool.currentHeader.set(this.extendedModel());
118 this.$el.html(this.template(this.extendedModel()));
120 this.toggleSelected();
124 toggleSelected: function() {
125 this.$el.toggleClass('selected', this.model.get('selected'));
128 extendedModel: function() {
129 var c = this.model.get('collection');
130 return _.extend(this.model.toJSON(), {
135 getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
137 setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
142 api.HeaderTool.currentHeader.set(this.extendedModel());
145 preventJump: function() {
146 var container = $('.wp-full-overlay-sidebar-content'),
147 scroll = container.scrollTop();
150 container.scrollTop(scroll);
154 removeImage: function(e) {
156 this.model.destroy();
163 * wp.customize.HeaderTool.ChoiceListView
165 * A container for ChoiceViews. These choices should be of one same type:
166 * user-uploaded headers or theme-defined ones.
168 * Takes a wp.customize.HeaderTool.ChoiceList.
171 * @augments wp.Backbone.View
173 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
174 initialize: function() {
175 this.listenTo(this.collection, 'add', this.addOne);
176 this.listenTo(this.collection, 'remove', this.render);
177 this.listenTo(this.collection, 'sort', this.render);
178 this.listenTo(this.collection, 'change', this.toggleList);
184 this.collection.each(this.addOne, this);
188 addOne: function(choice) {
190 choice.set({ collection: this.collection });
191 view = new api.HeaderTool.ChoiceView({ model: choice });
192 this.$el.append(view.render().el);
195 toggleList: function() {
196 var title = this.$el.parents().prev('.customize-control-title'),
197 randomButton = this.$el.find('.random').parent();
198 if (this.collection.shouldHideTitle()) {
199 title.add(randomButton).hide();
201 title.add(randomButton).show();
208 * wp.customize.HeaderTool.CombinedList
210 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
211 * Backbone object, really) and acts as a bus to feed them events.
214 * @augments wp.Backbone.View
216 api.HeaderTool.CombinedList = wp.Backbone.View.extend({
217 initialize: function(collections) {
218 this.collections = collections;
219 this.on('all', this.propagate, this);
221 propagate: function(event, arg) {
222 _.each(this.collections, function(collection) {
223 collection.trigger(event, arg);
228 })( jQuery, window.wp, _ );