Ticket #24046: 24046.15.diff

wp-admin/css/colors-classic.css

@@ -164 +164 @@
         color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -688 +689 @@
         background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
 }
 
+.post-format-options,
 .postbox h3 {
         color: #174f69;
 }

wp-admin/css/colors-fresh.css

@@ -164 +164 @@
         color: #fff;
 }
 
+.post-format-options,
 .widget .widget-top,
 .postbox h3,
 .stuffbox h3,
@@ -690 +691 @@
         background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
 }
 
+.post-format-options,
 .postbox h3 {
         color: #464646;
 }

wp-admin/css/wp-admin.css

@@ -4000 +4000 @@
 }
 
 .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 +4104 @@
 }
 
 .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 +4148 @@
         margin-top: 4px;
 }
 
-.post-format-change, .post-format-set .post-format-options {
+.post-format-set .post-format-options {
         display: none;
 }
 
@@ -4136 +4157 @@
 }
 
 #poststuff .post-format-change {
-        margin: 11px 0 13px;
+        margin: -7px 0 13px 2px;
         padding: 0;
         font-size: 1.5em;
         line-height: 18px;
@@ -4150 +4171 @@
         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;
 }
 

wp-admin/edit-form-advanced.php

@@ -136 +136 @@
         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 +422 @@
 <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">

wp-admin/includes/post-formats.php

@@ -10 +10 @@
 
 ?>
 <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 +143 @@
                         </div>
                 </div>
         </div>
-</div>
- No newline at end of file
+</div>

wp-admin/js/post-formats.js

@@ +1 @@
+/*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;
-
-                content = $('#content, #content_ifr');
+                var height, 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 ( format === postFormats.currentPostFormat ) {
+                        return;
+                }
 
-                if ( typeof container === 'undefined' )
-                        container = $('#post-body-content');
+                elem.addClass( 'active' ).siblings().removeClass( 'active' );
 
-                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);
+                // 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 );
+                }
 
-                if ( -1 < $.inArray( format, noUIFormats ) ) {
-                        switchFormatClass( format ); // No slide
-                        $container.hide();
-                } else {
-                        $container.slideUp( 200, function(){
+                // 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 );
+                        });
+                } else { // Both have UI. Slide both ways.
+                        console.log( 'both' );
+                        fields.slideUp( 200, function(){
                                 switchFormatClass( format );
-                                $container.slideDown( 400 );
+                                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' );
 
-                // Update description line
-                description.html($this.data('description'));
+                        postTitle.keydown( function (e) {
+                                titlePrompt.addClass( 'screen-reader-text' );
+                                $( e.currentTarget ).unbind( e );
+                        } );
+                }
 
-                if (description.not(':visible'))
-                        description.slideDown('fast');
+                // Update description line
+                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 ( typeof tinymce != 'undefined' ) {
-                        editor = tinymce.get('content');
+                if ( tinymce ) {
+                        editor = tinymce.get( 'content' );
 
                         if ( editor ) {
                                 body = editor.getBody();
@@ -94 +137 @@
 
                 // 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();
+
+                        var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
 
-                        mime = $holder.data('format');
+                        $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 +187 @@
 
                         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 ) );