Wordpress/wp-admin/js/post-formats.js
Helen Hou-Sandi 5b3c058bd5 Edit screen UI for post formats: a first run for functionality.
* Adds a very basic tabbed interface for selecting a post format (requires JS).
* Extra fields, which are post meta, are shown/hidden based on the selected format.
* Introduce a helper function for retrieving formats-specific metadata: `get_post_format_meta()`.
* Image selection uses the media modal, although without filtering or from URL support at the moment.

props rachelbaker, wonderboymusic, aaroncampbell, helen. see #19570.


git-svn-id: https://develop.svn.wordpress.org/trunk@23449 602fd350-edb4-49c9-b593-d223f7449a82
2013-02-18 19:11:24 +00:00

64 lines
1.5 KiB
JavaScript

window.wp = window.wp || {};
(function($){
var imageFrame;
// Post formats selection
$('.post-format-select a').on( 'click', function(e){
e.preventDefault();
var $this = $(this),
format = $this.data('wpFormat');
$('.post-format-select a.nav-tab-active').removeClass('nav-tab-active');
$this.addClass('nav-tab-active').blur();
$('#post_format').val(format);
$('#post-body-content').attr('class', 'wp-format-' + format );
});
// Image selection
$('#wp-format-image-select').click( function( event ) {
var $el = $(this),
$holder = $('#wp-format-image-holder'),
$field = $('#wp_format_image');
event.preventDefault();
// If the media frame already exists, reopen it.
if ( imageFrame ) {
imageFrame.open();
return;
}
// Create the media frame.
imageFrame = wp.media.frames.formatImage = wp.media({
// Set the title of the modal.
title: $el.data('choose'),
// Tell the modal to show only images.
library: {
type: 'image'
},
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('update')
}
});
// When an image is selected, run a callback.
imageFrame.on( 'select', function() {
// Grab the selected attachment.
var attachment = imageFrame.state().get('selection').first(),
imageUrl = attachment.get('url');
// set the hidden input's value
$field.attr('value', attachment.id);
// Show the image in the placeholder
$el.html('<img src="' + imageUrl + '" />');
$holder.removeClass('empty');
});
imageFrame.open();
});
})(jQuery);