WordPress.org

Make WordPress Core

Ticket #16434: 16434.25.diff

File 16434.25.diff, 86.5 KB (added by obenland, 2 years ago)

Includes wonderboymusic's feedback

  • src/wp-admin/css/site-icon.css

     
    22  28.0 - Site Icon 
    33------------------------------------------------------------------------------*/ 
    44 
    5 .site-icon-image { 
    6         float: left; 
    7         margin: 0 20px 0 0; 
    8 } 
    9  
    10 .site-icon-content { 
    11         overflow: hidden; 
    12         padding: 10px; 
    13         position: relative; 
    14 } 
    15  
    16 .site-icon-crop-shell { 
    17         max-width: 720px; 
    18 } 
    19  
    20 .site-icon-crop-wrapper { 
    21         float: left; 
    22 } 
    23  
    24 .site-icon-crop-preview-shell { 
    25         float: right; 
    26         overflow: hidden; 
    27 } 
    28  
    29 .site-icon-crop-preview-shell h2 { 
    30         padding-top: 0; 
    31 } 
    32  
    33 .site-icon-crop-favicon-preview-shell { 
     5.site-icon-preview .favicon-preview { 
    346        margin-bottom: 20px; 
     7        overflow: hidden; 
    358        position: relative; 
     9        max-width: 180px; 
    3610} 
    3711 
    38 .site-icon-crop-preview-favicon, 
    39 .site-icon-browser-title { 
     12.site-icon-preview .favicon, 
     13.site-icon-preview .browser-title { 
    4014        height: 16px; 
    4115        left: 88px; 
    4216        overflow: hidden; 
     
    4418        top: 16px; 
    4519} 
    4620 
    47 .site-icon-crop-preview-favicon { 
     21.site-icon-preview .favicon { 
    4822        width: 16px; 
    4923} 
    5024 
    51 .site-icon-browser-title { 
     25.site-icon-preview .browser-title { 
    5226        left: 109px; 
    5327} 
    5428 
    55 .site-icon-crop-preview-homeicon { 
     29.site-icon-preview .app-icon-preview { 
    5630        background-color: #000; 
    5731        -webkit-border-radius: 16px; 
    5832        border-radius: 16px; 
     
    6034        overflow: hidden; 
    6135        width: 64px; 
    6236} 
    63  
    64 .site-icon-crop-shell .submit { 
    65         clear: both; 
    66 } 
    67  
    68 @media only screen and (max-width: 768px) { 
    69         .site-icon-crop-wrapper, 
    70         .site-icon-crop-preview-shell { 
    71                 float: none; 
    72         } 
    73  
    74         .site-icon-crop-wrapper { 
    75                 max-width: 100%; 
    76                 margin-bottom: 20px; 
    77         } 
    78  
    79         .site-icon-crop-wrapper img { 
    80                 max-width: 100%; 
    81                 height: auto; 
    82         } 
    83 } 
  • src/wp-admin/includes/class-wp-site-icon.php

     
    6565         * @access public 
    6666         */ 
    6767        public function __construct() { 
    68  
    69                 // Add the favicon to the backend. 
    70                 add_action( 'admin_menu', array( $this, 'admin_menu_upload_site_icon' ) ); 
    71  
    72                 add_action( 'admin_action_set_site_icon',    array( $this, 'set_site_icon'    ) ); 
    73                 add_action( 'admin_action_remove_site_icon', array( $this, 'remove_site_icon' ) ); 
    74  
    7568                add_action( 'delete_attachment', array( $this, 'delete_attachment_data' ), 10, 1 ); 
    7669                add_filter( 'get_post_metadata', array( $this, 'get_post_metadata' ), 10, 4 ); 
    7770        } 
    7871 
    7972        /** 
    80          * Adds a hidden upload page. 
    81          * 
    82          * There is no need to access it directly. 
    83          * 
    84          * @since 4.3.0 
    85          * @access public 
    86          */ 
    87         public function admin_menu_upload_site_icon() { 
    88                 $hook = add_submenu_page( null, __( 'Site Icon' ), __( 'Site Icon' ), 'manage_options', 'site-icon', array( $this, 'upload_site_icon_page' ) ); 
    89  
    90                 add_action( "load-$hook", array( $this, 'add_upload_settings' ) ); 
    91                 add_action( "load-$hook", array( $this, 'maybe_skip_cropping' ) ); 
    92                 add_action( "admin_print_scripts-$hook", array( $this, 'enqueue_scripts' ) ); 
    93         } 
    94  
    95         /** 
    96          * Adds scripts to admin settings pages. 
    97          * 
    98          * @since 4.3.0 
    99          * @access public 
    100          */ 
    101         public function enqueue_scripts() { 
    102                 wp_enqueue_style( 'jcrop' ); 
    103                 wp_enqueue_script( 'site-icon-crop' ); 
    104         } 
    105  
    106         /** 
    107          * Loads the settings when the admin is initialized. 
    108          * 
    109          * @since 4.3.0 
    110          * @access public 
    111          */ 
    112         public function add_upload_settings() { 
    113                 add_settings_section( 'site-icon-upload', false, false, 'site-icon-upload' ); 
    114                 add_settings_field( 'site-icon-upload', __( 'Upload Image' ), array( $this, 'upload_field' ), 'site-icon-upload', 'site-icon-upload', array( 
    115                         'label_for' => 'site-icon-upload', 
    116                 ) ); 
    117         } 
    118  
    119         /** 
    120          * Removes the site icon. 
    121          * 
    122          * @since 4.3.0 
    123          * @access public 
    124          */ 
    125         public function remove_site_icon() { 
    126                 check_admin_referer( 'remove-site-icon' ); 
    127  
    128                 $this->delete_site_icon(); 
    129  
    130                 add_settings_error( 'site-icon', 'icon-removed', __( 'Site Icon removed.' ), 'updated' ); 
    131         } 
    132  
    133         /** 
    134          * Handle uploading a site icon. 
    135          * 
    136          * Uploading a site_icon is a 3 step process 
    137          * 
    138          * 1. Select the file to upload 
    139          * 2. Crop the file 
    140          * 3. Confirmation 
    141          * 
    142          * @since 4.3.0 
    143          * @access public 
    144          */ 
    145         public function upload_site_icon_page() { 
    146                 $action = isset( $_REQUEST['action'] ) ? $_REQUEST['action'] : 'select_site_icon'; 
    147  
    148                 switch ( $action ) { 
    149                         case 'select_site_icon': 
    150                                 $this->select_page(); 
    151                                 break; 
    152  
    153                         case 'crop_site_icon': 
    154                                 $this->crop_page(); 
    155                                 break; 
    156  
    157                         default: 
    158                                 wp_safe_redirect( admin_url( 'options-general.php#site-icon' ) ); 
    159                                 exit; 
    160                 } 
    161         } 
    162  
    163         /** 
    164          * Displays the site_icon form to upload the image. 
    165          * 
    166          * @since 4.3.0 
    167          * @access public 
    168          */ 
    169         public function select_page() { 
    170                 ?> 
    171                 <div class="wrap"> 
    172                         <h1><?php _e( 'Add Site Icon' ); ?></h1> 
    173                         <?php settings_errors( 'site-icon' ); ?> 
    174                         <?php do_settings_sections( 'site-icon-upload' ); ?> 
    175                 </div> 
    176         <?php 
    177         } 
    178  
    179         /** 
    180          * Handles settings field for file upload. 
    181          * 
    182          * @since 4.3.0 
    183          * @access public 
    184          */ 
    185         public function upload_field() { 
    186                 wp_enqueue_media(); 
    187                 wp_enqueue_script( 'site-icon' ); 
    188                 wp_dequeue_script( 'site-icon-crop' ); 
    189  
    190                 $update_url = esc_url( add_query_arg( array( 
    191                         'page' => 'site-icon', 
    192                         'action' => 'crop_site_icon', 
    193                 ), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) ); 
    194                 ?> 
    195                 <p class="hide-if-no-js"> 
    196                         <label class="screen-reader-text" for="choose-from-library-link"><?php _e( 'Choose an image from your media library:' ); ?></label> 
    197                         <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> 
    198                 </p> 
    199                 <form class="hide-if-js" action="<?php echo esc_url( admin_url( 'options-general.php?page=site-icon' ) ); ?>" method="post" enctype="multipart/form-data"> 
    200                         <input name="action" value="crop_site_icon" type="hidden" /> 
    201                         <input name="site-icon" type="file" /> 
    202                         <input name="submit" value="<?php esc_attr_e( 'Upload Image' ); ?>" type="submit" class="button button-primary" /> 
    203                         <p class="description"> 
    204                                 <?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>" ); ?> 
    205                         </p> 
    206                         <?php wp_nonce_field( 'crop-site-icon' ); ?> 
    207                 </form> 
    208         <?php 
    209         } 
    210  
    211         /** 
    212          * Checks if the image needs cropping. 
    213          * 
    214          * If it doesn't need cropping, proceed to set the icon. 
    215          * 
    216          * @since 4.3.0 
    217          * @access public 
    218          */ 
    219         public function maybe_skip_cropping() { 
    220                 if ( empty( $_REQUEST['action'] ) || 'crop_site_icon' !== $_REQUEST['action'] ) { 
    221                         return; 
    222                 } 
    223  
    224                 check_admin_referer( 'crop-site-icon' ); 
    225  
    226                 list( $attachment_id, $url, $image_size ) = $this->get_upload_data(); 
    227  
    228                 if ( $image_size[0] == $image_size[1] && $image_size[0] == $this->min_size ) { 
    229                         // No cropping required. 
    230  
    231                         $url = add_query_arg( array( 
    232                                 'attachment_id'         => $attachment_id, 
    233                                 'skip-cropping'         => true, 
    234                                 'create-new-attachment' => true, 
    235                                 'action'                => 'set_site_icon', 
    236                         ), wp_nonce_url( admin_url( 'options-general.php' ), 'set-site-icon' ) ); 
    237  
    238                         wp_safe_redirect( $url ); 
    239                         die(); 
    240                 } 
    241         } 
    242  
    243         /** 
    244          * Handles the image crop admin view. 
    245          * 
    246          * @since 4.3.0 
    247          * @access public 
    248          */ 
    249         public function crop_page() { 
    250                 check_admin_referer( 'crop-site-icon' ); 
    251  
    252                 list( $attachment_id, $url, $image_size ) = $this->get_upload_data(); 
    253  
    254                 if ( $image_size[0] < $this->min_size ) { 
    255                         add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in width.' ), $this->min_size ) ); 
    256  
    257                         // back to step one 
    258                         $this->select_page(); 
    259  
    260                         return; 
    261                 } 
    262  
    263                 if ( $image_size[1] < $this->min_size ) { 
    264                         add_settings_error( 'site-icon', 'too-small', sprintf( __( 'The selected image is smaller than %upx in height.' ), $this->min_size ) ); 
    265  
    266                         // Back to step one. 
    267                         $this->select_page(); 
    268  
    269                         return; 
    270                 } 
    271  
    272                 wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', array( 
    273                         'init_x'    => 0, 
    274                         'init_y'    => 0, 
    275                         'init_size' => $this->min_size, 
    276                         'min_size'  => $this->min_size, 
    277                         'width'     => $image_size[0], 
    278                         'height'    => $image_size[1], 
    279                 ) ); 
    280                 ?> 
    281  
    282                 <div class="wrap"> 
    283                         <h1 class="site-icon-title"><?php _e( 'Site Icon' ); ?></h1> 
    284                         <?php settings_errors( 'site-icon' ); ?> 
    285  
    286                         <div class="site-icon-crop-shell"> 
    287                                 <form action="options-general.php" method="post" enctype="multipart/form-data"> 
    288                                         <p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p> 
    289                                         <p class="hide-if-js description"><strong><?php _e( 'You need JavaScript to choose a part of the image.'); ?></strong></p> 
    290  
    291                                         <div class="site-icon-crop-wrapper"> 
    292                                                 <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' ); ?>"/> 
    293                                         </div> 
    294  
    295                                         <div class="site-icon-crop-preview-shell hide-if-no-js"> 
    296                                                 <h2><?php _e( 'Preview' ); ?></h2> 
    297                                                 <strong><?php _e( 'As a browser icon' ); ?></strong> 
    298                                                 <div class="site-icon-crop-favicon-preview-shell"> 
    299                                                         <img src="images/browser.png" class="site-icon-browser-preview" width="182" height="" alt=""/> 
    300  
    301                                                         <div class="site-icon-crop-preview-favicon"> 
    302                                                                 <img src="<?php echo esc_url( $url ); ?>" id="preview-favicon" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/> 
    303                                                         </div> 
    304                                                         <span class="site-icon-browser-title"><?php bloginfo( 'name' ); ?></span> 
    305                                                 </div> 
    306  
    307                                                 <strong><?php _e( 'As an app icon' ); ?></strong> 
    308                                                 <div class="site-icon-crop-preview-homeicon"> 
    309                                                         <img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/> 
    310                                                 </div> 
    311                                         </div> 
    312  
    313                                         <input type="hidden" id="crop-x" name="crop-x" value="0" /> 
    314                                         <input type="hidden" id="crop-y" name="crop-y" value="0" /> 
    315                                         <input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $this->min_size ); ?>" /> 
    316                                         <input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $this->min_size ); ?>" /> 
    317  
    318                                         <input type="hidden" name="action" value="set_site_icon" /> 
    319                                         <input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" /> 
    320                                         <?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?> 
    321                                                 <input type="hidden" name="create-new-attachment" value="true" /> 
    322                                         <?php endif; ?> 
    323                                         <?php wp_nonce_field( 'set-site-icon' ); ?> 
    324  
    325                                         <p class="submit"> 
    326                                                 <?php submit_button( __( 'Crop and Publish' ), 'primary hide-if-no-js', 'submit', false ); ?> 
    327                                                 <?php submit_button( __( 'Publish' ), 'primary hide-if-js', 'submit', false ); ?> 
    328                                                 <a class="button secondary" href="options-general.php"><?php _e( 'Cancel' ); ?></a> 
    329                                         </p> 
    330                                 </form> 
    331                         </div> 
    332                 </div> 
    333         <?php 
    334         } 
    335  
    336         /** 
    337          * Handles saving a new Site Icon. 
    338          * 
    339          * @since 4.3.0 
    340          * @access public 
    341          */ 
    342         public function set_site_icon() { 
    343                 check_admin_referer( 'set-site-icon' ); 
    344  
    345                 $attachment_id          = absint( $_REQUEST['attachment_id'] ); 
    346                 $create_new_attachement = ! empty( $_REQUEST['create-new-attachment'] ); 
    347  
    348                 // If the current attachment as been set as site icon don't delete it. 
    349                 if ( get_option( 'site_icon' ) == $attachment_id ) { 
    350                         // Get the file path. 
    351                         $image_url = get_attached_file( $attachment_id ); 
    352  
    353                         // Update meta data and possibly regenerate intermediate sizes. 
    354                         add_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) ); 
    355                         $this->update_attachment_metadata( $attachment_id, $image_url ); 
    356                         remove_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) ); 
    357  
    358                 } else { 
    359                         // Delete any existing site icon images. 
    360                         $this->delete_site_icon(); 
    361  
    362                         if ( empty( $_REQUEST['skip-cropping'] ) ) { 
    363                                 $cropped = wp_crop_image( $attachment_id, $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], $this->min_size, $this->min_size ); 
    364  
    365                         } elseif ( $create_new_attachement ) { 
    366                                 $cropped = _copy_image_file( $attachment_id ); 
    367  
    368                         } else { 
    369                                 $cropped = get_attached_file( $attachment_id ); 
    370                         } 
    371  
    372                         if ( ! $cropped || is_wp_error( $cropped ) ) { 
    373                                 wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) ); 
    374                         } 
    375  
    376                         $object = $this->create_attachment_object( $cropped, $attachment_id ); 
    377  
    378                         if ( $create_new_attachement ) { 
    379                                 unset( $object['ID'] ); 
    380                         } 
    381  
    382                         // Update the attachment. 
    383                         add_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) ); 
    384                         $attachment_id = $this->insert_attachment( $object, $cropped ); 
    385                         remove_filter( 'intermediate_image_sizes_advanced', array( $this, 'additional_sizes' ) ); 
    386  
    387                         // Save the site_icon data into option 
    388                         update_option( 'site_icon', $attachment_id ); 
    389                 } 
    390  
    391                 add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' ); 
    392         } 
    393  
    394         /** 
    395          * Handles uploading the file to be cropped in the second step. 
    396          * 
    397          * @since 4.3.0 
    398          * @access public 
    399          */ 
    400         public function handle_upload() { 
    401                 $uploaded_file = $_FILES['site-icon']; 
    402                 $file_type     = wp_check_filetype_and_ext( $uploaded_file['tmp_name'], $uploaded_file['name'] ); 
    403                 if ( ! wp_match_mime_types( 'image', $file_type['type'] ) ) { 
    404                         wp_die( __( 'The uploaded file is not a valid image. Please try again.' ) ); 
    405                 } 
    406  
    407                 $file = wp_handle_upload( $uploaded_file, array( 'test_form' => false ) ); 
    408  
    409                 if ( isset( $file['error'] ) ) { 
    410                         wp_die( $file['error'], __( 'Image Upload Error' ) ); 
    411                 } 
    412  
    413                 $url      = $file['url']; 
    414                 $type     = $file['type']; 
    415                 $file     = $file['file']; 
    416                 $filename = basename( $file ); 
    417  
    418                 // Construct the object array 
    419                 $object = array( 
    420                         'post_title'     => $filename, 
    421                         'post_content'   => $url, 
    422                         'post_mime_type' => $type, 
    423                         'guid'           => $url, 
    424                         'context'        => 'site-icon', 
    425                 ); 
    426  
    427                 // Save the data 
    428                 $attachment_id = wp_insert_attachment( $object, $file ); 
    429  
    430                 return compact( 'attachment_id', 'file', 'filename', 'url', 'type' ); 
    431         } 
    432  
    433         /** 
    43473         * Creates an attachment 'object'. 
    43574         * 
    43675         * @since 4.3.0 
     
    565204        } 
    566205 
    567206        /** 
    568          * Deletes all additional image sizes, used for site icons. 
    569          * 
    570          * @since 4.3.0 
    571          * @access public 
    572          * 
    573          * @return bool Whether the site icon was successfully deleted. 
    574          */ 
    575         public function delete_site_icon() { 
    576                 // We add the filter to make sure that we also delete all the added images. 
    577                 add_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) ); 
    578                 wp_delete_attachment( get_option( 'site_icon' ), true ); 
    579                 remove_filter( 'intermediate_image_sizes', array( $this, 'intermediate_image_sizes' ) ); 
    580  
    581                 return delete_option( 'site_icon' ); 
    582         } 
    583  
    584         /** 
    585207         * Deletes the Site Icon when the image file is deleted. 
    586208         * 
    587209         * @since 4.3.0 
     
    619241 
    620242                return $value; 
    621243        } 
    622  
    623         /** 
    624          * Gets the data required to work with the uploaded image 
    625          * 
    626          * @since 4.3.0 
    627          * @access private 
    628          * 
    629          * @return array containing the collected data 
    630          */ 
    631         private function get_upload_data() { 
    632                 if ( isset( $_GET['file'] ) ) { 
    633                         $attachment_id = absint( $_GET['file'] ); 
    634                         $file          = get_attached_file( $attachment_id, true ); 
    635                         $url           = wp_get_attachment_image_src( $attachment_id, 'full' ); 
    636                         $url           = $url[0]; 
    637                 } else { 
    638                         $upload        = $this->handle_upload(); 
    639                         $attachment_id = $upload['attachment_id']; 
    640                         $file          = $upload['file']; 
    641                         $url           = $upload['url']; 
    642                 } 
    643  
    644                 $image_size = getimagesize( $file ); 
    645  
    646                 return array( $attachment_id, $url, $image_size ); 
    647         } 
    648244} 
    649245 
    650246/** 
  • src/wp-admin/js/customize-controls.js

     
    20382038         * @augments wp.customize.Class 
    20392039         */ 
    20402040        api.SiteIconControl = api.CroppedImageControl.extend({ 
     2041 
     2042                /** 
     2043                 * Create a media modal select frame, and store it so the instance can be reused when needed. 
     2044                 */ 
     2045                initFrame: function() { 
     2046                        var l10n = _wpMediaViewsL10n; 
     2047 
     2048                        this.frame = wp.media({ 
     2049                                button: { 
     2050                                        text: l10n.select, 
     2051                                        close: false 
     2052                                }, 
     2053                                states: [ 
     2054                                        new wp.media.controller.Library({ 
     2055                                                title: this.params.button_labels.frame_title, 
     2056                                                library: wp.media.query({ type: 'image' }), 
     2057                                                multiple: false, 
     2058                                                date: false, 
     2059                                                priority: 20, 
     2060                                                suggestedWidth: this.params.width, 
     2061                                                suggestedHeight: this.params.height 
     2062                                        }), 
     2063                                        new wp.media.controller.SiteIconCropper({ 
     2064                                                imgSelectOptions: this.calculateImageSelectOptions, 
     2065                                                control: this 
     2066                                        }) 
     2067                                ] 
     2068                        }); 
     2069 
     2070                        this.frame.on( 'select', this.onSelect, this ); 
     2071                        this.frame.on( 'cropped', this.onCropped, this ); 
     2072                        this.frame.on( 'skippedcrop', this.onSkippedCrop, this ); 
     2073                }, 
     2074 
    20412075                /** 
    20422076                 * Updates the setting and re-renders the control UI. 
    20432077                 * 
  • src/wp-admin/js/site-icon-crop.js

     
    1 /* global wpSiteIconCropData, jQuery */ 
    2 (function($) { 
    3         var jcrop_api = {}, 
    4                 siteIconCrop = { 
    5  
    6                 updateCoords : function ( coords ) { 
    7                         $( '#crop-x' ).val( coords.x ); 
    8                         $( '#crop-y' ).val( coords.y ); 
    9                         $( '#crop-width' ).val( coords.w ); 
    10                         $( '#crop-height' ).val( coords.h ); 
    11  
    12                         siteIconCrop.showPreview( coords ); 
    13                 }, 
    14  
    15                 showPreview : function( coords ){ 
    16                         var rx = 64 / coords.w, 
    17                                 ry = 64 / coords.h, 
    18                                 preview_rx = 16 / coords.w, 
    19                                 preview_ry = 16 / coords.h; 
    20  
    21                         $( '#preview-homeicon' ).css({ 
    22                                 width: Math.round(rx * wpSiteIconCropData.width ) + 'px', 
    23                                 height: Math.round(ry * wpSiteIconCropData.height ) + 'px', 
    24                                 marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    25                                 marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    26                         }); 
    27  
    28                         $( '#preview-favicon' ).css({ 
    29                                 width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px', 
    30                                 height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px', 
    31                                 marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px', 
    32                                 marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px' 
    33                         }); 
    34                 }, 
    35  
    36                 ready: function() { 
    37                         jcrop_api = $.Jcrop( '#crop-image' ); 
    38                         jcrop_api.setOptions({ 
    39                                 bgColor: 'transparent', 
    40                                 aspectRatio: 1, 
    41                                 onSelect: siteIconCrop.updateCoords, 
    42                                 onChange: siteIconCrop.updateCoords, 
    43                                 trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ], 
    44                                 minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ] 
    45                         }); 
    46                         jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]); 
    47                 } 
    48  
    49         }; 
    50  
    51         siteIconCrop.ready(); 
    52  
    53 })(jQuery); 
    54  No newline at end of file 
  • src/wp-admin/js/site-icon.js

     
    1 (function($) { 
    2         var frame; 
    3  
    4         $( function() { 
    5                 // Build the choose from library frame. 
    6                 $( '#choose-from-library-link' ).on( 'click', function( event ) { 
    7                         var $el = $(this); 
    8                         event.preventDefault(); 
    9  
    10                         // If the media frame already exists, reopen it. 
    11                         if ( frame ) { 
    12                                 frame.open(); 
    13                                 return; 
    14                         } 
    15  
    16                         // Create the media frame. 
    17                         frame = wp.media({ 
    18                                 // Customize the submit button. 
    19                                 button: { 
    20                                         // Set the text of the button. 
    21                                         text: $el.data('update'), 
    22                                         // Tell the button not to close the modal, since we're 
    23                                         // going to refresh the page when the image is selected. 
    24                                         close: false 
    25                                 }, 
    26                                 states: [ 
    27                                         new wp.media.controller.Library({ 
    28                                                 title: $el.data( 'choose' ), 
    29                                                 library: wp.media.query({ type: 'image' }), 
    30                                                 date: false, 
    31                                                 suggestedWidth: $el.data( 'size' ), 
    32                                                 suggestedHeight: $el.data( 'size' ) 
    33                                         }) 
    34                                 ] 
    35                         }); 
    36  
    37                         // When an image is selected, run a callback. 
    38                         frame.on( 'select', function() { 
    39                                 // Grab the selected attachment. 
    40                                 var attachment = frame.state().get('selection').first(), 
    41                                         link = $el.data('updateLink'); 
    42  
    43                                 // Tell the browser to navigate to the crop step. 
    44                                 window.location = link + '&file=' + attachment.id; 
    45                         }); 
    46  
    47                         frame.open(); 
    48                 }); 
    49         }); 
    50 }(jQuery)); 
  • src/wp-admin/options-general.php

     
    124124<td><input name="blogdescription" type="text" id="blogdescription" aria-describedby="tagline-description" value="<?php form_option('blogdescription'); ?>" class="regular-text" /> 
    125125<p class="description" id="tagline-description"><?php _e( 'In a few words, explain what this site is about.' ) ?></p></td> 
    126126</tr> 
    127 <tr> 
    128 <th scope="row"><?php _e( 'Site Icon' ); ?></th> 
    129 <td> 
    130         <?php 
    131         $upload_url = admin_url( 'options-general.php?page=site-icon' ); 
    132         $update_url = esc_url( add_query_arg( array( 
    133                 'page'   => 'site-icon', 
    134                 'action' => 'crop_site_icon', 
    135         ), wp_nonce_url( admin_url( 'options-general.php' ), 'crop-site-icon' ) ) ); 
    136  
    137         wp_enqueue_media(); 
    138         wp_enqueue_script( 'site-icon' ); 
    139  
    140         if ( has_site_icon() ) : 
    141                 $remove_url = add_query_arg( array( 
    142                         'action' => 'remove_site_icon', 
    143                 ), wp_nonce_url( admin_url( 'options-general.php' ), 'remove-site-icon' ) ); 
    144         ?> 
    145  
    146         <img class="avatar avatar-150" src="<?php site_icon_url( null, 150 ); ?>" height="150" width="150" alt="" /> 
    147         <p class="hide-if-no-js"> 
    148                 <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> 
    149                 <a href="<?php echo esc_url( $remove_url ); ?>"><?php _e( 'Remove Site Icon' ); ?></a> 
    150         </p> 
    151         <p class="hide-if-js"> 
    152                 <a href="<?php echo esc_url( $upload_url ); ?>" class="button"><?php _e( 'Update Site Icon' ); ?></a> 
    153                 <a href="<?php echo esc_url( $remove_url ); ?>"><?php _e( 'Remove Site Icon' ); ?></a> 
    154         </p> 
    155  
    156         <?php else : ?> 
    157  
    158         <p class="hide-if-no-js"> 
    159                 <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> 
    160         </p> 
    161         <a class="button hide-if-js" href="<?php echo esc_url( $upload_url ); ?>"><?php _e( 'Add a Site Icon' ); ?></a> 
    162  
    163         <?php endif; ?> 
    164         <p id="site-icon-description" class="description"><?php _e( 'The Site Icon is used as a browser and app icon for your site.' ); ?></p> 
    165 </td> 
    166 </tr> 
    167127<?php if ( !is_multisite() ) { ?> 
    168128<tr> 
    169129<th scope="row"><label for="siteurl"><?php _e('WordPress Address (URL)') ?></label></th> 
  • src/wp-includes/class-wp-customize-manager.php

     
    13571357                        'section'    => 'title_tagline', 
    13581358                ) ); 
    13591359 
    1360                 $icon = wp_get_attachment_image_src( absint( get_option( 'site_icon' ) ), 'full' ); 
    13611360                $this->add_setting( 'site_icon', array( 
    1362                         'default'    => $icon[0] ? $icon[0] : '', 
    13631361                        'type'       => 'option', 
    13641362                        'capability' => 'manage_options', 
    13651363                        'transport'  => 'postMessage', // Previewed with JS in the Customizer controls window. 
  • src/wp-includes/css/media-views.css

     
    696696        height: 100%; 
    697697} 
    698698 
     699.wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { 
     700        margin-right: 300px; 
     701} 
     702 
    699703.media-frame-content .crop-content .crop-image { 
    700704        display: block; 
    701705        margin: auto; 
     
    24752479 
    24762480@media only screen and (max-width: 480px) { 
    24772481        .media-modal-close { 
    2478                 top: 5px; 
    2479                 right: 5px; 
     2482                top: -5px; 
    24802483        } 
    24812484 
    24822485        .media-modal .media-frame-title { 
    24832486                height: 40px; 
    24842487        } 
    24852488 
     2489        .wp-core-ui.wp-customizer .media-button { 
     2490                margin-top: 13px; 
     2491        } 
     2492 
    24862493        .media-modal .media-frame-title h1, 
    24872494        .media-frame:not(.hide-menu) .media-frame-title h1 { 
    24882495                font-size: 18px; 
  • src/wp-includes/js/customize-views.js

     
    44        var api = wp.customize; 
    55 
    66        /** 
    7          * Use a custom ajax action for cropped image controls. 
    8          */ 
    9         wp.media.controller.customizeImageCropper = wp.media.controller.Cropper.extend( { 
    10                 doCrop: function( attachment ) { 
    11                         var cropDetails = attachment.get( 'cropDetails' ), 
    12                                 control = this.get( 'control' ); 
    13  
    14                         cropDetails.dst_width  = control.params.width; 
    15                         cropDetails.dst_height = control.params.height; 
    16  
    17                         return wp.ajax.post( 'crop-image', { 
    18                                 wp_customize: 'on', 
    19                                 nonce: attachment.get( 'nonces' ).edit, 
    20                                 id: attachment.get( 'id' ), 
    21                                 context: control.id, 
    22                                 cropDetails: cropDetails 
    23                         } ); 
    24                 } 
    25         } ); 
    26  
    27         /** 
    287         * wp.customize.HeaderTool.CurrentView 
    298         * 
    309         * Displays the currently selected header image, or a placeholder in lack 
  • src/wp-includes/js/imgareaselect/jquery.imgareaselect.js

     
    11/* 
    22 * imgAreaSelect jQuery plugin 
    3  * version 0.9.10 
     3 * version 0.9.10-monkey 
    44 * 
    55 * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net) 
    66 * 
     
    189189     * @return Viewport X 
    190190     */ 
    191191    function evX(event) { 
    192         return event.pageX - parOfs.left; 
     192        return max(event.pageX || 0, touchCoords(event).x) - parOfs.left; 
    193193    } 
    194194 
    195195    /** 
     
    200200     * @return Viewport Y 
    201201     */ 
    202202    function evY(event) { 
    203         return event.pageY - parOfs.top; 
     203        return max(event.pageY || 0, touchCoords(event).y) - parOfs.top; 
     204    } 
     205 
     206    /** 
     207     * Get X and Y coordinates of a touch event 
     208     * 
     209     * @param event 
     210     *            The event object 
     211     * @return Coordinates object 
     212     */ 
     213    function touchCoords(event) { 
     214        var oev = event.originalEvent || {}; 
     215 
     216        if (oev.touches && oev.touches.length) 
     217            return { x: oev.touches[0].pageX, y: oev.touches[0].pageY }; 
     218        else 
     219            return { x: 0, y: 0 }; 
    204220    } 
    205221 
    206222    /** 
     
    486502        if (options.autoHide || selection.width * selection.height == 0) 
    487503            hide($box.add($outer), function () { $(this).hide(); }); 
    488504 
    489         $(document).unbind('mousemove', selectingMouseMove); 
    490         $box.mousemove(areaMouseMove); 
     505        $(document).off('mousemove touchmove', selectingMouseMove); 
     506        $box.on('mousemove touchmove', areaMouseMove); 
    491507 
    492508        options.onSelectEnd(img, getSelection()); 
    493509    } 
     
    500516     * @return false 
    501517     */ 
    502518    function areaMouseDown(event) { 
    503         if (event.which != 1) return false; 
     519        if (event.type == 'mousedown' && event.which != 1) return false; 
     520 
     521        /* 
     522         * With mobile browsers, there is no "moving the pointer over" action, 
     523         * so we need to simulate one mousemove event happening prior to 
     524         * mousedown/touchstart. 
     525         */ 
     526        areaMouseMove(event); 
    504527 
    505528        adjust(); 
    506529 
     
    511534            x1 = viewX(selection[/w/.test(resize) ? 'x2' : 'x1']); 
    512535            y1 = viewY(selection[/n/.test(resize) ? 'y2' : 'y1']); 
    513536 
    514             $(document).mousemove(selectingMouseMove) 
    515                 .one('mouseup', docMouseUp); 
    516             $box.unbind('mousemove', areaMouseMove); 
     537            $(document).on('mousemove touchmove', selectingMouseMove) 
     538                .one('mouseup touchend', docMouseUp); 
     539            $box.off('mousemove touchmove', areaMouseMove); 
    517540        } 
    518541        else if (options.movable) { 
    519542            startX = left + selection.x1 - evX(event); 
    520543            startY = top + selection.y1 - evY(event); 
    521544 
    522             $box.unbind('mousemove', areaMouseMove); 
     545            $box.off('mousemove touchmove', areaMouseMove); 
    523546 
    524             $(document).mousemove(movingMouseMove) 
    525                 .one('mouseup', function () { 
     547            $(document).on('mousemove touchmove', movingMouseMove) 
     548                .one('mouseup touchend', function () { 
    526549                    options.onSelectEnd(img, getSelection()); 
    527550 
    528                     $(document).unbind('mousemove', movingMouseMove); 
    529                     $box.mousemove(areaMouseMove); 
     551                    $(document).off('mousemove touchmove', movingMouseMove); 
     552                    $box.on('mousemove touchmove', areaMouseMove); 
    530553                }); 
    531554        } 
    532555        else 
     
    676699     * Start selection 
    677700     */ 
    678701    function startSelection() { 
    679         $(document).unbind('mousemove', startSelection); 
     702        $(document).off('mousemove touchmove', startSelection); 
    680703        adjust(); 
    681704 
    682705        x2 = x1; 
     
    691714 
    692715        shown = true; 
    693716 
    694         $(document).unbind('mouseup', cancelSelection) 
    695             .mousemove(selectingMouseMove).one('mouseup', docMouseUp); 
    696         $box.unbind('mousemove', areaMouseMove); 
     717        $(document).off('mouseup touchend', cancelSelection) 
     718            .on('mousemove touchmove', selectingMouseMove) 
     719            .one('mouseup touchend', docMouseUp); 
     720        $box.off('mousemove touchmove', areaMouseMove); 
    697721 
    698722        options.onSelectStart(img, getSelection()); 
    699723    } 
     
    702726     * Cancel selection 
    703727     */ 
    704728    function cancelSelection() { 
    705         $(document).unbind('mousemove', startSelection) 
    706             .unbind('mouseup', cancelSelection); 
     729        $(document).off('mousemove touchmove', startSelection) 
     730            .off('mouseup touchend', cancelSelection); 
    707731        hide($box.add($outer)); 
    708732 
    709733        setSelection(selX(x1), selY(y1), selX(x1), selY(y1)); 
     
    731755        startY = y1 = evY(event); 
    732756 
    733757        /* Selection will start when the mouse is moved */ 
    734         $(document).mousemove(startSelection).mouseup(cancelSelection); 
     758        $(document).on({ 'mousemove touchmove': startSelection, 
     759            'mouseup touchend': cancelSelection }); 
    735760 
    736761        return false; 
    737762    } 
     
    9891014 
    9901015        if (options.disable || options.enable === false) { 
    9911016            /* Disable the plugin */ 
    992             $box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown); 
    993             $(window).unbind('resize', windowResize); 
     1017            $box.off({ 'mousemove touchmove': areaMouseMove, 
     1018                'mousedown touchstart': areaMouseDown }); 
     1019            $(window).off('resize', windowResize); 
    9941020        } 
    9951021        else { 
    9961022            if (options.enable || options.disable === false) { 
    9971023                /* Enable the plugin */ 
    9981024                if (options.resizable || options.movable) 
    999                     $box.mousemove(areaMouseMove).mousedown(areaMouseDown); 
     1025                    $box.on({ 'mousemove touchmove': areaMouseMove, 
     1026                        'mousedown touchstart': areaMouseDown }); 
    10001027 
    10011028                $(window).resize(windowResize); 
    10021029            } 
    10031030 
    10041031            if (!options.persistent) 
    1005                 $img.add($outer).mousedown(imgMouseDown); 
     1032                $img.add($outer).on('mousedown touchstart', imgMouseDown); 
    10061033        } 
    10071034 
    10081035        options.enable = options.disable = undefined; 
  • src/wp-includes/js/imgareaselect/jquery.imgareaselect.min.js

     
    1 (function($){var abs=Math.abs,max=Math.max,min=Math.min,round=Math.round;function div(){return $('<div/>')}$.imgAreaSelect=function(img,options){var $img=$(img),imgLoaded,$box=div(),$area=div(),$border=div().add(div()).add(div()).add(div()),$outer=div().add(div()).add(div()).add(div()),$handles=$([]),$areaOpera,left,top,imgOfs={left:0,top:0},imgWidth,imgHeight,$parent,parOfs={left:0,top:0},zIndex=0,position='absolute',startX,startY,scaleX,scaleY,resize,minWidth,minHeight,maxWidth,maxHeight,aspectRatio,shown,x1,y1,x2,y2,selection={x1:0,y1:0,x2:0,y2:0,width:0,height:0},docElem=document.documentElement,ua=navigator.userAgent,$p,d,i,o,w,h,adjusted;function viewX(x){return x+imgOfs.left-parOfs.left}function viewY(y){return y+imgOfs.top-parOfs.top}function selX(x){return x-imgOfs.left+parOfs.left}function selY(y){return y-imgOfs.top+parOfs.top}function evX(event){return event.pageX-parOfs.left}function evY(event){return event.pageY-parOfs.top}function getSelection(noScale){var sx=noScale||scaleX,sy=noScale||scaleY;return{x1:round(selection.x1*sx),y1:round(selection.y1*sy),x2:round(selection.x2*sx),y2:round(selection.y2*sy),width:round(selection.x2*sx)-round(selection.x1*sx),height:round(selection.y2*sy)-round(selection.y1*sy)}}function setSelection(x1,y1,x2,y2,noScale){var sx=noScale||scaleX,sy=noScale||scaleY;selection={x1:round(x1/sx||0),y1:round(y1/sy||0),x2:round(x2/sx||0),y2:round(y2/sy||0)};selection.width=selection.x2-selection.x1;selection.height=selection.y2-selection.y1}function adjust(){if(!imgLoaded||!$img.width())return;imgOfs={left:round($img.offset().left),top:round($img.offset().top)};imgWidth=$img.innerWidth();imgHeight=$img.innerHeight();imgOfs.top+=($img.outerHeight()-imgHeight)>>1;imgOfs.left+=($img.outerWidth()-imgWidth)>>1;minWidth=round(options.minWidth/scaleX)||0;minHeight=round(options.minHeight/scaleY)||0;maxWidth=round(min(options.maxWidth/scaleX||1<<24,imgWidth));maxHeight=round(min(options.maxHeight/scaleY||1<<24,imgHeight));if($().jquery=='1.3.2'&&position=='fixed'&&!docElem['getBoundingClientRect']){imgOfs.top+=max(document.body.scrollTop,docElem.scrollTop);imgOfs.left+=max(document.body.scrollLeft,docElem.scrollLeft)}parOfs=/absolute|relative/.test($parent.css('position'))?{left:round($parent.offset().left)-$parent.scrollLeft(),top:round($parent.offset().top)-$parent.scrollTop()}:position=='fixed'?{left:$(document).scrollLeft(),top:$(document).scrollTop()}:{left:0,top:0};left=viewX(0);top=viewY(0);if(selection.x2>imgWidth||selection.y2>imgHeight)doResize()}function update(resetKeyPress){if(!shown)return;$box.css({left:viewX(selection.x1),top:viewY(selection.y1)}).add($area).width(w=selection.width).height(h=selection.height);$area.add($border).add($handles).css({left:0,top:0});$border.width(max(w-$border.outerWidth()+$border.innerWidth(),0)).height(max(h-$border.outerHeight()+$border.innerHeight(),0));$($outer[0]).css({left:left,top:top,width:selection.x1,height:imgHeight});$($outer[1]).css({left:left+selection.x1,top:top,width:w,height:selection.y1});$($outer[2]).css({left:left+selection.x2,top:top,width:imgWidth-selection.x2,height:imgHeight});$($outer[3]).css({left:left+selection.x1,top:top+selection.y2,width:w,height:imgHeight-selection.y2});w-=$handles.outerWidth();h-=$handles.outerHeight();switch($handles.length){case 8:$($handles[4]).css({left:w>>1});$($handles[5]).css({left:w,top:h>>1});$($handles[6]).css({left:w>>1,top:h});$($handles[7]).css({top:h>>1});case 4:$handles.slice(1,3).css({left:w});$handles.slice(2,4).css({top:h})}if(resetKeyPress!==false){if($.imgAreaSelect.onKeyPress!=docKeyPress)$(document).unbind($.imgAreaSelect.keyPress,$.imgAreaSelect.onKeyPress);if(options.keys)$(document)[$.imgAreaSelect.keyPress]($.imgAreaSelect.onKeyPress=docKeyPress)}if(msie&&$border.outerWidth()-$border.innerWidth()==2){$border.css('margin',0);setTimeout(function(){$border.css('margin','auto')},0)}}function doUpdate(resetKeyPress){adjust();update(resetKeyPress);x1=viewX(selection.x1);y1=viewY(selection.y1);x2=viewX(selection.x2);y2=viewY(selection.y2)}function hide($elem,fn){options.fadeSpeed?$elem.fadeOut(options.fadeSpeed,fn):$elem.hide()}function areaMouseMove(event){var x=selX(evX(event))-selection.x1,y=selY(evY(event))-selection.y1;if(!adjusted){adjust();adjusted=true;$box.one('mouseout',function(){adjusted=false})}resize='';if(options.resizable){if(y<=options.resizeMargin)resize='n';else if(y>=selection.height-options.resizeMargin)resize='s';if(x<=options.resizeMargin)resize+='w';else if(x>=selection.width-options.resizeMargin)resize+='e'}$box.css('cursor',resize?resize+'-resize':options.movable?'move':'');if($areaOpera)$areaOpera.toggle()}function docMouseUp(event){$('body').css('cursor','');if(options.autoHide||selection.width*selection.height==0)hide($box.add($outer),function(){$(this).hide()});$(document).unbind('mousemove',selectingMouseMove);$box.mousemove(areaMouseMove);options.onSelectEnd(img,getSelection())}function areaMouseDown(event){if(event.which!=1)return false;adjust();if(resize){$('body').css('cursor',resize+'-resize');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)}else if(options.movable){startX=left+selection.x1-evX(event);startY=top+selection.y1-evY(event);$box.unbind('mousemove',areaMouseMove);$(document).mousemove(movingMouseMove).one('mouseup',function(){options.onSelectEnd(img,getSelection());$(document).unbind('mousemove',movingMouseMove);$box.mousemove(areaMouseMove)})}else $img.mousedown(event);return false}function fixAspectRatio(xFirst){if(aspectRatio)if(xFirst){x2=max(left,min(left+imgWidth,x1+abs(y2-y1)*aspectRatio*(x2>x1||-1)));y2=round(max(top,min(top+imgHeight,y1+abs(x2-x1)/aspectRatio*(y2>y1||-1))));x2=round(x2)}else{y2=max(top,min(top+imgHeight,y1+abs(x2-x1)/aspectRatio*(y2>y1||-1)));x2=round(max(left,min(left+imgWidth,x1+abs(y2-y1)*aspectRatio*(x2>x1||-1))));y2=round(y2)}}function doResize(){x1=min(x1,left+imgWidth);y1=min(y1,top+imgHeight);if(abs(x2-x1)<minWidth){x2=x1-minWidth*(x2<x1||-1);if(x2<left)x1=left+minWidth;else if(x2>left+imgWidth)x1=left+imgWidth-minWidth}if(abs(y2-y1)<minHeight){y2=y1-minHeight*(y2<y1||-1);if(y2<top)y1=top+minHeight;else if(y2>top+imgHeight)y1=top+imgHeight-minHeight}x2=max(left,min(x2,left+imgWidth));y2=max(top,min(y2,top+imgHeight));fixAspectRatio(abs(x2-x1)<abs(y2-y1)*aspectRatio);if(abs(x2-x1)>maxWidth){x2=x1-maxWidth*(x2<x1||-1);fixAspectRatio()}if(abs(y2-y1)>maxHeight){y2=y1-maxHeight*(y2<y1||-1);fixAspectRatio(true)}selection={x1:selX(min(x1,x2)),x2:selX(max(x1,x2)),y1:selY(min(y1,y2)),y2:selY(max(y1,y2)),width:abs(x2-x1),height:abs(y2-y1)};update();options.onSelectChange(img,getSelection())}function selectingMouseMove(event){x2=/w|e|^$/.test(resize)||aspectRatio?evX(event):viewX(selection.x2);y2=/n|s|^$/.test(resize)||aspectRatio?evY(event):viewY(selection.y2);doResize();return false}function doMove(newX1,newY1){x2=(x1=newX1)+selection.width;y2=(y1=newY1)+selection.height;$.extend(selection,{x1:selX(x1),y1:selY(y1),x2:selX(x2),y2:selY(y2)});update();options.onSelectChange(img,getSelection())}function movingMouseMove(event){x1=max(left,min(startX+evX(event),left+imgWidth-selection.width));y1=max(top,min(startY+evY(event),top+imgHeight-selection.height));doMove(x1,y1);event.preventDefault();return false}function startSelection(){$(document).unbind('mousemove',startSelection);adjust();x2=x1;y2=y1;doResize();resize='';if(!$outer.is(':visible'))$box.add($outer).hide().fadeIn(options.fadeSpeed||0);shown=true;$(document).unbind('mouseup',cancelSelection).mousemove(selectingMouseMove).one('mouseup',docMouseUp);$box.unbind('mousemove',areaMouseMove);options.onSelectStart(img,getSelection())}function cancelSelection(){$(document).unbind('mousemove',startSelection).unbind('mouseup',cancelSelection);hide($box.add($outer));setSelection(selX(x1),selY(y1),selX(x1),selY(y1));if(!(this instanceof $.imgAreaSelect)){options.onSelectChange(img,getSelection());options.onSelectEnd(img,getSelection())}}function imgMouseDown(event){if(event.which!=1||$outer.is(':animated'))return false;adjust();startX=x1=evX(event);startY=y1=evY(event);$(document).mousemove(startSelection).mouseup(cancelSelection);return false}function windowResize(){doUpdate(false)}function imgLoad(){imgLoaded=true;setOptions(options=$.extend({classPrefix:'imgareaselect',movable:true,parent:'body',resizable:true,resizeMargin:10,onInit:function(){},onSelectStart:function(){},onSelectChange:function(){},onSelectEnd:function(){}},options));$box.add($outer).css({visibility:''});if(options.show){shown=true;adjust();update();$box.add($outer).hide().fadeIn(options.fadeSpeed||0)}setTimeout(function(){options.onInit(img,getSelection())},0)}var docKeyPress=function(event){var k=options.keys,d,t,key=event.keyCode;d=!isNaN(k.alt)&&(event.altKey||event.originalEvent.altKey)?k.alt:!isNaN(k.ctrl)&&event.ctrlKey?k.ctrl:!isNaN(k.shift)&&event.shiftKey?k.shift:!isNaN(k.arrows)?k.arrows:10;if(k.arrows=='resize'||(k.shift=='resize'&&event.shiftKey)||(k.ctrl=='resize'&&event.ctrlKey)||(k.alt=='resize'&&(event.altKey||event.originalEvent.altKey))){switch(key){case 37:d=-d;case 39:t=max(x1,x2);x1=min(x1,x2);x2=max(t+d,x1);fixAspectRatio();break;case 38:d=-d;case 40:t=max(y1,y2);y1=min(y1,y2);y2=max(t+d,y1);fixAspectRatio(true);break;default:return}doResize()}else{x1=min(x1,x2);y1=min(y1,y2);switch(key){case 37:doMove(max(x1-d,left),y1);break;case 38:doMove(x1,max(y1-d,top));break;case 39:doMove(x1+min(d,imgWidth-selX(x2)),y1);break;case 40:doMove(x1,y1+min(d,imgHeight-selY(y2)));break;default:return}}return false};function styleOptions($elem,props){for(var option in props)if(options[option]!==undefined)$elem.css(props[option],options[option])}function setOptions(newOptions){if(newOptions.parent)($parent=$(newOptions.parent)).append($box.add($outer));$.extend(options,newOptions);adjust();if(newOptions.handles!=null){$handles.remove();$handles=$([]);i=newOptions.handles?newOptions.handles=='corners'?4:8:0;while(i--)$handles=$handles.add(div());$handles.addClass(options.classPrefix+'-handle').css({position:'absolute',fontSize:0,zIndex:zIndex+1||1});if(!parseInt($handles.css('width'))>=0)$handles.width(5).height(5);if(o=options.borderWidth)$handles.css({borderWidth:o,borderStyle:'solid'});styleOptions($handles,{borderColor1:'border-color',borderColor2:'background-color',borderOpacity:'opacity'})}scaleX=options.imageWidth/imgWidth||1;scaleY=options.imageHeight/imgHeight||1;if(newOptions.x1!=null){setSelection(newOptions.x1,newOptions.y1,newOptions.x2,newOptions.y2);newOptions.show=!newOptions.hide}if(newOptions.keys)options.keys=$.extend({shift:1,ctrl:'resize'},newOptions.keys);$outer.addClass(options.classPrefix+'-outer');$area.addClass(options.classPrefix+'-selection');for(i=0;i++<4;)$($border[i-1]).addClass(options.classPrefix+'-border'+i);styleOptions($area,{selectionColor:'background-color',selectionOpacity:'opacity'});styleOptions($border,{borderOpacity:'opacity',borderWidth:'border-width'});styleOptions($outer,{outerColor:'background-color',outerOpacity:'opacity'});if(o=options.borderColor1)$($border[0]).css({borderStyle:'solid',borderColor:o});if(o=options.borderColor2)$($border[1]).css({borderStyle:'dashed',borderColor:o});$box.append($area.add($border).add($areaOpera)).append($handles);if(msie){if(o=($outer.css('filter')||'').match(/opacity=(\d+)/))$outer.css('opacity',o[1]/100);if(o=($border.css('filter')||'').match(/opacity=(\d+)/))$border.css('opacity',o[1]/100)}if(newOptions.hide)hide($box.add($outer));else if(newOptions.show&&imgLoaded){shown=true;$box.add($outer).fadeIn(options.fadeSpeed||0);doUpdate()}aspectRatio=(d=(options.aspectRatio||'').split(/:/))[0]/d[1];$img.add($outer).unbind('mousedown',imgMouseDown);if(options.disable||options.enable===false){$box.unbind('mousemove',areaMouseMove).unbind('mousedown',areaMouseDown);$(window).unbind('resize',windowResize)}else{if(options.enable||options.disable===false){if(options.resizable||options.movable)$box.mousemove(areaMouseMove).mousedown(areaMouseDown);$(window).resize(windowResize)}if(!options.persistent)$img.add($outer).mousedown(imgMouseDown)}options.enable=options.disable=undefined}this.remove=function(){setOptions({disable:true});$box.add($outer).remove()};this.getOptions=function(){return options};this.setOptions=setOptions;this.getSelection=getSelection;this.setSelection=setSelection;this.cancelSelection=cancelSelection;this.update=doUpdate;var msie=(/msie ([\w.]+)/i.exec(ua)||[])[1],opera=/opera/i.test(ua),safari=/webkit/i.test(ua)&&!/chrome/i.test(ua);$p=$img;while($p.length){zIndex=max(zIndex,!isNaN($p.css('z-index'))?$p.css('z-index'):zIndex);if($p.css('position')=='fixed')position='fixed';$p=$p.parent(':not(body)')}zIndex=options.zIndex||zIndex;if(msie)$img.attr('unselectable','on');$.imgAreaSelect.keyPress=msie||safari?'keydown':'keypress';if(opera)$areaOpera=div().css({width:'100%',height:'100%',position:'absolute',zIndex:zIndex+2||2});$box.add($outer).css({visibility:'hidden',position:position,overflow:'hidden',zIndex:zIndex||'0'});$box.css({zIndex:zIndex+2||2});$area.add($border).css({position:'absolute',fontSize:0});img.complete||img.readyState=='complete'||!$img.is('img')?imgLoad():$img.one('load',imgLoad);if(!imgLoaded&&msie&&msie>=7)img.src=img.src};$.fn.imgAreaSelect=function(options){options=options||{};this.each(function(){if($(this).data('imgAreaSelect')){if(options.remove){$(this).data('imgAreaSelect').remove();$(this).removeData('imgAreaSelect')}else $(this).data('imgAreaSelect').setOptions(options)}else if(!options.remove){if(options.enable===undefined&&options.disable===undefined)options.enable=true;$(this).data('imgAreaSelect',new $.imgAreaSelect(this,options))}});if(options.instance)return $(this).data('imgAreaSelect');return this}})(jQuery); 
    2  No newline at end of file 
     1!function(e){function t(){return e("<div/>")}var o=Math.abs,i=Math.max,s=Math.min,n=Math.round;e.imgAreaSelect=function(r,c){function d(e){return e+gt.left-vt.left}function a(e){return e+gt.top-vt.top}function u(e){return e-gt.left+vt.left}function l(e){return e-gt.top+vt.top}function h(e){return i(e.pageX||0,m(e).x)-vt.left}function f(e){return i(e.pageY||0,m(e).y)-vt.top}function m(e){var t=e.originalEvent||{};return t.touches&&t.touches.length?{x:t.touches[0].pageX,y:t.touches[0].pageY}:{x:0,y:0}}function p(e){var t=e||B,o=e||Q;return{x1:n(wt.x1*t),y1:n(wt.y1*o),x2:n(wt.x2*t),y2:n(wt.y2*o),width:n(wt.x2*t)-n(wt.x1*t),height:n(wt.y2*o)-n(wt.y1*o)}}function y(e,t,o,i,s){var r=s||B,c=s||Q;wt={x1:n(e/r||0),y1:n(t/c||0),x2:n(o/r||0),y2:n(i/c||0)},wt.width=wt.x2-wt.x1,wt.height=wt.y2-wt.y1}function g(){T&&lt.width()&&(gt={left:n(lt.offset().left),top:n(lt.offset().top)},R=lt.innerWidth(),X=lt.innerHeight(),gt.top+=lt.outerHeight()-X>>1,gt.left+=lt.outerWidth()-R>>1,G=n(c.minWidth/B)||0,J=n(c.minHeight/Q)||0,U=n(s(c.maxWidth/B||1<<24,R)),V=n(s(c.maxHeight/Q||1<<24,X)),"1.3.2"!=e().jquery||"fixed"!=xt||St.getBoundingClientRect||(gt.top+=i(document.body.scrollTop,St.scrollTop),gt.left+=i(document.body.scrollLeft,St.scrollLeft)),vt=/absolute|relative/.test(Y.css("position"))?{left:n(Y.offset().left)-Y.scrollLeft(),top:n(Y.offset().top)-Y.scrollTop()}:"fixed"==xt?{left:e(document).scrollLeft(),top:e(document).scrollTop()}:{left:0,top:0},j=d(0),D=a(0),(wt.x2>R||wt.y2>X)&&C())}function v(t){if(_){switch(ht.css({left:d(wt.x1),top:a(wt.y1)}).add(ft).width(dt=wt.width).height(at=wt.height),ft.add(mt).add(yt).css({left:0,top:0}),mt.width(i(dt-mt.outerWidth()+mt.innerWidth(),0)).height(i(at-mt.outerHeight()+mt.innerHeight(),0)),e(pt[0]).css({left:j,top:D,width:wt.x1,height:X}),e(pt[1]).css({left:j+wt.x1,top:D,width:dt,height:wt.y1}),e(pt[2]).css({left:j+wt.x2,top:D,width:R-wt.x2,height:X}),e(pt[3]).css({left:j+wt.x1,top:D+wt.y2,width:dt,height:X-wt.y2}),dt-=yt.outerWidth(),at-=yt.outerHeight(),yt.length){case 8:e(yt[4]).css({left:dt>>1}),e(yt[5]).css({left:dt,top:at>>1}),e(yt[6]).css({left:dt>>1,top:at}),e(yt[7]).css({top:at>>1});case 4:yt.slice(1,3).css({left:dt}),yt.slice(2,4).css({top:at})}t!==!1&&(e.imgAreaSelect.onKeyPress!=kt&&e(document).unbind(e.imgAreaSelect.keyPress,e.imgAreaSelect.onKeyPress),c.keys&&e(document)[e.imgAreaSelect.keyPress](e.imgAreaSelect.onKeyPress=kt)),Ct&&mt.outerWidth()-mt.innerWidth()==2&&(mt.css("margin",0),setTimeout(function(){mt.css("margin","auto")},0))}}function b(e){g(),v(e),et=d(wt.x1),tt=a(wt.y1),ot=d(wt.x2),it=a(wt.y2)}function x(e,t){c.fadeSpeed?e.fadeOut(c.fadeSpeed,t):e.hide()}function w(e){var t=u(h(e))-wt.x1,o=l(f(e))-wt.y1;ut||(g(),ut=!0,ht.one("mouseout",function(){ut=!1})),F="",c.resizable&&(o<=c.resizeMargin?F="n":o>=wt.height-c.resizeMargin&&(F="s"),t<=c.resizeMargin?F+="w":t>=wt.width-c.resizeMargin&&(F+="e")),ht.css("cursor",F?F+"-resize":c.movable?"move":""),L&&L.toggle()}function S(){e("body").css("cursor",""),(c.autoHide||wt.width*wt.height==0)&&x(ht.add(pt),function(){e(this).hide()}),e(document).off("mousemove touchmove",A),ht.on("mousemove touchmove",w),c.onSelectEnd(r,p())}function z(t){return"mousedown"==t.type&&1!=t.which?!1:(w(t),g(),F?(e("body").css("cursor",F+"-resize"),et=d(wt[/w/.test(F)?"x2":"x1"]),tt=a(wt[/n/.test(F)?"y2":"y1"]),e(document).on("mousemove touchmove",A).one("mouseup touchend",S),ht.off("mousemove touchmove",w)):c.movable?($=j+wt.x1-h(t),q=D+wt.y1-f(t),ht.off("mousemove touchmove",w),e(document).on("mousemove touchmove",I).one("mouseup touchend",function(){c.onSelectEnd(r,p()),e(document).off("mousemove touchmove",I),ht.on("mousemove touchmove",w)})):lt.mousedown(t),!1)}function k(e){Z&&(e?(ot=i(j,s(j+R,et+o(it-tt)*Z*(ot>et||-1))),it=n(i(D,s(D+X,tt+o(ot-et)/Z*(it>tt||-1)))),ot=n(ot)):(it=i(D,s(D+X,tt+o(ot-et)/Z*(it>tt||-1))),ot=n(i(j,s(j+R,et+o(it-tt)*Z*(ot>et||-1)))),it=n(it)))}function C(){et=s(et,j+R),tt=s(tt,D+X),o(ot-et)<G&&(ot=et-G*(et>ot||-1),j>ot?et=j+G:ot>j+R&&(et=j+R-G)),o(it-tt)<J&&(it=tt-J*(tt>it||-1),D>it?tt=D+J:it>D+X&&(tt=D+X-J)),ot=i(j,s(ot,j+R)),it=i(D,s(it,D+X)),k(o(ot-et)<o(it-tt)*Z),o(ot-et)>U&&(ot=et-U*(et>ot||-1),k()),o(it-tt)>V&&(it=tt-V*(tt>it||-1),k(!0)),wt={x1:u(s(et,ot)),x2:u(i(et,ot)),y1:l(s(tt,it)),y2:l(i(tt,it)),width:o(ot-et),height:o(it-tt)},v(),c.onSelectChange(r,p())}function A(e){return ot=/w|e|^$/.test(F)||Z?h(e):d(wt.x2),it=/n|s|^$/.test(F)||Z?f(e):a(wt.y2),C(),!1}function W(t,o){ot=(et=t)+wt.width,it=(tt=o)+wt.height,e.extend(wt,{x1:u(et),y1:l(tt),x2:u(ot),y2:l(it)}),v(),c.onSelectChange(r,p())}function I(e){return et=i(j,s($+h(e),j+R-wt.width)),tt=i(D,s(q+f(e),D+X-wt.height)),W(et,tt),e.preventDefault(),!1}function K(){e(document).off("mousemove touchmove",K),g(),ot=et,it=tt,C(),F="",pt.is(":visible")||ht.add(pt).hide().fadeIn(c.fadeSpeed||0),_=!0,e(document).off("mouseup touchend",P).on("mousemove touchmove",A).one("mouseup touchend",S),ht.off("mousemove touchmove",w),c.onSelectStart(r,p())}function P(){e(document).off("mousemove touchmove",K).off("mouseup touchend",P),x(ht.add(pt)),y(u(et),l(tt),u(et),l(tt)),this instanceof e.imgAreaSelect||(c.onSelectChange(r,p()),c.onSelectEnd(r,p()))}function N(t){return 1!=t.which||pt.is(":animated")?!1:(g(),$=et=h(t),q=tt=f(t),e(document).on({"mousemove touchmove":K,"mouseup touchend":P}),!1)}function H(){b(!1)}function M(){T=!0,O(c=e.extend({classPrefix:"imgareaselect",movable:!0,parent:"body",resizable:!0,resizeMargin:10,onInit:function(){},onSelectStart:function(){},onSelectChange:function(){},onSelectEnd:function(){}},c)),ht.add(pt).css({visibility:""}),c.show&&(_=!0,g(),v(),ht.add(pt).hide().fadeIn(c.fadeSpeed||0)),setTimeout(function(){c.onInit(r,p())},0)}function E(e,t){for(var o in t)void 0!==c[o]&&e.css(t[o],c[o])}function O(o){if(o.parent&&(Y=e(o.parent)).append(ht.add(pt)),e.extend(c,o),g(),null!=o.handles){for(yt.remove(),yt=e([]),rt=o.handles?"corners"==o.handles?4:8:0;rt--;)yt=yt.add(t());yt.addClass(c.classPrefix+"-handle").css({position:"absolute",fontSize:0,zIndex:bt+1||1}),!parseInt(yt.css("width"))>=0&&yt.width(5).height(5),(ct=c.borderWidth)&&yt.css({borderWidth:ct,borderStyle:"solid"}),E(yt,{borderColor1:"border-color",borderColor2:"background-color",borderOpacity:"opacity"})}for(B=c.imageWidth/R||1,Q=c.imageHeight/X||1,null!=o.x1&&(y(o.x1,o.y1,o.x2,o.y2),o.show=!o.hide),o.keys&&(c.keys=e.extend({shift:1,ctrl:"resize"},o.keys)),pt.addClass(c.classPrefix+"-outer"),ft.addClass(c.classPrefix+"-selection"),rt=0;rt++<4;)e(mt[rt-1]).addClass(c.classPrefix+"-border"+rt);E(ft,{selectionColor:"background-color",selectionOpacity:"opacity"}),E(mt,{borderOpacity:"opacity",borderWidth:"border-width"}),E(pt,{outerColor:"background-color",outerOpacity:"opacity"}),(ct=c.borderColor1)&&e(mt[0]).css({borderStyle:"solid",borderColor:ct}),(ct=c.borderColor2)&&e(mt[1]).css({borderStyle:"dashed",borderColor:ct}),ht.append(ft.add(mt).add(L)).append(yt),Ct&&((ct=(pt.css("filter")||"").match(/opacity=(\d+)/))&&pt.css("opacity",ct[1]/100),(ct=(mt.css("filter")||"").match(/opacity=(\d+)/))&&mt.css("opacity",ct[1]/100)),o.hide?x(ht.add(pt)):o.show&&T&&(_=!0,ht.add(pt).fadeIn(c.fadeSpeed||0),b()),Z=(nt=(c.aspectRatio||"").split(/:/))[0]/nt[1],lt.add(pt).unbind("mousedown",N),c.disable||c.enable===!1?(ht.off({"mousemove touchmove":w,"mousedown touchstart":z}),e(window).off("resize",H)):((c.enable||c.disable===!1)&&((c.resizable||c.movable)&&ht.on({"mousemove touchmove":w,"mousedown touchstart":z}),e(window).resize(H)),c.persistent||lt.add(pt).on("mousedown touchstart",N)),c.enable=c.disable=void 0}var T,L,j,D,R,X,Y,$,q,B,Q,F,G,J,U,V,Z,_,et,tt,ot,it,st,nt,rt,ct,dt,at,ut,lt=e(r),ht=t(),ft=t(),mt=t().add(t()).add(t()).add(t()),pt=t().add(t()).add(t()).add(t()),yt=e([]),gt={left:0,top:0},vt={left:0,top:0},bt=0,xt="absolute",wt={x1:0,y1:0,x2:0,y2:0,width:0,height:0},St=document.documentElement,zt=navigator.userAgent,kt=function(e){var t,o,n=c.keys,r=e.keyCode;if(t=isNaN(n.alt)||!e.altKey&&!e.originalEvent.altKey?!isNaN(n.ctrl)&&e.ctrlKey?n.ctrl:!isNaN(n.shift)&&e.shiftKey?n.shift:isNaN(n.arrows)?10:n.arrows:n.alt,"resize"==n.arrows||"resize"==n.shift&&e.shiftKey||"resize"==n.ctrl&&e.ctrlKey||"resize"==n.alt&&(e.altKey||e.originalEvent.altKey)){switch(r){case 37:t=-t;case 39:o=i(et,ot),et=s(et,ot),ot=i(o+t,et),k();break;case 38:t=-t;case 40:o=i(tt,it),tt=s(tt,it),it=i(o+t,tt),k(!0);break;default:return}C()}else switch(et=s(et,ot),tt=s(tt,it),r){case 37:W(i(et-t,j),tt);break;case 38:W(et,i(tt-t,D));break;case 39:W(et+s(t,R-u(ot)),tt);break;case 40:W(et,tt+s(t,X-l(it)));break;default:return}return!1};this.remove=function(){O({disable:!0}),ht.add(pt).remove()},this.getOptions=function(){return c},this.setOptions=O,this.getSelection=p,this.setSelection=y,this.cancelSelection=P,this.update=b;var Ct=(/msie ([\w.]+)/i.exec(zt)||[])[1],At=/opera/i.test(zt),Wt=/webkit/i.test(zt)&&!/chrome/i.test(zt);for(st=lt;st.length;)bt=i(bt,isNaN(st.css("z-index"))?bt:st.css("z-index")),"fixed"==st.css("position")&&(xt="fixed"),st=st.parent(":not(body)");bt=c.zIndex||bt,Ct&&lt.attr("unselectable","on"),e.imgAreaSelect.keyPress=Ct||Wt?"keydown":"keypress",At&&(L=t().css({width:"100%",height:"100%",position:"absolute",zIndex:bt+2||2})),ht.add(pt).css({visibility:"hidden",position:xt,overflow:"hidden",zIndex:bt||"0"}),ht.css({zIndex:bt+2||2}),ft.add(mt).css({position:"absolute",fontSize:0}),r.complete||"complete"==r.readyState||!lt.is("img")?M():lt.one("load",M),!T&&Ct&&Ct>=7&&(r.src=r.src)},e.fn.imgAreaSelect=function(t){return t=t||{},this.each(function(){e(this).data("imgAreaSelect")?t.remove?(e(this).data("imgAreaSelect").remove(),e(this).removeData("imgAreaSelect")):e(this).data("imgAreaSelect").setOptions(t):t.remove||(void 0===t.enable&&void 0===t.disable&&(t.enable=!0),e(this).data("imgAreaSelect",new e.imgAreaSelect(this,t)))}),t.instance?e(this).data("imgAreaSelect"):this}}(jQuery); 
     2 No newline at end of file 
  • src/wp-includes/js/media/controllers/customize-image-cropper.js

     
     1/*globals wp */ 
     2 
     3/** 
     4 * wp.media.controller.CustomizeImageCropper 
     5 * 
     6 * A state for cropping an image. 
     7 * 
     8 * @class 
     9 * @augments wp.media.controller.Cropper 
     10 * @augments wp.media.controller.State 
     11 * @augments Backbone.Model 
     12 */ 
     13var Controller = wp.media.controller, 
     14        CustomizeImageCropper; 
     15 
     16CustomizeImageCropper = Controller.Cropper.extend({ 
     17        doCrop: function( attachment ) { 
     18                var cropDetails = attachment.get( 'cropDetails' ), 
     19                        control = this.get( 'control' ); 
     20 
     21                cropDetails.dst_width  = control.params.width; 
     22                cropDetails.dst_height = control.params.height; 
     23 
     24                return wp.ajax.post( 'crop-image', { 
     25                        wp_customize: 'on', 
     26                        nonce: attachment.get( 'nonces' ).edit, 
     27                        id: attachment.get( 'id' ), 
     28                        context: control.id, 
     29                        cropDetails: cropDetails 
     30                } ); 
     31        } 
     32}); 
     33 
     34module.exports = CustomizeImageCropper; 
  • src/wp-includes/js/media/controllers/site-icon-cropper.js

     
     1/*globals wp, Backbone */ 
     2 
     3/** 
     4 * wp.media.controller.SiteIconCropper 
     5 * 
     6 * A state for cropping a Site Icon. 
     7 * 
     8 * @class 
     9 * @augments wp.media.controller.Cropper 
     10 * @augments wp.media.controller.State 
     11 * @augments Backbone.Model 
     12 */ 
     13var Controller = wp.media.controller, 
     14        SiteIconCropper; 
     15 
     16SiteIconCropper = Controller.Cropper.extend({ 
     17        activate: function() { 
     18                this.frame.on( 'content:create:crop', this.createCropContent, this ); 
     19                this.frame.on( 'close', this.removeCropper, this ); 
     20                this.set('selection', new Backbone.Collection(this.frame._selection.single)); 
     21        }, 
     22 
     23        createCropContent: function() { 
     24                this.cropperView = new wp.media.view.SiteIconCropper({ 
     25                        controller: this, 
     26                        attachment: this.get('selection').first() 
     27                }); 
     28                this.cropperView.on('image-loaded', this.createCropToolbar, this); 
     29                this.frame.content.set(this.cropperView); 
     30 
     31        }, 
     32 
     33        doCrop: function( attachment ) { 
     34                var cropDetails = attachment.get( 'cropDetails' ), 
     35                        control = this.get( 'control' ); 
     36 
     37                cropDetails.dst_width  = control.params.width; 
     38                cropDetails.dst_height = control.params.height; 
     39 
     40                return wp.ajax.post( 'crop-image', { 
     41                        nonce: attachment.get( 'nonces' ).edit, 
     42                        id: attachment.get( 'id' ), 
     43                        context: 'site-icon', 
     44                        cropDetails: cropDetails 
     45                } ); 
     46        } 
     47}); 
     48 
     49module.exports = SiteIconCropper; 
  • src/wp-includes/js/media/views/site-icon-cropper.js

     
     1/*globals wp, _ */ 
     2 
     3/** 
     4 * wp.media.view.SiteIconCropper 
     5 * 
     6 * Uses the imgAreaSelect plugin to allow a user to crop a Site Icon. 
     7 * 
     8 * Takes imgAreaSelect options from 
     9 * wp.customize.SiteIconControl.calculateImageSelectOptions. 
     10 * 
     11 * @class 
     12 * @augments wp.media.view.Cropper 
     13 * @augments wp.media.View 
     14 * @augments wp.Backbone.View 
     15 * @augments Backbone.View 
     16 */ 
     17var View = wp.media.view, 
     18        SiteIconCropper; 
     19 
     20SiteIconCropper = View.Cropper.extend({ 
     21        className: 'crop-content site-icon', 
     22 
     23        initialize: function() { 
     24                _.bindAll(this, 'addSidebar'); 
     25 
     26                View.Cropper.prototype.initialize.apply( this, arguments ); 
     27        }, 
     28 
     29        ready: function () { 
     30                View.Cropper.prototype.ready.apply( this, arguments ); 
     31 
     32                this.$el.find( '.crop-image' ).on( 'load', this.addSidebar ); 
     33        }, 
     34 
     35        addSidebar: function() { 
     36                this.sidebar = new wp.media.view.Sidebar({ 
     37                        controller: this.controller 
     38                }); 
     39 
     40                this.sidebar.set( 'preview', new wp.media.view.SiteIconPreview({ 
     41                        controller: this.controller, 
     42                        attachment: this.options.attachment 
     43                }) ); 
     44 
     45                this.controller.cropperView.views.add( this.sidebar ); 
     46        } 
     47}); 
     48 
     49module.exports = SiteIconCropper; 
  • src/wp-includes/js/media/views/site-icon-preview.js

     
     1/*globals wp, jQuery */ 
     2 
     3/** 
     4 * wp.media.view.SiteIconPreview 
     5 * 
     6 * Shows a preview of the Site Icon as a favicon and app icon while cropping. 
     7 * 
     8 * @class 
     9 * @augments wp.media.View 
     10 * @augments wp.Backbone.View 
     11 * @augments Backbone.View 
     12 */ 
     13var View = wp.media.View, 
     14        $ = jQuery, 
     15        SiteIconPreview; 
     16 
     17SiteIconPreview = View.extend({ 
     18        className: 'site-icon-preview', 
     19        template: wp.template( 'site-icon-preview' ), 
     20 
     21        ready: function() { 
     22                this.controller.imgSelect.setOptions({ 
     23                        onInit: this.updatePreview, 
     24                        onSelectChange: this.updatePreview 
     25                }); 
     26        }, 
     27 
     28        prepare: function() { 
     29                return { 
     30                        url: this.options.attachment.get( 'url' ) 
     31                }; 
     32        }, 
     33 
     34        updatePreview: function( img, coords ) { 
     35                var rx = 64 / coords.width, 
     36                        ry = 64 / coords.height, 
     37                        preview_rx = 16 / coords.width, 
     38                        preview_ry = 16 / coords.height; 
     39 
     40                $( '#preview-app-icon' ).css({ 
     41                        width: Math.round(rx * this.imageWidth ) + 'px', 
     42                        height: Math.round(ry * this.imageHeight ) + 'px', 
     43                        marginLeft: '-' + Math.round(rx * coords.x1) + 'px', 
     44                        marginTop: '-' + Math.round(ry * coords.y1) + 'px' 
     45                }); 
     46 
     47                $( '#preview-favicon' ).css({ 
     48                        width: Math.round( preview_rx * this.imageWidth ) + 'px', 
     49                        height: Math.round( preview_ry * this.imageHeight ) + 'px', 
     50                        marginLeft: '-' + Math.round( preview_rx * coords.x1 ) + 'px', 
     51                        marginTop: '-' + Math.floor( preview_ry* coords.y1 ) + 'px' 
     52                }); 
     53        } 
     54}); 
     55 
     56module.exports = SiteIconPreview; 
  • src/wp-includes/js/media/views.manifest.js

     
    9090media.controller.MediaLibrary = require( './controllers/media-library.js' ); 
    9191media.controller.Embed = require( './controllers/embed.js' ); 
    9292media.controller.Cropper = require( './controllers/cropper.js' ); 
     93media.controller.CustomizeImageCropper = require( './controllers/customize-image-cropper.js' ); 
     94media.controller.SiteIconCropper = require( './controllers/site-icon-cropper.js' ); 
    9395 
    9496media.View = require( './views/view.js' ); 
    9597media.view.Frame = require( './views/frame.js' ); 
     
    143145media.view.EmbedImage = require( './views/embed/image.js' ); 
    144146media.view.ImageDetails = require( './views/image-details.js' ); 
    145147media.view.Cropper = require( './views/cropper.js' ); 
     148media.view.SiteIconCropper = require( './views/site-icon-cropper.js' ); 
     149media.view.SiteIconPreview = require( './views/site-icon-preview.js' ); 
    146150media.view.EditImage = require( './views/edit-image.js' ); 
    147151media.view.Spinner = require( './views/spinner.js' ); 
  • src/wp-includes/js/media-views.js

     
    387387/*globals wp */ 
    388388 
    389389/** 
     390 * wp.media.controller.CustomizeImageCropper 
     391 * 
     392 * A state for cropping an image. 
     393 * 
     394 * @class 
     395 * @augments wp.media.controller.Cropper 
     396 * @augments wp.media.controller.State 
     397 * @augments Backbone.Model 
     398 */ 
     399var Controller = wp.media.controller, 
     400        CustomizeImageCropper; 
     401 
     402CustomizeImageCropper = Controller.Cropper.extend({ 
     403        doCrop: function( attachment ) { 
     404                var cropDetails = attachment.get( 'cropDetails' ), 
     405                        control = this.get( 'control' ); 
     406 
     407                cropDetails.dst_width  = control.params.width; 
     408                cropDetails.dst_height = control.params.height; 
     409 
     410                return wp.ajax.post( 'crop-image', { 
     411                        wp_customize: 'on', 
     412                        nonce: attachment.get( 'nonces' ).edit, 
     413                        id: attachment.get( 'id' ), 
     414                        context: control.id, 
     415                        cropDetails: cropDetails 
     416                } ); 
     417        } 
     418}); 
     419 
     420module.exports = CustomizeImageCropper; 
     421 
     422},{}],5:[function(require,module,exports){ 
     423/*globals wp */ 
     424 
     425/** 
    390426 * wp.media.controller.EditImage 
    391427 * 
    392428 * A state for editing (cropping, etc.) an image. 
     
    461497 
    462498module.exports = EditImage; 
    463499 
    464 },{}],5:[function(require,module,exports){ 
     500},{}],6:[function(require,module,exports){ 
    465501/*globals wp, _, Backbone */ 
    466502 
    467503/** 
     
    599635 
    600636module.exports = Embed; 
    601637 
    602 },{}],6:[function(require,module,exports){ 
     638},{}],7:[function(require,module,exports){ 
    603639/*globals wp, _ */ 
    604640 
    605641/** 
     
    723759 
    724760module.exports = FeaturedImage; 
    725761 
    726 },{}],7:[function(require,module,exports){ 
     762},{}],8:[function(require,module,exports){ 
    727763/*globals wp, _ */ 
    728764 
    729765/** 
     
    816852 
    817853module.exports = GalleryAdd; 
    818854 
    819 },{}],8:[function(require,module,exports){ 
     855},{}],9:[function(require,module,exports){ 
    820856/*globals wp */ 
    821857 
    822858/** 
     
    960996 
    961997module.exports = GalleryEdit; 
    962998 
    963 },{}],9:[function(require,module,exports){ 
     999},{}],10:[function(require,module,exports){ 
    9641000/*globals wp, _ */ 
    9651001 
    9661002/** 
     
    10241060 
    10251061module.exports = ImageDetails; 
    10261062 
    1027 },{}],10:[function(require,module,exports){ 
     1063},{}],11:[function(require,module,exports){ 
    10281064/*globals wp, _, Backbone */ 
    10291065 
    10301066/** 
     
    12981334 
    12991335module.exports = Library; 
    13001336 
    1301 },{}],11:[function(require,module,exports){ 
     1337},{}],12:[function(require,module,exports){ 
    13021338/*globals wp, _ */ 
    13031339 
    13041340/** 
     
    13501386 
    13511387module.exports = MediaLibrary; 
    13521388 
    1353 },{}],12:[function(require,module,exports){ 
     1389},{}],13:[function(require,module,exports){ 
    13541390/*globals Backbone, _ */ 
    13551391 
    13561392/** 
     
    15311567 
    15321568module.exports = Region; 
    15331569 
    1534 },{}],13:[function(require,module,exports){ 
     1570},{}],14:[function(require,module,exports){ 
    15351571/*globals wp, _ */ 
    15361572 
    15371573/** 
     
    16411677 
    16421678module.exports = ReplaceImage; 
    16431679 
    1644 },{}],14:[function(require,module,exports){ 
     1680},{}],15:[function(require,module,exports){ 
     1681/*globals wp, Backbone */ 
     1682 
     1683/** 
     1684 * wp.media.controller.SiteIconCropper 
     1685 * 
     1686 * A state for cropping a Site Icon. 
     1687 * 
     1688 * @class 
     1689 * @augments wp.media.controller.Cropper 
     1690 * @augments wp.media.controller.State 
     1691 * @augments Backbone.Model 
     1692 */ 
     1693var Controller = wp.media.controller, 
     1694        SiteIconCropper; 
     1695 
     1696SiteIconCropper = Controller.Cropper.extend({ 
     1697        activate: function() { 
     1698                this.frame.on( 'content:create:crop', this.createCropContent, this ); 
     1699                this.frame.on( 'close', this.removeCropper, this ); 
     1700                this.set('selection', new Backbone.Collection(this.frame._selection.single)); 
     1701        }, 
     1702 
     1703        createCropContent: function() { 
     1704                this.cropperView = new wp.media.view.SiteIconCropper({ 
     1705                        controller: this, 
     1706                        attachment: this.get('selection').first() 
     1707                }); 
     1708                this.cropperView.on('image-loaded', this.createCropToolbar, this); 
     1709                this.frame.content.set(this.cropperView); 
     1710 
     1711        }, 
     1712 
     1713        doCrop: function( attachment ) { 
     1714                var cropDetails = attachment.get( 'cropDetails' ), 
     1715                        control = this.get( 'control' ); 
     1716 
     1717                cropDetails.dst_width  = control.params.width; 
     1718                cropDetails.dst_height = control.params.height; 
     1719 
     1720                return wp.ajax.post( 'crop-image', { 
     1721                        nonce: attachment.get( 'nonces' ).edit, 
     1722                        id: attachment.get( 'id' ), 
     1723                        context: 'site-icon', 
     1724                        cropDetails: cropDetails 
     1725                } ); 
     1726        } 
     1727}); 
     1728 
     1729module.exports = SiteIconCropper; 
     1730 
     1731},{}],16:[function(require,module,exports){ 
    16451732/*globals _, Backbone */ 
    16461733 
    16471734/** 
     
    17671854 
    17681855module.exports = StateMachine; 
    17691856 
    1770 },{}],15:[function(require,module,exports){ 
     1857},{}],17:[function(require,module,exports){ 
    17711858/*globals _, Backbone */ 
    17721859 
    17731860/** 
     
    20102097 
    20112098module.exports = State; 
    20122099 
    2013 },{}],16:[function(require,module,exports){ 
     2100},{}],18:[function(require,module,exports){ 
    20142101/*globals _ */ 
    20152102 
    20162103/** 
     
    20782165 
    20792166module.exports = selectionSync; 
    20802167 
    2081 },{}],17:[function(require,module,exports){ 
     2168},{}],19:[function(require,module,exports){ 
    20822169/*globals wp, jQuery, _, Backbone */ 
    20832170 
    20842171var media = wp.media, 
     
    21712258media.controller.MediaLibrary = require( './controllers/media-library.js' ); 
    21722259media.controller.Embed = require( './controllers/embed.js' ); 
    21732260media.controller.Cropper = require( './controllers/cropper.js' ); 
     2261media.controller.CustomizeImageCropper = require( './controllers/customize-image-cropper.js' ); 
     2262media.controller.SiteIconCropper = require( './controllers/site-icon-cropper.js' ); 
    21742263 
    21752264media.View = require( './views/view.js' ); 
    21762265media.view.Frame = require( './views/frame.js' ); 
     
    22242313media.view.EmbedImage = require( './views/embed/image.js' ); 
    22252314media.view.ImageDetails = require( './views/image-details.js' ); 
    22262315media.view.Cropper = require( './views/cropper.js' ); 
     2316media.view.SiteIconCropper = require( './views/site-icon-cropper.js' ); 
     2317media.view.SiteIconPreview = require( './views/site-icon-preview.js' ); 
    22272318media.view.EditImage = require( './views/edit-image.js' ); 
    22282319media.view.Spinner = require( './views/spinner.js' ); 
    22292320 
    2230 },{"./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){ 
     2321},{"./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){ 
    22312322/*globals _ */ 
    22322323 
    22332324/** 
     
    23142405 
    23152406module.exports = AttachmentCompat; 
    23162407 
    2317 },{}],19:[function(require,module,exports){ 
     2408},{}],21:[function(require,module,exports){ 
    23182409/*globals _, jQuery */ 
    23192410 
    23202411/** 
     
    23932484 
    23942485module.exports = AttachmentFilters; 
    23952486 
    2396 },{}],20:[function(require,module,exports){ 
     2487},{}],22:[function(require,module,exports){ 
    23972488/*globals wp */ 
    23982489 
    23992490/** 
     
    24852576 
    24862577module.exports = All; 
    24872578 
    2488 },{}],21:[function(require,module,exports){ 
     2579},{}],23:[function(require,module,exports){ 
    24892580/*globals wp, _ */ 
    24902581 
    24912582/** 
     
    25282619 
    25292620module.exports = DateFilter; 
    25302621 
    2531 },{}],22:[function(require,module,exports){ 
     2622},{}],24:[function(require,module,exports){ 
    25322623/*globals wp */ 
    25332624 
    25342625/** 
     
    25892680 
    25902681module.exports = Uploaded; 
    25912682 
    2592 },{}],23:[function(require,module,exports){ 
     2683},{}],25:[function(require,module,exports){ 
    25932684/*globals wp, _, jQuery */ 
    25942685 
    25952686/** 
     
    31373228 
    31383229module.exports = Attachment; 
    31393230 
    3140 },{}],24:[function(require,module,exports){ 
     3231},{}],26:[function(require,module,exports){ 
    31413232/*globals wp, _ */ 
    31423233 
    31433234/** 
     
    32773368 
    32783369module.exports = Details; 
    32793370 
    3280 },{}],25:[function(require,module,exports){ 
     3371},{}],27:[function(require,module,exports){ 
    32813372/*globals wp */ 
    32823373 
    32833374/** 
     
    32973388 
    32983389module.exports = EditLibrary; 
    32993390 
    3300 },{}],26:[function(require,module,exports){ 
     3391},{}],28:[function(require,module,exports){ 
    33013392/*globals wp */ 
    33023393 
    33033394/** 
     
    33183409 
    33193410module.exports = EditSelection; 
    33203411 
    3321 },{}],27:[function(require,module,exports){ 
     3412},{}],29:[function(require,module,exports){ 
    33223413/*globals wp */ 
    33233414 
    33243415/** 
     
    33383429 
    33393430module.exports = Library; 
    33403431 
    3341 },{}],28:[function(require,module,exports){ 
     3432},{}],30:[function(require,module,exports){ 
    33423433/*globals wp */ 
    33433434 
    33443435/** 
     
    33623453 
    33633454module.exports = Selection; 
    33643455 
    3365 },{}],29:[function(require,module,exports){ 
     3456},{}],31:[function(require,module,exports){ 
    33663457/*globals wp, _, jQuery */ 
    33673458 
    33683459/** 
     
    36633754 
    36643755module.exports = Attachments; 
    36653756 
    3666 },{}],30:[function(require,module,exports){ 
     3757},{}],32:[function(require,module,exports){ 
    36673758/*globals wp, _, jQuery */ 
    36683759 
    36693760/** 
     
    41094200 
    41104201module.exports = AttachmentsBrowser; 
    41114202 
    4112 },{}],31:[function(require,module,exports){ 
     4203},{}],33:[function(require,module,exports){ 
    41134204/*globals wp, _ */ 
    41144205 
    41154206/** 
     
    41414232 
    41424233module.exports = Selection; 
    41434234 
    4144 },{}],32:[function(require,module,exports){ 
     4235},{}],34:[function(require,module,exports){ 
    41454236/*globals _, Backbone */ 
    41464237 
    41474238/** 
     
    41894280 
    41904281module.exports = ButtonGroup; 
    41914282 
    4192 },{}],33:[function(require,module,exports){ 
     4283},{}],35:[function(require,module,exports){ 
    41934284/*globals _, Backbone */ 
    41944285 
    41954286/** 
     
    42774368 
    42784369module.exports = Button; 
    42794370 
    4280 },{}],34:[function(require,module,exports){ 
     4371},{}],36:[function(require,module,exports){ 
    42814372/*globals wp, _, jQuery */ 
    42824373 
    42834374/** 
     
    43464437 
    43474438module.exports = Cropper; 
    43484439 
    4349 },{}],35:[function(require,module,exports){ 
     4440},{}],37:[function(require,module,exports){ 
    43504441/*globals wp, _ */ 
    43514442 
    43524443/** 
     
    44044495 
    44054496module.exports = EditImage; 
    44064497 
    4407 },{}],36:[function(require,module,exports){ 
     4498},{}],38:[function(require,module,exports){ 
    44084499/** 
    44094500 * wp.media.view.Embed 
    44104501 * 
     
    44684559 
    44694560module.exports = Embed; 
    44704561 
    4471 },{}],37:[function(require,module,exports){ 
     4562},{}],39:[function(require,module,exports){ 
    44724563/*globals wp */ 
    44734564 
    44744565/** 
     
    45034594 
    45044595module.exports = EmbedImage; 
    45054596 
    4506 },{}],38:[function(require,module,exports){ 
     4597},{}],40:[function(require,module,exports){ 
    45074598/*globals wp, _, jQuery */ 
    45084599 
    45094600/** 
     
    45944685 
    45954686module.exports = EmbedLink; 
    45964687 
    4597 },{}],39:[function(require,module,exports){ 
     4688},{}],41:[function(require,module,exports){ 
    45984689/*globals wp, _, jQuery */ 
    45994690 
    46004691/** 
     
    46754766 
    46764767module.exports = EmbedUrl; 
    46774768 
    4678 },{}],40:[function(require,module,exports){ 
     4769},{}],42:[function(require,module,exports){ 
    46794770/** 
    46804771 * wp.media.view.FocusManager 
    46814772 * 
     
    47214812 
    47224813module.exports = FocusManager; 
    47234814 
    4724 },{}],41:[function(require,module,exports){ 
     4815},{}],43:[function(require,module,exports){ 
    47254816/*globals _, Backbone */ 
    47264817 
    47274818/** 
     
    48894980 
    48904981module.exports = Frame; 
    48914982 
    4892 },{}],42:[function(require,module,exports){ 
     4983},{}],44:[function(require,module,exports){ 
    48934984/*globals wp */ 
    48944985 
    48954986/** 
     
    50685159 
    50695160module.exports = ImageDetails; 
    50705161 
    5071 },{}],43:[function(require,module,exports){ 
     5162},{}],45:[function(require,module,exports){ 
    50725163/*globals wp, _ */ 
    50735164 
    50745165/** 
     
    58055896 
    58065897module.exports = Post; 
    58075898 
    5808 },{}],44:[function(require,module,exports){ 
     5899},{}],46:[function(require,module,exports){ 
    58095900/*globals wp, _ */ 
    58105901 
    58115902/** 
     
    59786069 
    59796070module.exports = Select; 
    59806071 
    5981 },{}],45:[function(require,module,exports){ 
     6072},{}],47:[function(require,module,exports){ 
    59826073/** 
    59836074 * wp.media.view.Iframe 
    59846075 * 
     
    60026093 
    60036094module.exports = Iframe; 
    60046095 
    6005 },{}],46:[function(require,module,exports){ 
     6096},{}],48:[function(require,module,exports){ 
    60066097/*globals wp, _, jQuery */ 
    60076098 
    60086099/** 
     
    61726263 
    61736264module.exports = ImageDetails; 
    61746265 
    6175 },{}],47:[function(require,module,exports){ 
     6266},{}],49:[function(require,module,exports){ 
    61766267/** 
    61776268 * wp.media.view.Label 
    61786269 * 
     
    61986289 
    61996290module.exports = Label; 
    62006291 
    6201 },{}],48:[function(require,module,exports){ 
     6292},{}],50:[function(require,module,exports){ 
    62026293/*globals wp, _, jQuery */ 
    62036294 
    62046295/** 
     
    64476538 
    64486539module.exports = MediaFrame; 
    64496540 
    6450 },{}],49:[function(require,module,exports){ 
     6541},{}],51:[function(require,module,exports){ 
    64516542/*globals jQuery */ 
    64526543 
    64536544/** 
     
    65216612 
    65226613module.exports = MenuItem; 
    65236614 
    6524 },{}],50:[function(require,module,exports){ 
     6615},{}],52:[function(require,module,exports){ 
    65256616/** 
    65266617 * wp.media.view.Menu 
    65276618 * 
     
    66386729 
    66396730module.exports = Menu; 
    66406731 
    6641 },{}],51:[function(require,module,exports){ 
     6732},{}],53:[function(require,module,exports){ 
    66426733/*globals wp, _, jQuery */ 
    66436734 
    66446735/** 
     
    68536944 
    68546945module.exports = Modal; 
    68556946 
    6856 },{}],52:[function(require,module,exports){ 
     6947},{}],54:[function(require,module,exports){ 
    68576948/*globals _, Backbone */ 
    68586949 
    68596950/** 
     
    69527043 
    69537044module.exports = PriorityList; 
    69547045 
    6955 },{}],53:[function(require,module,exports){ 
     7046},{}],55:[function(require,module,exports){ 
    69567047/** 
    69577048 * wp.media.view.RouterItem 
    69587049 * 
     
    69767067 
    69777068module.exports = RouterItem; 
    69787069 
    6979 },{}],54:[function(require,module,exports){ 
     7070},{}],56:[function(require,module,exports){ 
    69807071/*globals wp */ 
    69817072 
    69827073/** 
     
    70157106 
    70167107module.exports = Router; 
    70177108 
    7018 },{}],55:[function(require,module,exports){ 
     7109},{}],57:[function(require,module,exports){ 
    70197110/*globals wp */ 
    70207111 
    70217112/** 
     
    70657156 
    70667157module.exports = Search; 
    70677158 
    7068 },{}],56:[function(require,module,exports){ 
     7159},{}],58:[function(require,module,exports){ 
    70697160/*globals wp, _, Backbone */ 
    70707161 
    70717162/** 
     
    71507241 
    71517242module.exports = Selection; 
    71527243 
    7153 },{}],57:[function(require,module,exports){ 
     7244},{}],59:[function(require,module,exports){ 
    71547245/*globals _, Backbone */ 
    71557246 
    71567247/** 
     
    72737364 
    72747365module.exports = Settings; 
    72757366 
    7276 },{}],58:[function(require,module,exports){ 
     7367},{}],60:[function(require,module,exports){ 
    72777368/*globals wp, _ */ 
    72787369 
    72797370/** 
     
    73697460 
    73707461module.exports = AttachmentDisplay; 
    73717462 
    7372 },{}],59:[function(require,module,exports){ 
     7463},{}],61:[function(require,module,exports){ 
    73737464/*globals wp */ 
    73747465 
    73757466/** 
     
    73887479 
    73897480module.exports = Gallery; 
    73907481 
    7391 },{}],60:[function(require,module,exports){ 
     7482},{}],62:[function(require,module,exports){ 
    73927483/*globals wp */ 
    73937484 
    73947485/** 
     
    74077498 
    74087499module.exports = Playlist; 
    74097500 
    7410 },{}],61:[function(require,module,exports){ 
     7501},{}],63:[function(require,module,exports){ 
    74117502/** 
    74127503 * wp.media.view.Sidebar 
    74137504 * 
     
    74237514 
    74247515module.exports = Sidebar; 
    74257516 
    7426 },{}],62:[function(require,module,exports){ 
     7517},{}],64:[function(require,module,exports){ 
     7518/*globals wp, _ */ 
     7519 
     7520/** 
     7521 * wp.media.view.SiteIconCropper 
     7522 * 
     7523 * Uses the imgAreaSelect plugin to allow a user to crop a Site Icon. 
     7524 * 
     7525 * Takes imgAreaSelect options from 
     7526 * wp.customize.SiteIconControl.calculateImageSelectOptions. 
     7527 * 
     7528 * @class 
     7529 * @augments wp.media.view.Cropper 
     7530 * @augments wp.media.View 
     7531 * @augments wp.Backbone.View 
     7532 * @augments Backbone.View 
     7533 */ 
     7534var View = wp.media.view, 
     7535        SiteIconCropper; 
     7536 
     7537SiteIconCropper = View.Cropper.extend({ 
     7538        className: 'crop-content site-icon', 
     7539 
     7540        initialize: function() { 
     7541                _.bindAll(this, 'addSidebar'); 
     7542 
     7543                View.Cropper.prototype.initialize.apply( this, arguments ); 
     7544        }, 
     7545 
     7546        ready: function () { 
     7547                View.Cropper.prototype.ready.apply( this, arguments ); 
     7548 
     7549                this.$el.find( '.crop-image' ).on( 'load', this.addSidebar ); 
     7550        }, 
     7551 
     7552        addSidebar: function() { 
     7553                this.sidebar = new wp.media.view.Sidebar({ 
     7554                        controller: this.controller 
     7555                }); 
     7556 
     7557                this.sidebar.set( 'preview', new wp.media.view.SiteIconPreview({ 
     7558                        controller: this.controller, 
     7559                        attachment: this.options.attachment 
     7560                }) ); 
     7561 
     7562                this.controller.cropperView.views.add( this.sidebar ); 
     7563        } 
     7564}); 
     7565 
     7566module.exports = SiteIconCropper; 
     7567 
     7568},{}],65:[function(require,module,exports){ 
     7569/*globals wp, jQuery */ 
     7570 
     7571/** 
     7572 * wp.media.view.SiteIconPreview 
     7573 * 
     7574 * Shows a preview of the Site Icon as a favicon and app icon while cropping. 
     7575 * 
     7576 * @class 
     7577 * @augments wp.media.View 
     7578 * @augments wp.Backbone.View 
     7579 * @augments Backbone.View 
     7580 */ 
     7581var View = wp.media.View, 
     7582        $ = jQuery, 
     7583        SiteIconPreview; 
     7584 
     7585SiteIconPreview = View.extend({ 
     7586        className: 'site-icon-preview', 
     7587        template: wp.template( 'site-icon-preview' ), 
     7588 
     7589        ready: function() { 
     7590                this.controller.imgSelect.setOptions({ 
     7591                        onInit: this.updatePreview, 
     7592                        onSelectChange: this.updatePreview 
     7593                }); 
     7594        }, 
     7595 
     7596        prepare: function() { 
     7597                return { 
     7598                        url: this.options.attachment.get( 'url' ) 
     7599                }; 
     7600        }, 
     7601 
     7602        updatePreview: function( img, coords ) { 
     7603                var rx = 64 / coords.width, 
     7604                        ry = 64 / coords.height, 
     7605                        preview_rx = 16 / coords.width, 
     7606                        preview_ry = 16 / coords.height; 
     7607 
     7608                $( '#preview-app-icon' ).css({ 
     7609                        width: Math.round(rx * this.imageWidth ) + 'px', 
     7610                        height: Math.round(ry * this.imageHeight ) + 'px', 
     7611                        marginLeft: '-' + Math.round(rx * coords.x1) + 'px', 
     7612                        marginTop: '-' + Math.round(ry * coords.y1) + 'px' 
     7613                }); 
     7614 
     7615                $( '#preview-favicon' ).css({ 
     7616                        width: Math.round( preview_rx * this.imageWidth ) + 'px', 
     7617                        height: Math.round( preview_ry * this.imageHeight ) + 'px', 
     7618                        marginLeft: '-' + Math.round( preview_rx * coords.x1 ) + 'px', 
     7619                        marginTop: '-' + Math.floor( preview_ry* coords.y1 ) + 'px' 
     7620                }); 
     7621        } 
     7622}); 
     7623 
     7624module.exports = SiteIconPreview; 
     7625 
     7626},{}],66:[function(require,module,exports){ 
    74277627/*globals _ */ 
    74287628 
    74297629/** 
     
    74607660 
    74617661module.exports = Spinner; 
    74627662 
    7463 },{}],63:[function(require,module,exports){ 
     7663},{}],67:[function(require,module,exports){ 
    74647664/*globals _, Backbone */ 
    74657665 
    74667666/** 
     
    76227822 
    76237823module.exports = Toolbar; 
    76247824 
    7625 },{}],64:[function(require,module,exports){ 
     7825},{}],68:[function(require,module,exports){ 
    76267826/*globals wp, _ */ 
    76277827 
    76287828/** 
     
    76617861 
    76627862module.exports = Embed; 
    76637863 
    7664 },{}],65:[function(require,module,exports){ 
     7864},{}],69:[function(require,module,exports){ 
    76657865/*globals wp, _ */ 
    76667866 
    76677867/** 
     
    77337933 
    77347934module.exports = Select; 
    77357935 
    7736 },{}],66:[function(require,module,exports){ 
     7936},{}],70:[function(require,module,exports){ 
    77377937/*globals wp, _, jQuery */ 
    77387938 
    77397939/** 
     
    79568156 
    79578157module.exports = EditorUploader; 
    79588158 
    7959 },{}],67:[function(require,module,exports){ 
     8159},{}],71:[function(require,module,exports){ 
    79608160/*globals wp, _ */ 
    79618161 
    79628162/** 
     
    80898289 
    80908290module.exports = UploaderInline; 
    80918291 
    8092 },{}],68:[function(require,module,exports){ 
     8292},{}],72:[function(require,module,exports){ 
    80938293/*globals wp */ 
    80948294 
    80958295/** 
     
    81078307 
    81088308module.exports = UploaderStatusError; 
    81098309 
    8110 },{}],69:[function(require,module,exports){ 
     8310},{}],73:[function(require,module,exports){ 
    81118311/*globals wp, _ */ 
    81128312 
    81138313/** 
     
    82478447 
    82488448module.exports = UploaderStatus; 
    82498449 
    8250 },{}],70:[function(require,module,exports){ 
     8450},{}],74:[function(require,module,exports){ 
    82518451/*globals wp, _, jQuery */ 
    82528452 
    82538453/** 
     
    83608560 
    83618561module.exports = UploaderWindow; 
    83628562 
    8363 },{}],71:[function(require,module,exports){ 
     8563},{}],75:[function(require,module,exports){ 
    83648564/*globals wp */ 
    83658565 
    83668566/** 
     
    84288628 
    84298629module.exports = View; 
    84308630 
    8431 },{}]},{},[17]); 
     8631},{}]},{},[19]); 
  • src/wp-includes/media-template.php

     
    12431243                <div class="upload-errors"></div> 
    12441244        </script> 
    12451245 
     1246        <script type="text/html" id="tmpl-site-icon-preview"> 
     1247                <h2><?php _e( 'Preview' ); ?></h2> 
     1248                <strong><?php _e( 'As a browser icon' ); ?></strong> 
     1249                <div class="favicon-preview"> 
     1250                        <img src="images/browser.png" class="browser-preview" width="182" height="" alt=""/> 
     1251 
     1252                        <div class="favicon"> 
     1253                                <img id="preview-favicon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/> 
     1254                        </div> 
     1255                        <span class="browser-title"><?php bloginfo( 'name' ); ?></span> 
     1256                </div> 
     1257 
     1258                <strong><?php _e( 'As an app icon' ); ?></strong> 
     1259                <div class="app-icon-preview"> 
     1260                        <img id="preview-app-icon" src="{{ data.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/> 
     1261                </div> 
     1262        </script> 
     1263 
    12461264        <?php 
    12471265 
    12481266        /** 
  • src/wp-includes/script-loader.php

     
    618618                        'untitled' => _x( '(no label)', 'missing menu item navigation label' ) 
    619619                ) ); 
    620620 
    621                 $scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery' ), false, 1 ); 
    622                 $scripts->add( 'site-icon-crop', '/wp-admin/js/site-icon-crop.js', array( 'jcrop' ), false, 1 ); 
    623  
    624621                $scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 ); 
    625622                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker', 'media-views' ), false, 1 ); 
    626623                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );