You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
6.6 KiB
277 lines
6.6 KiB
/* global _wpCustomizeHeader */ |
|
(function( $, wp ) { |
|
var api = wp.customize; |
|
/** @namespace wp.customize.HeaderTool */ |
|
api.HeaderTool = {}; |
|
|
|
|
|
/** |
|
* wp.customize.HeaderTool.ImageModel |
|
* |
|
* A header image. This is where saves via the Customizer API are |
|
* abstracted away, plus our own AJAX calls to add images to and remove |
|
* images from the user's recently uploaded images setting on the server. |
|
* These calls are made regardless of whether the user actually saves new |
|
* Customizer settings. |
|
* |
|
* @memberOf wp.customize.HeaderTool |
|
* @alias wp.customize.HeaderTool.ImageModel |
|
* |
|
* @constructor |
|
* @augments Backbone.Model |
|
*/ |
|
api.HeaderTool.ImageModel = Backbone.Model.extend(/** @lends wp.customize.HeaderTool.ImageModel.prototype */{ |
|
defaults: function() { |
|
return { |
|
header: { |
|
attachment_id: 0, |
|
url: '', |
|
timestamp: _.now(), |
|
thumbnail_url: '' |
|
}, |
|
choice: '', |
|
selected: false, |
|
random: false |
|
}; |
|
}, |
|
|
|
initialize: function() { |
|
this.on('hide', this.hide, this); |
|
}, |
|
|
|
hide: function() { |
|
this.set('choice', ''); |
|
api('header_image').set('remove-header'); |
|
api('header_image_data').set('remove-header'); |
|
}, |
|
|
|
destroy: function() { |
|
var data = this.get('header'), |
|
curr = api.HeaderTool.currentHeader.get('header').attachment_id; |
|
|
|
// If the image we're removing is also the current header, unset |
|
// the latter |
|
if (curr && data.attachment_id === curr) { |
|
api.HeaderTool.currentHeader.trigger('hide'); |
|
} |
|
|
|
wp.ajax.post( 'custom-header-remove', { |
|
nonce: _wpCustomizeHeader.nonces.remove, |
|
wp_customize: 'on', |
|
theme: api.settings.theme.stylesheet, |
|
attachment_id: data.attachment_id |
|
}); |
|
|
|
this.trigger('destroy', this, this.collection); |
|
}, |
|
|
|
save: function() { |
|
if (this.get('random')) { |
|
api('header_image').set(this.get('header').random); |
|
api('header_image_data').set(this.get('header').random); |
|
} else { |
|
if (this.get('header').defaultName) { |
|
api('header_image').set(this.get('header').url); |
|
api('header_image_data').set(this.get('header').defaultName); |
|
} else { |
|
api('header_image').set(this.get('header').url); |
|
api('header_image_data').set(this.get('header')); |
|
} |
|
} |
|
|
|
api.HeaderTool.combinedList.trigger('control:setImage', this); |
|
}, |
|
|
|
importImage: function() { |
|
var data = this.get('header'); |
|
if (data.attachment_id === undefined) { |
|
return; |
|
} |
|
|
|
wp.ajax.post( 'custom-header-add', { |
|
nonce: _wpCustomizeHeader.nonces.add, |
|
wp_customize: 'on', |
|
theme: api.settings.theme.stylesheet, |
|
attachment_id: data.attachment_id |
|
} ); |
|
}, |
|
|
|
shouldBeCropped: function() { |
|
if (this.get('themeFlexWidth') === true && |
|
this.get('themeFlexHeight') === true) { |
|
return false; |
|
} |
|
|
|
if (this.get('themeFlexWidth') === true && |
|
this.get('themeHeight') === this.get('imageHeight')) { |
|
return false; |
|
} |
|
|
|
if (this.get('themeFlexHeight') === true && |
|
this.get('themeWidth') === this.get('imageWidth')) { |
|
return false; |
|
} |
|
|
|
if (this.get('themeWidth') === this.get('imageWidth') && |
|
this.get('themeHeight') === this.get('imageHeight')) { |
|
return false; |
|
} |
|
|
|
if (this.get('imageWidth') <= this.get('themeWidth')) { |
|
return false; |
|
} |
|
|
|
return true; |
|
} |
|
}); |
|
|
|
|
|
/** |
|
* wp.customize.HeaderTool.ChoiceList |
|
* |
|
* @memberOf wp.customize.HeaderTool |
|
* @alias wp.customize.HeaderTool.ChoiceList |
|
* |
|
* @constructor |
|
* @augments Backbone.Collection |
|
*/ |
|
api.HeaderTool.ChoiceList = Backbone.Collection.extend({ |
|
model: api.HeaderTool.ImageModel, |
|
|
|
// Ordered from most recently used to least |
|
comparator: function(model) { |
|
return -model.get('header').timestamp; |
|
}, |
|
|
|
initialize: function() { |
|
var current = api.HeaderTool.currentHeader.get('choice').replace(/^https?:\/\//, ''), |
|
isRandom = this.isRandomChoice(api.get().header_image); |
|
|
|
// Overridable by an extending class |
|
if (!this.type) { |
|
this.type = 'uploaded'; |
|
} |
|
|
|
// Overridable by an extending class |
|
if (typeof this.data === 'undefined') { |
|
this.data = _wpCustomizeHeader.uploads; |
|
} |
|
|
|
if (isRandom) { |
|
// So that when adding data we don't hide regular images |
|
current = api.get().header_image; |
|
} |
|
|
|
this.on('control:setImage', this.setImage, this); |
|
this.on('control:removeImage', this.removeImage, this); |
|
this.on('add', this.maybeRemoveOldCrop, this); |
|
this.on('add', this.maybeAddRandomChoice, this); |
|
|
|
_.each(this.data, function(elt, index) { |
|
if (!elt.attachment_id) { |
|
elt.defaultName = index; |
|
} |
|
|
|
if (typeof elt.timestamp === 'undefined') { |
|
elt.timestamp = 0; |
|
} |
|
|
|
this.add({ |
|
header: elt, |
|
choice: elt.url.split('/').pop(), |
|
selected: current === elt.url.replace(/^https?:\/\//, '') |
|
}, { silent: true }); |
|
}, this); |
|
|
|
if (this.size() > 0) { |
|
this.addRandomChoice(current); |
|
} |
|
}, |
|
|
|
maybeRemoveOldCrop: function( model ) { |
|
var newID = model.get( 'header' ).attachment_id || false, |
|
oldCrop; |
|
|
|
// Bail early if we don't have a new attachment ID. |
|
if ( ! newID ) { |
|
return; |
|
} |
|
|
|
oldCrop = this.find( function( item ) { |
|
return ( item.cid !== model.cid && item.get( 'header' ).attachment_id === newID ); |
|
} ); |
|
|
|
// If we found an old crop, remove it from the collection. |
|
if ( oldCrop ) { |
|
this.remove( oldCrop ); |
|
} |
|
}, |
|
|
|
maybeAddRandomChoice: function() { |
|
if (this.size() === 1) { |
|
this.addRandomChoice(); |
|
} |
|
}, |
|
|
|
addRandomChoice: function(initialChoice) { |
|
var isRandomSameType = RegExp(this.type).test(initialChoice), |
|
randomChoice = 'random-' + this.type + '-image'; |
|
|
|
this.add({ |
|
header: { |
|
timestamp: 0, |
|
random: randomChoice, |
|
width: 245, |
|
height: 41 |
|
}, |
|
choice: randomChoice, |
|
random: true, |
|
selected: isRandomSameType |
|
}); |
|
}, |
|
|
|
isRandomChoice: function(choice) { |
|
return (/^random-(uploaded|default)-image$/).test(choice); |
|
}, |
|
|
|
shouldHideTitle: function() { |
|
return this.size() < 2; |
|
}, |
|
|
|
setImage: function(model) { |
|
this.each(function(m) { |
|
m.set('selected', false); |
|
}); |
|
|
|
if (model) { |
|
model.set('selected', true); |
|
} |
|
}, |
|
|
|
removeImage: function() { |
|
this.each(function(m) { |
|
m.set('selected', false); |
|
}); |
|
} |
|
}); |
|
|
|
|
|
/** |
|
* wp.customize.HeaderTool.DefaultsList |
|
* |
|
* @memberOf wp.customize.HeaderTool |
|
* @alias wp.customize.HeaderTool.DefaultsList |
|
* |
|
* @constructor |
|
* @augments wp.customize.HeaderTool.ChoiceList |
|
* @augments Backbone.Collection |
|
*/ |
|
api.HeaderTool.DefaultsList = api.HeaderTool.ChoiceList.extend({ |
|
initialize: function() { |
|
this.type = 'default'; |
|
this.data = _wpCustomizeHeader.defaults; |
|
api.HeaderTool.ChoiceList.prototype.initialize.apply(this); |
|
} |
|
}); |
|
|
|
})( jQuery, window.wp );
|
|
|