<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[24098] trunk/wp-admin: Post format UI refresh.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/24098">24098</a></dd>
<dt>Author</dt> <dd>markjaquith</dd>
<dt>Date</dt> <dd>2013-04-26 12:22:55 +0000 (Fri, 26 Apr 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <a href="http://core.trac.wordpress.org/ticket/24046">#24046</a>. props wonderboymusic, johnjamesjacoby, aaroncampbell, PeteMall.
Also, because I forgot it on <a href="http://core.trac.wordpress.org/changeset/24006">[24006]</a>: props saracannon.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsscolorsclassiccss">trunk/wp-admin/css/colors-classic.css</a></li>
<li><a href="#trunkwpadmincsscolorsfreshcss">trunk/wp-admin/css/colors-fresh.css</a></li>
<li><a href="#trunkwpadmincsswpadmincss">trunk/wp-admin/css/wp-admin.css</a></li>
<li><a href="#trunkwpadmineditformadvancedphp">trunk/wp-admin/edit-form-advanced.php</a></li>
<li><a href="#trunkwpadminincludespostformatsphp">trunk/wp-admin/includes/post-formats.php</a></li>
<li><a href="#trunkwpadminjspostformatsjs">trunk/wp-admin/js/post-formats.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsscolorsclassiccss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-classic.css (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-classic.css 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/css/colors-classic.css 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -164,6 +164,7 @@
</span><span class="cx"> color: #fff;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.post-format-options,
</ins><span class="cx"> .widget .widget-top,
</span><span class="cx"> .postbox h3,
</span><span class="cx"> .stuffbox h3,
</span><span class="lines">@@ -688,6 +689,7 @@
</span><span class="cx"> background-image: linear-gradient(to top, #eff8ff, #f7fcfe);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.post-format-options,
</ins><span class="cx"> .postbox h3 {
</span><span class="cx"> color: #174f69;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsscolorsfreshcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/colors-fresh.css (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/colors-fresh.css 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/css/colors-fresh.css 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -164,6 +164,7 @@
</span><span class="cx"> color: #fff;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.post-format-options,
</ins><span class="cx"> .widget .widget-top,
</span><span class="cx"> .postbox h3,
</span><span class="cx"> .stuffbox h3,
</span><span class="lines">@@ -690,6 +691,7 @@
</span><span class="cx"> background-image: linear-gradient(to top, #f5f5f5, #f9f9f9);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.post-format-options,
</ins><span class="cx"> .postbox h3 {
</span><span class="cx"> color: #464646;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadmincsswpadmincss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.css (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.css 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/css/wp-admin.css 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -4000,6 +4000,9 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .wp-format-status #titlewrap,
</span><ins>+.wp-format-image .wp-media-buttons .insert-media,
+.wp-format-audio .wp-media-buttons .insert-media,
+.wp-format-video .wp-media-buttons .insert-media,
</ins><span class="cx"> .wp-format-aside .wp-media-buttons .insert-media,
</span><span class="cx"> .wp-format-status .wp-media-buttons .insert-media {
</span><span class="cx"> display: none;
</span><span class="lines">@@ -4101,20 +4104,38 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .post-format-options {
</span><del>- height: 50px;
</del><ins>+ border-width: 1px;
+ border-style: solid;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ border-color: #CCC;
</ins><span class="cx"> margin: 13px 0 10px;
</span><del>- padding: 0;
</del><ins>+ padding: 5px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .post-format-options a {
</span><span class="cx"> display: inline-block;
</span><del>- height: 34px;
- margin-right: 33px;
</del><ins>+ min-width: 62px;
+ padding:5px;
+ border:1px solid transparent;
+ margin-right: 10px;
</ins><span class="cx"> position: relative;
</span><span class="cx"> text-decoration: none;
</span><span class="cx"> text-align: center;
</span><ins>+ transition: opacity 0.1s linear;
+ opacity: 0.6;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.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;
+}
+
</ins><span class="cx"> .post-format-options a div {
</span><span class="cx"> height: 34px;
</span><span class="cx"> width: 34px;
</span><span class="lines">@@ -4127,7 +4148,7 @@
</span><span class="cx"> margin-top: 4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change, .post-format-set .post-format-options {
</del><ins>+.post-format-set .post-format-options {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -4136,7 +4157,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #poststuff .post-format-change {
</span><del>- margin: 11px 0 13px;
</del><ins>+ margin: -7px 0 13px 2px;
</ins><span class="cx"> padding: 0;
</span><span class="cx"> font-size: 1.5em;
</span><span class="cx"> line-height: 18px;
</span><span class="lines">@@ -4150,43 +4171,43 @@
</span><span class="cx"> width: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.standard {
</del><ins>+.post-format-change span.icon.wp-format-standard {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -8px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.image {
</del><ins>+.post-format-change span.icon.wp-format-image {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -40px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.gallery {
</del><ins>+.post-format-change span.icon.wp-format-gallery {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -72px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.audio {
</del><ins>+.post-format-change span.icon.wp-format-audio {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -104px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.video {
</del><ins>+.post-format-change span.icon.wp-format-video {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -136px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.chat {
</del><ins>+.post-format-change span.icon.wp-format-chat {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -168px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.status {
</del><ins>+.post-format-change span.icon.wp-format-status {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -200px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.aside {
</del><ins>+.post-format-change span.icon.wp-format-aside {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -232px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.quote {
</del><ins>+.post-format-change span.icon.wp-format-quote {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -264px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.post-format-change span.icon.link {
</del><ins>+.post-format-change span.icon.wp-format-link {
</ins><span class="cx"> background: url(../images/post-formats.png) no-repeat -296px -8px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkwpadmineditformadvancedphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/edit-form-advanced.php (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/edit-form-advanced.php 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/edit-form-advanced.php 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -136,15 +136,12 @@
</span><span class="cx"> wp_enqueue_script( 'wp-mediaelement' );
</span><span class="cx"> wp_enqueue_style( 'wp-mediaelement' );
</span><span class="cx"> $post_format = get_post_format();
</span><del>- $post_format_set_class = 'post-format-set';
</del><span class="cx">
</span><span class="cx"> if ( ! $post_format ) {
</span><span class="cx"> $post_format = 'standard';
</span><span class="cx">
</span><span class="cx"> if ( ! empty( $_REQUEST['format'] ) && in_array( $_REQUEST['format'], get_post_format_slugs() ) )
</span><span class="cx"> $post_format = $_REQUEST['format'];
</span><del>- elseif ( 'auto-draft' == $post->post_status )
- $post_format_set_class = '';
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> $user_wants = get_user_option( 'post_formats_' . $post_type );
</span><span class="lines">@@ -425,6 +422,9 @@
</span><span class="cx"> <div id="poststuff">
</span><span class="cx"> <div id="post-body" class="metabox-holder columns-<?php echo 1 == get_current_screen()->get_columns() ? '1' : '2'; ?>">
</span><span class="cx"> <div id="post-body-content"<?php echo $format_class; ?>>
</span><ins>+<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>
</ins><span class="cx"> <?php if ( post_type_supports($post_type, 'title') ) { ?>
</span><span class="cx"> <div id="titlediv">
</span><span class="cx"> <div id="titlewrap">
</span></span></pre></div>
<a id="trunkwpadminincludespostformatsphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/includes/post-formats.php (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/includes/post-formats.php 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/includes/post-formats.php 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -10,7 +10,6 @@
</span><span class="cx">
</span><span class="cx"> ?>
</span><span class="cx"> <div class="wp-post-format-ui<?php if ( ! $show_post_format_ui ) echo ' no-ui' ?>">
</span><del>- <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>
</del><span class="cx"> <div class="post-formats-fields">
</span><span class="cx">
</span><span class="cx"> <input type="hidden" name="post_format" id="post_format" value="<?php echo esc_attr( $post_format ); ?>" />
</span><span class="lines">@@ -144,4 +143,4 @@
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>-</div>
</del><span class="cx">\ No newline at end of file
</span><ins>+</div>
</ins></span></pre></div>
<a id="trunkwpadminjspostformatsjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/post-formats.js (24097 => 24098)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/post-formats.js 2013-04-25 23:31:20 UTC (rev 24097)
+++ trunk/wp-admin/js/post-formats.js 2013-04-26 12:22:55 UTC (rev 24098)
</span><span class="lines">@@ -1,89 +1,132 @@
</span><ins>+/*globals window, $, jQuery, document, _, postFormats, tinymce, ajaxurl, wp, getUserSetting */
+
</ins><span class="cx"> window.wp = window.wp || {};
</span><span class="cx">
</span><del>-(function($) {
- var container, $container, mediaFrame, lastMimeType, mediaPreview, lastHeight = 360, content, insertMediaButton,
</del><ins>+(function ($) {
+ "use strict";
+
+ var mediaFrame, insertMediaButton, container, icon, formatField,
+ lastMimeType,
+ classRegex = /\s?\bwp-format-[^ ]+/g,
+ shortHeight = 120,
+ lastHeight = 360,
</ins><span class="cx"> initialFormat = 'standard',
</span><span class="cx"> shortClass = 'short-format',
</span><ins>+ noTitleFormats = ['status'],
+ noMediaFormats = ['status', 'aside', 'image', 'audio', 'video'],
</ins><span class="cx"> shortContentFormats = ['status', 'aside'],
</span><del>- noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'],
- $screenIcon = $( '.icon32' );
</del><ins>+ noUIFormats = ['standard', 'chat', 'status', 'aside', 'gallery'];
</ins><span class="cx">
</span><ins>+ function switchFormatClass( format ) {
+ formatField.val( format );
</ins><span class="cx">
</span><del>- 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);
</del><ins>+ container
+ .prop( 'className', container.prop( 'className' ).replace( classRegex, '' ) )
+ .addClass( 'wp-format-' + format );
+
+ icon
+ .prop( 'className', icon.prop( 'className' ).replace( classRegex, '' ) )
+ .addClass( 'wp-format-' + format );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function resizeContent( format, noAnimate ) {
</span><del>- var height;
</del><ins>+ var height, content = $( '#content, #content_ifr' );
</ins><span class="cx">
</span><del>- content = $('#content, #content_ifr');
-
- height = content.height();
- if ( 120 < height ) {
</del><ins>+ height = content.outerHeight();
+ if ( shortHeight < height ) {
</ins><span class="cx"> lastHeight = height;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( -1 < $.inArray( format, shortContentFormats ) ) {
</span><del>- if ( ! content.hasClass(shortClass) ) {
- content.addClass(shortClass);
- if ( noAnimate ) {
- content.each(function () {
- $(this).css({ height : 120 });
- });
- } else {
- content.each(function () {
- $(this).animate({ height : 120 });
- });
- }
</del><ins>+ if ( ! content.hasClass( shortClass ) ) {
+ content.addClass( shortClass );
+ _(content).each(function (elem) {
+ $(elem)[noAnimate ? 'css' : 'animate']( { height : shortHeight } );
+ });
</ins><span class="cx"> }
</span><span class="cx"> } else {
</span><del>- content.removeClass(shortClass).animate({ height : lastHeight });
</del><ins>+ content.removeClass( shortClass ).animate( { height : lastHeight } );
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function switchFormat($this) {
- var editor, body,
- parent = $this.parent(),
- format = $this.data('wp-format'),
- description = $('.post-format-description'),
- postTitle = $('#title');
</del><ins>+ 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' );
</ins><span class="cx">
</span><del>- if ( typeof container === 'undefined' )
- container = $('#post-body-content');
</del><ins>+ if ( format === postFormats.currentPostFormat ) {
+ return;
+ }
</ins><span class="cx">
</span><del>- 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);
</del><ins>+ elem.addClass( 'active' ).siblings().removeClass( 'active' );
</ins><span class="cx">
</span><del>- if ( -1 < $.inArray( format, noUIFormats ) ) {
- switchFormatClass( format ); // No slide
- $container.hide();
- } else {
- $container.slideUp( 200, function(){
</del><ins>+ // 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(){
</ins><span class="cx"> switchFormatClass( format );
</span><del>- $container.slideDown( 400 );
</del><span class="cx"> });
</span><ins>+ } else { // Both have UI. Slide both ways.
+ console.log( 'both' );
+ fields.slideUp( 200, function(){
+ switchFormatClass( format );
+ fields.slideDown( 400 );
+ });
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> resizeContent( format );
</span><del>-
</del><span class="cx"> postTitle.focus();
</span><span class="cx">
</span><del>- if ( '' === postTitle.val() )
- $('#title-prompt-text').removeClass('screen-reader-text');
</del><ins>+ if ( '' === postTitle.val() ) {
+ titlePrompt.removeClass( 'screen-reader-text' );
</ins><span class="cx">
</span><ins>+ postTitle.keydown( function (e) {
+ titlePrompt.addClass( 'screen-reader-text' );
+ $( e.currentTarget ).unbind( e );
+ } );
+ }
+
</ins><span class="cx"> // Update description line
</span><del>- description.html($this.data('description'));
</del><ins>+ description.html( elem.data( 'description' ) );
+ tinyIcon
+ .show()
+ .prop( 'className', tinyIcon.prop( 'className' ).replace( classRegex, '' ) )
+ .addClass( 'wp-format-' + format );
</ins><span class="cx">
</span><del>- if (description.not(':visible'))
- description.slideDown('fast');
</del><ins>+ if ( description.not( ':visible' ) ) {
+ description.slideDown( 'fast' );
+ }
</ins><span class="cx">
</span><del>- if ( typeof tinymce != 'undefined' ) {
- editor = tinymce.get('content');
</del><ins>+ if ( tinymce ) {
+ editor = tinymce.get( 'content' );
</ins><span class="cx">
</span><span class="cx"> if ( editor ) {
</span><span class="cx"> body = editor.getBody();
</span><span class="lines">@@ -94,52 +137,46 @@
</span><span class="cx">
</span><span class="cx"> // If gallery, force it to open to gallery state
</span><span class="cx"> insertMediaButton.toggleClass( 'gallery', 'gallery' === format );
</span><del>-
</del><span class="cx"> postFormats.currentPostFormat = format;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-
-
- $(function() {
</del><ins>+ $(function () {
+ container = $( '#post-body-content' );
+ icon = $( '.icon32' );
+ formatField = $( '#post_format' );
</ins><span class="cx"> insertMediaButton = $( '#insert-media-button' ).toggleClass( 'gallery', 'gallery' === postFormats.currentPostFormat );
</span><del>- $container = $( '.post-formats-fields' );
</del><ins>+ initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
</ins><span class="cx">
</span><del>- initialFormat = $( '.post-format-options .active' ).data( 'wp-format' );
</del><span class="cx"> if ( -1 < $.inArray( initialFormat, shortContentFormats ) ) {
</span><span class="cx"> resizeContent( initialFormat, true );
</span><span class="cx"> }
</span><span class="cx">
</span><del>- $('#show_post_format_ui').on('change', function() {
- $('.wp-post-format-ui').toggleClass('no-ui', ! this.checked );
</del><ins>+ $( '#show_post_format_ui' ).on( 'change', function () {
+ $( '.wp-post-format-ui' ).toggleClass( 'no-ui', ! this.checked );
</ins><span class="cx"> $.post( ajaxurl, {
</span><span class="cx"> action: 'show-post-format-ui',
</span><del>- post_type: $('#post_type').val(),
</del><ins>+ post_type: $( '#post_type' ).val(),
</ins><span class="cx"> show: this.checked ? 1 : 0,
</span><del>- nonce: $('#show_post_format_ui_nonce').val()
- });
- });
</del><ins>+ nonce: $( '#show_post_format_ui_nonce' ).val()
+ } );
+ } );
</ins><span class="cx">
</span><del>- $('.post-format-change a').click(function() {
- $('.post-formats-fields, .post-format-change').slideUp();
- $('.post-format-options').slideDown();
- return false;
- });
-
</del><span class="cx"> // Post formats selection
</span><del>- $('.post-format-options').on( 'click', 'a', function (e) {
</del><ins>+ $( '.post-format-options' ).on( 'click', 'a', function (e) {
</ins><span class="cx"> e.preventDefault();
</span><del>- switchFormat($(this));
- });
</del><ins>+ switchFormat( $( e.currentTarget ) );
+ } );
</ins><span class="cx">
</span><span class="cx"> // Media selection
</span><del>- $('.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') );
</del><ins>+ $( '.wp-format-media-select' ).click( function (e) {
+ e.preventDefault();
</ins><span class="cx">
</span><del>- mime = $holder.data('format');
</del><ins>+ var $el = $(e.currentTarget), mediaPreview, mime = 'image', $holder, $field;
</ins><span class="cx">
</span><ins>+ $holder = $el.closest( '.wp-format-media-holder' );
+ $field = $( '#wp_format_' + $holder.data( 'format' ) );
+ mime = $holder.data( 'format' );
+
</ins><span class="cx"> // If the media frame already exists, reopen it.
</span><span class="cx"> if ( mediaFrame && lastMimeType === mime ) {
</span><span class="cx"> mediaFrame.open();
</span><span class="lines">@@ -150,86 +187,97 @@
</span><span class="cx">
</span><span class="cx"> mediaFrame = wp.media.frames.formatMedia = wp.media( {
</span><span class="cx"> button: {
</span><del>- text: $el.data('update')
</del><ins>+ text: $el.data( 'update' )
</ins><span class="cx"> },
</span><span class="cx"> states: [
</span><span class="cx"> new wp.media.controller.Library({
</span><span class="cx"> library: wp.media.query( { type: mime } ),
</span><del>- title: $el.data('choose'),
</del><ins>+ title: $el.data( 'choose' ),
</ins><span class="cx"> displaySettings: 'image' === mime
</span><span class="cx"> })
</span><span class="cx"> ]
</span><span class="cx"> } );
</span><span class="cx">
</span><del>- mediaPreview = function(attachment) {
</del><ins>+ mediaPreview = function (attachment) {
</ins><span class="cx"> var w, h, dimensions = '', url = attachment.url, mime = attachment.mime, format = attachment.type;
</span><span class="cx">
</span><span class="cx"> if ( 'video' === format ) {
</span><span class="cx"> if ( attachment.width ) {
</span><span class="cx"> w = attachment.width;
</span><del>- if ( w > 600 )
</del><ins>+ if ( w > 600 ) {
</ins><span class="cx"> w = 600;
</span><ins>+ }
</ins><span class="cx"> dimensions += ' width="' + w + '"';
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( attachment.height ) {
</span><span class="cx"> h = attachment.height;
</span><del>- if ( attachment.width && w < attachment.width )
</del><ins>+ if ( attachment.width && w < attachment.width ) {
</ins><span class="cx"> h = Math.round( ( h * w ) / attachment.width );
</span><ins>+ }
</ins><span class="cx"> dimensions += ' height="' + h + '"';
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- $('#' + format + '-preview').remove();
</del><ins>+ $( '#' + format + '-preview' ).remove();
</ins><span class="cx"> $holder.parent().prepend( '<div id="' + format + '-preview" class="wp-format-media-preview">' +
</span><span class="cx"> '<' + format + dimensions + ' class="wp-' + format + '-shortcode" controls="controls" preload="none">' +
</span><span class="cx"> '<source type="' + mime + '" src="' + url + '" />' +
</span><span class="cx"> '</' + format + '></div>' );
</span><del>- $('.wp-' + format + '-shortcode').mediaelementplayer();
</del><ins>+ $( '.wp-' + format + '-shortcode' ).mediaelementplayer();
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> // When an image is selected, run a callback.
</span><del>- mediaFrame.on( 'select', function() {
</del><ins>+ mediaFrame.on( 'select', function () {
</ins><span class="cx"> // Grab the selected attachment.
</span><del>- var w = 0, h = 0, html, attachment = mediaFrame.state().get('selection').first().toJSON();
</del><ins>+ var w = 0, h = 0, html, attachment = mediaFrame.state().get( 'selection' ).first().toJSON();
</ins><span class="cx">
</span><del>- if ( 0 === attachment.mime.indexOf('audio') ) {
- $field.val(attachment.url);
</del><ins>+ if ( 0 === attachment.mime.indexOf( 'audio' ) ) {
+ $field.val( attachment.url );
</ins><span class="cx"> // show one preview at a time
</span><del>- mediaPreview(attachment);
- } else if ( 0 === attachment.mime.indexOf('video') ) {
</del><ins>+ mediaPreview( attachment );
+ } else if ( 0 === attachment.mime.indexOf( 'video' ) ) {
</ins><span class="cx"> attachment.src = attachment.url;
</span><del>- $field.val(wp.shortcode.string({
</del><ins>+ $field.val( wp.shortcode.string( {
</ins><span class="cx"> tag: 'video',
</span><span class="cx"> attrs: _.pick( attachment, 'src', 'width', 'height' )
</span><del>- }));
</del><ins>+ } ) );
</ins><span class="cx"> // show one preview at a time
</span><del>- mediaPreview(attachment);
</del><ins>+ mediaPreview( attachment );
</ins><span class="cx"> } else {
</span><span class="cx"> html = wp.media.string.image({
</span><del>- align : getUserSetting('align'),
- size : getUserSetting('imgsize'),
- link : getUserSetting('urlbutton')
</del><ins>+ align : getUserSetting( 'align' ),
+ size : getUserSetting( 'imgsize' ),
+ link : getUserSetting( 'urlbutton' )
</ins><span class="cx"> }, attachment);
</span><ins>+
</ins><span class="cx"> // set the hidden input's value
</span><del>- $field.val(html);
- $('#image-preview').remove();
- if ( attachment.width )
</del><ins>+ $field.val( html );
+
+ $( '#image-preview' ).remove();
+
+ if ( attachment.width ) {
</ins><span class="cx"> w = attachment.width > 600 ? 600 : attachment.width;
</span><del>- if ( attachment.height )
</del><ins>+ }
+
+ if ( attachment.height ) {
</ins><span class="cx"> h = attachment.height;
</span><del>- if ( w < attachment.width )
</del><ins>+ }
+
+ if ( w < attachment.width ) {
</ins><span class="cx"> h = Math.round( ( h * w ) / attachment.width );
</span><ins>+ }
+
</ins><span class="cx"> $holder.parent().prepend( ['<div id="image-preview" class="wp-format-media-preview">',
</span><span class="cx"> '<img src="', attachment.url, '"',
</span><span class="cx"> w ? ' width="' + w + '"' : '',
</span><span class="cx"> h ? ' height="' + h + '"' : '',
</span><span class="cx"> ' />',
</span><del>- '</div>'].join('') );
</del><ins>+ '</div>'].join( '' ) );
</ins><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> mediaFrame.open();
</span><span class="cx"> });
</span><span class="cx"> });
</span><del>-})(jQuery);
</del><ins>+}( jQuery ) );
</ins></span></pre>
</div>
</div>
</body>
</html>