diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index 74a1060b2a..c8963fc6c6 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -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; } diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 5aa5fa88be..1941f513b9 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -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; } diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 1b07b3e5ba..6b2818de75 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -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; } diff --git a/wp-admin/edit-form-advanced.php b/wp-admin/edit-form-advanced.php index 8eecfe1ba4..40d69565c7 100644 --- a/wp-admin/edit-form-advanced.php +++ b/wp-admin/edit-form-advanced.php @@ -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 );
> +
+
+
diff --git a/wp-admin/includes/post-formats.php b/wp-admin/includes/post-formats.php index 9571e55056..e06d09ce43 100644 --- a/wp-admin/includes/post-formats.php +++ b/wp-admin/includes/post-formats.php @@ -10,7 +10,6 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce' ?>
-
@@ -144,4 +143,4 @@ wp_nonce_field( 'show-post-format-ui_' . $post_type, 'show_post_format_ui_nonce'
-
\ No newline at end of file +
diff --git a/wp-admin/js/post-formats.js b/wp-admin/js/post-formats.js index 9344df09b9..6df8aa6838 100644 --- a/wp-admin/js/post-formats.js +++ b/wp-admin/js/post-formats.js @@ -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( '
' + '<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' + '' + '
' ); - $('.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( ['
', '', - '
'].join('') ); + '
'].join( '' ) ); } }); mediaFrame.open(); }); }); -})(jQuery); +}( jQuery ) );