Site Icon: Add crop preview to the media modal.

* Monkey patches imgAreaSelect library to support touch events.
* Removes Settings version of Site Icon since it would have been the same flow.
* Removes default value for Customizer setting - there is no default favicon.

Fixes #16434.



Built from https://develop.svn.wordpress.org/trunk@33329


git-svn-id: http://core.svn.wordpress.org/trunk@33301 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland 2015-07-20 15:57:25 +00:00
parent 8041554b30
commit 3248497cf3
26 changed files with 413 additions and 795 deletions

View File

@ -2,41 +2,15 @@
28.0 - Site Icon
------------------------------------------------------------------------------*/
.site-icon-image {
float: right;
margin: 0 0 0 20px;
}
.site-icon-content {
overflow: hidden;
padding: 10px;
position: relative;
}
.site-icon-crop-shell {
max-width: 720px;
}
.site-icon-crop-wrapper {
float: right;
}
.site-icon-crop-preview-shell {
float: left;
overflow: hidden;
}
.site-icon-crop-preview-shell h2 {
padding-top: 0;
}
.site-icon-crop-favicon-preview-shell {
.site-icon-preview .favicon-preview {
margin-bottom: 20px;
overflow: hidden;
position: relative;
max-width: 180px;
}
.site-icon-crop-preview-favicon,
.site-icon-browser-title {
.site-icon-preview .favicon,
.site-icon-preview .browser-title {
height: 16px;
right: 88px;
overflow: hidden;
@ -44,15 +18,15 @@
top: 16px;
}
.site-icon-crop-preview-favicon {
.site-icon-preview .favicon {
width: 16px;
}
.site-icon-browser-title {
.site-icon-preview .browser-title {
right: 109px;
}
.site-icon-crop-preview-homeicon {
.site-icon-preview .app-icon-preview {
background-color: #000;
-webkit-border-radius: 16px;
border-radius: 16px;
@ -60,24 +34,3 @@
overflow: hidden;
width: 64px;
}
.site-icon-crop-shell .submit {
clear: both;
}
@media only screen and (max-width: 768px) {
.site-icon-crop-wrapper,
.site-icon-crop-preview-shell {
float: none;
}
.site-icon-crop-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.site-icon-crop-wrapper img {
max-width: 100%;
height: auto;
}
}

View File

@ -2,41 +2,15 @@
28.0 - Site Icon
------------------------------------------------------------------------------*/
.site-icon-image {
float: left;
margin: 0 20px 0 0;
}
.site-icon-content {
overflow: hidden;
padding: 10px;
position: relative;
}
.site-icon-crop-shell {
max-width: 720px;
}
.site-icon-crop-wrapper {
float: left;
}
.site-icon-crop-preview-shell {
float: right;
overflow: hidden;
}
.site-icon-crop-preview-shell h2 {
padding-top: 0;
}
.site-icon-crop-favicon-preview-shell {
.site-icon-preview .favicon-preview {
margin-bottom: 20px;
overflow: hidden;
position: relative;
max-width: 180px;
}
.site-icon-crop-preview-favicon,
.site-icon-browser-title {
.site-icon-preview .favicon,
.site-icon-preview .browser-title {
height: 16px;
left: 88px;
overflow: hidden;
@ -44,15 +18,15 @@
top: 16px;
}
.site-icon-crop-preview-favicon {
.site-icon-preview .favicon {
width: 16px;
}
.site-icon-browser-title {
.site-icon-preview .browser-title {
left: 109px;
}
.site-icon-crop-preview-homeicon {
.site-icon-preview .app-icon-preview {
background-color: #000;
-webkit-border-radius: 16px;
border-radius: 16px;
@ -60,24 +34,3 @@
overflow: hidden;
width: 64px;
}
.site-icon-crop-shell .submit {
clear: both;
}
@media only screen and (max-width: 768px) {
.site-icon-crop-wrapper,
.site-icon-crop-preview-shell {
float: none;
}
.site-icon-crop-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.site-icon-crop-wrapper img {
max-width: 100%;
height: auto;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -65,371 +65,10 @@ class WP_Site_Icon {
* @access public
*/
public function __construct() {
// Add the favicon to the backend.
add_action( 'admin_menu', array( $this, 'admin_menu_upload_site_icon' ) );
add_action( 'admin_action_set_site_icon', array( $this, 'set_site_icon' ) );
add_action( 'admin_action_remove_site_icon', array( $this, 'remove_site_icon' ) );
add_action( 'delete_attachment', array( $this, 'delete_attachment_data' ), 10, 1 );
add_filter( 'get_post_metadata', array( $this, 'get_post_metadata' ), 10, 4 );
}
/**
* Adds a hidden upload page.
*
* There is no need to access it directly.
*
* @since 4.3.0
* @access public
*/
public function admin_menu_upload_site_icon() {
$hook = add_submenu_page( null, __( 'Site Icon' ), __( 'Site Icon' ), 'manage_options', 'site-icon', array( $this, 'upload_site_icon_page' ) );
add_action( "load-$hook", array( $this, 'add_upload_settings' ) );
add_action( "load-$hook", array( $this, 'maybe_skip_cropping' ) );
add_action( "admin_print_scripts-$hook", array( $this, 'enqueue_scripts' ) );
}
/**
* Adds scripts to admin settings pages.
*
* @since 4.3.0
* @access public
*/
public function enqueue_scripts() {
wp_enqueue_style( 'jcrop' );
wp_enqueue_script( 'site-icon-crop' );
}
/**
* Loads the settings when the admin is initialized.
*
* @since 4.3.0
* @access public
*/
public function add_upload_settings() {
add_settings_section( 'site-icon-upload', false, false, 'site-icon-upload' );
add_settings_field( 'site-icon-upload', __( 'Upload Image' ), array( $this, 'upload_field' ), 'site-icon-upload', 'site-icon-upload', array(
'label_for' => 'site-icon-upload',
) );
}
/**
* Removes the site icon.
*
* @since 4.3.0
* @access public
*/
public function remove_site_icon() {
check_admin_referer( 'remove-site-icon' );
$this->delete_site_icon();
add_settings_error( 'site-icon', 'icon-removed', __( 'Site Icon removed.' ), 'updated' );
}
/**
* Handle uploading a site icon.
*
* Uploading a site_icon is a 3 step process
*
* 1. Select the file to upload
* 2. Crop the file
* 3. Confirmation
*
* @since 4.3.0
* @access public
*/
public function upload_site_icon_page() {
$action = isset( $_REQUEST['action'] ) ? $_REQUEST['action'] : 'select_site_icon';
switch ( $action ) {
case 'select_site_icon':
$this->select_page();
break;
case 'crop_site_icon':
$this->crop_page();
break;
default:
wp_safe_redirect( admin_url( 'options-general.php#site-icon' ) );
exit;
}
}
/**
* Displays the site_icon form to upload the image.
*
* @since 4.3.0
* @access public
*/
public function select_page() {
?>
<div class="wrap">
<h1><?php _e( 'Add Site Icon' ); ?></h1>
<?php settings_errors( 'site-icon' ); ?>
<?php do_settings_sections( 'site-icon-upload' ); ?>
</div>
<?php
}
/**
* Handles settings field for file upload.
*
* @since 4.3.0
* @access public
*/
public function upload_field() {
wp_enqueue_media();
wp_enqueue_script( 'site-icon' );
wp_dequeue_script( 'site-icon-crop' );
$update_url = esc_url( add_query_arg( array(
'page' => 'site-icon',
'action' => 'crop_site_icon',
), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
?>
<p class="hide-if-no-js">
<label class="screen-reader-text" for="choose-from-library-link"><?php _e( 'Choose an image from your media library:' ); ?></label>
<button type="button" id="choose-from-library-link" class="button" data-size="<?php echo absint( $this->min_size ); ?>" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"><?php _e( 'Choose Image' ); ?></button>
</p>
<form class="hide-if-js" action="<?php echo esc_url( admin_url( 'options-general.php?page=site-icon' ) ); ?>" method="post" enctype="multipart/form-data">
<input name="action" value="crop_site_icon" type="hidden" />
<input name="site-icon" type="file" />
<input name="submit" value="<?php esc_attr_e( 'Upload Image' ); ?>" type="submit" class="button button-primary" />
<p class="description">
<?php printf( __( 'The image is recommended to be a square image of at least %spx in both width and height.' ), "<strong>$this->min_size</strong>" ); ?>
</p>
<?php wp_nonce_field( 'crop-site-icon' ); ?>
</form>
<?php
}
/**
* Checks if the image needs cropping.
*
* If it doesn't need cropping, proceed to set the icon.
*
* @since 4.3.0
* @access public
*/
public function maybe_skip_cropping() {
if ( empty( $_REQUEST['action'] ) || 'crop_site_icon' !== $_REQUEST['action'] ) {
return;
}
check_admin_referer( 'crop-site-icon' );
list( $attachment_id, $url, $image_size ) = $this->get_upload_data();
if ( $image_size[0] == $image_size[1] && $image_size[0] == $this->min_size ) {
// No cropping required.
$url = add_query_arg( array(
'attachment_id' => $attachment_id,
'skip-cropping' => true,
'create-new-attachment' => true,
'action' => 'set_site_icon',
), wp_nonce_url( admin_url( 'options-general.php' ), 'set-site-icon' ) );
wp_safe_redirect( $url );
die();
}
}
/**
* Handles the image crop admin view.
*
* @since 4.3.0
* @access public
*/
public function crop_page() {
check_admin_referer( 'crop-site-icon' );
list( $attachment_id, $url, $image_size ) = $this->get_upload_data();
if ( $image_size[0] < $this->min_size ) {
add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in width.' ), $this->min_size ) );
// back to step one
$this->select_page();
return;
}
if ( $image_size[1] < $this->min_size ) {
add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in height.' ), $this->min_size ) );
// Back to step one.
$this->select_page();
return;
}
wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', array(
'init_x' => 0,
'init_y' => 0,
'init_size' => $this->min_size,
'min_size' => $this->min_size,
'width' => $image_size[0],
'height' => $image_size[1],
) );
?>
<div class="wrap">
<h1 class="site-icon-title"><?php _e( 'Site Icon' ); ?></h1>
<?php settings_errors( 'site-icon' ); ?>
<div class="site-icon-crop-shell">
<form action="options-general.php" method="post" enctype="multipart/form-data">
<p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
<p class="hide-if-js description"><strong><?php _e( 'You need JavaScript to choose a part of the image.'); ?></strong></p>
<div class="site-icon-crop-wrapper">
<img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="512" height="" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
</div>
<div class="site-icon-crop-preview-shell hide-if-no-js">
<h2><?php _e( 'Preview' ); ?></h2>
<strong><?php _e( 'As a browser icon' ); ?></strong>
<div class="site-icon-crop-favicon-preview-shell">
<img src="images/browser.png" class="site-icon-browser-preview" width="182" height="" alt=""/>
<div class="site-icon-crop-preview-favicon">
<img src="<?php echo esc_url( $url ); ?>" id="preview-favicon" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
</div>
<span class="site-icon-browser-title"><?php bloginfo( 'name' ); ?></span>
</div>
<strong><?php _e( 'As an app icon' ); ?></strong>
<div class="site-icon-crop-preview-homeicon">
<img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
</div>
</div>
<input type="hidden" id="crop-x" name="crop-x" value="0" />
<input type="hidden" id="crop-y" name="crop-y" value="0" />
<input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $this->min_size ); ?>" />
<input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $this->min_size ); ?>" />
<input type="hidden" name="action" value="set_site_icon" />
<input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" />
<?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?>
<input type="hidden" name="create-new-attachment" value="true" />
<?php endif; ?>
<?php wp_nonce_field( 'set-site-icon' ); ?>
<p class="submit">
<?php submit_button( __( 'Crop and Publish' ), 'primary hide-if-no-js', 'submit', false ); ?>
<?php submit_button( __( 'Publish' ), 'primary hide-if-js', 'submit', false ); ?>
<a class="button secondary" href="options-general.php"><?php _e( 'Cancel' ); ?></a>
</p>
</form>
</div>
</div>
<?php
}
/**
* Handles saving a new Site Icon.
*
* @since 4.3.0
* @access public
*/
public function set_site_icon() {
check_admin_referer( 'set-site-icon' );
$attachment_id = absint( $_REQUEST['attachment_id'] );
$create_new_attachement = ! empty( $_REQUEST['create-new-attachment'] );
// If the current attachment as been set as site icon don't delete it.
if ( get_option( 'site_icon' ) == $attachment_id ) {
// Get the file path.
$image_url = get_attached_file( $attachment_id );
// Update meta data and possibly regenerate intermediate sizes.
add_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
$this->update_attachment_metadata( $attachment_id, $image_url );
remove_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
} else {
// Delete any existing site icon images.
$this->delete_site_icon();
if ( empty( $_REQUEST['skip-cropping'] ) ) {
$cropped = wp_crop_image( $attachment_id, $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], $this->min_size, $this->min_size );
} elseif ( $create_new_attachement ) {
$cropped = _copy_image_file( $attachment_id );
} else {
$cropped = get_attached_file( $attachment_id );
}
if ( ! $cropped || is_wp_error( $cropped ) ) {
wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
}
$object = $this->create_attachment_object( $cropped, $attachment_id );
if ( $create_new_attachement ) {
unset( $object['ID'] );
}
// Update the attachment.
add_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
$attachment_id = $this->insert_attachment( $object, $cropped );
remove_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) );
// Save the site_icon data into option
update_option( 'site_icon', $attachment_id );
}
add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' );
}
/**
* Handles uploading the file to be cropped in the second step.
*
* @since 4.3.0
* @access public
*/
public function handle_upload() {
$uploaded_file = $_FILES['site-icon'];
$file_type = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] );
if ( ! wp_match_mime_types( 'image', $file_type['type'] ) ) {
wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) );
}
$file = wp_handle_upload( $uploaded_file, array( 'test_form' => false ) );
if ( isset( $file['error'] ) ) {
wp_die( $file['error'], __( 'Image Upload Error' ) );
}
$url = $file['url'];
$type = $file['type'];
$file = $file['file'];
$filename = basename( $file );
// Construct the object array
$object = array(
'post_title' => $filename,
'post_content' => $url,
'post_mime_type' => $type,
'guid' => $url,
'context' => 'site-icon',
);
// Save the data
$attachment_id = wp_insert_attachment( $object, $file );
return compact( 'attachment_id', 'file', 'filename', 'url', 'type' );
}
/**
* Creates an attachment 'object'.
*
@ -564,23 +203,6 @@ class WP_Site_Icon {
return $sizes;
}
/**
* Deletes all additional image sizes, used for site icons.
*
* @since 4.3.0
* @access public
*
* @return bool Whether the site icon was successfully deleted.
*/
public function delete_site_icon() {
// We add the filter to make sure that we also delete all the added images.
add_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) );
wp_delete_attachment( get_option( 'site_icon' ), true );
remove_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) );
return delete_option( 'site_icon' );
}
/**
* Deletes the Site Icon when the image file is deleted.
*
@ -619,32 +241,6 @@ class WP_Site_Icon {
return $value;
}
/**
* Gets the data required to work with the uploaded image
*
* @since 4.3.0
* @access private
*
* @return array containing the collected data
*/
private function get_upload_data() {
if ( isset( $_GET['file'] ) ) {
$attachment_id = absint( $_GET['file'] );
$file = get_attached_file( $attachment_id, true );
$url = wp_get_attachment_image_src( $attachment_id, 'full' );
$url = $url[0];
} else {
$upload = $this->handle_upload();
$attachment_id = $upload['attachment_id'];
$file = $upload['file'];
$url = $upload['url'];
}
$image_size = getimagesize( $file );
return array( $attachment_id, $url, $image_size );
}
}
/**

View File

@ -2038,6 +2038,40 @@
* @augments wp.customize.Class
*/
api.SiteIconControl = api.CroppedImageControl.extend({
/**
* 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.SiteIconCropper({
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 );
},
/**
* Updates the setting and re-renders the control UI.
*

File diff suppressed because one or more lines are too long

View File

@ -1,53 +0,0 @@
/* global wpSiteIconCropData, jQuery */
(function($) {
var jcrop_api = {},
siteIconCrop = {
updateCoords : function ( coords ) {
$( '#crop-x' ).val( coords.x );
$( '#crop-y' ).val( coords.y );
$( '#crop-width' ).val( coords.w );
$( '#crop-height' ).val( coords.h );
siteIconCrop.showPreview( coords );
},
showPreview : function( coords ){
var rx = 64 / coords.w,
ry = 64 / coords.h,
preview_rx = 16 / coords.w,
preview_ry = 16 / coords.h;
$( '#preview-homeicon' ).css({
width: Math.round(rx * wpSiteIconCropData.width ) + 'px',
height: Math.round(ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
$( '#preview-favicon' ).css({
width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px',
height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px',
marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px'
});
},
ready: function() {
jcrop_api = $.Jcrop( '#crop-image' );
jcrop_api.setOptions({
bgColor: 'transparent',
aspectRatio: 1,
onSelect: siteIconCrop.updateCoords,
onChange: siteIconCrop.updateCoords,
trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ],
minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
});
jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);
}
};
siteIconCrop.ready();
})(jQuery);

View File

@ -1 +0,0 @@
!function(a){var b={},c={updateCoords:function(b){a("#crop-x").val(b.x),a("#crop-y").val(b.y),a("#crop-width").val(b.w),a("#crop-height").val(b.h),c.showPreview(b)},showPreview:function(b){var c=64/b.w,d=64/b.h,e=16/b.w,f=16/b.h;a("#preview-homeicon").css({width:Math.round(c*wpSiteIconCropData.width)+"px",height:Math.round(d*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(c*b.x)+"px",marginTop:"-"+Math.round(d*b.y)+"px"}),a("#preview-favicon").css({width:Math.round(e*wpSiteIconCropData.width)+"px",height:Math.round(f*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(e*b.x)+"px",marginTop:"-"+Math.floor(f*b.y)+"px"})},ready:function(){b=a.Jcrop("#crop-image"),b.setOptions({bgColor:"transparent",aspectRatio:1,onSelect:c.updateCoords,onChange:c.updateCoords,trueSize:[wpSiteIconCropData.width,wpSiteIconCropData.height],minSize:[wpSiteIconCropData.min_size,wpSiteIconCropData.min_size]}),b.animateTo([wpSiteIconCropData.init_x,wpSiteIconCropData.init_y,wpSiteIconCropData.init_size,wpSiteIconCropData.init_size])}};c.ready()}(jQuery);

View File

@ -1,50 +0,0 @@
(function($) {
var frame;
$( function() {
// Build the choose from library frame.
$( '#choose-from-library-link' ).on( 'click', function( event ) {
var $el = $(this);
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create the media frame.
frame = wp.media({
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('update'),
// Tell the button not to close the modal, since we're
// going to refresh the page when the image is selected.
close: false
},
states: [
new wp.media.controller.Library({
title: $el.data( 'choose' ),
library: wp.media.query({ type: 'image' }),
date: false,
suggestedWidth: $el.data( 'size' ),
suggestedHeight: $el.data( 'size' )
})
]
});
// When an image is selected, run a callback.
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first(),
link = $el.data('updateLink');
// Tell the browser to navigate to the crop step.
window.location = link + '&file=' + attachment.id;
});
frame.open();
});
});
}(jQuery));

View File

@ -1 +0,0 @@
!function(a){var b;a(function(){a("#choose-from-library-link").on("click",function(c){var d=a(this);return c.preventDefault(),b?void b.open():(b=wp.media({button:{text:d.data("update"),close:!1},states:[new wp.media.controller.Library({title:d.data("choose"),library:wp.media.query({type:"image"}),date:!1,suggestedWidth:d.data("size"),suggestedHeight:d.data("size")})]}),b.on("select",function(){var a=b.state().get("selection").first(),c=d.data("updateLink");window.location=c+"&file="+a.id}),void b.open())})})}(jQuery);

View File

@ -124,46 +124,6 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<td><input name="blogdescription" type="text" id="blogdescription" aria-describedby="tagline-description" value="<?php form_option('blogdescription'); ?>" class="regular-text" />
<p class="description" id="tagline-description"><?php _e( 'In a few words, explain what this site is about.' ) ?></p></td>
</tr>
<tr>
<th scope="row"><?php _e( 'Site Icon' ); ?></th>
<td>
<?php
$upload_url = admin_url( 'options-general.php?page=site-icon' );
$update_url = esc_url( add_query_arg( array(
'page' => 'site-icon',
'action' => 'crop_site_icon',
), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) );
wp_enqueue_media();
wp_enqueue_script( 'site-icon' );
if ( has_site_icon() ) :
$remove_url = add_query_arg( array(
'action' => 'remove_site_icon',
), wp_nonce_url( admin_url( 'options-general.php' ), 'remove-site-icon' ) );
?>
<img class="avatar avatar-150" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" />
<p class="hide-if-no-js">
<button type="button" id="choose-from-library-link" class="button" data-size="<?php echo absint( $GLOBALS['wp_site_icon']->min_size ); ?>" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>"><?php _e( 'Update Site Icon' ); ?></button>
<a href="<?php echo esc_url( $remove_url ); ?>"><?php _e( 'Remove Site Icon' ); ?></a>
</p>
<p class="hide-if-js">
<a href="<?php echo esc_url( $upload_url ); ?>" class="button"><?php _e( 'Update Site Icon' ); ?></a>
<a href="<?php echo esc_url( $remove_url ); ?>"><?php _e( 'Remove Site Icon' ); ?></a>
</p>
<?php else : ?>
<p class="hide-if-no-js">
<button type="button" id="choose-from-library-link" class="button" data-size="<?php echo absint( $GLOBALS['wp_site_icon']->min_size ); ?>" data-update-link="<?php echo esc_attr( $update_url ); ?>" data-choose="<?php esc_attr_e( 'Choose a Site Icon' ); ?>" data-update="<?php esc_attr_e( 'Set as Site Icon' ); ?>" aria-label="<?php esc_attr_e( 'Choose an image from your media library' ); ?>" aria-describedby="site-icon-description"><?php _e( 'Choose Image' ); ?></button>
</p>
<a class="button hide-if-js" href="<?php echo esc_url( $upload_url ); ?>"><?php _e( 'Add a Site Icon' ); ?></a>
<?php endif; ?>
<p id="site-icon-description" class="description"><?php _e( 'The Site Icon is used as a browser and app icon for your site.' ); ?></p>
</td>
</tr>
<?php if ( !is_multisite() ) { ?>
<tr>
<th scope="row"><label for="siteurl"><?php _e('WordPress Address (URL)') ?></label></th>

View File

@ -1357,9 +1357,7 @@ final class WP_Customize_Manager {
'section' => 'title_tagline',
) );
$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.

View File

@ -696,6 +696,10 @@
height: 100%;
}
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
margin-left: 300px;
}
.media-frame-content .crop-content .crop-image {
display: block;
margin: auto;
@ -2475,14 +2479,17 @@
@media only screen and (max-width: 480px) {
.media-modal-close {
top: 5px;
left: 5px;
top: -5px;
}
.media-modal .media-frame-title {
height: 40px;
}
.wp-core-ui.wp-customizer .media-button {
margin-top: 13px;
}
.media-modal .media-frame-title h1,
.media-frame:not(.hide-menu) .media-frame-title h1 {
font-size: 18px;

File diff suppressed because one or more lines are too long

View File

@ -696,6 +696,10 @@
height: 100%;
}
.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
margin-right: 300px;
}
.media-frame-content .crop-content .crop-image {
display: block;
margin: auto;
@ -2475,14 +2479,17 @@
@media only screen and (max-width: 480px) {
.media-modal-close {
top: 5px;
right: 5px;
top: -5px;
}
.media-modal .media-frame-title {
height: 40px;
}
.wp-core-ui.wp-customizer .media-button {
margin-top: 13px;
}
.media-modal .media-frame-title h1,
.media-frame:not(.hide-menu) .media-frame-title h1 {
font-size: 18px;

File diff suppressed because one or more lines are too long

View File

@ -3,27 +3,6 @@
if ( ! wp || ! wp.customize ) { return; }
var api = wp.customize;
/**
* 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' );
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
} );
}
} );
/**
* wp.customize.HeaderTool.CurrentView
*

View File

@ -1 +1 @@
!function(a,b,c){if(b&&b.customize){var d=b.customize;b.media.controller.customizeImageCropper=b.media.controller.Cropper.extend({doCrop:function(a){var c=a.get("cropDetails"),d=this.get("control");return c.dst_width=d.params.width,c.dst_height=d.params.height,b.ajax.post("crop-image",{wp_customize:"on",nonce:a.get("nonces").edit,id:a.get("id"),context:d.id,cropDetails:c})}}),d.HeaderTool.CurrentView=b.Backbone.View.extend({template:b.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setPlaceholder(),this.setButtons(),this},getHeight:function(){var a,b,c,e=this.$el.find("img");return e.length?(this.$el.find(".inner").hide(),a=this.model.get("savedHeight"),b=e.height()||a,b||(c=d.get().header_image_data,b=c&&c.width&&c.height?260/c.width*c.height:40),b):(this.$el.find(".inner").show(),40)},setPlaceholder:function(a){var b=a||this.getHeight();this.model.set("savedHeight",b),this.$el.add(this.$el.find(".placeholder")).height(b)},setButtons:function(){var b=a("#customize-control-header_image .actions .remove");this.model.get("choice")?b.show():b.hide()}}),d.HeaderTool.ChoiceView=b.Backbone.View.extend({template:b.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var a=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),c.contains(a,d.get().header_image)&&d.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var a=this.model.get("collection");return c.extend(this.model.toJSON(),{type:a.type})},getHeight:d.HeaderTool.CurrentView.prototype.getHeight,setPlaceholder:d.HeaderTool.CurrentView.prototype.setPlaceholder,select:function(){this.preventJump(),this.model.save(),d.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var b=a(".wp-full-overlay-sidebar-content"),d=b.scrollTop();c.defer(function(){b.scrollTop(d)})},removeImage:function(a){a.stopPropagation(),this.model.destroy(),this.remove()}}),d.HeaderTool.ChoiceListView=b.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(a){var b;a.set({collection:this.collection}),b=new d.HeaderTool.ChoiceView({model:a}),this.$el.append(b.render().el)},toggleList:function(){var a=this.$el.parents().prev(".customize-control-title"),b=this.$el.find(".random").parent();this.collection.shouldHideTitle()?a.add(b).hide():a.add(b).show()}}),d.HeaderTool.CombinedList=b.Backbone.View.extend({initialize:function(a){this.collections=a,this.on("all",this.propagate,this)},propagate:function(a,b){c.each(this.collections,function(c){c.trigger(a,b)})}})}}(jQuery,window.wp,_);
!function(a,b,c){if(b&&b.customize){var d=b.customize;d.HeaderTool.CurrentView=b.Backbone.View.extend({template:b.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setPlaceholder(),this.setButtons(),this},getHeight:function(){var a,b,c,e=this.$el.find("img");return e.length?(this.$el.find(".inner").hide(),a=this.model.get("savedHeight"),b=e.height()||a,b||(c=d.get().header_image_data,b=c&&c.width&&c.height?260/c.width*c.height:40),b):(this.$el.find(".inner").show(),40)},setPlaceholder:function(a){var b=a||this.getHeight();this.model.set("savedHeight",b),this.$el.add(this.$el.find(".placeholder")).height(b)},setButtons:function(){var b=a("#customize-control-header_image .actions .remove");this.model.get("choice")?b.show():b.hide()}}),d.HeaderTool.ChoiceView=b.Backbone.View.extend({template:b.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var a=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),c.contains(a,d.get().header_image)&&d.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var a=this.model.get("collection");return c.extend(this.model.toJSON(),{type:a.type})},getHeight:d.HeaderTool.CurrentView.prototype.getHeight,setPlaceholder:d.HeaderTool.CurrentView.prototype.setPlaceholder,select:function(){this.preventJump(),this.model.save(),d.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var b=a(".wp-full-overlay-sidebar-content"),d=b.scrollTop();c.defer(function(){b.scrollTop(d)})},removeImage:function(a){a.stopPropagation(),this.model.destroy(),this.remove()}}),d.HeaderTool.ChoiceListView=b.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(a){var b;a.set({collection:this.collection}),b=new d.HeaderTool.ChoiceView({model:a}),this.$el.append(b.render().el)},toggleList:function(){var a=this.$el.parents().prev(".customize-control-title"),b=this.$el.find(".random").parent();this.collection.shouldHideTitle()?a.add(b).hide():a.add(b).show()}}),d.HeaderTool.CombinedList=b.Backbone.View.extend({initialize:function(a){this.collections=a,this.on("all",this.propagate,this)},propagate:function(a,b){c.each(this.collections,function(c){c.trigger(a,b)})}})}}(jQuery,window.wp,_);

View File

@ -1,6 +1,6 @@
/*
* imgAreaSelect jQuery plugin
* version 0.9.10
* version 0.9.10-monkey
*
* Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)
*
@ -189,7 +189,7 @@ $.imgAreaSelect = function (img, options) {
* @return Viewport X
*/
function evX(event) {
return event.pageX - parOfs.left;
return max(event.pageX || 0, touchCoords(event).x) - parOfs.left;
}
/**
@ -200,7 +200,23 @@ $.imgAreaSelect = function (img, options) {
* @return Viewport Y
*/
function evY(event) {
return event.pageY - parOfs.top;
return max(event.pageY || 0, touchCoords(event).y) - parOfs.top;
}
/**
* Get X and Y coordinates of a touch event
*
* @param event
* The event object
* @return Coordinates object
*/
function touchCoords(event) {
var oev = event.originalEvent || {};
if (oev.touches && oev.touches.length)
return { x: oev.touches[0].pageX, y: oev.touches[0].pageY };
else
return { x: 0, y: 0 };
}
/**
@ -486,8 +502,8 @@ $.imgAreaSelect = function (img, options) {
if (options.autoHide || selection.width * selection.height == 0)
hide($box.add($outer), function () { $(this).hide(); });
$(document).unbind('mousemove', selectingMouseMove);
$box.mousemove(areaMouseMove);
$(document).off('mousemove touchmove', selectingMouseMove);
$box.on('mousemove touchmove', areaMouseMove);
options.onSelectEnd(img, getSelection());
}
@ -500,7 +516,14 @@ $.imgAreaSelect = function (img, options) {
* @return false
*/
function areaMouseDown(event) {
if (event.which != 1) return false;
if (event.type == 'mousedown' && event.which != 1) return false;
/*
* With mobile browsers, there is no "moving the pointer over" action,
* so we need to simulate one mousemove event happening prior to
* mousedown/touchstart.
*/
areaMouseMove(event);
adjust();
@ -511,22 +534,22 @@ $.imgAreaSelect = function (img, options) {
x1 = viewX(selection[/w/.test(resize) ? 'x2' : 'x1']);
y1 = viewY(selection[/n/.test(resize) ? 'y2' : 'y1']);
$(document).mousemove(selectingMouseMove)
.one('mouseup', docMouseUp);
$box.unbind('mousemove', areaMouseMove);
$(document).on('mousemove touchmove', selectingMouseMove)
.one('mouseup touchend', docMouseUp);
$box.off('mousemove touchmove', areaMouseMove);
}
else if (options.movable) {
startX = left + selection.x1 - evX(event);
startY = top + selection.y1 - evY(event);
$box.unbind('mousemove', areaMouseMove);
$box.off('mousemove touchmove', areaMouseMove);
$(document).mousemove(movingMouseMove)
.one('mouseup', function () {
$(document).on('mousemove touchmove', movingMouseMove)
.one('mouseup touchend', function () {
options.onSelectEnd(img, getSelection());
$(document).unbind('mousemove', movingMouseMove);
$box.mousemove(areaMouseMove);
$(document).off('mousemove touchmove', movingMouseMove);
$box.on('mousemove touchmove', areaMouseMove);
});
}
else
@ -676,7 +699,7 @@ $.imgAreaSelect = function (img, options) {
* Start selection
*/
function startSelection() {
$(document).unbind('mousemove', startSelection);
$(document).off('mousemove touchmove', startSelection);
adjust();
x2 = x1;
@ -691,9 +714,10 @@ $.imgAreaSelect = function (img, options) {
shown = true;
$(document).unbind('mouseup', cancelSelection)
.mousemove(selectingMouseMove).one('mouseup', docMouseUp);
$box.unbind('mousemove', areaMouseMove);
$(document).off('mouseup touchend', cancelSelection)
.on('mousemove touchmove', selectingMouseMove)
.one('mouseup touchend', docMouseUp);
$box.off('mousemove touchmove', areaMouseMove);
options.onSelectStart(img, getSelection());
}
@ -702,8 +726,8 @@ $.imgAreaSelect = function (img, options) {
* Cancel selection
*/
function cancelSelection() {
$(document).unbind('mousemove', startSelection)
.unbind('mouseup', cancelSelection);
$(document).off('mousemove touchmove', startSelection)
.off('mouseup touchend', cancelSelection);
hide($box.add($outer));
setSelection(selX(x1), selY(y1), selX(x1), selY(y1));
@ -731,7 +755,8 @@ $.imgAreaSelect = function (img, options) {
startY = y1 = evY(event);
/* Selection will start when the mouse is moved */
$(document).mousemove(startSelection).mouseup(cancelSelection);
$(document).on({ 'mousemove touchmove': startSelection,
'mouseup touchend': cancelSelection });
return false;
}
@ -989,20 +1014,22 @@ $.imgAreaSelect = function (img, options) {
if (options.disable || options.enable === false) {
/* Disable the plugin */
$box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);
$(window).unbind('resize', windowResize);
$box.off({ 'mousemove touchmove': areaMouseMove,
'mousedown touchstart': areaMouseDown });
$(window).off('resize', windowResize);
}
else {
if (options.enable || options.disable === false) {
/* Enable the plugin */
if (options.resizable || options.movable)
$box.mousemove(areaMouseMove).mousedown(areaMouseDown);
$box.on({ 'mousemove touchmove': areaMouseMove,
'mousedown touchstart': areaMouseDown });
$(window).resize(windowResize);
}
if (!options.persistent)
$img.add($outer).mousedown(imgMouseDown);
$img.add($outer).on('mousedown touchstart', imgMouseDown);
}
options.enable = options.disable = undefined;

File diff suppressed because one or more lines are too long

View File

@ -386,6 +386,42 @@ module.exports = Cropper;
},{}],4:[function(require,module,exports){
/*globals wp */
/**
* wp.media.controller.CustomizeImageCropper
*
* A state for cropping an image.
*
* @class
* @augments wp.media.controller.Cropper
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
var Controller = wp.media.controller,
CustomizeImageCropper;
CustomizeImageCropper = Controller.Cropper.extend({
doCrop: function( attachment ) {
var cropDetails = attachment.get( 'cropDetails' ),
control = this.get( 'control' );
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
} );
}
});
module.exports = CustomizeImageCropper;
},{}],5:[function(require,module,exports){
/*globals wp */
/**
* wp.media.controller.EditImage
*
@ -461,7 +497,7 @@ EditImage = wp.media.controller.State.extend({
module.exports = EditImage;
},{}],5:[function(require,module,exports){
},{}],6:[function(require,module,exports){
/*globals wp, _, Backbone */
/**
@ -599,7 +635,7 @@ Embed = wp.media.controller.State.extend({
module.exports = Embed;
},{}],6:[function(require,module,exports){
},{}],7:[function(require,module,exports){
/*globals wp, _ */
/**
@ -723,7 +759,7 @@ FeaturedImage = Library.extend({
module.exports = FeaturedImage;
},{}],7:[function(require,module,exports){
},{}],8:[function(require,module,exports){
/*globals wp, _ */
/**
@ -816,7 +852,7 @@ GalleryAdd = Library.extend({
module.exports = GalleryAdd;
},{}],8:[function(require,module,exports){
},{}],9:[function(require,module,exports){
/*globals wp */
/**
@ -960,7 +996,7 @@ GalleryEdit = Library.extend({
module.exports = GalleryEdit;
},{}],9:[function(require,module,exports){
},{}],10:[function(require,module,exports){
/*globals wp, _ */
/**
@ -1024,7 +1060,7 @@ ImageDetails = State.extend({
module.exports = ImageDetails;
},{}],10:[function(require,module,exports){
},{}],11:[function(require,module,exports){
/*globals wp, _, Backbone */
/**
@ -1298,7 +1334,7 @@ _.extend( Library.prototype, wp.media.selectionSync );
module.exports = Library;
},{}],11:[function(require,module,exports){
},{}],12:[function(require,module,exports){
/*globals wp, _ */
/**
@ -1350,7 +1386,7 @@ MediaLibrary = Library.extend({
module.exports = MediaLibrary;
},{}],12:[function(require,module,exports){
},{}],13:[function(require,module,exports){
/*globals Backbone, _ */
/**
@ -1531,7 +1567,7 @@ _.extend( Region.prototype, {
module.exports = Region;
},{}],13:[function(require,module,exports){
},{}],14:[function(require,module,exports){
/*globals wp, _ */
/**
@ -1641,7 +1677,58 @@ ReplaceImage = Library.extend({
module.exports = ReplaceImage;
},{}],14:[function(require,module,exports){
},{}],15:[function(require,module,exports){
/*globals wp, Backbone */
/**
* wp.media.controller.SiteIconCropper
*
* A state for cropping a Site Icon.
*
* @class
* @augments wp.media.controller.Cropper
* @augments wp.media.controller.State
* @augments Backbone.Model
*/
var Controller = wp.media.controller,
SiteIconCropper;
SiteIconCropper = Controller.Cropper.extend({
activate: function() {
this.frame.on( 'content:create:crop', this.createCropContent, this );
this.frame.on( 'close', this.removeCropper, this );
this.set('selection', new Backbone.Collection(this.frame._selection.single));
},
createCropContent: function() {
this.cropperView = new wp.media.view.SiteIconCropper({
controller: this,
attachment: this.get('selection').first()
});
this.cropperView.on('image-loaded', this.createCropToolbar, this);
this.frame.content.set(this.cropperView);
},
doCrop: function( attachment ) {
var cropDetails = attachment.get( 'cropDetails' ),
control = this.get( 'control' );
cropDetails.dst_width = control.params.width;
cropDetails.dst_height = control.params.height;
return wp.ajax.post( 'crop-image', {
nonce: attachment.get( 'nonces' ).edit,
id: attachment.get( 'id' ),
context: 'site-icon',
cropDetails: cropDetails
} );
}
});
module.exports = SiteIconCropper;
},{}],16:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -1767,7 +1854,7 @@ _.each([ 'on', 'off', 'trigger' ], function( method ) {
module.exports = StateMachine;
},{}],15:[function(require,module,exports){
},{}],17:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -2010,7 +2097,7 @@ _.each(['toolbar','content'], function( region ) {
module.exports = State;
},{}],16:[function(require,module,exports){
},{}],18:[function(require,module,exports){
/*globals _ */
/**
@ -2078,7 +2165,7 @@ var selectionSync = {
module.exports = selectionSync;
},{}],17:[function(require,module,exports){
},{}],19:[function(require,module,exports){
/*globals wp, jQuery, _, Backbone */
var media = wp.media,
@ -2171,6 +2258,8 @@ media.controller.EditImage = require( './controllers/edit-image.js' );
media.controller.MediaLibrary = require( './controllers/media-library.js' );
media.controller.Embed = require( './controllers/embed.js' );
media.controller.Cropper = require( './controllers/cropper.js' );
media.controller.CustomizeImageCropper = require( './controllers/customize-image-cropper.js' );
media.controller.SiteIconCropper = require( './controllers/site-icon-cropper.js' );
media.View = require( './views/view.js' );
media.view.Frame = require( './views/frame.js' );
@ -2224,10 +2313,12 @@ media.view.EmbedLink = require( './views/embed/link.js' );
media.view.EmbedImage = require( './views/embed/image.js' );
media.view.ImageDetails = require( './views/image-details.js' );
media.view.Cropper = require( './views/cropper.js' );
media.view.SiteIconCropper = require( './views/site-icon-cropper.js' );
media.view.SiteIconPreview = require( './views/site-icon-preview.js' );
media.view.EditImage = require( './views/edit-image.js' );
media.view.Spinner = require( './views/spinner.js' );
},{"./controllers/collection-add.js":1,"./controllers/collection-edit.js":2,"./controllers/cropper.js":3,"./controllers/edit-image.js":4,"./controllers/embed.js":5,"./controllers/featured-image.js":6,"./controllers/gallery-add.js":7,"./controllers/gallery-edit.js":8,"./controllers/image-details.js":9,"./controllers/library.js":10,"./controllers/media-library.js":11,"./controllers/region.js":12,"./controllers/replace-image.js":13,"./controllers/state-machine.js":14,"./controllers/state.js":15,"./utils/selection-sync.js":16,"./views/attachment-compat.js":18,"./views/attachment-filters.js":19,"./views/attachment-filters/all.js":20,"./views/attachment-filters/date.js":21,"./views/attachment-filters/uploaded.js":22,"./views/attachment.js":23,"./views/attachment/details.js":24,"./views/attachment/edit-library.js":25,"./views/attachment/edit-selection.js":26,"./views/attachment/library.js":27,"./views/attachment/selection.js":28,"./views/attachments.js":29,"./views/attachments/browser.js":30,"./views/attachments/selection.js":31,"./views/button-group.js":32,"./views/button.js":33,"./views/cropper.js":34,"./views/edit-image.js":35,"./views/embed.js":36,"./views/embed/image.js":37,"./views/embed/link.js":38,"./views/embed/url.js":39,"./views/focus-manager.js":40,"./views/frame.js":41,"./views/frame/image-details.js":42,"./views/frame/post.js":43,"./views/frame/select.js":44,"./views/iframe.js":45,"./views/image-details.js":46,"./views/label.js":47,"./views/media-frame.js":48,"./views/menu-item.js":49,"./views/menu.js":50,"./views/modal.js":51,"./views/priority-list.js":52,"./views/router-item.js":53,"./views/router.js":54,"./views/search.js":55,"./views/selection.js":56,"./views/settings.js":57,"./views/settings/attachment-display.js":58,"./views/settings/gallery.js":59,"./views/settings/playlist.js":60,"./views/sidebar.js":61,"./views/spinner.js":62,"./views/toolbar.js":63,"./views/toolbar/embed.js":64,"./views/toolbar/select.js":65,"./views/uploader/editor.js":66,"./views/uploader/inline.js":67,"./views/uploader/status-error.js":68,"./views/uploader/status.js":69,"./views/uploader/window.js":70,"./views/view.js":71}],18:[function(require,module,exports){
},{"./controllers/collection-add.js":1,"./controllers/collection-edit.js":2,"./controllers/cropper.js":3,"./controllers/customize-image-cropper.js":4,"./controllers/edit-image.js":5,"./controllers/embed.js":6,"./controllers/featured-image.js":7,"./controllers/gallery-add.js":8,"./controllers/gallery-edit.js":9,"./controllers/image-details.js":10,"./controllers/library.js":11,"./controllers/media-library.js":12,"./controllers/region.js":13,"./controllers/replace-image.js":14,"./controllers/site-icon-cropper.js":15,"./controllers/state-machine.js":16,"./controllers/state.js":17,"./utils/selection-sync.js":18,"./views/attachment-compat.js":20,"./views/attachment-filters.js":21,"./views/attachment-filters/all.js":22,"./views/attachment-filters/date.js":23,"./views/attachment-filters/uploaded.js":24,"./views/attachment.js":25,"./views/attachment/details.js":26,"./views/attachment/edit-library.js":27,"./views/attachment/edit-selection.js":28,"./views/attachment/library.js":29,"./views/attachment/selection.js":30,"./views/attachments.js":31,"./views/attachments/browser.js":32,"./views/attachments/selection.js":33,"./views/button-group.js":34,"./views/button.js":35,"./views/cropper.js":36,"./views/edit-image.js":37,"./views/embed.js":38,"./views/embed/image.js":39,"./views/embed/link.js":40,"./views/embed/url.js":41,"./views/focus-manager.js":42,"./views/frame.js":43,"./views/frame/image-details.js":44,"./views/frame/post.js":45,"./views/frame/select.js":46,"./views/iframe.js":47,"./views/image-details.js":48,"./views/label.js":49,"./views/media-frame.js":50,"./views/menu-item.js":51,"./views/menu.js":52,"./views/modal.js":53,"./views/priority-list.js":54,"./views/router-item.js":55,"./views/router.js":56,"./views/search.js":57,"./views/selection.js":58,"./views/settings.js":59,"./views/settings/attachment-display.js":60,"./views/settings/gallery.js":61,"./views/settings/playlist.js":62,"./views/sidebar.js":63,"./views/site-icon-cropper.js":64,"./views/site-icon-preview.js":65,"./views/spinner.js":66,"./views/toolbar.js":67,"./views/toolbar/embed.js":68,"./views/toolbar/select.js":69,"./views/uploader/editor.js":70,"./views/uploader/inline.js":71,"./views/uploader/status-error.js":72,"./views/uploader/status.js":73,"./views/uploader/window.js":74,"./views/view.js":75}],20:[function(require,module,exports){
/*globals _ */
/**
@ -2314,7 +2405,7 @@ AttachmentCompat = View.extend({
module.exports = AttachmentCompat;
},{}],19:[function(require,module,exports){
},{}],21:[function(require,module,exports){
/*globals _, jQuery */
/**
@ -2393,7 +2484,7 @@ AttachmentFilters = wp.media.View.extend({
module.exports = AttachmentFilters;
},{}],20:[function(require,module,exports){
},{}],22:[function(require,module,exports){
/*globals wp */
/**
@ -2485,7 +2576,7 @@ All = wp.media.view.AttachmentFilters.extend({
module.exports = All;
},{}],21:[function(require,module,exports){
},{}],23:[function(require,module,exports){
/*globals wp, _ */
/**
@ -2528,7 +2619,7 @@ DateFilter = wp.media.view.AttachmentFilters.extend({
module.exports = DateFilter;
},{}],22:[function(require,module,exports){
},{}],24:[function(require,module,exports){
/*globals wp */
/**
@ -2589,7 +2680,7 @@ Uploaded = wp.media.view.AttachmentFilters.extend({
module.exports = Uploaded;
},{}],23:[function(require,module,exports){
},{}],25:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -3137,7 +3228,7 @@ _.each({
module.exports = Attachment;
},{}],24:[function(require,module,exports){
},{}],26:[function(require,module,exports){
/*globals wp, _ */
/**
@ -3277,7 +3368,7 @@ Details = Attachment.extend({
module.exports = Details;
},{}],25:[function(require,module,exports){
},{}],27:[function(require,module,exports){
/*globals wp */
/**
@ -3297,7 +3388,7 @@ var EditLibrary = wp.media.view.Attachment.extend({
module.exports = EditLibrary;
},{}],26:[function(require,module,exports){
},{}],28:[function(require,module,exports){
/*globals wp */
/**
@ -3318,7 +3409,7 @@ var EditSelection = wp.media.view.Attachment.Selection.extend({
module.exports = EditSelection;
},{}],27:[function(require,module,exports){
},{}],29:[function(require,module,exports){
/*globals wp */
/**
@ -3338,7 +3429,7 @@ var Library = wp.media.view.Attachment.extend({
module.exports = Library;
},{}],28:[function(require,module,exports){
},{}],30:[function(require,module,exports){
/*globals wp */
/**
@ -3362,7 +3453,7 @@ var Selection = wp.media.view.Attachment.extend({
module.exports = Selection;
},{}],29:[function(require,module,exports){
},{}],31:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -3663,7 +3754,7 @@ Attachments = View.extend({
module.exports = Attachments;
},{}],30:[function(require,module,exports){
},{}],32:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -4109,7 +4200,7 @@ AttachmentsBrowser = View.extend({
module.exports = AttachmentsBrowser;
},{}],31:[function(require,module,exports){
},{}],33:[function(require,module,exports){
/*globals wp, _ */
/**
@ -4141,7 +4232,7 @@ Selection = Attachments.extend({
module.exports = Selection;
},{}],32:[function(require,module,exports){
},{}],34:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -4189,7 +4280,7 @@ ButtonGroup = wp.media.View.extend({
module.exports = ButtonGroup;
},{}],33:[function(require,module,exports){
},{}],35:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -4277,7 +4368,7 @@ var Button = wp.media.View.extend({
module.exports = Button;
},{}],34:[function(require,module,exports){
},{}],36:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -4346,7 +4437,7 @@ Cropper = View.extend({
module.exports = Cropper;
},{}],35:[function(require,module,exports){
},{}],37:[function(require,module,exports){
/*globals wp, _ */
/**
@ -4404,7 +4495,7 @@ EditImage = View.extend({
module.exports = EditImage;
},{}],36:[function(require,module,exports){
},{}],38:[function(require,module,exports){
/**
* wp.media.view.Embed
*
@ -4468,7 +4559,7 @@ var Embed = wp.media.View.extend({
module.exports = Embed;
},{}],37:[function(require,module,exports){
},{}],39:[function(require,module,exports){
/*globals wp */
/**
@ -4503,7 +4594,7 @@ EmbedImage = AttachmentDisplay.extend({
module.exports = EmbedImage;
},{}],38:[function(require,module,exports){
},{}],40:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -4594,7 +4685,7 @@ EmbedLink = wp.media.view.Settings.extend({
module.exports = EmbedLink;
},{}],39:[function(require,module,exports){
},{}],41:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -4675,7 +4766,7 @@ EmbedUrl = View.extend({
module.exports = EmbedUrl;
},{}],40:[function(require,module,exports){
},{}],42:[function(require,module,exports){
/**
* wp.media.view.FocusManager
*
@ -4721,7 +4812,7 @@ var FocusManager = wp.media.View.extend({
module.exports = FocusManager;
},{}],41:[function(require,module,exports){
},{}],43:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -4889,7 +4980,7 @@ _.extend( Frame.prototype, wp.media.controller.StateMachine.prototype );
module.exports = Frame;
},{}],42:[function(require,module,exports){
},{}],44:[function(require,module,exports){
/*globals wp */
/**
@ -5068,7 +5159,7 @@ ImageDetails = Select.extend({
module.exports = ImageDetails;
},{}],43:[function(require,module,exports){
},{}],45:[function(require,module,exports){
/*globals wp, _ */
/**
@ -5805,7 +5896,7 @@ Post = Select.extend({
module.exports = Post;
},{}],44:[function(require,module,exports){
},{}],46:[function(require,module,exports){
/*globals wp, _ */
/**
@ -5978,7 +6069,7 @@ Select = MediaFrame.extend({
module.exports = Select;
},{}],45:[function(require,module,exports){
},{}],47:[function(require,module,exports){
/**
* wp.media.view.Iframe
*
@ -6002,7 +6093,7 @@ var Iframe = wp.media.View.extend({
module.exports = Iframe;
},{}],46:[function(require,module,exports){
},{}],48:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -6172,7 +6263,7 @@ ImageDetails = AttachmentDisplay.extend({
module.exports = ImageDetails;
},{}],47:[function(require,module,exports){
},{}],49:[function(require,module,exports){
/**
* wp.media.view.Label
*
@ -6198,7 +6289,7 @@ var Label = wp.media.View.extend({
module.exports = Label;
},{}],48:[function(require,module,exports){
},{}],50:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -6447,7 +6538,7 @@ _.each(['open','close','attach','detach','escape'], function( method ) {
module.exports = MediaFrame;
},{}],49:[function(require,module,exports){
},{}],51:[function(require,module,exports){
/*globals jQuery */
/**
@ -6521,7 +6612,7 @@ MenuItem = wp.media.View.extend({
module.exports = MenuItem;
},{}],50:[function(require,module,exports){
},{}],52:[function(require,module,exports){
/**
* wp.media.view.Menu
*
@ -6638,7 +6729,7 @@ Menu = PriorityList.extend({
module.exports = Menu;
},{}],51:[function(require,module,exports){
},{}],53:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -6853,7 +6944,7 @@ Modal = wp.media.View.extend({
module.exports = Modal;
},{}],52:[function(require,module,exports){
},{}],54:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -6952,7 +7043,7 @@ var PriorityList = wp.media.View.extend({
module.exports = PriorityList;
},{}],53:[function(require,module,exports){
},{}],55:[function(require,module,exports){
/**
* wp.media.view.RouterItem
*
@ -6976,7 +7067,7 @@ var RouterItem = wp.media.view.MenuItem.extend({
module.exports = RouterItem;
},{}],54:[function(require,module,exports){
},{}],56:[function(require,module,exports){
/*globals wp */
/**
@ -7015,7 +7106,7 @@ Router = Menu.extend({
module.exports = Router;
},{}],55:[function(require,module,exports){
},{}],57:[function(require,module,exports){
/*globals wp */
/**
@ -7065,7 +7156,7 @@ Search = wp.media.View.extend({
module.exports = Search;
},{}],56:[function(require,module,exports){
},{}],58:[function(require,module,exports){
/*globals wp, _, Backbone */
/**
@ -7150,7 +7241,7 @@ Selection = wp.media.View.extend({
module.exports = Selection;
},{}],57:[function(require,module,exports){
},{}],59:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -7273,7 +7364,7 @@ Settings = View.extend({
module.exports = Settings;
},{}],58:[function(require,module,exports){
},{}],60:[function(require,module,exports){
/*globals wp, _ */
/**
@ -7369,7 +7460,7 @@ AttachmentDisplay = Settings.extend({
module.exports = AttachmentDisplay;
},{}],59:[function(require,module,exports){
},{}],61:[function(require,module,exports){
/*globals wp */
/**
@ -7388,7 +7479,7 @@ var Gallery = wp.media.view.Settings.extend({
module.exports = Gallery;
},{}],60:[function(require,module,exports){
},{}],62:[function(require,module,exports){
/*globals wp */
/**
@ -7407,7 +7498,7 @@ var Playlist = wp.media.view.Settings.extend({
module.exports = Playlist;
},{}],61:[function(require,module,exports){
},{}],63:[function(require,module,exports){
/**
* wp.media.view.Sidebar
*
@ -7423,7 +7514,110 @@ var Sidebar = wp.media.view.PriorityList.extend({
module.exports = Sidebar;
},{}],62:[function(require,module,exports){
},{}],64:[function(require,module,exports){
/*globals wp, _ */
/**
* wp.media.view.SiteIconCropper
*
* Uses the imgAreaSelect plugin to allow a user to crop a Site Icon.
*
* Takes imgAreaSelect options from
* wp.customize.SiteIconControl.calculateImageSelectOptions.
*
* @class
* @augments wp.media.view.Cropper
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var View = wp.media.view,
SiteIconCropper;
SiteIconCropper = View.Cropper.extend({
className: 'crop-content site-icon',
ready: function () {
View.Cropper.prototype.ready.apply( this, arguments );
this.$( '.crop-image' ).on( 'load', _.bind( this.addSidebar, this ) );
},
addSidebar: function() {
this.sidebar = new wp.media.view.Sidebar({
controller: this.controller
});
this.sidebar.set( 'preview', new wp.media.view.SiteIconPreview({
controller: this.controller,
attachment: this.options.attachment
}) );
this.controller.cropperView.views.add( this.sidebar );
}
});
module.exports = SiteIconCropper;
},{}],65:[function(require,module,exports){
/*globals wp, jQuery */
/**
* wp.media.view.SiteIconPreview
*
* Shows a preview of the Site Icon as a favicon and app icon while cropping.
*
* @class
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var View = wp.media.View,
$ = jQuery,
SiteIconPreview;
SiteIconPreview = View.extend({
className: 'site-icon-preview',
template: wp.template( 'site-icon-preview' ),
ready: function() {
this.controller.imgSelect.setOptions({
onInit: this.updatePreview,
onSelectChange: this.updatePreview
});
},
prepare: function() {
return {
url: this.options.attachment.get( 'url' )
};
},
updatePreview: function( img, coords ) {
var rx = 64 / coords.width,
ry = 64 / coords.height,
preview_rx = 16 / coords.width,
preview_ry = 16 / coords.height;
$( '#preview-app-icon' ).css({
width: Math.round(rx * this.imageWidth ) + 'px',
height: Math.round(ry * this.imageHeight ) + 'px',
marginLeft: '-' + Math.round(rx * coords.x1) + 'px',
marginTop: '-' + Math.round(ry * coords.y1) + 'px'
});
$( '#preview-favicon' ).css({
width: Math.round( preview_rx * this.imageWidth ) + 'px',
height: Math.round( preview_ry * this.imageHeight ) + 'px',
marginLeft: '-' + Math.round( preview_rx * coords.x1 ) + 'px',
marginTop: '-' + Math.floor( preview_ry* coords.y1 ) + 'px'
});
}
});
module.exports = SiteIconPreview;
},{}],66:[function(require,module,exports){
/*globals _ */
/**
@ -7460,7 +7654,7 @@ var Spinner = wp.media.View.extend({
module.exports = Spinner;
},{}],63:[function(require,module,exports){
},{}],67:[function(require,module,exports){
/*globals _, Backbone */
/**
@ -7622,7 +7816,7 @@ Toolbar = View.extend({
module.exports = Toolbar;
},{}],64:[function(require,module,exports){
},{}],68:[function(require,module,exports){
/*globals wp, _ */
/**
@ -7661,7 +7855,7 @@ Embed = Select.extend({
module.exports = Embed;
},{}],65:[function(require,module,exports){
},{}],69:[function(require,module,exports){
/*globals wp, _ */
/**
@ -7733,7 +7927,7 @@ Select = Toolbar.extend({
module.exports = Select;
},{}],66:[function(require,module,exports){
},{}],70:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -7956,7 +8150,7 @@ EditorUploader = View.extend({
module.exports = EditorUploader;
},{}],67:[function(require,module,exports){
},{}],71:[function(require,module,exports){
/*globals wp, _ */
/**
@ -8089,7 +8283,7 @@ UploaderInline = View.extend({
module.exports = UploaderInline;
},{}],68:[function(require,module,exports){
},{}],72:[function(require,module,exports){
/*globals wp */
/**
@ -8107,7 +8301,7 @@ var UploaderStatusError = wp.media.View.extend({
module.exports = UploaderStatusError;
},{}],69:[function(require,module,exports){
},{}],73:[function(require,module,exports){
/*globals wp, _ */
/**
@ -8247,7 +8441,7 @@ UploaderStatus = View.extend({
module.exports = UploaderStatus;
},{}],70:[function(require,module,exports){
},{}],74:[function(require,module,exports){
/*globals wp, _, jQuery */
/**
@ -8360,7 +8554,7 @@ UploaderWindow = wp.media.View.extend({
module.exports = UploaderWindow;
},{}],71:[function(require,module,exports){
},{}],75:[function(require,module,exports){
/*globals wp */
/**
@ -8428,4 +8622,4 @@ var View = wp.Backbone.View.extend({
module.exports = View;
},{}]},{},[17]);
},{}]},{},[19]);

File diff suppressed because one or more lines are too long

View File

@ -1243,6 +1243,24 @@ function wp_print_media_templates() {
<div class="upload-errors"></div>
</script>
<script type="text/html" id="tmpl-site-icon-preview">
<h2><?php _e( 'Preview' ); ?></h2>
<strong><?php _e( 'As a browser icon' ); ?></strong>
<div class="favicon-preview">
<img src="images/browser.png" class="browser-preview" width="182" height="" alt=""/>
<div class="favicon">
<img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
</div>
<span class="browser-title"><?php bloginfo( 'name' ); ?></span>
</div>
<strong><?php _e( 'As an app icon' ); ?></strong>
<div class="app-icon-preview">
<img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
</div>
</script>
<?php
/**

View File

@ -618,9 +618,6 @@ function wp_default_scripts( &$scripts ) {
'untitled' => _x( '(no label)', 'missing menu item navigation label' )
) );
$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery' ), false, 1 );
$scripts->add( 'site-icon-crop', '/wp-admin/js/site-icon-crop.js', array( 'jcrop' ), false, 1 );
$scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );
$scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 );
$scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta3-33328';
$wp_version = '4.3-beta3-33329';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.