WordPress.org

Make WordPress Core

Ticket #24716: 24716.9.diff

File 24716.9.diff, 13.0 KB (added by ericlewis, 3 years ago)
  • src/wp-includes/css/media-views.css

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
    index c768479..f83a247 100644
    a b  
    909909        border-radius: 0; 
    910910} 
    911911 
     912.attachment .data-field { 
     913        white-space: nowrap; 
     914        text-overflow: ellipsis; 
     915        overflow: hidden; 
     916        display: block; 
     917        line-height: 19px; 
     918        height: 19px; 
     919        text-align: left; 
     920} 
     921 
    912922/** 
    913923 * Attachments Browser 
    914924 */ 
     
    924934        height: 50px; 
    925935} 
    926936 
     937.attachments-browser.hide-sidebar .media-toolbar { 
     938        right: 0; 
     939} 
     940 
    927941.attachments-browser .media-toolbar-primary > .media-button, 
    928942.attachments-browser .media-toolbar-primary > .media-button-group, 
    929943.attachments-browser .media-toolbar-secondary > .media-button, 
     
    942956        outline: none; 
    943957} 
    944958 
     959.attachment .edit-media { 
     960        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
     961        opacity: 0; 
     962        position: absolute; 
     963        top: 25%; 
     964        right: 25%; 
     965        left: 25%; 
     966        background: #222; 
     967        background: rgba(0,0,0,0.7); 
     968        color: #fff; 
     969        font-size: 15px; 
     970        text-shadow: 0 1px 0 rgba(0,0,0,0.6); 
     971        -webkit-font-smoothing: antialiased; 
     972        font-weight: 600; 
     973        padding: 10px 0; 
     974        text-align: center; 
     975        -webkit-border-radius: 3px; 
     976        border-radius: 3px; 
     977        -webkit-transition: opacity 0.1s ease-in-out; 
     978        transition: opacity 0.1s ease-in-out; 
     979} 
     980 
     981.attachment:hover .edit-media { 
     982        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     983        opacity: 1; 
     984} 
     985 
     986.attachments-browser.hide-sidebar .attachments { 
     987        right: 0; 
     988} 
     989 
    945990.attachments-browser .instructions { 
    946991        display: inline-block; 
    947992        margin-top: 16px; 
  • src/wp-includes/js/media-views.js

    diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
    index c1407d3..5abb4c1 100644
    a b  
    337337        }); 
    338338 
    339339        /** 
     340         * A more abstracted state, because media.controller.State expects 
     341         * specific regions (menu, title, etc.) to exist on the frame, which do not 
     342         * exist in media.view.Frame.EditMediaDetails. 
     343         */ 
     344        media.controller._State = Backbone.Model.extend({ 
     345                constructor: function() { 
     346                        this.on( 'activate', this._preActivate, this ); 
     347                        this.on( 'activate', this.activate, this ); 
     348                        this.on( 'activate', this._postActivate, this ); 
     349                        this.on( 'deactivate', this._deactivate, this ); 
     350                        this.on( 'deactivate', this.deactivate, this ); 
     351                        this.on( 'reset', this.reset, this ); 
     352                        this.on( 'ready', this.ready, this ); 
     353                        /** 
     354                         * Call parent constructor with passed arguments 
     355                         */ 
     356                        Backbone.Model.apply( this, arguments ); 
     357                }, 
     358 
     359                /** 
     360                 * @abstract 
     361                 */ 
     362                ready: function() {}, 
     363                /** 
     364                 * @abstract 
     365                 */ 
     366                activate: function() {}, 
     367                /** 
     368                 * @abstract 
     369                 */ 
     370                deactivate: function() {}, 
     371                /** 
     372                 * @abstract 
     373                 */ 
     374                reset: function() {}, 
     375                /** 
     376                 * @access private 
     377                 */ 
     378                _preActivate: function() { 
     379                        this.active = true; 
     380                }, 
     381                /** 
     382                 * @access private 
     383                 */ 
     384                _postActivate: function() {}, 
     385                /** 
     386                 * @access private 
     387                 */ 
     388                _deactivate: function() { 
     389                        this.active = false; 
     390                } 
     391        }); 
     392 
     393        /** 
    340394         * wp.media.controller.State 
    341395         * 
    342396         * A state is a step in a workflow that when set will trigger the controllers 
     
    13501404        }); 
    13511405 
    13521406        /** 
     1407         * A state for editing (cropping, etc.) an image. 
     1408         * 
     1409         * @constructor 
     1410         * @augments wp.media.controller.State 
     1411         * @augments Backbone.Model 
     1412         */ 
     1413        media.controller.EditImageNoFrame = media.controller._State.extend({ 
     1414                defaults: { 
     1415                        id:      'edit-image', 
     1416                        title:   l10n.editImage, 
     1417                        // Region mode defaults. 
     1418                        menu:    false, 
     1419                        toolbar: 'edit-image', 
     1420                        content: 'edit-image', 
     1421 
     1422                        url:     '' 
     1423                }, 
     1424 
     1425                initialize: function() { 
     1426                        media.controller._State.prototype.initialize.apply( this, arguments ); 
     1427                }, 
     1428 
     1429                activate: function() { 
     1430                        this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar ); 
     1431                }, 
     1432 
     1433                _postActivate: function() { 
     1434                        this._content(); 
     1435                }, 
     1436 
     1437                deactivate: function() { 
     1438                        this.stopListening( this.frame ); 
     1439                }, 
     1440 
     1441                toolbar: function() { 
     1442                        var frame = this.frame, 
     1443                                lastState = frame.lastState(), 
     1444                                previous = lastState && lastState.id; 
     1445 
     1446                        frame.toolbar.set( new media.view.Toolbar({ 
     1447                                controller: frame, 
     1448                                items: { 
     1449                                        back: { 
     1450                                                style: 'primary', 
     1451                                                text:     l10n.back, 
     1452                                                priority: 20, 
     1453                                                click:    function() { 
     1454                                                        if ( previous ) { 
     1455                                                                frame.setState( previous ); 
     1456                                                        } else { 
     1457                                                                frame.close(); 
     1458                                                        } 
     1459                                                } 
     1460                                        } 
     1461                                } 
     1462                        }) ); 
     1463                }, 
     1464 
     1465                _content: function() { 
     1466                        var mode = this.get( 'content' ); 
     1467                        if ( mode ) { 
     1468                                this.frame[ 'content' ].render( mode ); 
     1469                        } 
     1470                } 
     1471        }); 
     1472 
     1473        /** 
    13531474         * wp.media.controller.MediaLibrary 
    13541475         * 
    13551476         * @constructor 
     
    17581879                        _.defaults( this.options, { 
    17591880                                title:    '', 
    17601881                                modal:    true, 
    1761                                 uploader: true 
     1882                                uploader: true, 
     1883                                mode:     ['select'] 
    17621884                        }); 
    17631885 
    17641886                        // Ensure core UI is enabled. 
     
    19812103                                library:   {}, 
    19822104                                multiple:  false, 
    19832105                                state:     'library', 
    1984                                 uploader:  true 
     2106                                uploader:  true, 
     2107                                mode:      [ 'grid', 'edit' ] 
    19852108                        }); 
    19862109 
    19872110                        // Ensure core and media grid view UI is enabled. 
     
    20562179                                        router:     false, 
    20572180                                        content:    'browse', 
    20582181                                        filterable: 'mime-types' 
    2059                                 }), 
    2060  
    2061                                 new media.controller.EditImage( { model: options.editImage } ) 
     2182                                }) 
    20622183                        ]); 
    20632184                }, 
    20642185 
    20652186                bindHandlers: function() { 
    20662187                        this.on( 'content:create:browse', this.browseContent, this ); 
    20672188                        this.on( 'content:render:edit-image', this.editImageContent, this ); 
     2189 
     2190                        // Handle a frame-level event for editing an attachment. 
     2191                        this.on( 'edit:attachment', this.editAttachment, this ); 
     2192                }, 
     2193 
     2194                /** 
     2195                 * Open the Edit Attachment modal. 
     2196                 */ 
     2197                editAttachment: function( model ) { 
     2198                        new media.view.Frame.EditMediaDetails({ model: model }); 
    20682199                }, 
    20692200 
    20702201                /** 
     
    20882219                                display:    state.get('displaySettings'), 
    20892220                                dragInfo:   state.get('dragInfo'), 
    20902221                                bulkEdit:   true, 
     2222                                sidebar:    false, 
    20912223 
    20922224                                suggestedWidth:  state.get('suggestedWidth'), 
    20932225                                suggestedHeight: state.get('suggestedHeight'), 
     
    47184850                                        compat:        false, 
    47194851                                        alt:           '', 
    47204852                                        description:   '' 
    4721                                 }); 
     4853                                }, this.options ); 
    47224854 
    47234855                        options.buttons  = this.buttons; 
    47244856                        options.describe = this.controller.state().get('describe'); 
     
    47684900                 */ 
    47694901                toggleSelectionHandler: function( event ) { 
    47704902                        var method; 
    4771  
    47724903                        // Catch enter and space events 
    47734904                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 
    47744905                                return; 
    47754906                        } 
     4907 
     4908                        // In the grid view, bubble up an edit:attachment event to the controller. 
     4909                        if ( _.contains( this.controller.options.mode, 'grid' ) ) { 
     4910                                this.controller.trigger( 'edit:attachment', this.model ); 
     4911                                return; 
     4912                        } 
     4913 
    47764914                        if ( event.shiftKey ) { 
    47774915                                method = 'between'; 
    47784916                        } else if ( event.ctrlKey || event.metaKey ) { 
     
    53035441                 */ 
    53045442                createAttachmentView: function( attachment ) { 
    53055443                        var view = new this.options.AttachmentView({ 
    5306                                 controller: this.controller, 
    5307                                 model:      attachment, 
    5308                                 collection: this.collection, 
    5309                                 selection:  this.options.selection 
     5444                                controller:           this.controller, 
     5445                                model:                attachment, 
     5446                                collection:           this.collection, 
     5447                                selection:            this.options.selection, 
     5448                                showAttachmentFields: this.options.showAttachmentFields 
    53105449                        }); 
    53115450 
    53125451                        return this._viewsByCid[ attachment.cid ] = view; 
     
    56215760                                filters: false, 
    56225761                                search:  true, 
    56235762                                display: false, 
    5624  
     5763                                sidebar: true, 
     5764                                showAttachmentFields: getUserSetting( 'showAttachmentFields', [ 'title', 'uploadedTo', 'dateFormatted', 'mime' ] ), 
    56255765                                AttachmentView: media.view.Attachment.Library 
    56265766                        }); 
    56275767 
    56285768                        this.createToolbar(); 
    56295769                        this.updateContent(); 
    5630                         this.createSidebar(); 
     5770                        if ( this.options.sidebar ) { 
     5771                                this.createSidebar(); 
     5772                        } else { 
     5773                                this.$el.addClass( 'hide-sidebar' ); 
     5774                        } 
    56315775 
    56325776                        this.collection.on( 'add remove reset', this.updateContent, this ); 
    56335777                }, 
     
    57465890                        this.removeContent(); 
    57475891 
    57485892                        this.attachments = new media.view.Attachments({ 
    5749                                 controller: this.controller, 
    5750                                 collection: this.collection, 
    5751                                 selection:  this.options.selection, 
    5752                                 model:      this.model, 
    5753                                 sortable:   this.options.sortable, 
     5893                                controller:           this.controller, 
     5894                                collection:           this.collection, 
     5895                                selection:            this.options.selection, 
     5896                                model:                this.model, 
     5897                                sortable:             this.options.sortable, 
     5898                                showAttachmentFields: this.options.showAttachmentFields, 
    57545899 
    57555900                                // The single `Attachment` view to be used in the `Attachments` view. 
    57565901                                AttachmentView: this.options.AttachmentView 
     
    68146959                } 
    68156960        }); 
    68166961 
     6962        /** 
     6963         * A frame for editing the details of a specific media item. 
     6964         * 
     6965         * Pops open in a modal by default. 
     6966         */ 
     6967        media.view.Frame.EditMediaDetails = media.view.Frame.extend({ 
     6968 
     6969                className: 'edit-media-overlay', 
     6970                template: media.template( 'edit-media-details' ), 
     6971                regions:   [ 'content' ], 
     6972 
     6973                events: { 
     6974                        'click':                    'collapse', 
     6975                        'click .delete-media-item': 'deleteMediaItem', 
     6976                        'click .left':              'previousMediaItem', 
     6977                        'click .right':             'nextMediaItem' 
     6978                }, 
     6979 
     6980                initialize: function( options ) { 
     6981                        var self = this; 
     6982                        media.view.Frame.prototype.initialize.apply( this, arguments ); 
     6983 
     6984                        _.defaults( this.options, { 
     6985                                modal:    true, 
     6986                                state: 'edit-image' 
     6987                        }); 
     6988 
     6989                        this.createStates(); 
     6990 
     6991                        this.on( 'content:render:edit-image', this.editImageContentUgh, this ); 
     6992                        // Initialize modal container view. 
     6993                        if ( this.options.modal ) { 
     6994                                this.modal = new media.view.Modal({ 
     6995                                        controller: this, 
     6996                                        title:      this.options.title 
     6997                                }); 
     6998 
     6999                                // Completely destroy the modal DOM element when closing it. 
     7000                                this.modal.close = function() { 
     7001                                        self.modal.remove(); 
     7002                                }; 
     7003 
     7004                                this.modal.content( this ); 
     7005                                this.modal.open(); 
     7006                        } 
     7007                }, 
     7008 
     7009                // Add the default states to the frame. 
     7010                createStates: function() { 
     7011                        this.states.add([ 
     7012                                new media.controller.EditImageNoFrame( { model: this.model } ) 
     7013                        ]); 
     7014                }, 
     7015 
     7016                /** 
     7017                 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining 
     7018                 */ 
     7019                render: function() { 
     7020                        // Activate the default state if no active state exists. 
     7021                        if ( ! this.state() && this.options.state ) { 
     7022                                this.setState( this.options.state ); 
     7023                        } 
     7024                        /** 
     7025                         * call 'render' directly on the parent class 
     7026                         */ 
     7027                        return media.view.Frame.prototype.render.apply( this, arguments ); 
     7028                }, 
     7029 
     7030                /** 
     7031                 * For some reason the view doesn't exist in the DOM yet, don't have the 
     7032                 * patience to track this down right now. 
     7033                 */ 
     7034                editImageContentUgh: function() { 
     7035                        _.defer( _.bind( this.editImageContent, this ) ); 
     7036                }, 
     7037 
     7038                /** 
     7039                 * Render the EditImage view into the frame's content region. 
     7040                 */ 
     7041                editImageContent: function() { 
     7042                        var view = new media.view.EditImage( { model: this.model, controller: this } ).render(); 
     7043 
     7044                        this.content.set( view ); 
     7045 
     7046                        // after creating the wrapper view, load the actual editor via an ajax call 
     7047                        view.loadEditor(); 
     7048                } 
     7049 
     7050        }); 
     7051 
    68177052        media.view.EditImage = media.View.extend({ 
    68187053 
    68197054                className: 'image-editor', 
  • src/wp-includes/media-template.php

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
    index 2c0ff80..c8d68cf 100644
    a b function wp_print_media_templates() { 
    241241                <span class="upload-error-message">{{ data.message }}</span> 
    242242        </script> 
    243243 
     244        <script type="text/html" id="tmpl-edit-media-details"> 
     245                <div class="edit-media-header"> 
     246                        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button> 
     247                        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button> 
     248                </div> 
     249                <div class="media-frame-content"></div> 
     250        </script> 
    244251        <script type="text/html" id="tmpl-attachment"> 
    245252                <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}"> 
    246253                        <# if ( data.uploading ) { #> 
    function wp_print_media_templates() { 
    257264                                        <div>{{ data.filename }}</div> 
    258265                                </div> 
    259266                        <# } #> 
    260  
     267                        <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #> 
     268                                <span class="edit-media">Edit Media</span> 
     269                        <# } #> 
    261270                        <# if ( data.buttons.close ) { #> 
    262271                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a> 
    263272                        <# } #> 
    function wp_print_media_templates() { 
    283292                                        <# } #> {{ maybeReadOnly }} /> 
    284293                        <# } #> 
    285294                <# } #> 
     295                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #> 
     296                        <# _.each( data.showAttachmentFields, function( field ) { #> 
     297                                <div class="data-field data-{{ field }}"> 
     298                                        <# if ( 'uploadedTo' === field ) { #> 
     299 
     300                                                <# if ( data[field] ) { #> 
     301                                                <?php _e( 'Uploaded To:' ) ?> 
     302                                                <# } else { #> 
     303                                                <?php _e( 'Unattached' ) ?> 
     304                                                <# } #> 
     305 
     306                                        <# } #> 
     307                                <# if ( data[field] ) { #> 
     308                                        &nbsp;{{ data[field] }} 
     309                                <# } #> 
     310                                </div> 
     311                        <# }); #> 
     312                <# } #> 
     313 
    286314        </script> 
    287315 
    288316        <script type="text/html" id="tmpl-attachment-details">