<!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>[33154] trunk/src: Site Icon: Add Customizer UI.</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" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/33154">33154</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/33154","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>obenland</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-07-10 21:32:23 +0000 (Fri, 10 Jul 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Site Icon: Add Customizer UI.
Second part of the Site Icon feature after <a href="https://core.trac.wordpress.org/changeset/32994">[32994]</a> introduced it for Settings.
Props celloexpressions.
See <a href="https://core.trac.wordpress.org/ticket/16434">#16434</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminadminajaxphp">trunk/src/wp-admin/admin-ajax.php</a></li>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadminincludesajaxactionsphp">trunk/src/wp-admin/includes/ajax-actions.php</a></li>
<li><a href="#trunksrcwpadminincludesclasswpsiteiconphp">trunk/src/wp-admin/includes/class-wp-site-icon.php</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpadminoptionsgeneralphp">trunk/src/wp-admin/options-general.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizecontrolphp">trunk/src/wp-includes/class-wp-customize-control.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesgeneraltemplatephp">trunk/src/wp-includes/general-template.php</a></li>
<li><a href="#trunksrcwpincludesjscustomizeviewsjs">trunk/src/wp-includes/js/customize-views.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminadminajaxphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/admin-ajax.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/admin-ajax.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/admin-ajax.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,7 +62,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
</span><span class="cx" style="display: block; padding: 0 10px"> 'save-user-color-scheme', 'update-widget', 'query-themes', 'parse-embed', 'set-attachment-thumbnail',
</span><span class="cx" style="display: block; padding: 0 10px"> 'parse-media-shortcode', 'destroy-sessions', 'install-plugin', 'update-plugin', 'press-this-save-post',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'press-this-add-category',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'press-this-add-category', 'crop-image',
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Deprecated
</span></span></pre></div>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/css/customize-controls.css 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -751,6 +751,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .current,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .current,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .current,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .current,
+.customize-control-site_icon .current,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .current {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 8px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -786,6 +788,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .remove-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .default-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .upload-button,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .remove-button,
+.customize-control-cropped_image .default-button,
+.customize-control-cropped_image .upload-button,
+.customize-control-site_icon .remove-button,
+.customize-control-site_icon .default-button,
+.customize-control-site_icon .upload-button,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header button.new,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header button.remove {
</span><span class="cx" style="display: block; padding: 0 10px"> white-space: normal;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -797,6 +805,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .current .container,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .current .container,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .current .container,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .current .container,
+.customize-control-site_icon .current .container,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .current .container {
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-border-radius: 2px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -808,6 +818,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-media .current .container,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .current .container,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .current .container,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .current .container,
+.customize-control-site_icon .current .container,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .current .container {
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -816,6 +828,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .placeholder,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .placeholder,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .placeholder,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .placeholder,
+.customize-control-site_icon .placeholder,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .placeholder {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -827,6 +841,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .inner,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .inner,
+.customize-control-site_icon .inner,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .inner {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -840,6 +856,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-media .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .inner,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .inner,
+.customize-control-site_icon .inner,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .inner {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 40px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -849,6 +867,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .inner,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .inner,
+.customize-control-site_icon .inner,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .inner,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .inner .dashicons {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 20px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -952,6 +972,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .actions,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .actions,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .actions,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .actions,
+.customize-control-site_icon .actions,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .actions {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 32px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -970,6 +992,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload img,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image img,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background img,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image img,
+.customize-control-site_icon img,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header img {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-border-radius: 2px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -984,6 +1008,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .default-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .remove-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .default-button,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .remove-button,
+.customize-control-cropped_image .default-button,
+.customize-control-site_icon .remove-button,
+.customize-control-site_icon .default-button,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .remove {
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 3px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -993,6 +1021,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-upload .upload-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-image .upload-button,
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-control-background .upload-button,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-cropped_image .upload-button,
+.customize-control-site_icon .upload-button,
</ins><span class="cx" style="display: block; padding: 0 10px"> .customize-control-header .new {
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludesajaxactionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/ajax-actions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/ajax-actions.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/includes/ajax-actions.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3052,3 +3052,65 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['wp_press_this']->add_category();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * AJAX handler for cropping an image.
+ *
+ * @since 4.3.0
+ *
+ * @global WP_Site_Icon $wp_site_icon
+ */
+function wp_ajax_crop_image() {
+ $attachment_id = absint( $_POST['id'] );
+
+ check_ajax_referer( 'image_editor-' . $attachment_id, 'nonce' );
+ if ( ! current_user_can( 'customize' ) ) {
+ wp_send_json_error();
+ }
+
+ $context = str_replace( '_', '-', $_POST['context'] );
+ $data = array_map( 'absint', $_POST['cropDetails'] );
+ $cropped = wp_crop_image( $attachment_id, $data['x1'], $data['y1'], $data['width'], $data['height'], $data['dst_width'], $data['dst_height'] );
+
+ if ( ! $cropped || is_wp_error( $cropped ) ) {
+ wp_send_json_error( array( 'message' => __( 'Image could not be processed.' ) ) );
+ }
+
+ switch ( $context ) {
+ case 'site-icon':
+ require_once ABSPATH . '/wp-admin/includes/class-wp-site-icon.php';
+ global $wp_site_icon;
+
+ /** This filter is documented in wp-admin/custom-header.php */
+ $cropped = apply_filters( 'wp_create_file_in_uploads', $cropped, $attachment_id ); // For replication.
+ $object = $wp_site_icon->create_attachment_object( $cropped, $attachment_id );
+ unset( $object['ID'] );
+
+ // Update the attachment.
+ add_filter( 'intermediate_image_sizes_advanced', array( $wp_site_icon, 'additional_sizes' ) );
+ $attachment_id = $wp_site_icon->insert_attachment( $object, $cropped );
+ remove_filter( 'intermediate_image_sizes_advanced', array( $wp_site_icon, 'additional_sizes' ) );
+
+ // Additional sizes in wp_prepare_attachment_for_js().
+ add_filter( 'image_size_names_choose', array( $wp_site_icon, 'additional_sizes' ) );
+ break;
+
+ default:
+
+ /**
+ * Filters the attachment id for a cropped image.
+ *
+ * @since 4.3.0
+ *
+ * @param int $attachment_id The ID of the cropped image.
+ * @param string $context The feature requesting the cropped image.
+ */
+ $attachment_id = apply_filters( 'wp_ajax_cropped_attachment_id', 0, $context );
+
+ if ( ! $attachment_id ) {
+ wp_send_json_error();
+ }
+ }
+
+ wp_send_json_success( wp_prepare_attachment_for_js( $attachment_id ) );
+}
</ins></span></pre></div>
<a id="trunksrcwpadminincludesclasswpsiteiconphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-site-icon.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-site-icon.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/includes/class-wp-site-icon.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -274,7 +274,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="site-icon-crop-preview-shell hide-if-no-js">
</span><span class="cx" style="display: block; padding: 0 10px"> <h3><?php _e( 'Preview' ); ?></h3>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <strong><?php _e( 'As your favicon' ); ?></strong>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <strong><?php _e( 'As a browser icon' ); ?></strong>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="site-icon-crop-favicon-preview-shell">
</span><span class="cx" style="display: block; padding: 0 10px"> <img src="images/browser.png" class="site-icon-browser-preview" width="182" height="" alt="<?php esc_attr_e( 'Browser Chrome' ); ?>"/>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -284,7 +284,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <span class="site-icon-browser-title"><?php bloginfo( 'name' ); ?></span>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <strong><?php _e( 'As a mobile icon' ); ?></strong>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <strong><?php _e( 'As an app icon' ); ?></strong>
</ins><span class="cx" style="display: block; padding: 0 10px"> <div class="site-icon-crop-preview-homeicon">
</span><span class="cx" style="display: block; padding: 0 10px"> <img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -505,7 +505,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // ensure that we only resize the image into
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $sizes as $name => $size_array ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $size_array['crop'] ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( isset( $size_array['crop'] ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $only_crop_sizes[ $name ] = $size_array;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/js/customize-controls.js 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1836,10 +1836,249 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * A control for selecting and cropping an image.
+ *
</ins><span class="cx" style="display: block; padding: 0 10px"> * @class
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @augments wp.customize.MediaControl
</ins><span class="cx" style="display: block; padding: 0 10px"> * @augments wp.customize.Control
</span><span class="cx" style="display: block; padding: 0 10px"> * @augments wp.customize.Class
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ api.CroppedImageControl = api.MediaControl.extend({
+
+ /**
+ * Open the media modal to the library state.
+ */
+ openFrame: function( event ) {
+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+ return;
+ }
+
+ this.initFrame();
+ this.frame.setState( 'library' ).open();
+ },
+
+ /**
+ * Create a media modal select frame, and store it so the instance can be reused when needed.
+ */
+ initFrame: function() {
+ var l10n = _wpMediaViewsL10n;
+
+ this.frame = wp.media({
+ button: {
+ text: l10n.select,
+ close: false
+ },
+ states: [
+ new wp.media.controller.Library({
+ title: this.params.button_labels.frame_title,
+ library: wp.media.query({ type: 'image' }),
+ multiple: false,
+ date: false,
+ priority: 20,
+ suggestedWidth: this.params.width,
+ suggestedHeight: this.params.height
+ }),
+ new wp.media.controller.customizeImageCropper({
+ imgSelectOptions: this.calculateImageSelectOptions,
+ control: this
+ })
+ ]
+ });
+
+ this.frame.on( 'select', this.onSelect, this );
+ this.frame.on( 'cropped', this.onCropped, this );
+ this.frame.on( 'skippedcrop', this.onSkippedCrop, this );
+ },
+
+ /**
+ * After an image is selected in the media modal, switch to the cropper
+ * state if the image isn't the right size.
+ */
+ onSelect: function() {
+ var attachment = this.frame.state().get( 'selection' ).first().toJSON();
+
+ if ( this.params.width === attachment.width && this.params.height === attachment.height && ! this.params.flex_width && ! this.params.flex_height ) {
+ this.setImageFromAttachment( attachment );
+ this.frame.close();
+ } else {
+ this.frame.setState( 'cropper' );
+ }
+ },
+
+ /**
+ * After the image has been cropped, apply the cropped image data to the setting.
+ *
+ * @param {object} croppedImage Cropped attachment data.
+ */
+ onCropped: function( croppedImage ) {
+ this.setImageFromAttachment( croppedImage );
+ },
+
+ /**
+ * Returns a set of options, computed from the attached image data and
+ * control-specific data, to be fed to the imgAreaSelect plugin in
+ * wp.media.view.Cropper.
+ *
+ * @param {wp.media.model.Attachment} attachment
+ * @param {wp.media.controller.Cropper} controller
+ * @returns {Object} Options
+ */
+ calculateImageSelectOptions: function( attachment, controller ) {
+ var control = controller.get( 'control' ),
+ flexWidth = !! parseInt( control.params.flex_width, 10 ),
+ flexHeight = !! parseInt( control.params.flex_height, 10 ),
+ realWidth = attachment.get( 'width' ),
+ realHeight = attachment.get( 'height' ),
+ xInit = parseInt( control.params.width, 10 ),
+ yInit = parseInt( control.params.height, 10 ),
+ ratio = xInit / yInit,
+ xImg = realWidth,
+ yImg = realHeight,
+ imgSelectOptions;
+
+ controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) );
+
+ if ( xImg / yImg > ratio ) {
+ yInit = yImg;
+ xInit = yInit * ratio;
+ } else {
+ xInit = xImg;
+ yInit = xInit / ratio;
+ }
+
+ imgSelectOptions = {
+ handles: true,
+ keys: true,
+ instance: true,
+ persistent: true,
+ imageWidth: realWidth,
+ imageHeight: realHeight,
+ x1: 0,
+ y1: 0,
+ x2: xInit,
+ y2: yInit
+ };
+
+ if ( flexHeight === false && flexWidth === false ) {
+ imgSelectOptions.aspectRatio = xInit + ':' + yInit;
+ }
+ if ( flexHeight === false ) {
+ imgSelectOptions.maxHeight = yInit;
+ }
+ if ( flexWidth === false ) {
+ imgSelectOptions.maxWidth = xInit;
+ }
+
+ return imgSelectOptions;
+ },
+
+ /**
+ * Return whether the image must be cropped, based on required dimensions.
+ *
+ * @param {bool} flexW
+ * @param {bool} flexH
+ * @param {int} dstW
+ * @param {int} dstH
+ * @param {int} imgW
+ * @param {int} imgH
+ * @return {bool}
+ */
+ mustBeCropped: function( flexW, flexH, dstW, dstH, imgW, imgH ) {
+ if ( true === flexW && true === flexH ) {
+ return false;
+ }
+
+ if ( true === flexW && dstH === imgH ) {
+ return false;
+ }
+
+ if ( true === flexH && dstW === imgW ) {
+ return false;
+ }
+
+ if ( dstW === imgW && dstH === imgH ) {
+ return false;
+ }
+
+ if ( imgW <= dstW ) {
+ return false;
+ }
+
+ return true;
+ },
+
+ /**
+ * If cropping was skipped, apply the image data directly to the setting.
+ */
+ onSkippedCrop: function() {
+ var attachment = this.frame.state().get( 'selection' ).first().toJSON();
+ this.setImageFromAttachment( attachment );
+ },
+
+ /**
+ * Updates the setting and re-renders the control UI.
+ *
+ * @param {object} attachment
+ */
+ setImageFromAttachment: function( attachment ) {
+ this.params.attachment = attachment;
+
+ // Set the Customizer setting; the callback takes care of rendering.
+ this.setting( attachment.id );
+ }
+ });
+
+ /**
+ * A control for selecting and cropping Site Icons.
+ *
+ * @class
+ * @augments wp.customize.CroppedImageControl
+ * @augments wp.customize.MediaControl
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
+ api.SiteIconControl = api.CroppedImageControl.extend({
+ /**
+ * Updates the setting and re-renders the control UI.
+ *
+ * @param {object} attachment
+ */
+ setImageFromAttachment: function( attachment ) {
+ var icon = typeof attachment.sizes['site_icon-32'] !== 'undefined' ? attachment.sizes['site_icon-32'] : attachment.sizes.thumbnail;
+
+ this.params.attachment = attachment;
+
+ // Set the Customizer setting; the callback takes care of rendering.
+ this.setting( attachment.id );
+
+
+ // Update the icon in-browser.
+ $( 'link[rel="icon"]' ).attr( 'href', icon.url );
+ },
+
+ /**
+ * Called when the "Remove" link is clicked. Empties the setting.
+ *
+ * @param {object} event jQuery Event object
+ */
+ removeFile: function( event ) {
+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+ return;
+ }
+ event.preventDefault();
+
+ this.params.attachment = {};
+ this.setting( '' );
+ this.renderContent(); // Not bound to setting change when emptying.
+ $( 'link[rel="icon"]' ).attr( 'href', '' );
+ }
+ });
+
+ /**
+ * @class
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> api.HeaderControl = api.Control.extend({
</span><span class="cx" style="display: block; padding: 0 10px"> ready: function() {
</span><span class="cx" style="display: block; padding: 0 10px"> this.btnRemove = $('#customize-control-header_image .actions .remove');
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2695,13 +2934,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> api.controlConstructor = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: api.ColorControl,
- media: api.MediaControl,
- upload: api.UploadControl,
- image: api.ImageControl,
- header: api.HeaderControl,
- background: api.BackgroundControl,
- theme: api.ThemeControl
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: api.ColorControl,
+ media: api.MediaControl,
+ upload: api.UploadControl,
+ image: api.ImageControl,
+ cropped_image: api.CroppedImageControl,
+ site_icon: api.SiteIconControl,
+ header: api.HeaderControl,
+ background: api.BackgroundControl,
+ theme: api.ThemeControl
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> api.panelConstructor = {};
</span><span class="cx" style="display: block; padding: 0 10px"> api.sectionConstructor = {
</span></span></pre></div>
<a id="trunksrcwpadminoptionsgeneralphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/options-general.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/options-general.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-admin/options-general.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -163,7 +163,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <a class="button hide-if-js" href="<?php echo esc_url( $upload_url ); ?>"><?php _e( 'Add a Site Icon' ); ?></a>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <p class="description"><?php _e( 'Site Icon creates a favicon and app icons for your site.' ) ?></p>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <p class="description"><?php _e( 'The Site Icon is used as a browser and app icon for your site.' ); ?></p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </td>
</span><span class="cx" style="display: block; padding: 0 10px"> </tr>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( !is_multisite() ) { ?>
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizecontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-control.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-includes/class-wp-customize-control.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1001,6 +1001,134 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Customize Cropped Image Control class.
+ *
+ * @since 4.3.0
+ *
+ * @see WP_Customize_Image_Control
+ */
+class WP_Customize_Cropped_Image_Control extends WP_Customize_Image_Control {
+
+ /**
+ * Control type.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var string
+ */
+ public $type = 'cropped_image';
+
+ /**
+ * Suggested width for cropped image.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var int
+ */
+ public $width = 150;
+
+ /**
+ * Suggested height for cropped image.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var int
+ */
+ public $height = 150;
+
+ /**
+ * Whether the width is flexible.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var bool
+ */
+ public $flex_width = false;
+
+ /**
+ * Whether the height is flexible.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var bool
+ */
+ public $flex_height = false;
+
+ /**
+ * Enqueue control related scripts/styles.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ */
+ public function enqueue() {
+ wp_enqueue_script( 'customize-views' );
+
+ parent::enqueue();
+ }
+
+ /**
+ * Refresh the parameters passed to the JavaScript via JSON.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @uses WP_Customize_Image_Control::to_json()
+ * @see WP_Customize_Control::to_json()
+ */
+ public function to_json() {
+ parent::to_json();
+
+ $this->json['width'] = absint( $this->width );
+ $this->json['height'] = absint( $this->height );
+ $this->json['flex_width'] = absint( $this->flex_width );
+ $this->json['flex_height'] = absint( $this->flex_height );
+ }
+
+}
+
+/**
+ * Customize Site Icon control class.
+ *
+ * Used only for custom functionality in JavaScript.
+ *
+ * @since 4.3.0
+ *
+ * @see WP_Customize_Cropped_Image_Control
+ */
+class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control {
+
+ /**
+ * Control type.
+ *
+ * @since 4.3.0
+ *
+ * @access public
+ * @var string
+ */
+ public $type = 'site_icon';
+
+ /**
+ * Constructor.
+ *
+ * @since 4.3.0
+ *
+ * @param WP_Customize_Manager $manager
+ * @param string $id
+ * @param array $args
+ */
+ public function __construct( $manager, $id, $args = array() ) {
+ parent::__construct( $manager, $id, $args );
+ add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
+ }
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Customize Header Image Control class.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 3.4.0
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1278,6 +1278,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Upload_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Image_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Background_Image_Control' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
+ $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Theme_Control' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Themes */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1324,10 +1326,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ) ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Site Title & Tagline */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Site Identity */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_section( 'title_tagline', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'title' => __( 'Site Title & Tagline' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'title' => __( 'Site Identity' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> 'priority' => 20,
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1353,6 +1355,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'title_tagline',
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $icon = wp_get_attachment_image_src( absint( get_option( 'site_icon' ) ), 'full' );
+ $this->add_setting( 'site_icon', array(
+ 'default' => $icon[0] ? $icon[0] : '',
+ 'type' => 'option',
+ 'capability' => 'manage_options',
+ 'transport' => 'postMessage', // Previewed with JS in the Customizer controls window.
+ ) );
+
+ $this->add_control( new WP_Customize_Site_Icon_Control( $this, 'site_icon', array(
+ 'label' => __( 'Site Icon' ),
+ 'description' => __( 'The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.' ),
+ 'section' => 'title_tagline',
+ 'priority' => 60,
+ 'height' => 512,
+ 'width' => 512,
+ ) ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* Colors */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_section( 'colors', array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1375,6 +1394,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'label' => __( 'Display Header Text' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'title_tagline',
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'checkbox',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'priority' => 40,
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
</span></span></pre></div>
<a id="trunksrcwpincludesgeneraltemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/general-template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/general-template.php 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-includes/general-template.php 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2445,7 +2445,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @link http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon HTML5 specification link icon.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function wp_site_icon() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! has_site_icon() ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! has_site_icon() && ! is_customize_preview() ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpincludesjscustomizeviewsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/customize-views.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/customize-views.js 2015-07-10 21:21:07 UTC (rev 33153)
+++ trunk/src/wp-includes/js/customize-views.js 2015-07-10 21:32:23 UTC (rev 33154)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,7 +3,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! wp || ! wp.customize ) { return; }
</span><span class="cx" style="display: block; padding: 0 10px"> var api = wp.customize;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Use a custom ajax action for cropped image controls.
+ */
+ wp.media.controller.customizeImageCropper = wp.media.controller.Cropper.extend( {
+ doCrop: function( attachment ) {
+ var cropDetails = attachment.get( 'cropDetails' ),
+ control = this.get( 'control' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ cropDetails.dst_width = control.params.width;
+ cropDetails.dst_height = control.params.height;
+
+ return wp.ajax.post( 'crop-image', {
+ wp_customize: 'on',
+ nonce: attachment.get( 'nonces' ).edit,
+ id: attachment.get( 'id' ),
+ context: control.id,
+ cropDetails: cropDetails
+ } );
+ }
+ } );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * wp.customize.HeaderTool.CurrentView
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre>
</div>
</div>
</body>
</html>