mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-18 19:52:56 +02:00
props rzen, ehg. fixes #27848. Built from https://develop.svn.wordpress.org/trunk@28266 git-svn-id: http://core.svn.wordpress.org/trunk@28094 1a063a9b-81f0-0310-95a4-ce76da25c4cd
232 lines
5.3 KiB
JavaScript
232 lines
5.3 KiB
JavaScript
(function( $, wp, _ ) {
|
|
|
|
if ( ! wp || ! wp.customize ) { return; }
|
|
var api = wp.customize;
|
|
|
|
|
|
/**
|
|
* wp.customize.HeaderTool.CurrentView
|
|
*
|
|
* Displays the currently selected header image, or a placeholder in lack
|
|
* thereof.
|
|
*
|
|
* Instantiate with model wp.customize.HeaderTool.currentHeader.
|
|
*
|
|
* @constructor
|
|
* @augments wp.Backbone.View
|
|
*/
|
|
api.HeaderTool.CurrentView = wp.Backbone.View.extend({
|
|
template: wp.template('header-current'),
|
|
|
|
initialize: function() {
|
|
this.listenTo(this.model, 'change', this.render);
|
|
this.render();
|
|
},
|
|
|
|
render: function() {
|
|
this.$el.html(this.template(this.model.toJSON()));
|
|
this.setPlaceholder();
|
|
this.setButtons();
|
|
return this;
|
|
},
|
|
|
|
getHeight: function() {
|
|
var image = this.$el.find('img'),
|
|
saved, height, headerImageData;
|
|
|
|
if (image.length) {
|
|
this.$el.find('.inner').hide();
|
|
} else {
|
|
this.$el.find('.inner').show();
|
|
return 40;
|
|
}
|
|
|
|
saved = this.model.get('savedHeight');
|
|
height = image.height() || saved;
|
|
|
|
// happens at ready
|
|
if (!height) {
|
|
headerImageData = api.get().header_image_data;
|
|
|
|
if (headerImageData && headerImageData.width && headerImageData.height) {
|
|
// hardcoded container width
|
|
height = 260 / headerImageData.width * headerImageData.height;
|
|
}
|
|
else {
|
|
// fallback for when no image is set
|
|
height = 40;
|
|
}
|
|
}
|
|
|
|
return height;
|
|
},
|
|
|
|
setPlaceholder: function(_height) {
|
|
var height = _height || this.getHeight();
|
|
this.model.set('savedHeight', height);
|
|
this.$el
|
|
.add(this.$el.find('.placeholder'))
|
|
.height(height);
|
|
},
|
|
|
|
setButtons: function() {
|
|
var elements = $('#customize-control-header_image .actions .remove');
|
|
if (this.model.get('choice')) {
|
|
elements.show();
|
|
} else {
|
|
elements.hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* 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
|
|
* `select` method.
|
|
*
|
|
* @constructor
|
|
* @augments wp.Backbone.View
|
|
*/
|
|
api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
|
|
template: wp.template('header-choice'),
|
|
|
|
className: 'header-view',
|
|
|
|
events: {
|
|
'click .choice,.random': 'select',
|
|
'click .close': 'removeImage'
|
|
},
|
|
|
|
initialize: function() {
|
|
var properties = [
|
|
this.model.get('header').url,
|
|
this.model.get('choice')
|
|
];
|
|
|
|
this.listenTo(this.model, 'change:selected', this.toggleSelected);
|
|
|
|
if (_.contains(properties, api.get().header_image)) {
|
|
api.HeaderTool.currentHeader.set(this.extendedModel());
|
|
}
|
|
},
|
|
|
|
render: function() {
|
|
this.$el.html(this.template(this.extendedModel()));
|
|
|
|
this.toggleSelected();
|
|
return this;
|
|
},
|
|
|
|
toggleSelected: function() {
|
|
this.$el.toggleClass('selected', this.model.get('selected'));
|
|
},
|
|
|
|
extendedModel: function() {
|
|
var c = this.model.get('collection');
|
|
return _.extend(this.model.toJSON(), {
|
|
type: c.type
|
|
});
|
|
},
|
|
|
|
getHeight: api.HeaderTool.CurrentView.prototype.getHeight,
|
|
|
|
setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,
|
|
|
|
select: function() {
|
|
this.preventJump();
|
|
this.model.save();
|
|
api.HeaderTool.currentHeader.set(this.extendedModel());
|
|
},
|
|
|
|
preventJump: function() {
|
|
var container = $('.wp-full-overlay-sidebar-content'),
|
|
scroll = container.scrollTop();
|
|
|
|
_.defer(function() {
|
|
container.scrollTop(scroll);
|
|
});
|
|
},
|
|
|
|
removeImage: function(e) {
|
|
e.stopPropagation();
|
|
this.model.destroy();
|
|
this.remove();
|
|
}
|
|
});
|
|
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* @constructor
|
|
* @augments wp.Backbone.View
|
|
*/
|
|
api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
|
|
initialize: function() {
|
|
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.render();
|
|
},
|
|
|
|
render: function() {
|
|
this.$el.empty();
|
|
this.collection.each(this.addOne, this);
|
|
this.toggleList();
|
|
},
|
|
|
|
addOne: function(choice) {
|
|
var view;
|
|
choice.set({ collection: this.collection });
|
|
view = new api.HeaderTool.ChoiceView({ model: choice });
|
|
this.$el.append(view.render().el);
|
|
},
|
|
|
|
toggleList: function() {
|
|
var title = this.$el.parents().prev('.customize-control-title'),
|
|
randomButton = this.$el.find('.random').parent();
|
|
if (this.collection.shouldHideTitle()) {
|
|
title.add(randomButton).hide();
|
|
} else {
|
|
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.
|
|
*
|
|
* @constructor
|
|
* @augments wp.Backbone.View
|
|
*/
|
|
api.HeaderTool.CombinedList = wp.Backbone.View.extend({
|
|
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, _ );
|