WordPress.org
Get WordPress

Make WordPress Core

Changeset 24098


Ignore:
Timestamp:
04/26/2013 12:22:55 PM (12 years ago)
Author:
markjaquith
Message:

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.

Location:
trunk/wp-admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/colors-classic.css

    r24064 r24098  
    165165}
    166166
     167.post-format-options,
    167168.widget .widget-top,
    168169.postbox h3,
    … …  
    689690}
    690691
     692.post-format-options,
    691693.postbox h3 {
    692694    color: #174f69;

  • trunk/wp-admin/css/colors-fresh.css

    r24064 r24098  
    165165}
    166166
     167.post-format-options,
    167168.widget .widget-top,
    168169.postbox h3,
    … …  
    691692}
    692693
     694.post-format-options,
    693695.postbox h3 {
    694696    color: #464646;

  • trunk/wp-admin/css/wp-admin.css

    r24092 r24098  
    40014001
    40024002.wp-format-status #titlewrap,
     4003.wp-format-image .wp-media-buttons .insert-media,
     4004.wp-format-audio .wp-media-buttons .insert-media,
     4005.wp-format-video .wp-media-buttons .insert-media,
    40034006.wp-format-aside .wp-media-buttons .insert-media,
    40044007.wp-format-status .wp-media-buttons .insert-media {
    … …  
    41024105
    41034106.post-format-options {
    4104     height: 50px;
     4107    border-width: 1px;
     4108    border-style: solid;
     4109    -webkit-border-radius: 3px;
     4110    border-radius: 3px;
     4111    border-color: #CCC;
    41054112    margin: 13px 0 10px;
    4106     padding: 0;
     4113    padding: 5px;
    41074114}
    41084115
    41094116.post-format-options a {
    41104117    display: inline-block;
    4111     height: 34px;
    4112     margin-right: 33px;
     4118    min-width: 62px;
     4119    padding:5px;
     4120    border:1px solid transparent;
     4121    margin-right: 10px;
    41134122    position: relative;
    41144123    text-decoration: none;
    41154124    text-align: center;
     4125    transition: opacity 0.1s linear;
     4126    opacity: 0.6;
     4127}
     4128
     4129.post-format-options:hover a {
     4130    opacity: 1.0;
     4131}
     4132.post-format-options a:hover,
     4133.post-format-options a.active {
     4134    opacity: 1.0;
     4135    background-color: #fff;
     4136    border-color: #ccc;
    41164137}
    41174138
    … …  
    41284149}
    41294150
    4130 .post-format-change, .post-format-set .post-format-options {
     4151.post-format-set .post-format-options {
    41314152    display: none;
    41324153}
    … …  
    41374158
    41384159#poststuff .post-format-change {
    4139     margin: 11px 0 13px;
     4160    margin: -7px 0 13px 2px;
    41404161    padding: 0;
    41414162    font-size: 1.5em;
    … …  
    41514172}
    41524173
    4153 .post-format-change span.icon.standard {
     4174.post-format-change span.icon.wp-format-standard {
    41544175    background: url(../images/post-formats.png) no-repeat -8px -8px;
    41554176}
    41564177
    4157 .post-format-change span.icon.image {
     4178.post-format-change span.icon.wp-format-image {
    41584179    background: url(../images/post-formats.png) no-repeat -40px -8px;
    41594180}
    41604181
    4161 .post-format-change span.icon.gallery {
     4182.post-format-change span.icon.wp-format-gallery {
    41624183    background: url(../images/post-formats.png) no-repeat -72px -8px;
    41634184}
    41644185
    4165 .post-format-change span.icon.audio {
     4186.post-format-change span.icon.wp-format-audio {
    41664187    background: url(../images/post-formats.png) no-repeat -104px -8px;
    41674188}
    41684189
    4169 .post-format-change span.icon.video {
     4190.post-format-change span.icon.wp-format-video {
    41704191    background: url(../images/post-formats.png) no-repeat -136px -8px;
    41714192}
    41724193
    4173 .post-format-change span.icon.chat {
     4194.post-format-change span.icon.wp-format-chat {
    41744195    background: url(../images/post-formats.png) no-repeat -168px -8px;
    41754196}
    41764197
    4177 .post-format-change span.icon.status {
     4198.post-format-change span.icon.wp-format-status {
    41784199    background: url(../images/post-formats.png) no-repeat -200px -8px;
    41794200}
    41804201
    4181 .post-format-change span.icon.aside {
     4202.post-format-change span.icon.wp-format-aside {
    41824203    background: url(../images/post-formats.png) no-repeat -232px -8px;
    41834204}
    41844205
    4185 .post-format-change span.icon.quote {
     4206.post-format-change span.icon.wp-format-quote {
    41864207    background: url(../images/post-formats.png) no-repeat -264px -8px;
    41874208}
    41884209
    4189 .post-format-change span.icon.link {
     4210.post-format-change span.icon.wp-format-link {
    41904211    background: url(../images/post-formats.png) no-repeat -296px -8px;
    41914212}

  • trunk/wp-admin/edit-form-advanced.php

    r24097 r24098  
    137137    wp_enqueue_style( 'wp-mediaelement' );
    138138    $post_format = get_post_format();
    139     $post_format_set_class = 'post-format-set';
    140139
    141140    if ( ! $post_format ) {
    … …  
    144143        if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
    145144            $post_format = $_REQUEST['format'];
    146         elseif ( 'auto-draft' == $post->post_status )
    147             $post_format_set_class = '';
    148145    }
    149146
    … …  
    426423<div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
    427424<div id="post-body-content"<?php echo $format_class; ?>>
     425<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
     426    <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>
     427</div>
    428428<?php if ( post_type_supports($post_type, 'title') ) { ?>
    429429<div id="titlediv">

  • trunk/wp-admin/includes/post-formats.php

    r24092 r24098  
    1111?>
    1212<div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
    13     <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>
    1413    <div class="post-formats-fields">
    1514

  • trunk/wp-admin/js/post-formats.js

    r24092 r24098  
     1/*globals window, $, jQuery, document, _, postFormats, tinymce, ajaxurl, wp, getUserSetting */
     2
    13window.wp = window.wp || {};
    24
    3 (function($) {
    4     var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
     5(function ($) {
     6    "use strict";
     7
     8    var mediaFrame, insertMediaButton, container, icon, formatField,
     9        lastMimeType,
     10        classRegex = /\s?\bwp-format-[^ ]+/g,
     11        shortHeight = 120,
     12        lastHeight = 360,
    513        initialFormat = 'standard',
    614        shortClass = 'short-format',
     15        noTitleFormats = ['status'],
     16        noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
    717        shortContentFormats = ['status', 'aside'],
    8         noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
    9         $screenIcon = $( '.icon32' );
    10 
     18        noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
    1119
    1220    function switchFormatClass( format ) {
    13         container.get(0).className = container.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
    14         container.addClass('wp-format-' + format);
    15         $screenIcon.get(0).className = $screenIcon.get(0).className.replace( /\s?\bwp-format-[^ ]+/g, '' );
    16         $screenIcon.addClass('wp-format-' + format);
     21        formatField.val( format );
     22
     23        container
     24            .prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
     25            .addClass( 'wp-format-' + format );
     26
     27        icon
     28            .prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
     29            .addClass( 'wp-format-' + format );
    1730    }
    1831
    1932    function resizeContent( format, noAnimate ) {
    20         var height;
    21 
    22         content = $('#content, #content_ifr');
    23 
    24         height = content.height();
    25         if ( 120 < height ) {
     33        var height, content = $( '#content, #content_ifr' );
     34
     35        height = content.outerHeight();
     36        if ( shortHeight < height ) {
    2637            lastHeight = height;
    2738        }
    2839
    2940        if ( -1 < $.inArray( format, shortContentFormats ) ) {
    30             if ( ! content.hasClass(shortClass) ) {
    31                 content.addClass(shortClass);
    32                 if ( noAnimate ) {
    33                     content.each(function () {
    34                         $(this).css({ height : 120 });
    35                     });
    36                 } else {
    37                     content.each(function () {
    38                         $(this).animate({ height : 120 });
    39                     });
    40                 }
     41            if ( ! content.hasClass( shortClass ) ) {
     42                content.addClass( shortClass );
     43                _(content).each(function (elem) {
     44                    $(elem)[noAnimate ? 'css' : 'animate']( { height : shortHeight } );
     45                });
    4146            }
    4247        } else {
    43             content.removeClass(shortClass).animate({ height : lastHeight });
     48            content.removeClass( shortClass ).animate( { height : lastHeight } );
    4449        }
    4550    }
    4651
    47     function switchFormat($this) {
    48         var editor, body,
    49             parent = $this.parent(),
    50             format = $this.data('wp-format'),
    51             description = $('.post-format-description'),
    52             postTitle = $('#title');
    53 
    54         if ( typeof container === 'undefined' )
    55             container = $('#post-body-content');
    56 
    57         parent.slideUp().find('a.active').removeClass('active');
    58         $this.addClass('active');
    59         $('#post_format').val(format);
    60         $('.post-format-change').show().find('span.icon').removeClass(postFormats.currentPostFormat).addClass(format);
    61 
    62         if ( -1 < $.inArray( format, noUIFormats ) ) {
    63             switchFormatClass( format ); // No slide
    64             $container.hide();
    65         } else {
    66             $container.slideUp( 200, function(){
     52    function switchFormat(elem) {
     53        var editor, body, formatTo, formatFrom,
     54            format = elem.data( 'wp-format' ),
     55            titlePrompt = $( '#title-prompt-text' ),
     56            description = $( '.post-format-description' ),
     57            postTitle = $( '#title'),
     58            fields = $( '.post-formats-fields' ),
     59            tinyIcon = $( '.post-format-change span.icon' );
     60
     61        if ( format === postFormats.currentPostFormat ) {
     62            return;
     63        }
     64
     65        elem.addClass( 'active' ).siblings().removeClass( 'active' );
     66
     67        // Animate the media button going away or coming back
     68        formatTo = -1 < $.inArray( format, noMediaFormats );
     69        formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noMediaFormats );
     70        if ( formatFrom ? !formatTo : formatTo ) { // XOR
     71            insertMediaButton.fadeToggle( 200 ).css( 'display', 'inline-block' );
     72        }
     73        // Animate the title going away or coming back
     74        formatTo = -1 < $.inArray( format, noTitleFormats );
     75        formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noTitleFormats );
     76        if ( formatFrom ? !formatTo : formatTo ) { // XOR
     77            $( '#titlewrap' ).fadeToggle( 200 );
     78        }
     79
     80        // Animate the fields moving going away or coming in
     81        formatTo = -1 < $.inArray( format, noUIFormats );
     82        formatFrom = -1 < $.inArray( postFormats.currentPostFormat, noUIFormats );
     83        if ( formatTo && formatFrom ) { // To/from have no UI. No slide.
     84            console.log( 'both no UI' );
     85            switchFormatClass( format );
     86            fields.hide();
     87        } else if ( formatFrom ) { // Only destination has UI. Slide down.
     88            console.log( 'destination only' );
     89            fields.hide();
     90            switchFormatClass( format );
     91            fields.slideDown( 400 );
     92        } else if ( formatTo ) { // Only source has UI. Slide up.
     93            console.log( 'source only' );
     94            fields.slideUp( 200, function(){
    6795                switchFormatClass( format );
    68                 $container.slideDown( 400 );
    6996            });
     97        } else { // Both have UI. Slide both ways.
     98            console.log( 'both' );
     99            fields.slideUp( 200, function(){
     100                switchFormatClass( format );
     101                fields.slideDown( 400 );
     102            });
    70103        }
    71104
    72105        resizeContent( format );
    73 
    74106        postTitle.focus();
    75107
    76         if ( '' === postTitle.val() )
    77             $('#title-prompt-text').removeClass('screen-reader-text');
     108        if ( '' === postTitle.val() ) {
     109            titlePrompt.removeClass( 'screen-reader-text' );
     110
     111            postTitle.keydown( function (e) {
     112                titlePrompt.addClass( 'screen-reader-text' );
     113                $( e.currentTarget ).unbind( e );
     114            } );
     115        }
    78116
    79117        // Update description line
    80         description.html($this.data('description'));
    81 
    82         if (description.not(':visible'))
    83             description.slideDown('fast');
    84 
    85         if ( typeof tinymce != 'undefined' ) {
    86             editor = tinymce.get('content');
     118        description.html( elem.data( 'description' ) );
     119        tinyIcon
     120            .show()
     121            .prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
     122            .addClass( 'wp-format-' + format );
     123
     124        if ( description.not( ':visible' ) ) {
     125            description.slideDown( 'fast' );
     126        }
     127
     128        if ( tinymce ) {
     129            editor = tinymce.get( 'content' );
    87130
    88131            if ( editor ) {
    … …  
    95138        // If gallery, force it to open to gallery state
    96139        insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
    97 
    98140        postFormats.currentPostFormat = format;
    99141    }
    100142
    101 
    102 
    103     $(function() {
     143    $(function () {
     144        container = $( '#post-body-content' );
     145        icon = $( '.icon32' );
     146        formatField = $( '#post_format' );
    104147        insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
    105         $container = $( '.post-formats-fields' );
    106 
    107148        initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
     149
    108150        if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
    109151            resizeContent( initialFormat, true );
    110152        }
    111153
    112         $('#show_post_format_ui').on('change', function() {
    113             $('.wp-post-format-ui').toggleClass('no-ui', ! this.checked );
     154        $( '#show_post_format_ui' ).on( 'change', function () {
     155            $( '.wp-post-format-ui' ).toggleClass( 'no-ui', ! this.checked );
    114156            $.post( ajaxurl, {
    115157                action: 'show-post-format-ui',
    116                 post_type: $('#post_type').val(),
     158                post_type: $( '#post_type' ).val(),
    117159                show: this.checked ? 1 : 0,
    118                 nonce: $('#show_post_format_ui_nonce').val()
    119             });
    120         });
    121 
    122         $('.post-format-change a').click(function() {
    123             $('.post-formats-fields, .post-format-change').slideUp();
    124             $('.post-format-options').slideDown();
    125             return false;
    126         });
     160                nonce: $( '#show_post_format_ui_nonce' ).val()
     161            } );
     162        } );
    127163
    128164        // Post formats selection
    129         $('.post-format-options').on( 'click', 'a', function (e) {
     165        $( '.post-format-options' ).on( 'click', 'a', function (e) {
    130166            e.preventDefault();
    131             switchFormat($(this));
    132         });
     167            switchFormat( $( e.currentTarget ) );
     168        } );
    133169
    134170        // Media selection
    135         $('.wp-format-media-select').click(function(event) {
    136             event.preventDefault();
    137             var $el = $(this), mime = 'image',
    138                 $holder = $el.closest('.wp-format-media-holder'),
    139                 $field = $( '#wp_format_' + $holder.data('format') );
    140 
    141             mime = $holder.data('format');
     171        $( '.wp-format-media-select' ).click( function (e) {
     172            e.preventDefault();
     173
     174            var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
     175
     176            $holder = $el.closest( '.wp-format-media-holder' );
     177            $field = $( '#wp_format_' + $holder.data( 'format' ) );
     178            mime = $holder.data( 'format' );
    142179
    143180            // If the media frame already exists, reopen it.
    … …  
    151188            mediaFrame = wp.media.frames.formatMedia = wp.media( {
    152189                button: {
    153                     text: $el.data('update')
     190                    text: $el.data( 'update' )
    154191                },
    155192                states: [
    156193                    new wp.media.controller.Library({
    157194                        library: wp.media.query( { type: mime } ),
    158                         title: $el.data('choose'),
     195                        title: $el.data( 'choose' ),
    159196                        displaySettings: 'image' === mime
    160197                    })
    … …  
    162199            } );
    163200
    164             mediaPreview = function(attachment) {
     201            mediaPreview = function (attachment) {
    165202                var w, h, dimensions = '', url = attachment.url, mime = attachment.mime, format = attachment.type;
    166203
    … …  
    168205                    if ( attachment.width ) {
    169206                        w = attachment.width;
    170                         if ( w > 600 )
     207                        if ( w > 600 ) {
    171208                            w = 600;
     209                        }
    172210                        dimensions += ' width="' + w + '"';
    173211                    }
    … …  
    175213                    if ( attachment.height ) {
    176214                        h = attachment.height;
    177                         if ( attachment.width && w < attachment.width )
     215                        if ( attachment.width && w < attachment.width ) {
    178216                            h = Math.round( ( h * w ) / attachment.width );
     217                        }
    179218                        dimensions += ' height="' + h + '"';
    180219                    }
    181220                }
    182221
    183                 $('#' + format + '-preview').remove();
     222                $( '#' + format + '-preview' ).remove();
    184223                $holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
    185224                    '<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
    186225                        '<source type="' + mime + '" src="' + url + '" />' +
    187226                    '</' + format + '></div>' );
    188                 $('.wp-' + format + '-shortcode').mediaelementplayer();
     227                $( '.wp-' + format + '-shortcode' ).mediaelementplayer();
    189228            };
    190229
    191230            // When an image is selected, run a callback.
    192             mediaFrame.on( 'select', function() {
     231            mediaFrame.on( 'select', function () {
    193232                // Grab the selected attachment.
    194                 var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
    195 
    196                 if ( 0 === attachment.mime.indexOf('audio') ) {
    197                     $field.val(attachment.url);
     233                var w = 0, h = 0, html, attachment = mediaFrame.state().get( 'selection' ).first().toJSON();
     234
     235                if ( 0 === attachment.mime.indexOf( 'audio' ) ) {
     236                    $field.val( attachment.url );
    198237                    // show one preview at a time
    199                     mediaPreview(attachment);
    200                 } else if ( 0 === attachment.mime.indexOf('video') ) {
     238                    mediaPreview( attachment );
     239                } else if ( 0 === attachment.mime.indexOf( 'video' ) ) {
    201240                    attachment.src = attachment.url;
    202                     $field.val(wp.shortcode.string({
     241                    $field.val( wp.shortcode.string( {
    203242                        tag:     'video',
    204243                        attrs: _.pick( attachment, 'src', 'width', 'height' )
    205                     }));
     244                    } ) );
    206245                    // show one preview at a time
    207                     mediaPreview(attachment);
     246                    mediaPreview( attachment );
    208247                } else {
    209248                    html = wp.media.string.image({
    210                         align : getUserSetting('align'),
    211                         size : getUserSetting('imgsize'),
    212                         link : getUserSetting('urlbutton')
     249                        align : getUserSetting( 'align' ),
     250                        size : getUserSetting( 'imgsize' ),
     251                        link : getUserSetting( 'urlbutton' )
    213252                    }, attachment);
     253
    214254                    // set the hidden input's value
    215                     $field.val(html);
    216                     $('#image-preview').remove();
    217                     if ( attachment.width )
     255                    $field.val( html );
     256
     257                    $( '#image-preview' ).remove();
     258
     259                    if ( attachment.width ) {
    218260                        w = attachment.width > 600 ? 600 : attachment.width;
    219                     if ( attachment.height )
     261                    }
     262
     263                    if ( attachment.height ) {
    220264                        h = attachment.height;
    221                     if ( w < attachment.width )
     265                    }
     266
     267                    if ( w < attachment.width ) {
    222268                        h = Math.round( ( h * w ) / attachment.width );
     269                    }
     270
    223271                    $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
    224272                        '<img src="', attachment.url, '"',
    … …  
    226274                        h ? ' height="' + h + '"' : '',
    227275                        ' />',
    228                     '</div>'].join('') );
     276                    '</div>'].join( '' ) );
    229277                }
    230278            });
    … …  
    233281        });
    234282    });
    235 })(jQuery);
     283}( jQuery ) );
Note: See TracChangeset for help on using the changeset viewer.