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);
67 .add(this.$el.find('.placeholder'))
71 setButtons: function() {
72 var elements = $('#customize-control-header_image .actions .remove');
73 if (this.model.get('choice')) {
83 * wp.customize.HeaderTool.ChoiceView
85 * Represents a choosable header image, be it user-uploaded,
86 * theme-suggested or a special Randomize choice.
88 * Takes a wp.customize.HeaderTool.ImageModel.
90 * Manually changes model wp.customize.HeaderTool.currentHeader via the
94 * @augments wp.Backbone.View
96 api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
97 template: wp.template('header-choice'),
99 className: 'header-view',
102 'click .choice,.random': 'select',
103 'click .close': 'removeImage'
106 initialize: function() {
108 this.model.get('header').url,
109 this.model.get('choice')
112 this.listenTo(this.model, 'change:selected', this.toggleSelected);
114 if (_.contains(properties, api.get().header_image)) {
115 api.HeaderTool.currentHeader.set(this.extendedModel());
120 this.$el.html(this.template(this.extendedModel()));
122 this.toggleSelected();
126 toggleSelected: function() {
127 this.$el.toggleClass('selected', this.model.get('selected'));
130 extendedModel: function() {
131 var c = this.model.get('collection');
132 return _.extend(this.model.toJSON(), {
137 getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
139 setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
144 api.HeaderTool.currentHeader.set(this.extendedModel());
147 preventJump: function() {
148 var container = $('.wp-full-overlay-sidebar-content'),
149 scroll = container.scrollTop();
152 container.scrollTop(scroll);
156 removeImage: function(e) {
158 this.model.destroy();
165 * wp.customize.HeaderTool.ChoiceListView
167 * A container for ChoiceViews. These choices should be of one same type:
168 * user-uploaded headers or theme-defined ones.
170 * Takes a wp.customize.HeaderTool.ChoiceList.
173 * @augments wp.Backbone.View
175 api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
176 initialize: function() {
177 this.listenTo(this.collection, 'add', this.addOne);
178 this.listenTo(this.collection, 'remove', this.render);
179 this.listenTo(this.collection, 'sort', this.render);
180 this.listenTo(this.collection, 'change', this.toggleList);
186 this.collection.each(this.addOne, this);
190 addOne: function(choice) {
192 choice.set({ collection: this.collection });
193 view = new api.HeaderTool.ChoiceView({ model: choice });
194 this.$el.append(view.render().el);
197 toggleList: function() {
198 var title = this.$el.parents().prev('.customize-control-title'),
199 randomButton = this.$el.find('.random').parent();
200 if (this.collection.shouldHideTitle()) {
201 title.add(randomButton).hide();
203 title.add(randomButton).show();
210 * wp.customize.HeaderTool.CombinedList
212 * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
213 * Backbone object, really) and acts as a bus to feed them events.
216 * @augments wp.Backbone.View
218 api.HeaderTool.CombinedList = wp.Backbone.View.extend({
219 initialize: function(collections) {
220 this.collections = collections;
221 this.on('all', this.propagate, this);
223 propagate: function(event, arg) {
224 _.each(this.collections, function(collection) {
225 collection.trigger(event, arg);
230 })( jQuery, window.wp, _ );