WordPress.org
Get WordPress

Make WordPress Core

Changeset 27479


Ignore:
Timestamp:
03/09/2014 06:04:29 AM (11 years ago)
Author:
wonderboymusic
Message:

Add wp.media.view.MediaFrame.MediaDetails, which wp.media.view.MediaFrame.AudioDetails and media.view.MediaFrame.VideoDetails extend. The subclasses subsequently only need to set createStates() and bindHandlers(), as well as any missing toolbar views.

See #27016.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r27478 r27479  
    26982698
    26992699    /**
    2700      * wp.media.view.MediaFrame.AudioDetails
     2700     * wp.media.view.MediaFrame.MediaDetails
    27012701     *
    27022702     * @constructor
    … …  
    27092709     * @mixes wp.media.controller.StateMachine
    27102710     */
    2711     media.view.MediaFrame.AudioDetails = media.view.MediaFrame.Select.extend({
     2711    media.view.MediaFrame.MediaDetails = media.view.MediaFrame.Select.extend({
    27122712        defaults: {
    2713             id:      'audio',
     2713            id:      'media',
    27142714            url:     '',
    2715             menu:    'audio-details',
    2716             content: 'audio-details',
    2717             toolbar: 'audio-details',
     2715            menu:    'media-details',
     2716            content: 'media-details',
     2717            toolbar: 'media-details',
    27182718            type:    'link',
    2719             title:    l10n.audioDetailsTitle,
    27202719            priority: 120
    27212720        },
    27222721
    27232722        initialize: function( options ) {
     2723            this.DetailsView = options.DetailsView;
     2724            this.cancelText = options.cancelText;
     2725            this.addText = options.addText;
     2726
    27242727            this.media = new media.model.PostMedia( options.metadata );
    27252728            this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
    … …  
    27282731
    27292732        bindHandlers: function() {
     2733            var menu = this.defaults.menu;
     2734
    27302735            media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    2731             this.on( 'menu:create:audio-details', this.createMenu, this );
    2732             this.on( 'content:render:audio-details', this.renderAudioDetailsContent, this );
    2733             this.on( 'menu:render:audio-details', this.renderMenu, this );
    2734             this.on( 'toolbar:render:audio-details', this.renderAudioDetailsToolbar, this );
    2735             // override the select toolbar
    2736             this.on( 'toolbar:render:replace-audio', this.renderReplaceAudioToolbar, this );
    2737             this.on( 'toolbar:render:add-audio-source', this.renderAddAudioSourceToolbar, this );
    2738         },
    2739 
    2740         createStates: function() {
    2741             this.states.add([
    2742                 new media.controller.AudioDetails( {
    2743                     media: this.media,
    2744                     editable: false,
    2745                     menu: 'audio-details'
    2746                 } ),
    2747 
    2748                 new media.controller.MediaLibrary( {
    2749                     type: 'audio',
    2750                     id: 'replace-audio',
    2751                     title: l10n.audioReplaceTitle,
    2752                     toolbar: 'replace-audio',
    2753                     media: this.media,
    2754                     menu: 'audio-details'
    2755                 } ),
    2756 
    2757 
    2758                 new media.controller.MediaLibrary( {
    2759                     type: 'audio',
    2760                     id: 'add-audio-source',
    2761                     title: l10n.audioAddSourceTitle,
    2762                     toolbar: 'add-audio-source',
    2763                     media: this.media,
    2764                     menu: 'audio-details'
    2765                 } )
    2766             ]);
    2767         },
    2768 
    2769         renderAudioDetailsContent: function() {
    2770             var view = new media.view.AudioDetails({
     2736
     2737            this.on( 'menu:create:' + menu, this.createMenu, this );
     2738            this.on( 'content:render:' + menu, this.renderDetailsContent, this );
     2739            this.on( 'menu:render:' + menu, this.renderMenu, this );
     2740            this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
     2741        },
     2742
     2743        renderDetailsContent: function() {
     2744            var view = new this.DetailsView({
    27712745                controller: this,
    27722746                model: this.state().media,
    … …  
    27842758            view.set({
    27852759                cancel: {
    2786                     text:     l10n.audioDetailsCancel,
     2760                    text:     this.cancelText,
    27872761                    priority: 20,
    27882762                    click:    function() {
    … …  
    28022776        },
    28032777
    2804         renderAudioDetailsToolbar: function() {
     2778        renderDetailsToolbar: function() {
    28052779            this.toolbar.set( new media.view.Toolbar({
    28062780                controller: this,
    … …  
    28282802        },
    28292803
    2830         renderReplaceAudioToolbar: function() {
     2804        renderReplaceToolbar: function() {
    28312805            this.toolbar.set( new media.view.Toolbar({
    28322806                controller: this,
    … …  
    28452819                            controller.media.changeAttachment( attachment, state.display( attachment ) );
    28462820
    2847                             // not sure if we want to use wp.media.string.image which will create a shortcode or
    2848                             // perhaps wp.html.string to at least to build the <img />
    28492821                            state.trigger( 'replace', controller.media.toJSON() );
    28502822
    … …  
    28582830        },
    28592831
    2860         renderAddAudioSourceToolbar: function() {
     2832        renderAddSourceToolbar: function() {
    28612833            this.toolbar.set( new media.view.Toolbar({
    28622834                controller: this,
    … …  
    28642836                    replace: {
    28652837                        style:    'primary',
    2866                         text:     l10n.audioAddSourceTitle,
     2838                        text:     this.addText,
    28672839                        priority: 80,
    28682840
    … …  
    28882860
    28892861    /**
    2890      * wp.media.view.MediaFrame.VideoDetails
     2862     * wp.media.view.MediaFrame.AudioDetails
    28912863     *
    28922864     * @constructor
     2865     * @augments wp.media.view.MediaFrame.MediaDetails
    28932866     * @augments wp.media.view.MediaFrame.Select
    28942867     * @augments wp.media.view.MediaFrame
    … …  
    28992872     * @mixes wp.media.controller.StateMachine
    29002873     */
    2901     media.view.MediaFrame.VideoDetails = media.view.MediaFrame.Select.extend({
     2874    media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails.extend({
     2875        defaults: {
     2876            id:      'audio',
     2877            url:     '',
     2878            menu:    'audio-details',
     2879            content: 'audio-details',
     2880            toolbar: 'audio-details',
     2881            type:    'link',
     2882            title:    l10n.audioDetailsTitle,
     2883            priority: 120
     2884        },
     2885
     2886        initialize: function( options ) {
     2887            options.DetailsView = media.view.AudioDetails;
     2888            options.cancelText = l10n.audioDetailsCancel;
     2889            options.addText = l10n.audioAddSourceTitle;
     2890
     2891            media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
     2892        },
     2893
     2894        bindHandlers: function() {
     2895            media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
     2896
     2897            this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
     2898            this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
     2899        },
     2900
     2901        createStates: function() {
     2902            this.states.add([
     2903                new media.controller.AudioDetails( {
     2904                    media: this.media,
     2905                    editable: false,
     2906                    menu: 'audio-details'
     2907                } ),
     2908
     2909                new media.controller.MediaLibrary( {
     2910                    type: 'audio',
     2911                    id: 'replace-audio',
     2912                    title: l10n.audioReplaceTitle,
     2913                    toolbar: 'replace-audio',
     2914                    media: this.media,
     2915                    menu: 'audio-details'
     2916                } ),
     2917
     2918
     2919                new media.controller.MediaLibrary( {
     2920                    type: 'audio',
     2921                    id: 'add-audio-source',
     2922                    title: l10n.audioAddSourceTitle,
     2923                    toolbar: 'add-audio-source',
     2924                    media: this.media,
     2925                    menu: 'audio-details'
     2926                } )
     2927            ]);
     2928        }
     2929    });
     2930
     2931    /**
     2932     * wp.media.view.MediaFrame.VideoDetails
     2933     *
     2934     * @constructor
     2935     * @augments wp.media.view.MediaFrame.MediaDetails
     2936     * @augments wp.media.view.MediaFrame.Select
     2937     * @augments wp.media.view.MediaFrame
     2938     * @augments wp.media.view.Frame
     2939     * @augments wp.media.View
     2940     * @augments wp.Backbone.View
     2941     * @augments Backbone.View
     2942     * @mixes wp.media.controller.StateMachine
     2943     */
     2944    media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails.extend({
    29022945        defaults: {
    29032946            id:      'video',
    … …  
    29122955
    29132956        initialize: function( options ) {
    2914             this.media = new media.model.PostMedia( options.metadata );
    2915             this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
    2916             media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
     2957            options.DetailsView = media.view.VideoDetails;
     2958            options.cancelText = l10n.videoDetailsCancel;
     2959            options.addText = l10n.videoAddSourceTitle;
     2960
     2961            media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
    29172962        },
    29182963
    29192964        bindHandlers: function() {
    2920             media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
    2921             this.on( 'menu:create:video-details', this.createMenu, this );
    2922             this.on( 'content:render:video-details', this.renderVideoDetailsContent, this );
    2923             this.on( 'menu:render:video-details', this.renderMenu, this );
    2924             this.on( 'toolbar:render:video-details', this.renderVideoDetailsToolbar, this );
    2925             // override the select toolbar
    2926             this.on( 'toolbar:render:replace-video', this.renderReplaceVideoToolbar, this );
    2927             this.on( 'toolbar:render:add-video-source', this.renderAddVideoSourceToolbar, this );
     2965            media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
     2966
     2967            this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
     2968            this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
    29282969            this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
    29292970        },
    … …  
    29643005                } )
    29653006            ]);
    2966         },
    2967 
    2968         renderVideoDetailsContent: function() {
    2969             var view = new media.view.VideoDetails({
    2970                 controller: this,
    2971                 model: this.state().media,
    2972                 attachment: this.state().media.attachment
    2973             }).render();
    2974 
    2975             this.content.set( view );
    2976         },
    2977 
    2978         renderMenu: function( view ) {
    2979             var lastState = this.lastState(),
    2980                 previous = lastState && lastState.id,
    2981                 frame = this;
    2982 
    2983             view.set({
    2984                 cancel: {
    2985                     text:     l10n.videoDetailsCancel,
    2986                     priority: 20,
    2987                     click:    function() {
    2988                         if ( previous ) {
    2989                             frame.setState( previous );
    2990                         } else {
    2991                             frame.close();
    2992                         }
    2993                     }
    2994                 },
    2995                 separateCancel: new media.View({
    2996                     className: 'separator',
    2997                     priority: 40
    2998                 })
    2999             });
    3000 
    3001         },
    3002 
    3003         renderVideoDetailsToolbar: function() {
    3004             this.toolbar.set( new media.view.Toolbar({
    3005                 controller: this,
    3006                 items: {
    3007                     select: {
    3008                         style:    'primary',
    3009                         text:     l10n.update,
    3010                         priority: 80,
    3011 
    3012                         click: function() {
    3013                             var controller = this.controller,
    3014                                 state = controller.state();
    3015 
    3016                             controller.close();
    3017 
    3018                             // not sure if we want to use wp.media.string.image which will create a shortcode or
    3019                             // perhaps wp.html.string to at least to build the <img />
    3020                             state.trigger( 'update', controller.media.toJSON() );
    3021 
    3022                             // Restore and reset the default state.
    3023                             controller.setState( controller.options.state );
    3024                             controller.reset();
    3025                         }
    3026                     }
    3027                 }
    3028             }) );
    3029         },
    3030 
    3031         renderReplaceVideoToolbar: function() {
    3032             this.toolbar.set( new media.view.Toolbar({
    3033                 controller: this,
    3034                 items: {
    3035                     replace: {
    3036                         style:    'primary',
    3037                         text:     l10n.replace,
    3038                         priority: 80,
    3039 
    3040                         click: function() {
    3041                             var controller = this.controller,
    3042                                 state = controller.state(),
    3043                                 selection = state.get( 'selection' ),
    3044                                 attachment = selection.single();
    3045 
    3046                             controller.media.changeAttachment( attachment, state.display( attachment ) );
    3047 
    3048                             state.trigger( 'replace', controller.media.toJSON() );
    3049 
    3050                             // Restore and reset the default state.
    3051                             controller.setState( controller.options.state );
    3052                             controller.reset();
    3053                         }
    3054                     }
    3055                 }
    3056             }) );
    3057         },
    3058 
    3059         renderAddVideoSourceToolbar: function() {
    3060             this.toolbar.set( new media.view.Toolbar({
    3061                 controller: this,
    3062                 items: {
    3063                     replace: {
    3064                         style:    'primary',
    3065                         text:     l10n.videoAddSourceTitle,
    3066                         priority: 80,
    3067 
    3068                         click: function() {
    3069                             var controller = this.controller,
    3070                                 state = controller.state(),
    3071                                 selection = state.get( 'selection' ),
    3072                                 attachment = selection.single();
    3073 
    3074                             controller.media.setSource( attachment, state.display( attachment ) );
    3075 
    3076                             state.trigger( 'add-source', controller.media.toJSON() );
    3077 
    3078                             // Restore and reset the default state.
    3079                             controller.setState( controller.options.state );
    3080                             controller.reset();
    3081                         }
    3082                     }
    3083                 }
    3084             }) );
    30853007        },
    30863008
Note: See TracChangeset for help on using the changeset viewer.