WordPress.org

Make WordPress Core

Ticket #21811: 21811-modal-05.patch

File 21811-modal-05.patch, 11.4 KB (added by tomauger, 6 years ago)

Addresses the position:fixed bug

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

     
    55        iasapi : {},
    66        hold : {},
    77        postid : '',
     8        _view : {},
    89
    910        intval : function(f) {
    1011                return f | 0;
     
    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
     
    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,
     
    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
     
    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

     
    613613
    614614                        this._frame = wp.media({
    615615                                state: 'featured-image',
    616                                 states: [ new wp.media.controller.FeaturedImage() ]
     616                                states: [ new wp.media.controller.FeaturedImage() , new wp.media.controller.EditImage() ]
    617617                        });
    618618
    619619                        this._frame.on( 'toolbar:create:featured-image', function( toolbar ) {
     
    625625                                });
    626626                        }, this._frame );
    627627
     628                        this._frame.on( 'content:render:edit-image', function() {
     629                                var selection = this.state('featured-image').get('selection'),
     630                                        view = new wp.media.view.EditImage( { model: selection.single(), controller: this } ).render();
     631
     632                                this.content.set( view );
     633
     634                                // after bringing in the frame, load the actual editor via an ajax call
     635                                view.loadEditor();
     636
     637                        }, this._frame );
     638
    628639                        this._frame.state('featured-image').on( 'select', this.select );
    629640                        return this._frame;
    630641                },
  • src/wp-includes/js/media-views.js

     
    957957                        toolbar:    'featured-image',
    958958                        title:      l10n.setFeaturedImageTitle,
    959959                        priority:   60,
    960                         syncSelection: false
     960                        syncSelection: true
    961961                }, media.controller.Library.prototype.defaults ),
    962962
    963963                initialize: function() {
     
    10891089        });
    10901090
    10911091        /**
     1092         * wp.media.controller.EditImage
     1093         *
     1094         * @constructor
     1095         * @augments wp.media.controller.State
     1096         * @augments Backbone.Model
     1097         */
     1098        media.controller.EditImage = media.controller.State.extend({
     1099                defaults: {
     1100                        id: 'edit-image',
     1101                        url: '',
     1102                        menu: false,
     1103                        content: 'edit-image',
     1104                        syncSelection: true
     1105                },
     1106
     1107                activate: function() {
     1108                        if ( ! this.get('selection') ) {
     1109                                this.set( 'selection', new media.model.Selection() );
     1110                        }
     1111                        this.syncSelection();
     1112                },
     1113
     1114                syncSelection: function() {
     1115                        var selection = this.get('selection'),
     1116                                manager = this.frame._selection;
     1117
     1118                        if ( ! this.get('syncSelection') || ! manager || ! selection ) {
     1119                                return;
     1120                        }
     1121
     1122                        // If the selection supports multiple items, validate the stored
     1123                        // attachments based on the new selection's conditions. Record
     1124                        // the attachments that are not included; we'll maintain a
     1125                        // reference to those. Other attachments are considered in flux.
     1126                        if ( selection.multiple ) {
     1127                                selection.reset( [], { silent: true });
     1128                                selection.validateAll( manager.attachments );
     1129                                manager.difference = _.difference( manager.attachments.models, selection.models );
     1130                        }
     1131
     1132                        // Sync the selection's single item with the master.
     1133                        selection.single( manager.single );
     1134                }
     1135        });
     1136
     1137        /**
    10921138         * wp.media.controller.Embed
    10931139         *
    10941140         * @constructor
     
    17671813                                        menu:    'gallery'
    17681814                                }),
    17691815
    1770                                 new media.controller.GalleryAdd()
     1816                                new media.controller.GalleryAdd(),
     1817
     1818                                new media.controller.EditImage( { selection: options.selection } )
    17711819                        ]);
    17721820
    17731821
     
    17951843
    17961844                                content: {
    17971845                                        'embed':          'embedContent',
     1846                                        'edit-image':     'editImageContent',
    17981847                                        'edit-selection': 'editSelectionContent'
    17991848                                },
    18001849
     
    18931942                        this.content.set( view );
    18941943                },
    18951944
     1945                editImageContent: function() {
     1946                        var selection = this.state().get('selection'),
     1947                                view = new media.view.EditImage( { model: selection.single(), controller: this } ).render();
     1948
     1949                        this.content.set( view );
     1950
     1951                        // after bringing in the frame, load the actual editor via an ajax call
     1952                        view.loadEditor();
     1953
     1954                },
     1955
    18961956                // Toolbars
    18971957
    18981958                /**
     
    20642124                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    20652125                        this.on( 'menu:create:image-details', this.createMenu, this );
    20662126                        this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
     2127                        this.on( 'content:render:edit-image', this.editImageContent, this );
    20672128                        this.on( 'menu:render:image-details', this.renderMenu, this );
    20682129                        this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
    20692130                        // override the select toolbar
     
    20872148                                        toolbar: 'replace',
    20882149                                        priority:  80,
    20892150                                        displaySettings: true
    2090                                 })
     2151                                }),
     2152                                new media.controller.EditImage( { image: this.image } )
    20912153                        ]);
    20922154                },
    20932155
     
    21272189
    21282190                },
    21292191
     2192                editImageContent: function() {
     2193                        var attachment = this.state().get('image').attachment,
     2194                                view;
     2195
     2196                        if ( ! attachment ) {
     2197                                return;
     2198                        }
     2199
     2200                        view = new media.view.EditImage( { model: attachment, controller: this } ).render();
     2201
     2202                        this.content.set( view );
     2203
     2204                        // after bringing in the frame, load the actual editor via an ajax call
     2205                        view.loadEditor();
     2206
     2207                },
     2208
    21302209                renderImageDetailsToolbar: function() {
    21312210                        this.toolbar.set( new media.view.Toolbar({
    21322211                                controller: this,
     
    49265005                        }
    49275006                },
    49285007
    4929                 editAttachment: function() {
    4930                         this.$el.addClass('needs-refresh');
     5008                editAttachment: function( event ) {
     5009                        event.preventDefault();
     5010                        this.controller.setState( 'edit-image' );
    49315011                },
    49325012                /**
    49335013                 * @param {Object} event
     
    49375017                        event.preventDefault();
    49385018                        this.model.fetch();
    49395019                }
     5020
    49405021        });
    49415022
    49425023        /**
     
    52105291        media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
    52115292                className: 'image-details',
    52125293                template:  media.template('image-details'),
    5213 
     5294                events: {
     5295                        'click .edit-attachment': 'editAttachment'
     5296                },
    52145297                initialize: function() {
    52155298                        // used in AttachmentDisplay.prototype.updateLinkTo
    52165299                        this.options.attachment = this.model.attachment;
     
    52505333                resetFocus: function() {
    52515334                        this.$( '.caption textarea' ).focus();
    52525335                        this.$( '.embed-image-settings' ).scrollTop( 0 );
     5336                },
     5337
     5338                editAttachment: function( event ) {
     5339                        event.preventDefault();
     5340                        this.controller.setState( 'edit-image' );
    52535341                }
    52545342        });
     5343
     5344
     5345        media.view.EditImage = media.View.extend({
     5346
     5347                className: 'image-editor',
     5348                template: media.template('image-editor'),
     5349
     5350                initialize: function( options ) {
     5351                        this.editor = window.imageEdit;
     5352                        this.controller = options.controller;
     5353                        media.View.prototype.initialize.apply( this, arguments );
     5354                },
     5355
     5356                prepare: function() {
     5357                        return this.model.toJSON();
     5358                },
     5359
     5360                render: function() {
     5361                        media.View.prototype.render.apply( this, arguments );
     5362                        return this;
     5363                },
     5364
     5365                loadEditor: function() {
     5366                        this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
     5367                },
     5368
     5369                cancel: function() {
     5370                                var lastState = this.controller.lastState();
     5371                                this.controller.setState( lastState );
     5372                }
     5373
     5374        });
     5375
    52555376}(jQuery));
  • src/wp-includes/media-template.php

     
    508508                                <div class="thumbnail">
    509509                                        <img src="{{ data.model.url }}" draggable="false" />
    510510                                </div>
     511                                <# if ( data.attachment ) { #>
     512                                        <input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Image' ); ?>" />
     513                                <# } #>
    511514
    512515                                <div class="setting url">
    513516                                        <?php // might want to make the url editable if it isn't an attachment ?>
     
    597600                        </div>
    598601                </div>
    599602        </script>
     603
     604        <script type="text/html" id="tmpl-image-editor">
     605                <div id="media-head-{{{ data.id }}}"></div>
     606                <div id="image-editor-{{{ data.id }}}"></div>
     607        </script>
    600608        <?php
    601609
    602610        /**
  • src/wp-includes/media.php

     
    18691869                'nonces'      => array(
    18701870                        'update' => false,
    18711871                        'delete' => false,
     1872                        'edit'   => false
    18721873                ),
    18731874                'editLink'   => false,
    18741875        );
    18751876
    18761877        if ( current_user_can( 'edit_post', $attachment->ID ) ) {
    18771878                $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
     1879                $response['nonces']['edit'] = wp_create_nonce( 'image_editor-' . $attachment->ID );
    18781880                $response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
    18791881        }
    18801882
     
    20832085
    20842086        wp_enqueue_script( 'media-editor' );
    20852087        wp_enqueue_style( 'media-views' );
     2088        wp_enqueue_style( 'imgareaselect' );
    20862089        wp_plupload_default_settings();
    20872090
    20882091        require_once ABSPATH . WPINC . '/media-template.php';
  • src/wp-includes/script-loader.php

     
    389389        // To enqueue media-views or media-editor, call wp_enqueue_media().
    390390        // Both rely on numerous settings, styles, and templates to operate correctly.
    391391        $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable' ), false, 1 );
    392         $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
     392        $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views', 'image-edit' ), false, 1 );
    393393        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    394394
    395395        if ( is_admin() ) {