1 (function( $, wp, _ ) {
3 if ( ! wp || ! wp.customize ) { return; }
4 var api = wp.customize;
8 * wp.customize.HeaderTool.CurrentView
10 * Displays the currently selected header image, or a placeholder in lack
13 * Instantiate with model wp.customize.HeaderTool.currentHeader.
16 * @augments wp.Backbone.View
18 api.HeaderTool.CurrentView = wp.Backbone.View.extend({
19 template: wp.template('header-current'),
21 initialize: function() {
22 this.listenTo(this.model, 'change', this.render);
27 this.$el.html(this.template(this.model.toJSON()));
28 this.setPlaceholder();
33 getHeight: function() {
34 var image = this.$el.find('img'),
35 saved, height, headerImageData;
38 this.$el.find('.inner').hide();
40 this.$el.find('.inner').show();
44 saved = this.model.get('savedHeight');
45 height = image.height() || saved;
49 headerImageData = api.get().header_image_data;
51 if (headerImageData && headerImageData.width && headerImageData.height) {
52 // hardcoded container width
53 height = 260 / headerImageData.width * headerImageData.height;
56 // fallback for when no image is set
64 setPlaceholder: function(_height) {
65 var height = _height || this.getHeight();
66 this.model.set('savedHeight', height);
68 .add(this.$el.find('.placeholder'))
72 setButtons: function() {
73 var elements = $('.actions .remove');
74 if (this.model.get('choice')) {
84 * wp.customize.HeaderTool.ChoiceView
86 * Represents a choosable header image, be it user-uploaded,
87 * theme-suggested or a special Randomize choice.
89 * Takes a wp.customize.HeaderTool.ImageModel.
91 * Manually changes model wp.customize.HeaderTool.currentHeader via the
95 * @augments wp.Backbone.View
97 api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
98 template: wp.template('header-choice'),
100 className: 'header-view',
103 'click .choice,.random': 'select',
104 'click .close': 'removeImage'
107 initialize: function() {
109 this.model.get('header').url,
110 this.model.get('choice')
113 this.listenTo(this.model, 'change:selected', this.toggleSelected);
115 if (_.contains(properties, api.get().header_image)) {
116 api.HeaderTool.currentHeader.set(this.extendedModel());
121 this.$el.html(this.template(this.extendedModel()));
123 this.toggleSelected();
127 toggleSelected: function() {
128 this.$el.toggleClass('selected', this.model.get('selected'));
131 extendedModel: function() {
132 var c = this.model.get('collection');
133 return _.extend(this.model.toJSON(), {
138 getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
140 setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
145 api.HeaderTool.currentHeader.set(this.extendedModel());
148 preventJump: function() {
149 var container = $('.wp-full-overlay-sidebar-content'),
150 scroll = container.scrollTop();
153 container.scrollTop(scroll);
157 removeImage: function(e) {
159 this.model.destroy();
166 * wp.customize.HeaderTool.ChoiceListView
168 * A container for ChoiceViews. These choices should be of one same type:
169 * user-uploaded headers or theme-defined ones.
171 * Takes a wp.customize.HeaderTool.ChoiceList.
174 * @augments wp.Backbone.View
176 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
177 initialize: function() {
178 this.listenTo(this.collection, 'add', this.addOne);
179 this.listenTo(this.collection, 'remove', this.render);
180 this.listenTo(this.collection, 'sort', this.render);
181 this.listenTo(this.collection, 'change', this.toggleList);
187 this.collection.each(this.addOne, this);
191 addOne: function(choice) {
193 choice.set({ collection: this.collection });
194 view = new api.HeaderTool.ChoiceView({ model: choice });
195 this.$el.append(view.render().el);
198 toggleList: function() {
199 var title = this.$el.parents().prev('.customize-control-title'),
200 randomButton = this.$el.find('.random').parent();
201 if (this.collection.shouldHideTitle()) {
202 title.add(randomButton).hide();
204 title.add(randomButton).show();
211 * wp.customize.HeaderTool.CombinedList
213 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
214 * Backbone object, really) and acts as a bus to feed them events.
217 * @augments wp.Backbone.View
219 api.HeaderTool.CombinedList = wp.Backbone.View.extend({
220 initialize: function(collections) {
221 this.collections = collections;
222 this.on('all', this.propagate, this);
224 propagate: function(event, arg) {
225 _.each(this.collections, function(collection) {
226 collection.trigger(event, arg);
231 })( jQuery, window.wp, _ );