Post format UI refresh.

* Post format switcher does not go away after clicking
* Refresh of format switcher style
* Highlighting of active post format
* Prompt text goes under the switcher
* Better animations

see #24046. props wonderboymusic, johnjamesjacoby, aaroncampbell, PeteMall.

Also, because I forgot it on [24006]: props saracannon.

git-svn-id: https://develop.svn.wordpress.org/trunk@24098 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mark Jaquith 2013-04-26 12:22:55 +00:00
parent be43193b61
commit 438f4085f1
6 changed files with 198 additions and 126 deletions

View File

@ -164,6 +164,7 @@ textarea.disabled {
color: #fff;
}
.post-format-options,
.widget .widget-top,
.postbox h3,
.stuffbox h3,
@ -688,6 +689,7 @@ table.widefat span.spam a,
background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
}
.post-format-options,
.postbox h3 {
color: #174f69;
}

View File

@ -164,6 +164,7 @@ textarea.disabled {
color: #fff;
}
.post-format-options,
.widget .widget-top,
.postbox h3,
.stuffbox h3,
@ -690,6 +691,7 @@ table.widefat span.spam a,
background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
}
.post-format-options,
.postbox h3 {
color: #464646;
}

View File

@ -4000,6 +4000,9 @@ body .ui-tooltip {
}
.wp-format-status #titlewrap,
.wp-format-image .wp-media-buttons .insert-media,
.wp-format-audio .wp-media-buttons .insert-media,
.wp-format-video .wp-media-buttons .insert-media,
.wp-format-aside .wp-media-buttons .insert-media,
.wp-format-status .wp-media-buttons .insert-media {
display: none;
@ -4101,18 +4104,36 @@ body .ui-tooltip {
}
.post-format-options {
height: 50px;
border-width: 1px;
border-style: solid;
-webkit-border-radius: 3px;
border-radius: 3px;
border-color: #CCC;
margin: 13px 0 10px;
padding: 0;
padding: 5px;
}
.post-format-options a {
display: inline-block;
height: 34px;
margin-right: 33px;
min-width: 62px;
padding:5px;
border:1px solid transparent;
margin-right: 10px;
position: relative;
text-decoration: none;
text-align: center;
transition: opacity 0.1s linear;
opacity: 0.6;
}
.post-format-options:hover a {
opacity: 1.0;
}
.post-format-options a:hover,
.post-format-options a.active {
opacity: 1.0;
background-color: #fff;
border-color: #ccc;
}
.post-format-options a div {
@ -4127,7 +4148,7 @@ body .ui-tooltip {
margin-top: 4px;
}
.post-format-change, .post-format-set .post-format-options {
.post-format-set .post-format-options {
display: none;
}
@ -4136,7 +4157,7 @@ body .ui-tooltip {
}
#poststuff .post-format-change {
margin: 11px 0 13px;
margin: -7px 0 13px 2px;
padding: 0;
font-size: 1.5em;
line-height: 18px;
@ -4150,43 +4171,43 @@ body .ui-tooltip {
width: 16px;
}
.post-format-change span.icon.standard {
.post-format-change span.icon.wp-format-standard {
background: url(../images/post-formats.png) no-repeat -8px -8px;
}
.post-format-change span.icon.image {
.post-format-change span.icon.wp-format-image {
background: url(../images/post-formats.png) no-repeat -40px -8px;
}
.post-format-change span.icon.gallery {
.post-format-change span.icon.wp-format-gallery {
background: url(../images/post-formats.png) no-repeat -72px -8px;
}
.post-format-change span.icon.audio {
.post-format-change span.icon.wp-format-audio {
background: url(../images/post-formats.png) no-repeat -104px -8px;
}
.post-format-change span.icon.video {
.post-format-change span.icon.wp-format-video {
background: url(../images/post-formats.png) no-repeat -136px -8px;
}
.post-format-change span.icon.chat {
.post-format-change span.icon.wp-format-chat {
background: url(../images/post-formats.png) no-repeat -168px -8px;
}
.post-format-change span.icon.status {
.post-format-change span.icon.wp-format-status {
background: url(../images/post-formats.png) no-repeat -200px -8px;
}
.post-format-change span.icon.aside {
.post-format-change span.icon.wp-format-aside {
background: url(../images/post-formats.png) no-repeat -232px -8px;
}
.post-format-change span.icon.quote {
.post-format-change span.icon.wp-format-quote {
background: url(../images/post-formats.png) no-repeat -264px -8px;
}
.post-format-change span.icon.link {
.post-format-change span.icon.wp-format-link {
background: url(../images/post-formats.png) no-repeat -296px -8px;
}

View File

@ -136,15 +136,12 @@ if ( post_type_supports( $post_type, 'post-formats' ) && apply_filters( 'enable_
wp_enqueue_script( 'wp-mediaelement' );
wp_enqueue_style( 'wp-mediaelement' );
$post_format = get_post_format();
$post_format_set_class = 'post-format-set';
if ( ! $post_format ) {
$post_format = 'standard';
if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
$post_format = $_REQUEST['format'];
elseif ( 'auto-draft' == $post->post_status )
$post_format_set_class = '';
}
$user_wants = get_user_option( 'post_formats_' . $post_type );
@ -425,6 +422,9 @@ wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
<div id="poststuff">
<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
<div id="post-body-content"<?php echo $format_class; ?>>
<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
<div class="post-format-change"><span class="icon <?php echo esc_attr( 'wp-format-' . $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span></div>
</div>
<?php if ( post_type_supports($post_type, 'title') ) { ?>
<div id="titlediv">
<div id="titlewrap">

View File

@ -10,7 +10,6 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
?>
<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
<div class="post-format-change"><span class="icon <?php echo esc_attr( $post_format ); ?>"></span> <span class="post-format-description"><?php echo $all_post_formats[$post_format]['description']; ?></span> <a href="#"><?php _e('Change format'); ?></a></div>
<div class="post-formats-fields">
<input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
@ -144,4 +143,4 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
</div>
</div>
</div>
</div>
</div>

View File

@ -1,89 +1,132 @@
/*globals window, $, jQuery, document, _, postFormats, tinymce, ajaxurl, wp, getUserSetting */
window.wp = window.wp || {};
(function($) {
var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
(function ($) {
"use strict";
var mediaFrame, insertMediaButton, container, icon, formatField,
lastMimeType,
classRegex = /\s?\bwp-format-[^ ]+/g,
shortHeight = 120,
lastHeight = 360,
initialFormat = 'standard',
shortClass = 'short-format',
noTitleFormats = ['status'],
noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
shortContentFormats = ['status', 'aside'],
noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
$screenIcon = $( '.icon32' );
noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
function switchFormatClass( format ) {
container.get(0).className = container.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
container.addClass('wp-format-' + format);
$screenIcon.get(0).className = $screenIcon.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
$screenIcon.addClass('wp-format-' + format);
formatField.val( format );
container
.prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
.addClass( 'wp-format-' + format );
icon
.prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
.addClass( 'wp-format-' + format );
}
function resizeContent( format, noAnimate ) {
var height;
var height, content = $( '#content, #content_ifr' );
content = $('#content, #content_ifr');
height = content.height();
if ( 120 < height ) {
height = content.outerHeight();
if ( shortHeight < height ) {
lastHeight = height;
}
if ( -1 < $.inArray( format, shortContentFormats ) ) {
if ( ! content.hasClass(shortClass) ) {
content.addClass(shortClass);
if ( noAnimate ) {
content.each(function () {
$(this).css({ height : 120 });
});
} else {
content.each(function () {
$(this).animate({ height : 120 });
});
}
if ( ! content.hasClass( shortClass ) ) {
content.addClass( shortClass );
_(content).each(function (elem) {
$(elem)[noAnimate ? 'css' : 'animate']( { height : shortHeight } );
});
}
} else {
content.removeClass(shortClass).animate({ height : lastHeight });
content.removeClass( shortClass ).animate( { height : lastHeight } );
}
}
function switchFormat($this) {
var editor, body,
parent = $this.parent(),
format = $this.data('wp-format'),
description = $('.post-format-description'),
postTitle = $('#title');
function switchFormat(elem) {
var editor, body, formatTo, formatFrom,
format = elem.data( 'wp-format' ),
titlePrompt = $( '#title-prompt-text' ),
description = $( '.post-format-description' ),
postTitle = $( '#title'),
fields = $( '.post-formats-fields' ),
tinyIcon = $( '.post-format-change span.icon' );
if ( typeof container === 'undefined' )
container = $('#post-body-content');
if ( format === postFormats.currentPostFormat ) {
return;
}
parent.slideUp().find('a.active').removeClass('active');
$this.addClass('active');
$('#post_format').val(format);
$('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
elem.addClass( 'active' ).siblings().removeClass( 'active' );
if ( -1 < $.inArray( format, noUIFormats ) ) {
switchFormatClass( format ); // No slide
$container.hide();
} else {
$container.slideUp( 200, function(){
// Animate the media button going away or coming back
formatTo = -1 < $.inArray( format, noMediaFormats );
formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noMediaFormats );
if ( formatFrom ? !formatTo : formatTo ) { // XOR
insertMediaButton.fadeToggle( 200 ).css( 'display', 'inline-block' );
}
// Animate the title going away or coming back
formatTo = -1 < $.inArray( format, noTitleFormats );
formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noTitleFormats );
if ( formatFrom ? !formatTo : formatTo ) { // XOR
$( '#titlewrap' ).fadeToggle( 200 );
}
// Animate the fields moving going away or coming in
formatTo = -1 < $.inArray( format, noUIFormats );
formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noUIFormats );
if ( formatTo && formatFrom ) { // To/from have no UI. No slide.
console.log( 'both no UI' );
switchFormatClass( format );
fields.hide();
} else if ( formatFrom ) { // Only destination has UI. Slide down.
console.log( 'destination only' );
fields.hide();
switchFormatClass( format );
fields.slideDown( 400 );
} else if ( formatTo ) { // Only source has UI. Slide up.
console.log( 'source only' );
fields.slideUp( 200, function(){
switchFormatClass( format );
$container.slideDown( 400 );
});
} else { // Both have UI. Slide both ways.
console.log( 'both' );
fields.slideUp( 200, function(){
switchFormatClass( format );
fields.slideDown( 400 );
});
}
resizeContent( format );
postTitle.focus();
if ( '' === postTitle.val() )
$('#title-prompt-text').removeClass('screen-reader-text');
if ( '' === postTitle.val() ) {
titlePrompt.removeClass( 'screen-reader-text' );
postTitle.keydown( function (e) {
titlePrompt.addClass( 'screen-reader-text' );
$( e.currentTarget ).unbind( e );
} );
}
// Update description line
description.html($this.data('description'));
description.html( elem.data( 'description' ) );
tinyIcon
.show()
.prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
.addClass( 'wp-format-' + format );
if (description.not(':visible'))
description.slideDown('fast');
if ( description.not( ':visible' ) ) {
description.slideDown( 'fast' );
}
if ( typeof tinymce != 'undefined' ) {
editor = tinymce.get('content');
if ( tinymce ) {
editor = tinymce.get( 'content' );
if ( editor ) {
body = editor.getBody();
@ -94,51 +137,45 @@ window.wp = window.wp || {};
// If gallery, force it to open to gallery state
insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
postFormats.currentPostFormat = format;
}
$(function() {
$(function () {
container = $( '#post-body-content' );
icon = $( '.icon32' );
formatField = $( '#post_format' );
insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
$container = $( '.post-formats-fields' );
initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
resizeContent( initialFormat, true );
}
$('#show_post_format_ui').on('change', function() {
$('.wp-post-format-ui').toggleClass('no-ui', ! this.checked );
$( '#show_post_format_ui' ).on( 'change', function () {
$( '.wp-post-format-ui' ).toggleClass( 'no-ui', ! this.checked );
$.post( ajaxurl, {
action: 'show-post-format-ui',
post_type: $('#post_type').val(),
post_type: $( '#post_type' ).val(),
show: this.checked ? 1 : 0,
nonce: $('#show_post_format_ui_nonce').val()
});
});
$('.post-format-change a').click(function() {
$('.post-formats-fields, .post-format-change').slideUp();
$('.post-format-options').slideDown();
return false;
});
nonce: $( '#show_post_format_ui_nonce' ).val()
} );
} );
// Post formats selection
$('.post-format-options').on( 'click', 'a', function (e) {
$( '.post-format-options' ).on( 'click', 'a', function (e) {
e.preventDefault();
switchFormat($(this));
});
switchFormat( $( e.currentTarget ) );
} );
// Media selection
$('.wp-format-media-select').click(function(event) {
event.preventDefault();
var $el = $(this), mime = 'image',
$holder = $el.closest('.wp-format-media-holder'),
$field = $( '#wp_format_' + $holder.data('format') );
$( '.wp-format-media-select' ).click( function (e) {
e.preventDefault();
mime = $holder.data('format');
var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
$holder = $el.closest( '.wp-format-media-holder' );
$field = $( '#wp_format_' + $holder.data( 'format' ) );
mime = $holder.data( 'format' );
// If the media frame already exists, reopen it.
if ( mediaFrame && lastMimeType === mime ) {
@ -150,86 +187,97 @@ window.wp = window.wp || {};
mediaFrame = wp.media.frames.formatMedia = wp.media( {
button: {
text: $el.data('update')
text: $el.data( 'update' )
},
states: [
new wp.media.controller.Library({
library: wp.media.query( { type: mime } ),
title: $el.data('choose'),
title: $el.data( 'choose' ),
displaySettings: 'image' === mime
})
]
} );
mediaPreview = function(attachment) {
mediaPreview = function (attachment) {
var w, h, dimensions = '', url = attachment.url, mime = attachment.mime, format = attachment.type;
if ( 'video' === format ) {
if ( attachment.width ) {
w = attachment.width;
if ( w > 600 )
if ( w > 600 ) {
w = 600;
}
dimensions += ' width="' + w + '"';
}
if ( attachment.height ) {
h = attachment.height;
if ( attachment.width && w < attachment.width )
if ( attachment.width && w < attachment.width ) {
h = Math.round( ( h * w ) / attachment.width );
}
dimensions += ' height="' + h + '"';
}
}
$('#' + format + '-preview').remove();
$( '#' + format + '-preview' ).remove();
$holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
'<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
'<source type="' + mime + '" src="' + url + '" />' +
'</' + format + '></div>' );
$('.wp-' + format + '-shortcode').mediaelementplayer();
$( '.wp-' + format + '-shortcode' ).mediaelementplayer();
};
// When an image is selected, run a callback.
mediaFrame.on( 'select', function() {
mediaFrame.on( 'select', function () {
// Grab the selected attachment.
var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
var w = 0, h = 0, html, attachment = mediaFrame.state().get( 'selection' ).first().toJSON();
if ( 0 === attachment.mime.indexOf('audio') ) {
$field.val(attachment.url);
if ( 0 === attachment.mime.indexOf( 'audio' ) ) {
$field.val( attachment.url );
// show one preview at a time
mediaPreview(attachment);
} else if ( 0 === attachment.mime.indexOf('video') ) {
mediaPreview( attachment );
} else if ( 0 === attachment.mime.indexOf( 'video' ) ) {
attachment.src = attachment.url;
$field.val(wp.shortcode.string({
$field.val( wp.shortcode.string( {
tag: 'video',
attrs: _.pick( attachment, 'src', 'width', 'height' )
}));
} ) );
// show one preview at a time
mediaPreview(attachment);
mediaPreview( attachment );
} else {
html = wp.media.string.image({
align : getUserSetting('align'),
size : getUserSetting('imgsize'),
link : getUserSetting('urlbutton')
align : getUserSetting( 'align' ),
size : getUserSetting( 'imgsize' ),
link : getUserSetting( 'urlbutton' )
}, attachment);
// set the hidden input's value
$field.val(html);
$('#image-preview').remove();
if ( attachment.width )
$field.val( html );
$( '#image-preview' ).remove();
if ( attachment.width ) {
w = attachment.width > 600 ? 600 : attachment.width;
if ( attachment.height )
}
if ( attachment.height ) {
h = attachment.height;
if ( w < attachment.width )
}
if ( w < attachment.width ) {
h = Math.round( ( h * w ) / attachment.width );
}
$holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
'<img src="', attachment.url, '"',
w ? ' width="' + w + '"' : '',
h ? ' height="' + h + '"' : '',
' />',
'</div>'].join('') );
'</div>'].join( '' ) );
}
});
mediaFrame.open();
});
});
})(jQuery);
}( jQuery ) );