<!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>[27898] trunk/src/wp-includes: Edit Image modal:</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/27898">27898</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2014-04-02 01:53:56 +0000 (Wed, 02 Apr 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Edit Image modal:
- Move all advanced options under a single ?\226?\128?\156Show advanced options?\226?\128?\157 toggle that mirrors the behavior and look-and-feel of the wplink modal.
- Switch to using <select> for the Size and Link To.
- Bring back the field for CSS Class for the image, but don?\226?\128?\153t incorporate the internally managed WordPress classes (size-, wp-image-, etc?\226?\128?\166).
- On larger screen sizes, float labels to the left. When the width drops below 900px, stack the label above the fields.
- Keep image at top on screen sizes where the two columns are stacked into a single column.
- Don't replace the nodes in the editor DOM so we don't stomp on any custom attributes that the user may have added via the Text editor or some other mechanism.
Props gcorne, see <a href="http://core.trac.wordpress.org/ticket/27366">#27366</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesjsmediaviewsjs">trunk/src/wp-includes/js/media-views.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
<li><a href="#trunksrcwpincludesmediatemplatephp">trunk/src/wp-includes/media-template.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/css/media-views.css (27897 => 27898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/css/media-views.css 2014-04-01 22:46:00 UTC (rev 27897)
+++ trunk/src/wp-includes/css/media-views.css 2014-04-02 01:53:56 UTC (rev 27898)
</span><span class="lines">@@ -270,7 +270,8 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-sidebar h3 {
</del><ins>+.media-sidebar h3,
+.image-details h3 {
</ins><span class="cx"> position: relative;
</span><span class="cx"> font-weight: bold;
</span><span class="cx"> text-transform: uppercase;
</span><span class="lines">@@ -1603,23 +1604,34 @@
</span><span class="cx"> .image-details .embed-media-settings {
</span><span class="cx"> top: 0;
</span><span class="cx"> overflow: visible;
</span><ins>+ padding: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .image-details .column-settings {
</span><del>- width: 44%;
- float: left;
- margin-right: 20px;
</del><ins>+ background: #f3f3f3;
+ border-right: 1px solid #ddd;
+ min-height: 100%;
+ width: 52%;
+ position: absolute;
+ top: 0;
+ left: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .column-settings h3 {
+ margin: 20px;
+ padding-top: 20px;
+ border-top: 1px solid #ddd;
+}
+
</ins><span class="cx"> .image-details .column-image {
</span><del>- width: 53%;
- float: left;
</del><ins>+ width: 48%;
+ position: absolute;
+ left: 52%;
+ top: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.image-details .column-image:after {
- content: '';
- display: table;
- clear: both;
</del><ins>+.image-details .image {
+ margin: 20px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .image-details .image img {
</span><span class="lines">@@ -1627,7 +1639,30 @@
</span><span class="cx"> max-height: 500px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .advanced-toggle {
+ font-style: italic;
+ color: #666;
+ text-decoration: none;
+ margin: 20px;
+ display: block;
+}
</ins><span class="cx">
</span><ins>+.image-details .advanced-toggle::after {
+ font: normal 20px/1 'dashicons';
+ speak: none;
+ vertical-align: top;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: '\f140';
+ display: inline-block;
+ margin-top: -2px;
+}
+
+.image-details .advanced-visible .advanced-toggle::after {
+ content: '\f142';
+ margin-top: 0;
+}
+
</ins><span class="cx"> .media-embed .thumbnail {
</span><span class="cx"> max-width: 100%;
</span><span class="cx"> max-height: 200px;
</span><span class="lines">@@ -1661,14 +1696,19 @@
</span><span class="cx"> clear: both;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.image-details .setting {
</del><ins>+.image-details .embed-media-settings .setting {
</ins><span class="cx"> float: none;
</span><ins>+ width: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .image-details .actions {
</span><span class="cx"> margin: 10px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .hidden {
+ display: none;
+}
+
</ins><span class="cx"> .media-embed .setting input[type="text"],
</span><span class="cx"> .media-embed .setting textarea {
</span><span class="cx"> display: block;
</span><span class="lines">@@ -1677,11 +1717,22 @@
</span><span class="cx"> margin: 1px 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.image-details .setting input[type="text"],
-.image-details .setting textarea {
</del><ins>+.image-details .embed-media-settings .setting input[type="text"],
+.image-details .embed-media-settings .setting textarea {
</ins><span class="cx"> max-width: inherit;
</span><ins>+ width: 70%;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .embed-media-settings .setting input.link-to-custom,
+.image-details .embed-media-settings .link-target {
+ margin-left: 27%;
+ width: 70%;
+}
+
+.image-details .embed-media-settings .link-target {
+ margin-top: 24px;
+}
+
</ins><span class="cx"> .media-embed .setting input.hidden {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="lines">@@ -1694,6 +1745,14 @@
</span><span class="cx"> color: #666;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.image-details .embed-media-settings .setting span {
+ float: left;
+ width: 25%;
+ text-align: right;
+ margin: 8px 1% 0 1%;
+ line-height: 1.1;
+}
+
</ins><span class="cx"> .media-embed .setting .button-group {
</span><span class="cx"> margin: 2px 0;
</span><span class="cx"> }
</span><span class="lines">@@ -1709,10 +1768,6 @@
</span><span class="cx"> margin-top: 10px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.advanced .hidden {
- display: none;
-}
-
</del><span class="cx"> /* Drag & drop on the editor upload */
</span><span class="cx"> #wp-fullscreen-body .uploader-editor,
</span><span class="cx"> .wp-editor-wrap .uploader-editor {
</span><span class="lines">@@ -1930,6 +1985,28 @@
</span><span class="cx"> right: 30px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ .image-details .embed-media-settings .setting {
+ margin: 20px;
+ }
+
+ .image-details .embed-media-settings .setting span {
+ float: none;
+ text-align: left;
+ width: 100%;
+ margin-bottom: 4px;
+ }
+
+ .image-details .embed-media-settings .setting input.link-to-custom,
+ .image-details .embed-media-settings .setting input[type="text"],
+ .image-details .embed-media-settings .setting textarea {
+ width: 100%;
+ margin-left: 0;
+ }
+
+ .image-details .link-target {
+ width: 100%;
+ }
+
</ins><span class="cx"> .media-selection {
</span><span class="cx"> min-width: 120px;
</span><span class="cx"> }
</span><span class="lines">@@ -2137,10 +2214,14 @@
</span><span class="cx">
</span><span class="cx"> .image-details .column-settings,
</span><span class="cx"> .image-details .column-image {
</span><del>- float: none;
</del><ins>+ position: relative;
+ padding: 10px 0 20px 0;
+ left: 0;
</ins><span class="cx"> width: 100%;
</span><ins>+ min-height: inherit;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+
</ins><span class="cx"> /* Gallery */
</span><span class="cx"> .media-frame.hide-router .media-frame-content {
</span><span class="cx"> top: 73px;
</span></span></pre></div>
<a id="trunksrcwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-views.js (27897 => 27898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-views.js 2014-04-01 22:46:00 UTC (rev 27897)
+++ trunk/src/wp-includes/js/media-views.js 2014-04-02 01:53:56 UTC (rev 27898)
</span><span class="lines">@@ -6059,15 +6059,13 @@
</span><span class="cx"> events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
</span><span class="cx"> 'click .edit-attachment': 'editAttachment',
</span><span class="cx"> 'click .replace-attachment': 'replaceAttachment',
</span><del>- 'click .show-advanced': 'showAdvanced'
</del><ins>+ 'click .advanced-toggle': 'toggleAdvanced'
</ins><span class="cx"> } ),
</span><span class="cx"> initialize: function() {
</span><span class="cx"> // used in AttachmentDisplay.prototype.updateLinkTo
</span><span class="cx"> this.options.attachment = this.model.attachment;
</span><del>- if ( this.model.attachment ) {
- this.listenTo( this.model, 'change:url', this.updateUrl );
- this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
- }
</del><ins>+ this.listenTo( this.model, 'change:url', this.updateUrl );
+ this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
</ins><span class="cx"> media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -6113,8 +6111,8 @@
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> updateUrl: function() {
</span><del>- this.$( '.image img' ).attr( 'src', this.model.get('url' ) );
- this.$( '.url' ).val( this.model.get('url' ) );
</del><ins>+ this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
+ this.$( '.url' ).val( this.model.get( 'url' ) );
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> toggleLinkSettings: function() {
</span><span class="lines">@@ -6125,11 +6123,16 @@
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- showAdvanced: function( event ) {
</del><ins>+ toggleAdvanced: function( event ) {
+ var $advanced = $( event.target ).closest( '.advanced' );
</ins><span class="cx"> event.preventDefault();
</span><del>- $( event.target ).closest('.advanced')
- .find( '.hidden' ).removeClass( 'hidden' );
- $( event.target ).remove();
</del><ins>+ if ( $advanced.hasClass('advanced-visible') ) {
+ $advanced.removeClass('advanced-visible');
+ $advanced.find('div').addClass('hidden');
+ } else {
+ $advanced.addClass('advanced-visible');
+ $advanced.find('div').removeClass('hidden');
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> editAttachment: function( event ) {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (27897 => 27898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-04-01 22:46:00 UTC (rev 27897)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js 2014-04-02 01:53:56 UTC (rev 27898)
</span><span class="lines">@@ -114,7 +114,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function extractImageData( imageNode ) {
</span><del>- var classes, metadata, captionBlock, caption, link,
</del><ins>+ var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
</ins><span class="cx"> dom = editor.dom;
</span><span class="cx">
</span><span class="cx"> // default attributes
</span><span class="lines">@@ -127,38 +127,44 @@
</span><span class="cx"> caption: '',
</span><span class="cx"> alt: '',
</span><span class="cx"> align: 'none',
</span><ins>+ extraClasses: '',
</ins><span class="cx"> link: false,
</span><span class="cx"> linkUrl: '',
</span><span class="cx"> linkClassName: '',
</span><span class="cx"> linkTargetBlank: false,
</span><span class="cx"> linkRel: '',
</span><del>- title: '',
- className: ''
</del><ins>+ title: ''
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> metadata.url = dom.getAttrib( imageNode, 'src' );
</span><span class="cx"> metadata.alt = dom.getAttrib( imageNode, 'alt' );
</span><span class="cx"> metadata.title = dom.getAttrib( imageNode, 'title' );
</span><del>- metadata.width = parseInt( dom.getAttrib( imageNode, 'width' ), 10 );
- metadata.height = parseInt( dom.getAttrib( imageNode, 'height' ), 10 );
- metadata.className = imageNode.className;
</del><span class="cx">
</span><del>- classes = metadata.className.split( ' ' );
</del><ins>+ width = dom.getAttrib( imageNode, 'width' ) || imageNode.width;
+ height = dom.getAttrib( imageNode, 'height' ) || imageNode.height;
+
+ metadata.width = parseInt( width, 10 );
+ metadata.height = parseInt( height, 10 );
+
+ classes = tinymce.explode( imageNode.className, ' ' );
+ extraClasses = [];
+
</ins><span class="cx"> tinymce.each( classes, function( name ) {
</span><span class="cx">
</span><span class="cx"> if ( /^wp-image/.test( name ) ) {
</span><span class="cx"> metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
</span><del>- }
-
- if ( /^align/.test( name ) ) {
</del><ins>+ } else if ( /^align/.test( name ) ) {
</ins><span class="cx"> metadata.align = name.replace( 'align', '' );
</span><ins>+ } else if ( /^size/.test( name ) ) {
+ metadata.size = name.replace( 'size-', '' );
+ } else {
+ extraClasses.push( name );
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if ( /^size/.test( name ) ) {
- metadata.size = name.replace( 'size-', '' );
- }
</del><span class="cx"> } );
</span><span class="cx">
</span><ins>+ metadata.extraClasses = extraClasses.join( ' ' );
+
</ins><span class="cx"> // Extract caption
</span><span class="cx"> captionBlock = dom.getParents( imageNode, '.wp-caption' );
</span><span class="cx">
</span><span class="lines">@@ -194,68 +200,16 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function updateImage( imageNode, imageData ) {
</span><del>- var className, width, node, html, captionNode, nodeToReplace, uid, editedImg, id;
</del><ins>+ var classes, className, width, node, html, parent, wrap,
+ captionNode, dd, dl, id, attrs, linkAttrs,
+ dom = editor.dom;
</ins><span class="cx">
</span><del>- if ( imageData.caption ) {
</del><ins>+ classes = tinymce.explode( imageData.extraClasses, ' ' );
</ins><span class="cx">
</span><del>- html = createImageAndLink( imageData, 'html' );
-
- width = parseInt( imageData.width, 10 );
-
- if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
- width += 10;
- }
-
- className = 'align' + imageData.align;
- id = imageData.attachment_id ? 'id="attachment_'+ imageData.attachment_id +'" ' : '';
-
- // should create a new function for generating the caption markup
- html = '<dl ' + id + 'class="wp-caption '+ className +'" style="width: '+ width +'px">' +
- '<dt class="wp-caption-dt">'+ html + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
-
- node = editor.dom.create( 'div', { 'class': 'mceTemp' }, html );
- } else {
- node = createImageAndLink( imageData, 'node' );
</del><ins>+ if ( ! classes ) {
+ classes = [];
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- nodeToReplace = imageNode;
-
- captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
-
- if ( captionNode ) {
- nodeToReplace = captionNode;
- } else {
- if ( imageNode.parentNode.nodeName === 'A' ) {
- nodeToReplace = imageNode.parentNode;
- }
- }
-
- uid = editor.dom.uniqueId( 'wp_' );
- editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
- editor.dom.replace( node, nodeToReplace );
-
- // find the updated node
- node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
-
- editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
-
- editor.nodeChanged();
-
- editedImg = node.nodeName === 'IMG' ? node : editor.dom.select( 'img', node )[0];
-
- if ( editedImg ) {
- editor.selection.select( editedImg );
- // refresh toolbar
- addToolbar( editedImg );
- }
- }
-
- function createImageAndLink( imageData, mode ) {
- var classes = [],
- attrs, linkAttrs;
-
- mode = mode ? mode : 'node';
-
</del><span class="cx"> if ( ! imageData.caption ) {
</span><span class="cx"> classes.push( 'align' + imageData.align );
</span><span class="cx"> }
</span><span class="lines">@@ -269,45 +223,97 @@
</span><span class="cx">
</span><span class="cx"> attrs = {
</span><span class="cx"> src: imageData.url,
</span><del>- width: imageData.width,
- height: imageData.height,
</del><ins>+ width: imageData.width || null,
+ height: imageData.height || null,
</ins><span class="cx"> alt: imageData.alt,
</span><del>- title: imageData.title || null
</del><ins>+ title: imageData.title || null,
+ 'class': classes.join( ' ' ) || null
</ins><span class="cx"> };
</span><span class="cx">
</span><del>- if ( classes.length ) {
- attrs['class'] = classes.join( ' ' );
</del><ins>+ dom.setAttribs( imageNode, attrs );
+
+ linkAttrs = {
+ href: imageData.linkUrl,
+ rel: imageData.linkRel || null,
+ target: imageData.linkTargetBlank ? '_blank': null,
+ 'class': imageData.linkClassName || null
+ };
+
+ if ( imageNode.parentNode.nodeName === 'A' ) {
+ if ( imageData.linkUrl ) {
+ dom.setAttribs( imageNode.parentNode, linkAttrs );
+ } else {
+ dom.remove( imageNode.parentNode, true );
+ }
+ } else if ( imageData.linkUrl ) {
+ html = dom.createHTML( 'a', linkAttrs, dom.getOuterHTML( imageNode ) );
+ dom.outerHTML( imageNode, html );
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if ( imageData.linkUrl ) {
</del><ins>+ captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
</ins><span class="cx">
</span><del>- linkAttrs = {
- href: imageData.linkUrl
- };
</del><ins>+ if ( imageNode.parentNode.nodeName === 'A' ) {
+ node = imageNode.parentNode;
+ } else {
+ node = imageNode;
+ }
</ins><span class="cx">
</span><del>- if ( imageData.linkRel ) {
- linkAttrs.rel = imageData.linkRel;
- }
</del><ins>+ if ( imageData.caption ) {
+ width = parseInt( imageData.width, 10 );
+ id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
+ className = 'wp-caption align' + imageData.align;
</ins><span class="cx">
</span><del>- if ( imageData.linkTargetBlank ) {
- linkAttrs.target = '_blank';
</del><ins>+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ width += 10;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if ( imageData.linkClassName ) {
- linkAttrs['class'] = imageData.linkClassName;
- }
</del><ins>+ if ( captionNode ) {
+ dl = dom.select( 'dl.wp-caption', captionNode );
</ins><span class="cx">
</span><del>- if ( mode === 'node' ) {
- return editor.dom.create( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
- } else if ( mode === 'html' ) {
- return editor.dom.createHTML( 'a', linkAttrs, editor.dom.createHTML( 'img', attrs ) );
</del><ins>+ if ( dl.length ) {
+ dom.setAttribs( dl, {
+ id: id,
+ 'class': className,
+ style: 'width: ' + width + 'px'
+ } );
+ }
+
+ dd = dom.select( '.wp-caption-dd', captionNode );
+
+ if ( dd.length ) {
+ dom.setHTML( dd[0], imageData.caption );
+ }
+
+ } else {
+ id = id ? 'id="'+ id +'" ' : '';
+
+ // should create a new function for generating the caption markup
+ html = '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
+ '<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
+
+ if ( parent = dom.getParent( node, 'p' ) ) {
+ wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
+ dom.insertAfter( wrap, parent );
+ dom.remove( node );
+
+ if ( dom.isEmpty( parent ) ) {
+ dom.remove( parent );
+ }
+ } else {
+ dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
+ }
</ins><span class="cx"> }
</span><ins>+ } else if ( captionNode ) {
+ // Remove the caption wrapper and place the image in new paragraph
+ parent = dom.create( 'p' );
+ captionNode.parentNode.insertBefore( parent, captionNode );
+ parent.appendChild( node );
+ dom.remove( captionNode );
+ }
</ins><span class="cx">
</span><del>- } else if ( mode === 'node' ) {
- return editor.dom.create( 'img', attrs );
- } else if ( mode === 'html' ) {
- return editor.dom.createHTML( 'img', attrs );
- }
</del><ins>+ editor.nodeChanged();
+ // refresh the toolbar
+ addToolbar( imageNode );
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function editImage( img ) {
</span></span></pre></div>
<a id="trunksrcwpincludesmediatemplatephp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media-template.php (27897 => 27898)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media-template.php 2014-04-01 22:46:00 UTC (rev 27897)
+++ trunk/src/wp-includes/media-template.php 2014-04-02 01:53:56 UTC (rev 27898)
</span><span class="lines">@@ -641,6 +641,18 @@
</span><span class="cx"> <script type="text/html" id="tmpl-image-details">
</span><span class="cx"> <div class="media-embed">
</span><span class="cx"> <div class="embed-media-settings">
</span><ins>+ <div class="column-image">
+ <div class="image">
+ <img src="{{ data.model.url }}" draggable="false" />
+
+ <# if ( data.attachment && window.imageEdit ) { #>
+ <div class="actions">
+ <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
+ <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
+ </div>
+ <# } #>
+ </div>
+ </div>
</ins><span class="cx"> <div class="column-settings">
</span><span class="cx"> <?php
</span><span class="cx"> /** This filter is documented in wp-admin/includes/media.php */
</span><span class="lines">@@ -656,16 +668,7 @@
</span><span class="cx"> <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
</span><span class="cx"> </label>
</span><span class="cx">
</span><del>- <div class="setting advanced">
- <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
- <div class="hidden">
- <label class="setting title-text">
- <span><?php _e('Title Attribute'); ?></span>
- <input type="text" data-setting="title" value="{{ data.model.title }}" />
- </label>
- </div>
- </div>
-
</del><ins>+ <h3><?php _e( 'Display Settings' ); ?></h3>
</ins><span class="cx"> <div class="setting align">
</span><span class="cx"> <span><?php _e('Align'); ?></span>
</span><span class="cx"> <div class="button-group button-large" data-setting="align">
</span><span class="lines">@@ -685,87 +688,86 @@
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <# if ( data.attachment ) { #>
</span><del>- <div class="setting size">
- <span><?php _e('Size'); ?></span>
- <div class="button-group button-large" data-setting="size">
- <?php
- /** This filter is documented in wp-admin/includes/media.php */
- $sizes = apply_filters( 'image_size_names_choose', array(
- 'thumbnail' => __('Thumbnail'),
- 'medium' => __('Medium'),
- 'large' => __('Large'),
- 'full' => __('Full Size'),
- ) );
</del><ins>+ <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
+ <label class="setting">
+ <span><?php _e('Size'); ?></span>
+ <select class="size" name="size"
+ data-setting="size"
+ <# if ( data.userSettings ) { #>
+ data-user-setting="imgsize"
+ <# } #>>
+ <?php
+ /** This filter is documented in wp-admin/includes/media.php */
+ $sizes = apply_filters( 'image_size_names_choose', array(
+ 'thumbnail' => __('Thumbnail'),
+ 'medium' => __('Medium'),
+ 'large' => __('Large'),
+ 'full' => __('Full Size'),
+ ) );
</ins><span class="cx">
</span><del>- foreach ( $sizes as $value => $name ) : ?>
- <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
- if ( size ) { #>
- <button class="button" value="<?php echo esc_attr( $value ); ?>">
- <?php echo esc_html( $name ); ?>
- </button>
- <# } #>
- <?php endforeach; ?>
- </div>
- </div>
</del><ins>+ foreach ( $sizes as $value => $name ) : ?>
+ <#
+ var size = data.sizes['<?php echo esc_js( $value ); ?>'];
+ if ( size ) { #>
+ <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'full' ); ?>>
+ <?php echo esc_html( $name ); ?> – {{ size.width }} × {{ size.height }}
+ </option>
+ <# } #>
+ <?php endforeach; ?>
+ </select>
+ </label>
+ <# } #>
</ins><span class="cx"> <# } #>
</span><span class="cx">
</span><span class="cx"> <div class="setting link-to">
</span><span class="cx"> <span><?php _e('Link To'); ?></span>
</span><del>- <div class="button-group button-large" data-setting="link">
</del><ins>+ <select data-setting="link">
</ins><span class="cx"> <# if ( data.attachment ) { #>
</span><del>- <button class="button" value="file">
</del><ins>+ <option value="file">
</ins><span class="cx"> <?php esc_attr_e('Media File'); ?>
</span><del>- </button>
- <button class="button" value="post">
</del><ins>+ </option>
+ <option value="post">
</ins><span class="cx"> <?php esc_attr_e('Attachment Page'); ?>
</span><del>- </button>
</del><ins>+ </option>
</ins><span class="cx"> <# } else { #>
</span><del>- <button class="button" value="file">
</del><ins>+ <option value="file">
</ins><span class="cx"> <?php esc_attr_e('Image URL'); ?>
</span><del>- </button>
</del><ins>+ </option>
</ins><span class="cx"> <# } #>
</span><del>- <button class="button" value="custom">
</del><ins>+ <option value="custom">
</ins><span class="cx"> <?php esc_attr_e('Custom URL'); ?>
</span><del>- </button>
- <button class="button active" value="none">
</del><ins>+ </option>
+ <option value="none">
</ins><span class="cx"> <?php esc_attr_e('None'); ?>
</span><del>- </button>
- </div>
</del><ins>+ </option>
+ </select>
</ins><span class="cx"> <input type="text" class="link-to-custom" data-setting="linkUrl" />
</span><span class="cx"> </div>
</span><del>-
-
- <div class="setting link-settings">
- <div class="setting link-target">
- <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
- </div>
- <div class="advanced">
- <a class="show-advanced" href="#"><?php _e('show advanced'); ?></a>
- <div class="hidden">
- <label class="setting link-rel">
- <span><?php _e('Link Rel'); ?></span>
- <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
- </label>
- <label class="setting link-class-name">
- <span><?php _e('CSS Class'); ?></span>
- <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
- </label>
</del><ins>+ <div class="advanced">
+ <a class="advanced-toggle" href="#"><?php _e('Show advanced options'); ?></a>
+ <div class="hidden">
+ <label class="setting title-text">
+ <span><?php _e('Image Title Attribute'); ?></span>
+ <input type="text" data-setting="title" value="{{ data.model.title }}" />
+ </label>
+ <label class="setting extra-classes">
+ <span><?php _e('Image CSS Class'); ?></span>
+ <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+ </label>
+ <div class="setting link-target">
+ <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
</ins><span class="cx"> </div>
</span><ins>+ <label class="setting link-rel">
+ <span><?php _e('Link Rel'); ?></span>
+ <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
+ </label>
+ <label class="setting link-class-name">
+ <span><?php _e('Link CSS Class'); ?></span>
+ <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+ </label>
</ins><span class="cx"> </div>
</span><span class="cx"> </div>
</span><del>-
</del><span class="cx"> </div>
</span><del>- <div class="column-image">
- <div class="image">
- <img src="{{ data.model.url }}" draggable="false" />
- </div>
- <# if ( data.attachment && window.imageEdit ) { #>
- <div class="actions">
- <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
- <input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
- </div>
- <# } #>
- </div>
</del><span class="cx"> </div>
</span><span class="cx"> </div>
</span><span class="cx"> </script>
</span></span></pre>
</div>
</div>
</body>
</html>