Make WordPress Core

Changeset 33329


Ignore:
Timestamp:
07/20/2015 03:56:19 PM (9 years ago)
Author:
obenland
Message:

Site Icon: Add crop preview to the media modal.

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

Fixes #16434.

Location:
trunk/src
Files:
4 added
2 deleted
13 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/site-icon.css

    r33180 r33329  
    33------------------------------------------------------------------------------*/
    44
    5 .site-icon-image {
    6     float: left;
    7     margin: 0 20px 0 0;
     5.site-icon-preview .favicon-preview {
     6    margin-bottom: 20px;
     7    overflow: hidden;
     8    position: relative;
     9    max-width: 180px;
    810}
    911
    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 {
    34     margin-bottom: 20px;
    35     position: relative;
    36 }
    37 
    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;
     
    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;
     
    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 }
  • trunk/src/wp-admin/includes/class-wp-site-icon.php

    r33202 r33329  
    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 );
    77     }
    78 
    79     /**
    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' );
    43170    }
    43271
     
    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     *
     
    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
  • trunk/src/wp-admin/js/customize-controls.js

    r33324 r33329  
    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.
  • trunk/src/wp-admin/options-general.php

    r33180 r33329  
    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>
    126 </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>
    166126</tr>
    167127<?php if ( !is_multisite() ) { ?>
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r33217 r33329  
    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',
  • trunk/src/wp-includes/css/media-views.css

    r32952 r33329  
    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;
     
    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;
     2487    }
     2488
     2489    .wp-core-ui.wp-customizer .media-button {
     2490        margin-top: 13px;
    24842491    }
    24852492
  • trunk/src/wp-includes/js/customize-views.js

    r33154 r33329  
    33    if ( ! wp || ! wp.customize ) { return; }
    44    var api = wp.customize;
    5 
    6     /**
    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     } );
    265
    276    /**
  • trunk/src/wp-includes/js/imgareaselect/jquery.imgareaselect.js

    r25545 r33329  
    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)
     
    190190     */
    191191    function evX(event) {
    192         return event.pageX - parOfs.left;
     192        return max(event.pageX || 0, touchCoords(event).x) - parOfs.left;
    193193    }
    194194
     
    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
     
    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());
     
    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();
     
    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) {
     
    520543            startY = top + selection.y1 - evY(event);
    521544
    522             $box.unbind('mousemove', areaMouseMove);
    523 
    524             $(document).mousemove(movingMouseMove)
    525                 .one('mouseup', function () {
     545            $box.off('mousemove touchmove', areaMouseMove);
     546
     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        }
     
    677700     */
    678701    function startSelection() {
    679         $(document).unbind('mousemove', startSelection);
     702        $(document).off('mousemove touchmove', startSelection);
    680703        adjust();
    681704
     
    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());
     
    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
     
    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;
     
    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 {
     
    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);
     
    10031030
    10041031            if (!options.persistent)
    1005                 $img.add($outer).mousedown(imgMouseDown);
     1032                $img.add($outer).on('mousedown touchstart', imgMouseDown);
    10061033        }
    10071034
  • trunk/src/wp-includes/js/imgareaselect/jquery.imgareaselect.min.js

    r25545 r33329  
    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);
     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);
  • trunk/src/wp-includes/js/media-views.js

    r32952 r33329  
    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 *
     
    462498module.exports = EditImage;
    463499
    464 },{}],5:[function(require,module,exports){
     500},{}],6:[function(require,module,exports){
    465501/*globals wp, _, Backbone */
    466502
     
    600636module.exports = Embed;
    601637
    602 },{}],6:[function(require,module,exports){
     638},{}],7:[function(require,module,exports){
    603639/*globals wp, _ */
    604640
     
    724760module.exports = FeaturedImage;
    725761
    726 },{}],7:[function(require,module,exports){
     762},{}],8:[function(require,module,exports){
    727763/*globals wp, _ */
    728764
     
    817853module.exports = GalleryAdd;
    818854
    819 },{}],8:[function(require,module,exports){
     855},{}],9:[function(require,module,exports){
    820856/*globals wp */
    821857
     
    961997module.exports = GalleryEdit;
    962998
    963 },{}],9:[function(require,module,exports){
     999},{}],10:[function(require,module,exports){
    9641000/*globals wp, _ */
    9651001
     
    10251061module.exports = ImageDetails;
    10261062
    1027 },{}],10:[function(require,module,exports){
     1063},{}],11:[function(require,module,exports){
    10281064/*globals wp, _, Backbone */
    10291065
     
    12991335module.exports = Library;
    13001336
    1301 },{}],11:[function(require,module,exports){
     1337},{}],12:[function(require,module,exports){
    13021338/*globals wp, _ */
    13031339
     
    13511387module.exports = MediaLibrary;
    13521388
    1353 },{}],12:[function(require,module,exports){
     1389},{}],13:[function(require,module,exports){
    13541390/*globals Backbone, _ */
    13551391
     
    15321568module.exports = Region;
    15331569
    1534 },{}],13:[function(require,module,exports){
     1570},{}],14:[function(require,module,exports){
    15351571/*globals wp, _ */
    15361572
     
    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
     
    17681855module.exports = StateMachine;
    17691856
    1770 },{}],15:[function(require,module,exports){
     1857},{}],17:[function(require,module,exports){
    17711858/*globals _, Backbone */
    17721859
     
    20112098module.exports = State;
    20122099
    2013 },{}],16:[function(require,module,exports){
     2100},{}],18:[function(require,module,exports){
    20142101/*globals _ */
    20152102
     
    20792166module.exports = selectionSync;
    20802167
    2081 },{}],17:[function(require,module,exports){
     2168},{}],19:[function(require,module,exports){
    20822169/*globals wp, jQuery, _, Backbone */
    20832170
     
    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' );
     
    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
     
    23152406module.exports = AttachmentCompat;
    23162407
    2317 },{}],19:[function(require,module,exports){
     2408},{}],21:[function(require,module,exports){
    23182409/*globals _, jQuery */
    23192410
     
    23942485module.exports = AttachmentFilters;
    23952486
    2396 },{}],20:[function(require,module,exports){
     2487},{}],22:[function(require,module,exports){
    23972488/*globals wp */
    23982489
     
    24862577module.exports = All;
    24872578
    2488 },{}],21:[function(require,module,exports){
     2579},{}],23:[function(require,module,exports){
    24892580/*globals wp, _ */
    24902581
     
    25292620module.exports = DateFilter;
    25302621
    2531 },{}],22:[function(require,module,exports){
     2622},{}],24:[function(require,module,exports){
    25322623/*globals wp */
    25332624
     
    25902681module.exports = Uploaded;
    25912682
    2592 },{}],23:[function(require,module,exports){
     2683},{}],25:[function(require,module,exports){
    25932684/*globals wp, _, jQuery */
    25942685
     
    31383229module.exports = Attachment;
    31393230
    3140 },{}],24:[function(require,module,exports){
     3231},{}],26:[function(require,module,exports){
    31413232/*globals wp, _ */
    31423233
     
    32783369module.exports = Details;
    32793370
    3280 },{}],25:[function(require,module,exports){
     3371},{}],27:[function(require,module,exports){
    32813372/*globals wp */
    32823373
     
    32983389module.exports = EditLibrary;
    32993390
    3300 },{}],26:[function(require,module,exports){
     3391},{}],28:[function(require,module,exports){
    33013392/*globals wp */
    33023393
     
    33193410module.exports = EditSelection;
    33203411
    3321 },{}],27:[function(require,module,exports){
     3412},{}],29:[function(require,module,exports){
    33223413/*globals wp */
    33233414
     
    33393430module.exports = Library;
    33403431
    3341 },{}],28:[function(require,module,exports){
     3432},{}],30:[function(require,module,exports){
    33423433/*globals wp */
    33433434
     
    33633454module.exports = Selection;
    33643455
    3365 },{}],29:[function(require,module,exports){
     3456},{}],31:[function(require,module,exports){
    33663457/*globals wp, _, jQuery */
    33673458
     
    36643755module.exports = Attachments;
    36653756
    3666 },{}],30:[function(require,module,exports){
     3757},{}],32:[function(require,module,exports){
    36673758/*globals wp, _, jQuery */
    36683759
     
    41104201module.exports = AttachmentsBrowser;
    41114202
    4112 },{}],31:[function(require,module,exports){
     4203},{}],33:[function(require,module,exports){
    41134204/*globals wp, _ */
    41144205
     
    41424233module.exports = Selection;
    41434234
    4144 },{}],32:[function(require,module,exports){
     4235},{}],34:[function(require,module,exports){
    41454236/*globals _, Backbone */
    41464237
     
    41904281module.exports = ButtonGroup;
    41914282
    4192 },{}],33:[function(require,module,exports){
     4283},{}],35:[function(require,module,exports){
    41934284/*globals _, Backbone */
    41944285
     
    42784369module.exports = Button;
    42794370
    4280 },{}],34:[function(require,module,exports){
     4371},{}],36:[function(require,module,exports){
    42814372/*globals wp, _, jQuery */
    42824373
     
    43474438module.exports = Cropper;
    43484439
    4349 },{}],35:[function(require,module,exports){
     4440},{}],37:[function(require,module,exports){
    43504441/*globals wp, _ */
    43514442
     
    44054496module.exports = EditImage;
    44064497
    4407 },{}],36:[function(require,module,exports){
     4498},{}],38:[function(require,module,exports){
    44084499/**
    44094500 * wp.media.view.Embed
     
    44694560module.exports = Embed;
    44704561
    4471 },{}],37:[function(require,module,exports){
     4562},{}],39:[function(require,module,exports){
    44724563/*globals wp */
    44734564
     
    45044595module.exports = EmbedImage;
    45054596
    4506 },{}],38:[function(require,module,exports){
     4597},{}],40:[function(require,module,exports){
    45074598/*globals wp, _, jQuery */
    45084599
     
    45954686module.exports = EmbedLink;
    45964687
    4597 },{}],39:[function(require,module,exports){
     4688},{}],41:[function(require,module,exports){
    45984689/*globals wp, _, jQuery */
    45994690
     
    46764767module.exports = EmbedUrl;
    46774768
    4678 },{}],40:[function(require,module,exports){
     4769},{}],42:[function(require,module,exports){
    46794770/**
    46804771 * wp.media.view.FocusManager
     
    47224813module.exports = FocusManager;
    47234814
    4724 },{}],41:[function(require,module,exports){
     4815},{}],43:[function(require,module,exports){
    47254816/*globals _, Backbone */
    47264817
     
    48904981module.exports = Frame;
    48914982
    4892 },{}],42:[function(require,module,exports){
     4983},{}],44:[function(require,module,exports){
    48934984/*globals wp */
    48944985
     
    50695160module.exports = ImageDetails;
    50705161
    5071 },{}],43:[function(require,module,exports){
     5162},{}],45:[function(require,module,exports){
    50725163/*globals wp, _ */
    50735164
     
    58065897module.exports = Post;
    58075898
    5808 },{}],44:[function(require,module,exports){
     5899},{}],46:[function(require,module,exports){
    58095900/*globals wp, _ */
    58105901
     
    59796070module.exports = Select;
    59806071
    5981 },{}],45:[function(require,module,exports){
     6072},{}],47:[function(require,module,exports){
    59826073/**
    59836074 * wp.media.view.Iframe
     
    60036094module.exports = Iframe;
    60046095
    6005 },{}],46:[function(require,module,exports){
     6096},{}],48:[function(require,module,exports){
    60066097/*globals wp, _, jQuery */
    60076098
     
    61736264module.exports = ImageDetails;
    61746265
    6175 },{}],47:[function(require,module,exports){
     6266},{}],49:[function(require,module,exports){
    61766267/**
    61776268 * wp.media.view.Label
     
    61996290module.exports = Label;
    62006291
    6201 },{}],48:[function(require,module,exports){
     6292},{}],50:[function(require,module,exports){
    62026293/*globals wp, _, jQuery */
    62036294
     
    64486539module.exports = MediaFrame;
    64496540
    6450 },{}],49:[function(require,module,exports){
     6541},{}],51:[function(require,module,exports){
    64516542/*globals jQuery */
    64526543
     
    65226613module.exports = MenuItem;
    65236614
    6524 },{}],50:[function(require,module,exports){
     6615},{}],52:[function(require,module,exports){
    65256616/**
    65266617 * wp.media.view.Menu
     
    66396730module.exports = Menu;
    66406731
    6641 },{}],51:[function(require,module,exports){
     6732},{}],53:[function(require,module,exports){
    66426733/*globals wp, _, jQuery */
    66436734
     
    68546945module.exports = Modal;
    68556946
    6856 },{}],52:[function(require,module,exports){
     6947},{}],54:[function(require,module,exports){
    68576948/*globals _, Backbone */
    68586949
     
    69537044module.exports = PriorityList;
    69547045
    6955 },{}],53:[function(require,module,exports){
     7046},{}],55:[function(require,module,exports){
    69567047/**
    69577048 * wp.media.view.RouterItem
     
    69777068module.exports = RouterItem;
    69787069
    6979 },{}],54:[function(require,module,exports){
     7070},{}],56:[function(require,module,exports){
    69807071/*globals wp */
    69817072
     
    70167107module.exports = Router;
    70177108
    7018 },{}],55:[function(require,module,exports){
     7109},{}],57:[function(require,module,exports){
    70197110/*globals wp */
    70207111
     
    70667157module.exports = Search;
    70677158
    7068 },{}],56:[function(require,module,exports){
     7159},{}],58:[function(require,module,exports){
    70697160/*globals wp, _, Backbone */
    70707161
     
    71517242module.exports = Selection;
    71527243
    7153 },{}],57:[function(require,module,exports){
     7244},{}],59:[function(require,module,exports){
    71547245/*globals _, Backbone */
    71557246
     
    72747365module.exports = Settings;
    72757366
    7276 },{}],58:[function(require,module,exports){
     7367},{}],60:[function(require,module,exports){
    72777368/*globals wp, _ */
    72787369
     
    73707461module.exports = AttachmentDisplay;
    73717462
    7372 },{}],59:[function(require,module,exports){
     7463},{}],61:[function(require,module,exports){
    73737464/*globals wp */
    73747465
     
    73897480module.exports = Gallery;
    73907481
    7391 },{}],60:[function(require,module,exports){
     7482},{}],62:[function(require,module,exports){
    73927483/*globals wp */
    73937484
     
    74087499module.exports = Playlist;
    74097500
    7410 },{}],61:[function(require,module,exports){
     7501},{}],63:[function(require,module,exports){
    74117502/**
    74127503 * wp.media.view.Sidebar
     
    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    ready: function () {
     7541        View.Cropper.prototype.ready.apply( this, arguments );
     7542
     7543        this.$( '.crop-image' ).on( 'load', _.bind( this.addSidebar, this ) );
     7544    },
     7545
     7546    addSidebar: function() {
     7547        this.sidebar = new wp.media.view.Sidebar({
     7548            controller: this.controller
     7549        });
     7550
     7551        this.sidebar.set( 'preview', new wp.media.view.SiteIconPreview({
     7552            controller: this.controller,
     7553            attachment: this.options.attachment
     7554        }) );
     7555
     7556        this.controller.cropperView.views.add( this.sidebar );
     7557    }
     7558});
     7559
     7560module.exports = SiteIconCropper;
     7561
     7562},{}],65:[function(require,module,exports){
     7563/*globals wp, jQuery */
     7564
     7565/**
     7566 * wp.media.view.SiteIconPreview
     7567 *
     7568 * Shows a preview of the Site Icon as a favicon and app icon while cropping.
     7569 *
     7570 * @class
     7571 * @augments wp.media.View
     7572 * @augments wp.Backbone.View
     7573 * @augments Backbone.View
     7574 */
     7575var View = wp.media.View,
     7576    $ = jQuery,
     7577    SiteIconPreview;
     7578
     7579SiteIconPreview = View.extend({
     7580    className: 'site-icon-preview',
     7581    template: wp.template( 'site-icon-preview' ),
     7582
     7583    ready: function() {
     7584        this.controller.imgSelect.setOptions({
     7585            onInit: this.updatePreview,
     7586            onSelectChange: this.updatePreview
     7587        });
     7588    },
     7589
     7590    prepare: function() {
     7591        return {
     7592            url: this.options.attachment.get( 'url' )
     7593        };
     7594    },
     7595
     7596    updatePreview: function( img, coords ) {
     7597        var rx = 64 / coords.width,
     7598            ry = 64 / coords.height,
     7599            preview_rx = 16 / coords.width,
     7600            preview_ry = 16 / coords.height;
     7601
     7602        $( '#preview-app-icon' ).css({
     7603            width: Math.round(rx * this.imageWidth ) + 'px',
     7604            height: Math.round(ry * this.imageHeight ) + 'px',
     7605            marginLeft: '-' + Math.round(rx * coords.x1) + 'px',
     7606            marginTop: '-' + Math.round(ry * coords.y1) + 'px'
     7607        });
     7608
     7609        $( '#preview-favicon' ).css({
     7610            width: Math.round( preview_rx * this.imageWidth ) + 'px',
     7611            height: Math.round( preview_ry * this.imageHeight ) + 'px',
     7612            marginLeft: '-' + Math.round( preview_rx * coords.x1 ) + 'px',
     7613            marginTop: '-' + Math.floor( preview_ry* coords.y1 ) + 'px'
     7614        });
     7615    }
     7616});
     7617
     7618module.exports = SiteIconPreview;
     7619
     7620},{}],66:[function(require,module,exports){
    74277621/*globals _ */
    74287622
     
    74617655module.exports = Spinner;
    74627656
    7463 },{}],63:[function(require,module,exports){
     7657},{}],67:[function(require,module,exports){
    74647658/*globals _, Backbone */
    74657659
     
    76237817module.exports = Toolbar;
    76247818
    7625 },{}],64:[function(require,module,exports){
     7819},{}],68:[function(require,module,exports){
    76267820/*globals wp, _ */
    76277821
     
    76627856module.exports = Embed;
    76637857
    7664 },{}],65:[function(require,module,exports){
     7858},{}],69:[function(require,module,exports){
    76657859/*globals wp, _ */
    76667860
     
    77347928module.exports = Select;
    77357929
    7736 },{}],66:[function(require,module,exports){
     7930},{}],70:[function(require,module,exports){
    77377931/*globals wp, _, jQuery */
    77387932
     
    79578151module.exports = EditorUploader;
    79588152
    7959 },{}],67:[function(require,module,exports){
     8153},{}],71:[function(require,module,exports){
    79608154/*globals wp, _ */
    79618155
     
    80908284module.exports = UploaderInline;
    80918285
    8092 },{}],68:[function(require,module,exports){
     8286},{}],72:[function(require,module,exports){
    80938287/*globals wp */
    80948288
     
    81088302module.exports = UploaderStatusError;
    81098303
    8110 },{}],69:[function(require,module,exports){
     8304},{}],73:[function(require,module,exports){
    81118305/*globals wp, _ */
    81128306
     
    82488442module.exports = UploaderStatus;
    82498443
    8250 },{}],70:[function(require,module,exports){
     8444},{}],74:[function(require,module,exports){
    82518445/*globals wp, _, jQuery */
    82528446
     
    83618555module.exports = UploaderWindow;
    83628556
    8363 },{}],71:[function(require,module,exports){
     8557},{}],75:[function(require,module,exports){
    83648558/*globals wp */
    83658559
     
    84298623module.exports = View;
    84308624
    8431 },{}]},{},[17]);
     8625},{}]},{},[19]);
  • trunk/src/wp-includes/js/media/views.manifest.js

    r31494 r33329  
    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' );
     
    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' );
  • trunk/src/wp-includes/media-template.php

    r33090 r33329  
    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
  • trunk/src/wp-includes/script-loader.php

    r33321 r33329  
    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 );
Note: See TracChangeset for help on using the changeset viewer.