WordPress.org

Make WordPress Core

Ticket #21811: 21811-modal-05-refresh.patch

File 21811-modal-05-refresh.patch, 11.3 KB (added by mikeschroder, 6 years ago)

Refreshed.

  • src/wp-admin/js/image-edit.js

    diff --git src/wp-admin/js/image-edit.js src/wp-admin/js/image-edit.js
    index 9eaf51b..fd8fc7a 100644
    var imageEdit = window.imageEdit = { 
    55        iasapi : {},
    66        hold : {},
    77        postid : '',
     8        _view : {},
    89
    910        intval : function(f) {
    1011                return f | 0;
    var imageEdit = window.imageEdit = { 
    287288                });
    288289        },
    289290
    290         open : function(postid, nonce) {
     291        open : function( postid, nonce, view ) {
     292                this._view = view;
     293
    291294                var data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
    292295                        btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
    293296
    var imageEdit = window.imageEdit = { 
    319322        },
    320323
    321324        initCrop : function(postid, image, parent) {
    322                 var t = this, selW = $('#imgedit-sel-width-' + postid),
    323                         selH = $('#imgedit-sel-height-' + postid);
     325                var t = this,
     326                        selW = $('#imgedit-sel-width-' + postid),
     327                        selH = $('#imgedit-sel-height-' + postid),
     328                        $img;
    324329
    325330                t.iasapi = $(image).imgAreaSelect({
    326331                        parent: parent,
    var imageEdit = window.imageEdit = { 
    330335                        minWidth: 3,
    331336                        minHeight: 3,
    332337
    333                         onInit: function() {
     338                        onInit: function( img ) {
     339                                // Ensure that the imgareaselect wrapper elements are position:absolute
     340                                // (even if we're in a position:fixed modal)
     341                                $img = $( img );
     342                                $img.next().css( 'position', 'absolute' )
     343                                        .nextAll( '.imgareaselect-outer' ).css( 'position', 'absolute' );
     344
    334345                                parent.children().mousedown(function(e){
    335346                                        var ratio = false, sel, defRatio;
    336347
    var imageEdit = window.imageEdit = { 
    397408
    398409                this.iasapi = {};
    399410                this.hold = {};
    400                 $('#image-editor-' + postid).fadeOut('fast', function() {
    401                         $('#media-head-' + postid).fadeIn('fast');
    402                         $(this).empty();
    403                 });
     411
     412                // If we've loaded the editor in the context of a Media Modal, then switch to the previous view,
     413                // whatever that might have been.
     414                if ( this._view && 'object' === typeof this._view ){
     415                        this._view.cancel();
     416                }
     417
     418                // In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
     419                else {
     420                        $('#image-editor-' + postid).fadeOut('fast', function() {
     421                                $('#media-head-' + postid).fadeIn('fast');
     422                                $(this).empty();
     423                        });
     424                }
     425
     426
    404427        },
    405428
    406429        notsaved : function(postid) {
  • src/wp-includes/js/media-editor.js

    diff --git src/wp-includes/js/media-editor.js src/wp-includes/js/media-editor.js
    index ec13796..b2dfd15 100644
     
    648648
    649649                        this._frame = wp.media({
    650650                                state: 'featured-image',
    651                                 states: [ new wp.media.controller.FeaturedImage() ]
     651                                states: [ new wp.media.controller.FeaturedImage() , new wp.media.controller.EditImage() ]
    652652                        });
    653653
    654654                        this._frame.on( 'toolbar:create:featured-image', function( toolbar ) {
     
    660660                                });
    661661                        }, this._frame );
    662662
     663                        this._frame.on( 'content:render:edit-image', function() {
     664                                var selection = this.state('featured-image').get('selection'),
     665                                        view = new wp.media.view.EditImage( { model: selection.single(), controller: this } ).render();
     666
     667                                this.content.set( view );
     668
     669                                // after bringing in the frame, load the actual editor via an ajax call
     670                                view.loadEditor();
     671
     672                        }, this._frame );
     673
    663674                        this._frame.state('featured-image').on( 'select', this.select );
    664675                        return this._frame;
    665676                },
  • src/wp-includes/js/media-views.js

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
    index db5ea30..86b3927 100644
     
    10001000                        toolbar:    'featured-image',
    10011001                        title:      l10n.setFeaturedImageTitle,
    10021002                        priority:   60,
    1003                         syncSelection: false
     1003                        syncSelection: true
    10041004                }, media.controller.Library.prototype.defaults ),
    10051005
    10061006                initialize: function() {
     
    11321132        });
    11331133
    11341134        /**
     1135         * wp.media.controller.EditImage
     1136         *
     1137         * @constructor
     1138         * @augments wp.media.controller.State
     1139         * @augments Backbone.Model
     1140         */
     1141        media.controller.EditImage = media.controller.State.extend({
     1142                defaults: {
     1143                        id: 'edit-image',
     1144                        url: '',
     1145                        menu: false,
     1146                        content: 'edit-image',
     1147                        syncSelection: true
     1148                },
     1149
     1150                activate: function() {
     1151                        if ( ! this.get('selection') ) {
     1152                                this.set( 'selection', new media.model.Selection() );
     1153                        }
     1154                        this.syncSelection();
     1155                },
     1156
     1157                syncSelection: function() {
     1158                        var selection = this.get('selection'),
     1159                                manager = this.frame._selection;
     1160
     1161                        if ( ! this.get('syncSelection') || ! manager || ! selection ) {
     1162                                return;
     1163                        }
     1164
     1165                        // If the selection supports multiple items, validate the stored
     1166                        // attachments based on the new selection's conditions. Record
     1167                        // the attachments that are not included; we'll maintain a
     1168                        // reference to those. Other attachments are considered in flux.
     1169                        if ( selection.multiple ) {
     1170                                selection.reset( [], { silent: true });
     1171                                selection.validateAll( manager.attachments );
     1172                                manager.difference = _.difference( manager.attachments.models, selection.models );
     1173                        }
     1174
     1175                        // Sync the selection's single item with the master.
     1176                        selection.single( manager.single );
     1177                }
     1178        });
     1179
     1180        /**
    11351181         * wp.media.controller.Embed
    11361182         *
    11371183         * @constructor
     
    18901936
    18911937                                content: {
    18921938                                        'embed':          'embedContent',
     1939                                        'edit-image':     'editImageContent',
    18931940                                        'edit-selection': 'editSelectionContent'
    18941941                                },
    18951942
     
    20402087                        this.content.set( view );
    20412088                },
    20422089
     2090                editImageContent: function() {
     2091                        var selection = this.state().get('selection'),
     2092                                view = new media.view.EditImage( { model: selection.single(), controller: this } ).render();
     2093
     2094                        this.content.set( view );
     2095
     2096                        // after bringing in the frame, load the actual editor via an ajax call
     2097                        view.loadEditor();
     2098
     2099                },
     2100
    20432101                // Toolbars
    20442102
    20452103                /**
     
    23702428                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    23712429                        this.on( 'menu:create:image-details', this.createMenu, this );
    23722430                        this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
     2431                        this.on( 'content:render:edit-image', this.editImageContent, this );
    23732432                        this.on( 'menu:render:image-details', this.renderMenu, this );
    23742433                        this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
    23752434                        // override the select toolbar
     
    23932452                                        toolbar: 'replace',
    23942453                                        priority:  80,
    23952454                                        displaySettings: true
    2396                                 })
     2455                                }),
     2456                                new media.controller.EditImage( { image: this.image } )
    23972457                        ]);
    23982458                },
    23992459
     
    24332493
    24342494                },
    24352495
     2496                editImageContent: function() {
     2497                        var attachment = this.state().get('image').attachment,
     2498                                view;
     2499
     2500                        if ( ! attachment ) {
     2501                                return;
     2502                        }
     2503
     2504                        view = new media.view.EditImage( { model: attachment, controller: this } ).render();
     2505
     2506                        this.content.set( view );
     2507
     2508                        // after bringing in the frame, load the actual editor via an ajax call
     2509                        view.loadEditor();
     2510
     2511                },
     2512
    24362513                renderImageDetailsToolbar: function() {
    24372514                        this.toolbar.set( new media.view.Toolbar({
    24382515                                controller: this,
     
    52505327                        }
    52515328                },
    52525329
    5253                 editAttachment: function() {
    5254                         this.$el.addClass('needs-refresh');
     5330                editAttachment: function( event ) {
     5331                        event.preventDefault();
     5332                        this.controller.setState( 'edit-image' );
    52555333                },
    52565334                /**
    52575335                 * @param {Object} event
     
    52615339                        event.preventDefault();
    52625340                        this.model.fetch();
    52635341                }
     5342
    52645343        });
    52655344
    52665345        /**
     
    55345613        media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
    55355614                className: 'image-details',
    55365615                template:  media.template('image-details'),
    5537 
     5616                events: {
     5617                        'click .edit-attachment': 'editAttachment'
     5618                },
    55385619                initialize: function() {
    55395620                        // used in AttachmentDisplay.prototype.updateLinkTo
    55405621                        this.options.attachment = this.model.attachment;
     
    55745655                resetFocus: function() {
    55755656                        this.$( '.caption textarea' ).focus();
    55765657                        this.$( '.embed-image-settings' ).scrollTop( 0 );
     5658                },
     5659
     5660                editAttachment: function( event ) {
     5661                        event.preventDefault();
     5662                        this.controller.setState( 'edit-image' );
     5663                }
     5664        });
     5665
     5666
     5667        media.view.EditImage = media.View.extend({
     5668
     5669                className: 'image-editor',
     5670                template: media.template('image-editor'),
     5671
     5672                initialize: function( options ) {
     5673                        this.editor = window.imageEdit;
     5674                        this.controller = options.controller;
     5675                        media.View.prototype.initialize.apply( this, arguments );
     5676                },
     5677
     5678                prepare: function() {
     5679                        return this.model.toJSON();
     5680                },
     5681
     5682                render: function() {
     5683                        media.View.prototype.render.apply( this, arguments );
     5684                        return this;
     5685                },
     5686
     5687                loadEditor: function() {
     5688                        this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
     5689                },
     5690
     5691                cancel: function() {
     5692                                var lastState = this.controller.lastState();
     5693                                this.controller.setState( lastState );
    55775694                }
     5695
    55785696        });
     5697
    55795698}(jQuery));
  • src/wp-includes/media-template.php

    diff --git src/wp-includes/media-template.php src/wp-includes/media-template.php
    index daf8c29..752502c 100644
    function wp_print_media_templates() { 
    560560                                <div class="thumbnail">
    561561                                        <img src="{{ data.model.url }}" draggable="false" />
    562562                                </div>
     563                                <# if ( data.attachment ) { #>
     564                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
     565                                <# } #>
    563566
    564567                                <div class="setting url">
    565568                                        <?php // might want to make the url editable if it isn't an attachment ?>
    function wp_print_media_templates() { 
    649652                        </div>
    650653                </div>
    651654        </script>
     655
     656        <script type="text/html" id="tmpl-image-editor">
     657                <div id="media-head-{{{ data.id }}}"></div>
     658                <div id="image-editor-{{{ data.id }}}"></div>
     659        </script>
    652660        <?php
    653661
    654662        /**
  • src/wp-includes/media.php

    diff --git src/wp-includes/media.php src/wp-includes/media.php
    index ebcfa0e..af4df99 100644
    function wp_prepare_attachment_for_js( $attachment ) { 
    21352135                'nonces'      => array(
    21362136                        'update' => false,
    21372137                        'delete' => false,
     2138                        'edit'   => false
    21382139                ),
    21392140                'editLink'   => false,
    21402141        );
    21412142
    21422143        if ( current_user_can( 'edit_post', $attachment->ID ) ) {
    21432144                $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
     2145                $response['nonces']['edit'] = wp_create_nonce( 'image_editor-' . $attachment->ID );
    21442146                $response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
    21452147        }
    21462148
    function wp_enqueue_media( $args = array() ) { 
    23712373
    23722374        wp_enqueue_script( 'media-editor' );
    23732375        wp_enqueue_style( 'media-views' );
     2376        wp_enqueue_style( 'imgareaselect' );
    23742377        wp_plupload_default_settings();
    23752378
    23762379        require_once ABSPATH . WPINC . '/media-template.php';
  • src/wp-includes/script-loader.php

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
    index d696b13..a3dc3b7 100644
    function wp_default_scripts( &$scripts ) { 
    395395        // To enqueue media-views or media-editor, call wp_enqueue_media().
    396396        // Both rely on numerous settings, styles, and templates to operate correctly.
    397397        $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable' ), false, 1 );
    398         $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
     398        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views', 'image-edit' ), false, 1 );
    399399        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    400400
    401401        if ( is_admin() ) {