WordPress.org
Get WordPress

Make WordPress Core

Changeset 27479


Ignore:
Timestamp:
03/09/2014 06:04:29 AM (12 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.