WordPress.org

Make WordPress Core

Ticket #27016: 27016.3.diff

File 27016.3.diff, 29.6 KB (added by wonderboymusic, 6 years ago)

  • src/wp-includes/js/media-models.js

     
    3232                        frame = new MediaFrame.Post( attributes );
    3333                } else if ( 'image' === attributes.frame && MediaFrame.ImageDetails ) {
    3434                        frame = new MediaFrame.ImageDetails( attributes );
     35                } else if ( 'audio' === attributes.frame && MediaFrame.AudioDetails ) {
     36                        frame = new MediaFrame.AudioDetails( attributes );
     37                } else if ( 'video' === attributes.frame && MediaFrame.VideoDetails ) {
     38                        frame = new MediaFrame.VideoDetails( attributes );
    3539                }
    3640
    3741                delete attributes.frame;
    … …  
    448452        });
    449453
    450454        /**
     455         * wp.media.model.PostAudio
     456         *
     457         * @constructor
     458         * @augments Backbone.Model
     459         **/
     460        PostAudio = media.model.PostAudio = Backbone.Model.extend({
     461
     462                initialize: function( attributes ) {
     463                        this.attachment = false;
     464
     465                        if ( attributes.attachment_id ) {
     466                                this.attachment = Attachment.get( attributes.attachment_id );
     467                                this.dfd = this.attachment.fetch();
     468                        }
     469                }
     470        });
     471
     472        /**
     473         * wp.media.model.PostVideo
     474         *
     475         * @constructor
     476         * @augments Backbone.Model
     477         **/
     478        PostVideo = media.model.PostVideo = Backbone.Model.extend({
     479
     480                initialize: function( attributes ) {
     481                        this.attachment = false;
     482
     483                        if ( attributes.attachment_id ) {
     484                                this.attachment = Attachment.get( attributes.attachment_id );
     485                                this.dfd = this.attachment.fetch();
     486                        }
     487                }
     488        });
     489
     490        /**
    451491         * wp.media.model.Attachments
    452492         *
    453493         * @constructor

  • src/wp-includes/js/media-views.js

     
    760760        });
    761761
    762762        /**
     763         * wp.media.controller.AudioDetails
     764         *
     765         * @constructor
     766         * @augments wp.media.controller.State
     767         * @augments Backbone.Model
     768         */
     769        media.controller.AudioDetails = media.controller.State.extend({
     770                defaults: _.defaults({
     771                        id: 'audio-details',
     772                        toolbar: 'audio-details',
     773                        title: l10n.audioDetailsTitle,
     774                        content: 'audio-details',
     775                        menu: 'audio-details',
     776                        router: false,
     777                        attachment: false,
     778                        priority: 60,
     779                        editing: false
     780                }, media.controller.Library.prototype.defaults ),
     781
     782                initialize: function( options ) {
     783                        this.audio = options.audio;
     784                        media.controller.State.prototype.initialize.apply( this, arguments );
     785                }
     786        });
     787
     788        /**
     789         * wp.media.controller.VideoDetails
     790         *
     791         * @constructor
     792         * @augments wp.media.controller.State
     793         * @augments Backbone.Model
     794         */
     795        media.controller.VideoDetails = media.controller.State.extend({
     796                defaults: _.defaults({
     797                        id: 'video-details',
     798                        toolbar: 'video-details',
     799                        title: l10n.videoDetailsTitle,
     800                        content: 'video-details',
     801                        menu: 'video-details',
     802                        router: false,
     803                        attachment: false,
     804                        priority: 60,
     805                        editing: false
     806                }, media.controller.Library.prototype.defaults ),
     807
     808                initialize: function( options ) {
     809                        this.video = options.video;
     810                        media.controller.State.prototype.initialize.apply( this, arguments );
     811                }
     812        });
     813
     814        /**
    763815         * wp.media.controller.CollectionEdit
    764816         *
    765817         * @static
    … …  
    10631115                }
    10641116        });
    10651117
    1066         /**
    1067          * wp.media.controller.ReplaceImage
    1068          *
    1069          * Replace a selected single image
    1070          *
    1071          * @constructor
    1072          * @augments wp.media.controller.Library
    1073          * @augments wp.media.controller.State
    1074          * @augments Backbone.Model
    1075          */
    1076         media.controller.ReplaceImage = media.controller.Library.extend({
    1077                 defaults: _.defaults({
    1078                         id:         'replace-image',
    1079                         filterable: 'uploaded',
    1080                         multiple:   false,
    1081                         toolbar:    'replace',
    1082                         title:      l10n.replaceImageTitle,
    1083                         priority:   60,
    1084                         syncSelection: false
    1085                 }, media.controller.Library.prototype.defaults ),
     1118        media.controller.ReplaceMedia = function (type, args) {
     1119                return media.controller.Library.extend({
     1120                        defaults: _.defaults({
     1121                                id:         'replace-' + type,
     1122                                filterable: 'uploaded',
     1123                                multiple:   false,
     1124                                toolbar:    'replace',
     1125                                title:      args.title,
     1126                                priority:   60,
     1127                                syncSelection: false
     1128                        }, media.controller.Library.prototype.defaults ),
    10861129
    1087                 initialize: function( options ) {
    1088                         var library, comparator;
     1130                        initialize: function( options ) {
     1131                                var library, comparator;
    10891132
    1090                         this.image = options.image;
    1091                         // If we haven't been provided a `library`, create a `Selection`.
    1092                         if ( ! this.get('library') ) {
    1093                                 this.set( 'library', media.query({ type: 'image' }) );
    1094                         }
     1133                                this[type] = options[type];
     1134                                // If we haven't been provided a `library`, create a `Selection`.
     1135                                if ( ! this.get('library') ) {
     1136                                        this.set( 'library', media.query({ type: type }) );
     1137                                }
    10951138
    1096                         media.controller.Library.prototype.initialize.apply( this, arguments );
     1139                                media.controller.Library.prototype.initialize.apply( this, arguments );
    10971140
    1098                         library    = this.get('library');
    1099                         comparator = library.comparator;
     1141                                library    = this.get('library');
     1142                                comparator = library.comparator;
    11001143
    1101                         // Overload the library's comparator to push items that are not in
    1102                         // the mirrored query to the front of the aggregate collection.
    1103                         library.comparator = function( a, b ) {
    1104                                 var aInQuery = !! this.mirroring.get( a.cid ),
    1105                                         bInQuery = !! this.mirroring.get( b.cid );
     1144                                // Overload the library's comparator to push items that are not in
     1145                                // the mirrored query to the front of the aggregate collection.
     1146                                library.comparator = function( a, b ) {
     1147                                        var aInQuery = !! this.mirroring.get( a.cid ),
     1148                                                bInQuery = !! this.mirroring.get( b.cid );
    11061149
    1107                                 if ( ! aInQuery && bInQuery ) {
    1108                                         return -1;
    1109                                 } else if ( aInQuery && ! bInQuery ) {
    1110                                         return 1;
    1111                                 } else {
    1112                                         return comparator.apply( this, arguments );
    1113                                 }
    1114                         };
     1150                                        if ( ! aInQuery && bInQuery ) {
     1151                                                return -1;
     1152                                        } else if ( aInQuery && ! bInQuery ) {
     1153                                                return 1;
     1154                                        } else {
     1155                                                return comparator.apply( this, arguments );
     1156                                        }
     1157                                };
    11151158
    1116                         // Add all items in the selection to the library, so any featured
    1117                         // images that are not initially loaded still appear.
    1118                         library.observe( this.get('selection') );
    1119                 },
     1159                                // Add all items in the selection to the library, so any featured
     1160                                // images that are not initially loaded still appear.
     1161                                library.observe( this.get('selection') );
     1162                        },
    11201163
    1121                 activate: function() {
    1122                         this.updateSelection();
    1123                         media.controller.Library.prototype.activate.apply( this, arguments );
    1124                 },
     1164                        activate: function() {
     1165                                this.updateSelection();
     1166                                media.controller.Library.prototype.activate.apply( this, arguments );
     1167                        },
    11251168
    1126                 updateSelection: function() {
    1127                         var selection = this.get('selection'),
    1128                                 attachment = this.image.attachment;
     1169                        updateSelection: function() {
     1170                                var selection = this.get('selection'),
     1171                                        attachment = this[type].attachment;
    11291172
    1130                         selection.reset( attachment ? [ attachment ] : [] );
    1131                 }
    1132         });
     1173                                selection.reset( attachment ? [ attachment ] : [] );
     1174                        }
     1175                });
     1176        };
    11331177
    11341178        /**
     1179         * wp.media.controller.ReplaceImage
     1180         *
     1181         * Replace a selected single image
     1182         *
     1183         * @constructor
     1184         * @augments wp.media.controller.Library
     1185         * @augments wp.media.controller.State
     1186         * @augments Backbone.Model
     1187         */
     1188        media.controller.ReplaceImage = media.controller.ReplaceMedia( 'image', {
     1189                title : l10n.replaceImageTitle
     1190        } );
     1191        /**
     1192         * wp.media.controller.ReplaceAudio
     1193         *
     1194         * Replace a selected single audio
     1195         *
     1196         * @constructor
     1197         * @augments wp.media.controller.Library
     1198         * @augments wp.media.controller.State
     1199         * @augments Backbone.Model
     1200         */
     1201        media.controller.ReplaceAudio = media.controller.ReplaceMedia( 'audio', {
     1202                title : l10n.replaceAudioTitle
     1203        } );
     1204        /**
     1205         * wp.media.controller.ReplaceVideo
     1206         *
     1207         * Replace a selected single video
     1208         *
     1209         * @constructor
     1210         * @augments wp.media.controller.Library
     1211         * @augments wp.media.controller.State
     1212         * @augments Backbone.Model
     1213         */
     1214        media.controller.ReplaceVideo = media.controller.ReplaceMedia( 'video', {
     1215                title : l10n.replaceVideoTitle
     1216        } );
     1217
     1218        /**
    11351219         * wp.media.controller.Embed
    11361220         *
    11371221         * @constructor
    … …  
    23482432                }
    23492433        });
    23502434
    2351         media.view.MediaFrame.ImageDetails = media.view.MediaFrame.Select.extend({
    2352                 defaults: {
    2353                         id:      'image',
    2354                         url:     '',
    2355                         menu:    'image-details',
    2356                         content: 'image-details',
    2357                         toolbar: 'image-details',
    2358                         type:    'link',
    2359                         title:    l10n.imageDetailsTitle,
    2360                         priority: 120
    2361                 },
     2435        media.view.MediaFrame.MediaDetails = function (type, args) {
     2436                return media.view.MediaFrame.Select.extend({
     2437                        defaults: {
     2438                                id:      type,
     2439                                url:     '',
     2440                                menu:    type + '-details',
     2441                                content: type + '-details',
     2442                                toolbar: type + '-details',
     2443                                type:    'link',
     2444                                title:    args.title,
     2445                                priority: 120
     2446                        },
    23622447
    2363                 initialize: function( options ) {
    2364                         this.image = new media.model.PostImage( options.metadata );
    2365                         this.options.selection = new media.model.Selection( this.image.attachment, { multiple: false } );
    2366                         media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
    2367                 },
     2448                        initialize: function( options ) {
     2449                                this[type] = new args.model( options.metadata );
     2450                                this.options.selection = new media.model.Selection( this[type].attachment, { multiple: false } );
     2451                                media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
     2452                        },
    23682453
    2369                 bindHandlers: function() {
    2370                         media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    2371                         this.on( 'menu:create:image-details', this.createMenu, this );
    2372                         this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
    2373                         this.on( 'menu:render:image-details', this.renderMenu, this );
    2374                         this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
    2375                         // override the select toolbar
    2376                         this.on( 'toolbar:render:replace', this.renderReplaceImageToolbar, this );
    2377                 },
     2454                        bindHandlers: function() {
     2455                                media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
     2456                                this.on( 'menu:create:' + type + '-details', this.createMenu, this );
     2457                                this.on( 'content:render:' + type + '-details', this.renderDetailsContent, this );
     2458                                this.on( 'menu:render:' + type + '-details', this.renderMenu, this );
     2459                                this.on( 'toolbar:render:' + type + '-details', this.renderDetailsToolbar, this );
     2460                                // override the select toolbar
     2461                                this.on( 'toolbar:render:replace', this.renderReplaceToolbar, this );
     2462                        },
    23782463
    2379                 createStates: function() {
    2380                         this.states.add([
    2381                                 new media.controller.ImageDetails({
    2382                                         image: this.image,
    2383                                         editable: false,
    2384                                         menu: 'image-details'
    2385                                 }),
    2386                                 new media.controller.ReplaceImage({
    2387                                         id: 'replace-image',
    2388                                         library:   media.query( { type: 'image' } ),
    2389                                         image: this.image,
    2390                                         multiple:  false,
    2391                                         title:     l10n.imageReplaceTitle,
    2392                                         menu: 'image-details',
    2393                                         toolbar: 'replace',
    2394                                         priority:  80,
    2395                                         displaySettings: true
    2396                                 })
    2397                         ]);
    2398                 },
     2464                        createStates: function() {
     2465                                var detailsParams = {
     2466                                                editable: false,
     2467                                                menu: type + '-details'
     2468                                        },
     2469                                        replaceParams = {
     2470                                                id: 'replace-' + type,
     2471                                                library:   media.query( { type: type } ),
     2472                                                image: this[type],
     2473                                                multiple:  false,
     2474                                                title:     args.replaceTitle,
     2475                                                menu: type + '-details',
     2476                                                toolbar: 'replace',
     2477                                                priority:  80,
     2478                                                displaySettings: true
     2479                                        };
    23992480
    2400                 renderImageDetailsContent: function() {
    2401                         var view = new media.view.ImageDetails({
    2402                                 controller: this,
    2403                                 model: this.state().image,
    2404                                 attachment: this.state().image.attachment
    2405                         }).render();
     2481                                detailsParams[type] = this[type];
     2482                                replaceParams[type] = this[type];
    24062483
    2407                         this.content.set( view );
     2484                                this.states.add([
     2485                                        new args.detailsController(detailsParams),
     2486                                        new args.replaceController(replaceParams)
     2487                                ]);
     2488                        },
    24082489
    2409                 },
     2490                        renderDetailsContent: function() {
     2491                                console.log(this.state());
     2492                                var view = new args.detailsView({
     2493                                        controller: this,
     2494                                        model: this.state()[type],
     2495                                        attachment: this.state()[type].attachment
     2496                                }).render();
    24102497
    2411                 renderMenu: function( view ) {
    2412                         var lastState = this.lastState(),
    2413                                 previous = lastState && lastState.id,
    2414                                 frame = this;
     2498                                this.content.set( view );
     2499                        },
    24152500
    2416                         view.set({
    2417                                 cancel: {
    2418                                         text:     l10n.imageDetailsCancel,
    2419                                         priority: 20,
    2420                                         click:    function() {
    2421                                                 if ( previous ) {
    2422                                                         frame.setState( previous );
    2423                                                 } else {
    2424                                                         frame.close();
     2501                        renderMenu: function( view ) {
     2502                                var lastState = this.lastState(),
     2503                                        previous = lastState && lastState.id,
     2504                                        frame = this;
     2505
     2506                                view.set({
     2507                                        cancel: {
     2508                                                text:     args.cancelText,
     2509                                                priority: 20,
     2510                                                click:    function() {
     2511                                                        if ( previous ) {
     2512                                                                frame.setState( previous );
     2513                                                        } else {
     2514                                                                frame.close();
     2515                                                        }
    24252516                                                }
    2426                                         }
    2427                                 },
    2428                                 separateCancel: new media.View({
    2429                                         className: 'separator',
    2430                                         priority: 40
    2431                                 })
    2432                         });
     2517                                        },
     2518                                        separateCancel: new media.View({
     2519                                                className: 'separator',
     2520                                                priority: 40
     2521                                        })
     2522                                });
    24332523
    2434                 },
     2524                        },
    24352525
    2436                 renderImageDetailsToolbar: function() {
    2437                         this.toolbar.set( new media.view.Toolbar({
    2438                                 controller: this,
    2439                                 items: {
    2440                                         select: {
    2441                                                 style:    'primary',
    2442                                                 text:     l10n.update,
    2443                                                 priority: 80,
     2526                        renderDetailsToolbar: function() {
     2527                                this.toolbar.set( new media.view.Toolbar({
     2528                                        controller: this,
     2529                                        items: {
     2530                                                select: {
     2531                                                        style:    'primary',
     2532                                                        text:     l10n.update,
     2533                                                        priority: 80,
    24442534
    2445                                                 click: function() {
    2446                                                         var controller = this.controller,
    2447                                                                 state = controller.state();
     2535                                                        click: function() {
     2536                                                                var controller = this.controller,
     2537                                                                        state = controller.state();
    24482538
    2449                                                         controller.close();
     2539                                                                controller.close();
    24502540
    2451                                                         // not sure if we want to use wp.media.string.image which will create a shortcode or
    2452                                                         // perhaps wp.html.string to at least to build the <img />
    2453                                                         state.trigger( 'update', controller.image.toJSON() );
     2541                                                                // not sure if we want to use wp.media.string.image which will create a shortcode or
     2542                                                                // perhaps wp.html.string to at least to build the <img />
     2543                                                                state.trigger( 'update', controller[type].toJSON() );
    24542544
    2455                                                         // Restore and reset the default state.
    2456                                                         controller.setState( controller.options.state );
    2457                                                         controller.reset();
     2545                                                                // Restore and reset the default state.
     2546                                                                controller.setState( controller.options.state );
     2547                                                                controller.reset();
     2548                                                        }
    24582549                                                }
    24592550                                        }
    2460                                 }
    2461                         }) );
    2462                 },
     2551                                }) );
     2552                        },
    24632553
    2464                 renderReplaceImageToolbar: function() {
    2465                         this.toolbar.set( new media.view.Toolbar({
    2466                                 controller: this,
    2467                                 items: {
    2468                                         replace: {
    2469                                                 style:    'primary',
    2470                                                 text:     l10n.replace,
    2471                                                 priority: 80,
     2554                        renderReplaceToolbar: function() {
     2555                                this.toolbar.set( new media.view.Toolbar({
     2556                                        controller: this,
     2557                                        items: {
     2558                                                replace: {
     2559                                                        style:    'primary',
     2560                                                        text:     l10n.replace,
     2561                                                        priority: 80,
    24722562
    2473                                                 click: function() {
    2474                                                         var controller = this.controller,
    2475                                                                 state = controller.state(),
    2476                                                                 selection = state.get( 'selection' ),
    2477                                                                 attachment = selection.single();
     2563                                                        click: function() {
     2564                                                                var controller = this.controller,
     2565                                                                        state = controller.state(),
     2566                                                                        selection = state.get( 'selection' ),
     2567                                                                        attachment = selection.single();
    24782568
    2479                                                         controller.close();
     2569                                                                controller.close();
    24802570
    2481                                                         controller.image.changeAttachment( attachment, state.display( attachment ) );
     2571                                                                controller[type].changeAttachment( attachment, state.display( attachment ) );
    24822572
    2483                                                         // not sure if we want to use wp.media.string.image which will create a shortcode or
    2484                                                         // perhaps wp.html.string to at least to build the <img />
    2485                                                         state.trigger( 'replace', controller.image.toJSON() );
     2573                                                                // not sure if we want to use wp.media.string.image which will create a shortcode or
     2574                                                                // perhaps wp.html.string to at least to build the <img />
     2575                                                                state.trigger( 'replace', controller[type].toJSON() );
    24862576
    2487                                                         // Restore and reset the default state.
    2488                                                         controller.setState( controller.options.state );
    2489                                                         controller.reset();
     2577                                                                // Restore and reset the default state.
     2578                                                                controller.setState( controller.options.state );
     2579                                                                controller.reset();
     2580                                                        }
    24902581                                                }
    24912582                                        }
    2492                                 }
    2493                         }) );
    2494                 }
     2583                                }) );
     2584                        }
    24952585
    2496         });
     2586                });
     2587        };
    24972588
     2589        media.view.MediaFrame.ImageDetails = media.view.MediaFrame.MediaDetails( 'image', {
     2590                title : l10n.imageDetailsTitle,
     2591                model: media.model.PostImage,
     2592                detailsView: media.view.ImageDetails,
     2593                detailsController: media.controller.ImageDetails,
     2594                replaceController: media.controller.ReplaceImage,
     2595                replaceTitle: l10n.imageReplaceTitle,
     2596                cancelText: l10n.imageDetailsCancel
     2597        } );
    24982598
     2599        media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails( 'audio', {
     2600                title : l10n.audioDetailsTitle,
     2601                model: media.model.PostAudio,
     2602                detailsView: media.view.AudioDetails,
     2603                detailsController: media.controller.AudioDetails,
     2604                replaceController: media.controller.ReplaceAudio,
     2605                replaceTitle: l10n.audioReplaceTitle,
     2606                cancelText: l10n.audioDetailsCancel
     2607        } );
     2608
     2609        media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails( 'video', {
     2610                title : l10n.videoDetailsTitle,
     2611                model: media.model.PostVideo,
     2612                detailsView: media.view.VideoDetails,
     2613                detailsController: media.controller.VideoDetails,
     2614                replaceController: media.controller.ReplaceVideo,
     2615                replaceTitle: l10n.videoReplaceTitle,
     2616                cancelText: l10n.videoDetailsCancel
     2617        } );
     2618
    24992619        /**
    25002620         * wp.media.view.Modal
    25012621         *
    … …  
    55275647                }
    55285648        });
    55295649
    5530         media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
    5531                 className: 'image-details',
    5532                 template:  media.template('image-details'),
     5650        media.view.MediaDetails = function (type) {
     5651                return media.view.Settings.AttachmentDisplay.extend({
     5652                        className: type + '-details',
     5653                        template:  media.template(type + '-details'),
    55335654
    5534                 initialize: function() {
    5535                         // used in AttachmentDisplay.prototype.updateLinkTo
    5536                         this.options.attachment = this.model.attachment;
    5537                         media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    5538                 },
     5655                        initialize: function() {
     5656                                // used in AttachmentDisplay.prototype.updateLinkTo
     5657                                this.options.attachment = this.model.attachment;
     5658                                media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
     5659                        },
    55395660
    5540                 prepare: function() {
    5541                         var attachment = false;
     5661                        prepare: function() {
     5662                                var attachment = false;
    55425663
    5543                         if ( this.model.attachment ) {
    5544                                 attachment = this.model.attachment.toJSON();
    5545                         }
    5546                         return _.defaults({
    5547                                 model: this.model.toJSON(),
    5548                                 attachment: attachment
    5549                         }, this.options );
    5550                 },
     5664                                if ( this.model.attachment ) {
     5665                                        attachment = this.model.attachment.toJSON();
     5666                                }
     5667                                return _.defaults({
     5668                                        model: this.model.toJSON(),
     5669                                        attachment: attachment
     5670                                }, this.options );
     5671                        },
    55515672
     5673                        render: function() {
     5674                                var self = this,
     5675                                        args = arguments;
     5676                                if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
     5677                                        // should instead show a spinner when the attachment is new and then add a listener that updates on change
     5678                                        this.model.dfd.done( function() {
     5679                                                media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
     5680                                                self.resetFocus();
     5681                                        } );
     5682                                } else {
     5683                                        media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
     5684                                        setTimeout( function() { self.resetFocus(); }, 10 );
     5685                                }
    55525686
    5553                 render: function() {
    5554                         var self = this,
    5555                                 args = arguments;
    5556                         if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
    5557                                 // should instead show a spinner when the attachment is new and then add a listener that updates on change
    5558                                 this.model.dfd.done( function() {
    5559                                         media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
    5560                                         self.resetFocus();
    5561                                 } );
    5562                         } else {
    5563                                 media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
    5564                                 setTimeout( function() { self.resetFocus(); }, 10 );
     5687                                return this;
     5688                        },
     5689
     5690                        resetFocus: function() {
     5691                                this.$( '.caption textarea' ).focus();
     5692                                this.$( '.embed-image-settings' ).scrollTop( 0 );
    55655693                        }
     5694                } );
     5695        };
    55665696
    5567                         return this;
    5568                 },
    5569 
    5570                 resetFocus: function() {
    5571                         this.$( '.caption textarea' ).focus();
    5572                         this.$( '.embed-image-settings' ).scrollTop( 0 );
    5573                 }
    5574         });
     5697        media.view.ImageDetails = media.view.MediaDetails('image');
     5698        media.view.AudioDetails = media.view.MediaDetails('audio');
     5699        media.view.VideoDetails = media.view.MediaDetails('video');
    55755700}(jQuery));

  • src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

     
    9090                                var shortcode = wp.media['video-playlist'].shortcode( selection ).string();
    9191                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    9292                        });
     93                } else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
     94                        data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
     95                        frame = wp.media({
     96                                frame: 'video',
     97                                state: 'video-details',
     98                                metadata: {}
     99                        } );
     100                        frame.state('video-details').on( 'update', function () {} );
     101                        frame.state('replace-video').on( 'replace', function () {} );
     102
     103                        frame.open();
     104                } else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
     105                        data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
     106                        frame = wp.media({
     107                                frame: 'audio',
     108                                state: 'audio-details',
     109                                metadata: {
     110                                        attachment_id: 102,
     111                                        url: false,
     112                                        height: '',
     113                                        width: '',
     114                                        size: 'none',
     115                                        caption: '',
     116                                        alt: '',
     117                                        align: 'none',
     118                                        link: false,
     119                                        linkUrl: ''
     120                                }
     121                        } );
     122                        frame.state('audio-details').on( 'update', function () {} );
     123                        frame.state('replace-audio').on( 'replace', function () {} );
     124
     125                        frame.open();
    93126                } else {
    94127                        // temp
    95128                        window.console && window.console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );

  • src/wp-includes/media-template.php

     
    649649                        </div>
    650650                </div>
    651651        </script>
     652
     653        <script type="text/html" id="tmpl-audio-details">
     654                <?php // reusing .media-embed to pick up the styles for now ?>
     655                <div class="media-embed">
     656                        <div class="embed-image-settings">
     657                                <div class="thumbnail">
     658                                        <img src="{{ data.model.url }}" draggable="false" />
     659                                </div>
     660
     661                                <div class="setting url">
     662                                        <?php // might want to make the url editable if it isn't an attachment ?>
     663                                        <input type="text" disabled="disabled" value="{{ data.model.url }}" />
     664                                </div>
     665
     666                                <?php
     667                                /** This filter is documented in wp-admin/includes/media.php */
     668                                if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     669                                        <label class="setting caption">
     670                                                <span><?php _e('Caption'); ?></span>
     671                                                <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     672                                        </label>
     673                                <?php endif; ?>
     674
     675                                <label class="setting alt-text">
     676                                        <span><?php _e('Alt Text'); ?></span>
     677                                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
     678                                </label>
     679
     680                                <div class="setting align">
     681                                        <span><?php _e('Align'); ?></span>
     682                                        <div class="button-group button-large" data-setting="align">
     683                                                <button class="button" value="left">
     684                                                        <?php esc_attr_e('Left'); ?>
     685                                                </button>
     686                                                <button class="button" value="center">
     687                                                        <?php esc_attr_e('Center'); ?>
     688                                                </button>
     689                                                <button class="button" value="right">
     690                                                        <?php esc_attr_e('Right'); ?>
     691                                                </button>
     692                                                <button class="button active" value="none">
     693                                                        <?php esc_attr_e('None'); ?>
     694                                                </button>
     695                                        </div>
     696                                </div>
     697                                <div class="setting link-to">
     698                                        <span><?php _e('Link To'); ?></span>
     699                                        <div class="button-group button-large" data-setting="link">
     700                                        <# if ( data.attachment ) { #>
     701                                                <button class="button" value="file">
     702                                                        <?php esc_attr_e('Media File'); ?>
     703                                                </button>
     704                                                <button class="button" value="post">
     705                                                        <?php esc_attr_e('Attachment Page'); ?>
     706                                                </button>
     707                                        <# } else { #>
     708                                                <button class="button" value="file">
     709                                                        <?php esc_attr_e('Image URL'); ?>
     710                                                </button>
     711                                        <# } #>
     712                                                <button class="button" value="custom">
     713                                                        <?php esc_attr_e('Custom URL'); ?>
     714                                                </button>
     715                                                <button class="button active" value="none">
     716                                                        <?php esc_attr_e('None'); ?>
     717                                                </button>
     718                                        </div>
     719                                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
     720                                </div>
     721
     722                                <# if ( data.attachment ) { #>
     723                                        <div class="setting size">
     724                                                <span><?php _e('Size'); ?></span>
     725                                                <div class="button-group button-large" data-setting="size">
     726                                                <?php
     727                                                        /** This filter is documented in wp-admin/includes/media.php */
     728                                                        $sizes = apply_filters( 'image_size_names_choose', array(
     729                                                                'thumbnail' => __('Thumbnail'),
     730                                                                'medium'    => __('Medium'),
     731                                                                'large'     => __('Large'),
     732                                                                'full'      => __('Full Size'),
     733                                                        ) );
     734
     735                                                        foreach ( $sizes as $value => $name ) : ?>
     736                                                                <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     737                                                                if ( size ) { #>
     738                                                                        <button class="button" value="<?php echo esc_attr( $value ); ?>">
     739                                                                                <?php echo esc_html( $name ); ?>
     740                                                                                </button>
     741                                                                <# } #>
     742                                                        <?php endforeach; ?>
     743                                                </div>
     744                                        </div>
     745                                <# } #>
     746                        </div>
     747                </div>
     748        </script>
     749
     750        <script type="text/html" id="tmpl-video-details">
     751                <?php // reusing .media-embed to pick up the styles for now ?>
     752                <div class="media-embed">
     753                        <div class="embed-image-settings">
     754                                <div class="thumbnail">
     755                                        <img src="{{ data.model.url }}" draggable="false" />
     756                                </div>
     757
     758                                <div class="setting url">
     759                                        <?php // might want to make the url editable if it isn't an attachment ?>
     760                                        <input type="text" disabled="disabled" value="{{ data.model.url }}" />
     761                                </div>
     762
     763                                <?php
     764                                /** This filter is documented in wp-admin/includes/media.php */
     765                                if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
     766                                        <label class="setting caption">
     767                                                <span><?php _e('Caption'); ?></span>
     768                                                <textarea data-setting="caption">{{ data.model.caption }}</textarea>
     769                                        </label>
     770                                <?php endif; ?>
     771
     772                                <label class="setting alt-text">
     773                                        <span><?php _e('Alt Text'); ?></span>
     774                                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
     775                                </label>
     776
     777                                <div class="setting align">
     778                                        <span><?php _e('Align'); ?></span>
     779                                        <div class="button-group button-large" data-setting="align">
     780                                                <button class="button" value="left">
     781                                                        <?php esc_attr_e('Left'); ?>
     782                                                </button>
     783                                                <button class="button" value="center">
     784                                                        <?php esc_attr_e('Center'); ?>
     785                                                </button>
     786                                                <button class="button" value="right">
     787                                                        <?php esc_attr_e('Right'); ?>
     788                                                </button>
     789                                                <button class="button active" value="none">
     790                                                        <?php esc_attr_e('None'); ?>
     791                                                </button>
     792                                        </div>
     793                                </div>
     794                                <div class="setting link-to">
     795                                        <span><?php _e('Link To'); ?></span>
     796                                        <div class="button-group button-large" data-setting="link">
     797                                        <# if ( data.attachment ) { #>
     798                                                <button class="button" value="file">
     799                                                        <?php esc_attr_e('Media File'); ?>
     800                                                </button>
     801                                                <button class="button" value="post">
     802                                                        <?php esc_attr_e('Attachment Page'); ?>
     803                                                </button>
     804                                        <# } else { #>
     805                                                <button class="button" value="file">
     806                                                        <?php esc_attr_e('Image URL'); ?>
     807                                                </button>
     808                                        <# } #>
     809                                                <button class="button" value="custom">
     810                                                        <?php esc_attr_e('Custom URL'); ?>
     811                                                </button>
     812                                                <button class="button active" value="none">
     813                                                        <?php esc_attr_e('None'); ?>
     814                                                </button>
     815                                        </div>
     816                                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
     817                                </div>
     818
     819                                <# if ( data.attachment ) { #>
     820                                        <div class="setting size">
     821                                                <span><?php _e('Size'); ?></span>
     822                                                <div class="button-group button-large" data-setting="size">
     823                                                <?php
     824                                                        /** This filter is documented in wp-admin/includes/media.php */
     825                                                        $sizes = apply_filters( 'image_size_names_choose', array(
     826                                                                'thumbnail' => __('Thumbnail'),
     827                                                                'medium'    => __('Medium'),
     828                                                                'large'     => __('Large'),
     829                                                                'full'      => __('Full Size'),
     830                                                        ) );
     831
     832                                                        foreach ( $sizes as $value => $name ) : ?>
     833                                                                <# var size = data.attachment.sizes['<?php echo esc_js( $value ); ?>'];
     834                                                                if ( size ) { #>
     835                                                                        <button class="button" value="<?php echo esc_attr( $value ); ?>">
     836                                                                                <?php echo esc_html( $name ); ?>
     837                                                                                </button>
     838                                                                <# } #>
     839                                                        <?php endforeach; ?>
     840                                                </div>
     841                                        </div>
     842                                <# } #>
     843                        </div>
     844                </div>
     845        </script>
    652846        <?php
    653847
    654848        /**

  • src/wp-includes/media.php

     
    23412341                'imageReplaceTitle'     => __( 'Replace Image' ),
    23422342                'imageDetailsCancel'    => __( 'Cancel Edit' ),
    23432343
     2344                // Edit Image
     2345                'audioDetailsTitle'     => __( 'Audio Details' ),
     2346                'audioReplaceTitle'     => __( 'Replace Audio' ),
     2347                'audioDetailsCancel'    => __( 'Cancel Edit' ),
     2348
     2349                // Edit Image
     2350                'videoDetailsTitle'     => __( 'Video Details' ),
     2351                'videoReplaceTitle'     => __( 'Replace Video' ),
     2352                'videoDetailsCancel'    => __( 'Cancel Edit' ),
     2353
    23442354                // Playlist
    23452355                'playlistDragInfo'    => __( 'Drag and drop to reorder tracks.' ),
    23462356                'createPlaylistTitle' => __( 'Create Playlist' ),