Use jQuery.on() properly. Add some slideUp()/slideDown() transitions to ease post format switches. see #19570

git-svn-id: https://develop.svn.wordpress.org/trunk@23853 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mark Jaquith 2013-03-29 07:06:21 +00:00
parent 50b9f427b5
commit cb6e2622e0
2 changed files with 12 additions and 6 deletions

View File

@ -4,7 +4,7 @@ $format_meta = get_post_format_meta( $post_ID );
?>
<div class="post-format-description"></div>
<div class="post-formats-fields edit-form-section">
<div class="post-formats-fields">
<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />

View File

@ -3,8 +3,10 @@ window.wp = window.wp || {};
(function($) {
var mediaFrame, lastMimeType, lastMenu, mediaPreview;
$(function(){
var $container = $( '.post-formats-fields' );
// Post formats selection
$('.post-format-options a').on( 'click', function(e){
$('.post-format-options').on( 'click', 'a', function(e){
var $this = $(this), editor, body,
parent = $this.parent(),
format = $this.data('wp-format'),
@ -16,8 +18,12 @@ window.wp = window.wp || {};
$('#icon-edit').removeClass(postFormats.currentPostFormat).addClass(format);
$('#post_format').val(format);
container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
container.addClass('wp-format-' + format);
$container.slideUp( 200, function(){
container.get(0).className = container.get(0).className.replace( /\bwp-format-[^ ]+/, '' );
container.addClass('wp-format-' + format);
$container.slideDown( 400 );
});
$('#title').focus();
// Update description line
@ -39,9 +45,9 @@ window.wp = window.wp || {};
postFormats.currentPostFormat = format;
e.preventDefault();
}).on('mouseenter focusin', function () {
}).on('mouseenter focusin', 'a', function () {
$('.post-format-tip').html( $(this).prop('title') );
}).on('mouseleave focusout', function () {
}).on('mouseleave focusout', 'a', function () {
$('.post-format-tip').html( $('.post-format-options a.active').prop('title') );
});