WordPress.org

Make WordPress Core

Ticket #27016: 27016.4.diff

File 27016.4.diff, 30.0 KB (added by wonderboymusic, 6 years ago)
  • src/wp-includes/css/media-views.css

     
    14601460}
    14611461
    14621462.embed-link-settings,
    1463 .embed-image-settings {
     1463.embed-media-settings {
    14641464        position: absolute;
    14651465        top: 60px;
    14661466        left: 0;
     
    14701470        overflow: auto;
    14711471}
    14721472
    1473 .image-details .embed-image-settings {
     1473.image-details .embed-media-settings {
    14741474        top: 0;
    14751475}
    14761476
     
    15231523        margin: 2px 0;
    15241524}
    15251525
    1526 .media-embed .setting input,
     1526.media-embed .setting input[type="text"],
    15271527.media-embed .setting textarea {
    15281528        display: block;
    15291529        width: 100%;
     
    18721872
    18731873        /* Image From Link */
    18741874        .embed-link-settings,
    1875         .embed-image-settings {
     1875        .embed-media-settings {
    18761876                padding-bottom: 52px;
    18771877        }
    18781878
  • src/wp-includes/js/media-editor.js

     
    593593                }));
    594594        }());
    595595
     596        wp.media.audio = {
     597                defaults : {
     598                        id : wp.media.view.settings.post.id,
     599                        src      : '',
     600                        loop     : '',
     601                        autoplay : '',
     602                        preload  : 'none'
     603                },
     604
     605                shortcode : function (shortcode) {
     606                        _.each( wp.media.audio.defaults, function( value, key ) {
     607                                if ( value === shortcode[ key ] ) {
     608                                        delete shortcode[ key ];
     609                                }
     610                        });
     611
     612                        return wp.shortcode.string({
     613                                tag:     'audio',
     614                                attrs:   shortcode
     615                        });
     616                }
     617        };
     618
     619        wp.media.video = {
     620                defaults : {
     621                        id : wp.media.view.settings.post.id,
     622                        src : '',
     623                        poster : '',
     624                        loop : '',
     625                        autoplay : '',
     626                        preload : 'metadata'
     627                },
     628
     629                shortcode : function (shortcode) {
     630                        _.each( wp.media.video.defaults, function( value, key ) {
     631                                if ( value === shortcode[ key ] ) {
     632                                        delete shortcode[ key ];
     633                                }
     634                        });
     635
     636                        return wp.shortcode.string({
     637                                tag:     'video',
     638                                attrs:   shortcode
     639                        });
     640                }
     641        };
     642
    596643        /**
    597644         * wp.media.featuredImage
    598645         * @namespace
  • 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        /**
     463         * wp.media.model.PostVideo
     464         *
     465         * @constructor
     466         * @augments Backbone.Model
     467         **/
     468        PostVideo = media.model.PostVideo = Backbone.Model.extend({});
     469
     470        /**
    451471         * wp.media.model.Attachments
    452472         *
    453473         * @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                                var view = new media.view[args.detailsView]({
     2492                                        controller: this,
     2493                                        model: this.state()[type],
     2494                                        attachment: this.state()[type].attachment
     2495                                }).render();
    24102496
    2411                 renderMenu: function( view ) {
    2412                         var lastState = this.lastState(),
    2413                                 previous = lastState && lastState.id,
    2414                                 frame = this;
     2497                                this.content.set( view );
     2498                        },
    24152499
    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();
     2500                        renderMenu: function( view ) {
     2501                                var lastState = this.lastState(),
     2502                                        previous = lastState && lastState.id,
     2503                                        frame = this;
     2504
     2505                                view.set({
     2506                                        cancel: {
     2507                                                text:     args.cancelText,
     2508                                                priority: 20,
     2509                                                click:    function() {
     2510                                                        if ( previous ) {
     2511                                                                frame.setState( previous );
     2512                                                        } else {
     2513                                                                frame.close();
     2514                                                        }
    24252515                                                }
    2426                                         }
    2427                                 },
    2428                                 separateCancel: new media.View({
    2429                                         className: 'separator',
    2430                                         priority: 40
    2431                                 })
    2432                         });
     2516                                        },
     2517                                        separateCancel: new media.View({
     2518                                                className: 'separator',
     2519                                                priority: 40
     2520                                        })
     2521                                });
    24332522
    2434                 },
     2523                        },
    24352524
    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,
     2525                        renderDetailsToolbar: function() {
     2526                                this.toolbar.set( new media.view.Toolbar({
     2527                                        controller: this,
     2528                                        items: {
     2529                                                select: {
     2530                                                        style:    'primary',
     2531                                                        text:     l10n.update,
     2532                                                        priority: 80,
    24442533
    2445                                                 click: function() {
    2446                                                         var controller = this.controller,
    2447                                                                 state = controller.state();
     2534                                                        click: function() {
     2535                                                                var controller = this.controller,
     2536                                                                        state = controller.state();
    24482537
    2449                                                         controller.close();
     2538                                                                controller.close();
    24502539
    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() );
     2540                                                                // not sure if we want to use wp.media.string.image which will create a shortcode or
     2541                                                                // perhaps wp.html.string to at least to build the <img />
     2542                                                                state.trigger( 'update', controller[type].toJSON() );
    24542543
    2455                                                         // Restore and reset the default state.
    2456                                                         controller.setState( controller.options.state );
    2457                                                         controller.reset();
     2544                                                                // Restore and reset the default state.
     2545                                                                controller.setState( controller.options.state );
     2546                                                                controller.reset();
     2547                                                        }
    24582548                                                }
    24592549                                        }
    2460                                 }
    2461                         }) );
    2462                 },
     2550                                }) );
     2551                        },
    24632552
    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,
     2553                        renderReplaceToolbar: function() {
     2554                                this.toolbar.set( new media.view.Toolbar({
     2555                                        controller: this,
     2556                                        items: {
     2557                                                replace: {
     2558                                                        style:    'primary',
     2559                                                        text:     l10n.replace,
     2560                                                        priority: 80,
    24722561
    2473                                                 click: function() {
    2474                                                         var controller = this.controller,
    2475                                                                 state = controller.state(),
    2476                                                                 selection = state.get( 'selection' ),
    2477                                                                 attachment = selection.single();
     2562                                                        click: function() {
     2563                                                                var controller = this.controller,
     2564                                                                        state = controller.state(),
     2565                                                                        selection = state.get( 'selection' ),
     2566                                                                        attachment = selection.single();
    24782567
    2479                                                         controller.close();
     2568                                                                controller.close();
    24802569
    2481                                                         controller.image.changeAttachment( attachment, state.display( attachment ) );
     2570                                                                controller[type].changeAttachment( attachment, state.display( attachment ) );
    24822571
    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() );
     2572                                                                // not sure if we want to use wp.media.string.image which will create a shortcode or
     2573                                                                // perhaps wp.html.string to at least to build the <img />
     2574                                                                state.trigger( 'replace', controller[type].toJSON() );
    24862575
    2487                                                         // Restore and reset the default state.
    2488                                                         controller.setState( controller.options.state );
    2489                                                         controller.reset();
     2576                                                                // Restore and reset the default state.
     2577                                                                controller.setState( controller.options.state );
     2578                                                                controller.reset();
     2579                                                        }
    24902580                                                }
    24912581                                        }
    2492                                 }
    2493                         }) );
    2494                 }
     2582                                }) );
     2583                        }
    24952584
    2496         });
     2585                });
     2586        };
    24972587
     2588        media.view.MediaFrame.ImageDetails = media.view.MediaFrame.MediaDetails( 'image', {
     2589                title : l10n.imageDetailsTitle,
     2590                model: media.model.PostImage,
     2591                detailsView: 'ImageDetails',
     2592                detailsController: media.controller.ImageDetails,
     2593                replaceController: media.controller.ReplaceImage,
     2594                replaceTitle: l10n.imageReplaceTitle,
     2595                cancelText: l10n.imageDetailsCancel
     2596        } );
    24982597
     2598        media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails( 'audio', {
     2599                title : l10n.audioDetailsTitle,
     2600                model: media.model.PostAudio,
     2601                detailsView: 'AudioDetails',
     2602                detailsController: media.controller.AudioDetails,
     2603                replaceController: media.controller.ReplaceAudio,
     2604                replaceTitle: l10n.audioReplaceTitle,
     2605                cancelText: l10n.audioDetailsCancel
     2606        } );
     2607
     2608        media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails( 'video', {
     2609                title : l10n.videoDetailsTitle,
     2610                model: media.model.PostVideo,
     2611                detailsView: 'VideoDetails',
     2612                detailsController: media.controller.VideoDetails,
     2613                replaceController: media.controller.ReplaceVideo,
     2614                replaceTitle: l10n.videoReplaceTitle,
     2615                cancelText: l10n.videoDetailsCancel
     2616        } );
     2617
    24992618        /**
    25002619         * wp.media.view.Modal
    25012620         *
     
    55115630         * @augments Backbone.View
    55125631         */
    55135632        media.view.EmbedImage =  media.view.Settings.AttachmentDisplay.extend({
    5514                 className: 'embed-image-settings',
     5633                className: 'embed-media-settings',
    55155634                template:  media.template('embed-image-settings'),
    55165635
    55175636                initialize: function() {
     
    55275646                }
    55285647        });
    55295648
    5530         media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
    5531                 className: 'image-details',
    5532                 template:  media.template('image-details'),
     5649        media.view.MediaDetails = function (type) {
     5650                return media.view.Settings.AttachmentDisplay.extend({
     5651                        className: type + '-details',
     5652                        template:  media.template(type + '-details'),
    55335653
    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                 },
     5654                        initialize: function() {
     5655                                // used in AttachmentDisplay.prototype.updateLinkTo
     5656                                this.options.attachment = this.model.attachment;
     5657                                media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
     5658                        },
    55395659
    5540                 prepare: function() {
    5541                         var attachment = false;
     5660                        prepare: function() {
     5661                                var attachment = false;
    55425662
    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                 },
     5663                                if ( this.model.attachment ) {
     5664                                        attachment = this.model.attachment.toJSON();
     5665                                }
     5666                                return _.defaults({
     5667                                        model: this.model.toJSON(),
     5668                                        attachment: attachment
     5669                                }, this.options );
     5670                        },
    55515671
     5672                        render: function() {
     5673                                var self = this,
     5674                                        args = arguments;
     5675                                if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
     5676                                        // should instead show a spinner when the attachment is new and then add a listener that updates on change
     5677                                        this.model.dfd.done( function() {
     5678                                                media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
     5679                                                self.resetFocus();
     5680                                        } );
     5681                                } else {
     5682                                        media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
     5683                                        setTimeout( function() { self.resetFocus(); }, 10 );
     5684                                }
    55525685
    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 );
     5686                                return this;
     5687                        },
     5688
     5689                        resetFocus: function() {
     5690                                this.$( '.caption textarea' ).focus();
     5691                                this.$( '.embed-media-settings' ).scrollTop( 0 );
    55655692                        }
     5693                } );
     5694        };
    55665695
    5567                         return this;
    5568                 },
     5696        media.view.ImageDetails = media.view.MediaDetails( 'image' );
    55695697
    5570                 resetFocus: function() {
    5571                         this.$( '.caption textarea' ).focus();
    5572                         this.$( '.embed-image-settings' ).scrollTop( 0 );
    5573                 }
    5574         });
     5698        media.view.AudioDetails = media.view.MediaDetails( 'audio' );
     5699
     5700        media.view.VideoDetails = media.view.MediaDetails( 'video' );
    55755701}(jQuery));
  • src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

     
    5353        }
    5454
    5555        function editMedia( node ) {
    56                 var gallery, frame, data;
     56                var gallery, frame, data, shortcode;
    5757
    5858                if ( node.nodeName !== 'IMG' ) {
    5959                        return;
     
    6464                        return;
    6565                }
    6666
     67                data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
     68
    6769                // Make sure we've selected a gallery node.
    6870                if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
    6971                        gallery = wp.media.gallery;
    70                         data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
    7172                        frame = gallery.edit( data );
    7273
    7374                        frame.state('gallery-edit').on( 'update', function( selection ) {
     
    7576                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    7677                        });
    7778                } else if ( editor.dom.hasClass( node, 'wp-playlist' ) && wp.media.playlist ) {
    78                         data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
    7979                        frame = wp.media.playlist.edit( data );
    8080
    8181                        frame.state('playlist-edit').on( 'update', function( selection ) {
     
    8383                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    8484                        });
    8585                } else if ( editor.dom.hasClass( node, 'wp-video-playlist' ) && wp.media['video-playlist'] ) {
    86                         data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
    8786                        frame = wp.media['video-playlist'].edit( data );
    8887
    8988                        frame.state('video-playlist-edit').on( 'update', function( selection ) {
    9089                                var shortcode = wp.media['video-playlist'].shortcode( selection ).string();
    9190                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    9291                        });
     92                } else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
     93                        shortcode = wp.shortcode.next('video', data).shortcode;
     94                        frame = wp.media({
     95                                frame: 'video',
     96                                state: 'video-details',
     97                                metadata: _.defaults(
     98                                        shortcode.attrs.named,
     99                                        wp.media.video.defaults
     100                                )
     101                        } );
     102                        frame.state('video-details').on( 'update', function ( selection ) {
     103                                var shortcode = wp.media.video.shortcode( selection );
     104                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
     105                        } );
     106                        frame.state('replace-video').on( 'replace', function () {} );
     107
     108                        frame.open();
     109                } else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
     110                        shortcode = wp.shortcode.next('audio', data).shortcode;
     111                        frame = wp.media({
     112                                frame: 'audio',
     113                                state: 'audio-details',
     114                                metadata: _.defaults(
     115                                        shortcode.attrs.named,
     116                                        wp.media.audio.defaults
     117                                )
     118                        });
     119                        frame.state('audio-details').on( 'update', function ( selection ) {
     120                                var shortcode = wp.media.audio.shortcode( selection );
     121                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
     122                        } );
     123                        frame.state('replace-audio').on( 'replace', function () {} );
     124
     125                        frame.open();
    93126                } else {
    94127                        // temp
    95                         window.console && window.console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );
     128                        window.console && window.console.log( 'Edit AV shortcode ' + data );
    96129                }
    97130        }
    98131
  • src/wp-includes/media-template.php

     
    556556        <script type="text/html" id="tmpl-image-details">
    557557                <?php // reusing .media-embed to pick up the styles for now ?>
    558558                <div class="media-embed">
    559                         <div class="embed-image-settings">
     559                        <div class="embed-media-settings">
    560560                                <div class="thumbnail">
    561561                                        <img src="{{ data.model.url }}" draggable="false" />
    562562                                </div>
     
    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-media-settings">
     657                                <label class="setting">
     658                                        <span>SRC</span>
     659                                        <input type="text" data-setting="src" value="{{{ data.model.src }}}" />
     660                                </label>
     661                                <?php
     662                                $default_types = wp_get_audio_extensions();
     663
     664                                foreach ( $default_types as $type ): ?>
     665                                <# if ( data.model.<?php echo $type ?> ) { #>
     666                                <label class="setting">
     667                                        <span><?php echo strtoupper( $type ) ?></span>
     668                                        <input type="text" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     669                                </label>
     670                                <# } #>
     671                                <?php endforeach ?>
     672
     673                                <div class="setting preload">
     674                                        <span><?php _e( 'Preload' ); ?></span>
     675                                        <div class="button-group button-large" data-setting="preload">
     676                                                <button class="button" value="auto">
     677                                                        <?php esc_attr_e( 'Auto' ); ?>
     678                                                </button>
     679                                                <button class="button" value="metadata">
     680                                                        <?php esc_attr_e( 'Metadata' ); ?>
     681                                                </button>
     682                                                <button class="button active" value="none">
     683                                                        <?php esc_attr_e( 'None' ); ?>
     684                                                </button>
     685                                        </div>
     686                                </div>
     687
     688                                <label class="setting">
     689                                        <span><?php _e( 'Autoplay' ); ?></span>
     690                                        <input type="checkbox" data-setting="autoplay" />
     691                                </label>
     692
     693                                <label class="setting">
     694                                        <span><?php _e( 'Loop' ); ?></span>
     695                                        <input type="checkbox" data-setting="loop" />
     696                                </label>
     697                        </div>
     698                </div>
     699        </script>
     700
     701        <script type="text/html" id="tmpl-video-details">
     702                <?php // reusing .media-embed to pick up the styles for now ?>
     703                <div class="media-embed">
     704                        <div class="embed-media-settings">
     705                                <label class="setting">
     706                                        <span>SRC</span>
     707                                        <input type="text" data-setting="src" value="{{{ data.model.src }}}" />
     708                                </label>
     709                                <?php
     710                                $default_types = wp_get_video_extensions();
     711
     712                                foreach ( $default_types as $type ): ?>
     713                                <# if ( data.model.<?php echo $type ?> ) { #>
     714                                <label class="setting">
     715                                        <span><?php echo strtoupper( $type ) ?></span>
     716                                        <input type="text" data-setting="<?php echo $type ?>" value="{{{ data.model.<?php echo $type ?> }}}" />
     717                                </label>
     718                                <# } #>
     719                                <?php endforeach ?>
     720
     721                                <div class="setting preload">
     722                                        <span><?php _e( 'Preload' ); ?></span>
     723                                        <div class="button-group button-large" data-setting="preload">
     724                                                <button class="button" value="auto">
     725                                                        <?php esc_attr_e( 'Auto' ); ?>
     726                                                </button>
     727                                                <button class="button" value="metadata">
     728                                                        <?php esc_attr_e( 'Metadata' ); ?>
     729                                                </button>
     730                                                <button class="button active" value="none">
     731                                                        <?php esc_attr_e( 'None' ); ?>
     732                                                </button>
     733                                        </div>
     734                                </div>
     735
     736                                <label class="setting">
     737                                        <span><?php _e( 'Autoplay' ); ?></span>
     738                                        <input type="checkbox" data-setting="autoplay" />
     739                                </label>
     740
     741                                <label class="setting">
     742                                        <span><?php _e( 'Loop' ); ?></span>
     743                                        <input type="checkbox" data-setting="loop" />
     744                                </label>
     745                        </div>
     746                </div>
     747        </script>
    652748        <?php
    653749
    654750        /**
  • 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' ),