WordPress.org
Get WordPress

Make WordPress Core

Changeset 22494


Ignore:
Timestamp:
11/09/2012 09:47:12 AM (12 years ago)
Author:
koopersmith
Message:

Media: Add a basic starting frame for upload/library selection.

media.view.MediaFrame.Select is a frame class with a handful of sensible defaults to handle selecting and uploading items in the media library.

see #21390.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r22477 r22494  
    644644        add: function( models, options ) {
    645645            if ( ! this.multiple ) {
    646                 models = _.isArray( models ) ? _.first( models ) : models;
     646                models = _.isArray( models ) && models.length ? _.first( models ) : models;
    647647                this.clear( options );
    648648            }

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

    r22493 r22494  
    357357            this.frame.$el.toggleClass( 'hide-sidebar hide-toolbar', this.get('empty') );
    358358            this.content();
     359            this.refreshSelection();
    359360        },
    360361
    … …  
    375376        toggleSelection: function( model ) {
    376377            var selection = this.get('selection');
     378
     379            if ( ! model )
     380                return;
    377381
    378382            if ( selection.has( model ) ) {
    … …  
    565569        reset: function() {
    566570            this.states.invoke( 'trigger', 'reset' );
     571            return this;
    567572        }
    568573    });
    … …  
    629634    });
    630635
    631 
    632     /**
    633      * wp.media.view.MediaFrame.Post
    634      */
    635     media.view.MediaFrame.Post = media.view.MediaFrame.extend({
     636    /**
     637     * wp.media.view.MediaFrame.Select
     638     */
     639    media.view.MediaFrame.Select = media.view.MediaFrame.extend({
    636640        initialize: function() {
    637641            media.view.MediaFrame.prototype.initialize.apply( this, arguments );
    … …  
    641645                selection: [],
    642646                library:   {},
    643                 multiple:  false,
    644                 editing:   false
     647                multiple:  false
    645648            });
    646649
    … …  
    653656        },
    654657
    655         bindHandlers: function() {
    656             var handlers = {
    657                     menu: {
    658                         main:    'mainMenu',
    659                         batch:   'batchMenu',
    660                         gallery: 'galleryMenu'
    661                     },
    662 
    663                     content: {
    664                         browse: 'browseContent',
    665                         upload: 'uploadContent',
    666                         embed:  'embedContent'
    667                     },
    668 
    669                     sidebar: {
    670                         'clear':               'clearSidebar',
    671                         'settings':            'settingsSidebar',
    672                         'attachment-settings': 'attachmentSettingsSidebar'
    673                     },
    674 
    675                     toolbar: {
    676                         'main-attachments': 'mainAttachmentsToolbar',
    677                         'main-embed':       'mainEmbedToolbar',
    678                         'batch-edit':       'batchEditToolbar',
    679                         'batch-add':        'batchAddToolbar',
    680                         'gallery-edit':     'galleryEditToolbar',
    681                         'gallery-add':      'galleryAddToolbar'
    682                     }
    683                 };
    684 
    685             _.each( handlers, function( regionHandlers, region ) {
    686                 _.each( regionHandlers, function( callback, handler ) {
    687                     this[ region ].on( 'activate:' + handler, this[ callback ], this );
    688                 }, this );
    689             }, this );
    690 
    691             _.each(['library', 'upload'], function( id ) {
    692                 this.get( id ).on( 'refresh:selection', function( state, selection ) {
    693                     var sidebar = this.sidebar;
    694 
    695                     if ( ! selection.length )
    696                         sidebar.mode('clear');
    697                     else if ( selection.length === 1 )
    698                         sidebar.mode('attachment-settings');
    699                     else
    700                         sidebar.mode('settings');
    701                 }, this );
    702             }, this );
    703 
    704             this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
    705         },
    706 
    707658        createSelection: function() {
    708659            var controller = this,
    … …  
    710661
    711662            if ( ! (selection instanceof media.model.Selection) ) {
    712                 selection = this.options.selection = new media.model.Selection( selection, {
     663                this.options.selection = new media.model.Selection( selection, {
    713664                    multiple: this.options.multiple
    714665                });
    715666            }
     667        },
     668
     669        createStates: function() {
     670            var options = this.options,
     671                attributes;
     672
     673            attributes = {
     674                multiple: this.options.multiple,
     675                menu:     'main',
     676                toolbar:  'select'
     677            };
     678
     679            // Add the default states.
     680            this.states.add([
     681                // Main states.
     682                new media.controller.Library( _.defaults({
     683                    selection: options.selection,
     684                    library:   media.query( options.library )
     685                }, attributes ) ),
     686
     687                new media.controller.Upload( attributes )
     688            ]);
     689        },
     690
     691        bindHandlers: function() {
     692            this.menu.on( 'activate:main', this.mainMenu, this );
     693            this.content.on( 'activate:browse', this.browseContent, this );
     694            this.content.on( 'activate:upload', this.uploadContent, this );
     695            this.sidebar.on( 'activate:clear', this.clearSidebar, this );
     696            this.sidebar.on( 'activate:settings', this.settingsSidebar, this );
     697            this.toolbar.on( 'activate:select', this.selectToolbar, this );
     698
     699            this.on( 'refresh:selection', this.refreshSelectToolbar, this );
     700        },
     701
     702        mainMenu: function( options ) {
     703            this.menu.view( new media.view.Menu({
     704                controller: this,
     705                silent:     options && options.silent,
     706
     707                views: {
     708                    upload: {
     709                        text: l10n.uploadFilesTitle,
     710                        priority: 20
     711                    },
     712                    library: {
     713                        text: l10n.mediaLibraryTitle,
     714                        priority: 40
     715                    }
     716                }
     717            }) );
     718        },
     719
     720        // Content
     721        browseContent: function() {
     722            var state = this.state();
     723
     724            // Browse our library of attachments.
     725            this.content.view( new media.view.AttachmentsBrowser({
     726                controller: this,
     727                collection: state.get('library'),
     728                model:      state,
     729                sortable:   state.get('sortable'),
     730
     731                AttachmentView: state.get('AttachmentView')
     732            }).render() );
     733        },
     734
     735        uploadContent: function() {
     736            // In the meantime, render an inline uploader.
     737            this.content.view( new media.view.UploaderInline({
     738                controller: this
     739            }).render() );
     740        },
     741
     742        // Sidebars
     743        clearSidebar: function() {
     744            this.sidebar.view( new media.view.Sidebar({
     745                controller: this
     746            }) );
     747        },
     748
     749        settingsSidebar: function( options ) {
     750            this.sidebar.view( new media.view.Sidebar({
     751                controller: this,
     752                silent:     options && options.silent,
     753
     754                views: {
     755                    details: new media.view.Attachment.Details({
     756                        controller: this,
     757                        model:      this.state().get('selection').single(),
     758                        priority:   80
     759                    }).render()
     760                }
     761            }) );
     762        },
     763
     764        // Toolbars
     765        selectToolbar: function() {
     766            this.toolbar.view( new media.view.Toolbar({
     767                controller: this,
     768                items: {
     769                    select: {
     770                        style:    'primary',
     771                        text:     l10n.select,
     772                        priority: 80,
     773
     774                        click: function() {
     775                            var controller = this.controller;
     776
     777                            controller.close();
     778                            controller.state().trigger('select');
     779                            controller.reset().state( controller.options.state );
     780                        }
     781                    }
     782                }
     783            }) );
     784        },
     785
     786        refreshSelectToolbar: function() {
     787            var selection = this.state().get('selection');
     788
     789            if ( ! selection || 'select' !== this.toolbar.mode() )
     790                return;
     791
     792            this.toolbar.view().get('select').model.set( 'disabled', ! selection.length );
     793        }
     794    });
     795
     796    /**
     797     * wp.media.view.MediaFrame.Post
     798     */
     799    media.view.MediaFrame.Post = media.view.MediaFrame.Select.extend({
     800        initialize: function() {
     801            _.defaults( this.options, {
     802                state:     'upload',
     803                multiple:  true,
     804                editing:   false
     805            });
     806
     807            media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
    716808        },
    717809
    … …  
    791883        },
    792884
     885        bindHandlers: function() {
     886            media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
     887
     888            var handlers = {
     889                    menu: {
     890                        batch:   'batchMenu',
     891                        gallery: 'galleryMenu'
     892                    },
     893
     894                    content: {
     895                        embed:  'embedContent'
     896                    },
     897
     898                    sidebar: {
     899                        'attachment-settings': 'attachmentSettingsSidebar'
     900                    },
     901
     902                    toolbar: {
     903                        'main-attachments': 'mainAttachmentsToolbar',
     904                        'main-embed':       'mainEmbedToolbar',
     905                        'batch-edit':       'batchEditToolbar',
     906                        'batch-add':        'batchAddToolbar',
     907                        'gallery-edit':     'galleryEditToolbar',
     908                        'gallery-add':      'galleryAddToolbar'
     909                    }
     910                };
     911
     912            _.each( handlers, function( regionHandlers, region ) {
     913                _.each( regionHandlers, function( callback, handler ) {
     914                    this[ region ].on( 'activate:' + handler, this[ callback ], this );
     915                }, this );
     916            }, this );
     917
     918            _.each(['library', 'upload'], function( id ) {
     919                this.get( id ).on( 'refresh:selection', function( state, selection ) {
     920                    var sidebar = this.sidebar;
     921
     922                    if ( ! selection.length )
     923                        sidebar.mode('clear');
     924                    else if ( selection.length === 1 )
     925                        sidebar.mode('attachment-settings');
     926                    else
     927                        sidebar.mode('settings');
     928                }, this );
     929            }, this );
     930
     931            this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
     932        },
     933
    793934        // Menus
    794935        mainMenu: function() {
    795             this.menu.view( new media.view.Menu({
    796                 controller: this,
    797                 views: {
    798                     upload: {
    799                         text: l10n.uploadFilesTitle,
    800                         priority: 20
    801                     },
    802                     library: {
    803                         text: l10n.mediaLibraryTitle,
    804                         priority: 40
    805                     },
    806                     separateLibrary: new Backbone.View({
    807                         className: 'separator',
    808                         priority: 60
    809                     }),
    810                     embed: {
    811                         text: l10n.embedFromUrlTitle,
    812                         priority: 80
    813                     }
     936            media.view.MediaFrame.Select.prototype.mainMenu.call( this, { silent: true });
     937
     938            this.menu.view().add({
     939                separateLibrary: new Backbone.View({
     940                    className: 'separator',
     941                    priority: 60
     942                }),
     943                embed: {
     944                    text: l10n.embedFromUrlTitle,
     945                    priority: 80
    814946                }
    815             }) );
     947            });
    816948        },
    817949
    … …  
    8911023
    8921024        // Content
    893         browseContent: function() {
    894             var state = this.state();
    895 
    896             // Browse our library of attachments.
    897             this.content.view( new media.view.AttachmentsBrowser({
    898                 controller: this,
    899                 collection: state.get('library'),
    900                 model:      state,
    901                 sortable:   state.get('sortable'),
    902 
    903                 AttachmentView: state.get('AttachmentView')
    904             }).render() );
    905         },
    906 
    907         uploadContent: function() {
    908             // In the meantime, render an inline uploader.
    909             this.content.view( new media.view.UploaderInline({
    910                 controller: this
    911             }).render() );
    912         },
    913 
    9141025        embedContent: function() {},
    9151026
    9161027        // Sidebars
    917         clearSidebar: function() {
    918             this.sidebar.view( new media.view.Sidebar({
    919                 controller: this
    920             }) );
    921         },
    922 
    923         settingsSidebar: function( options ) {
    924             this.sidebar.view( new media.view.Sidebar({
    925                 controller: this,
    926                 silent:     options && options.silent,
    927 
    928                 views: {
    929                     details: new media.view.Attachment.Details({
    930                         controller: this,
    931                         model:      this.state().get('selection').single(),
    932                         priority:   80
    933                     }).render()
    934                 }
    935             }) );
    936         },
    937 
    9381028        onSidebarGallerySettings: function( options ) {
    9391029            this.sidebar.view().add({

  • trunk/wp-includes/script-loader.php

    r22492 r22494  
    329329        'insertMedia' => __( 'Insert Media' ),
    330330        'search'      => __( 'Search' ),
     331        'select'      => __( 'Select' ),
    331332        'cancel'      => __( 'Cancel' ),
    332333        'addImages'   => __( 'Add images' ),
Note: See TracChangeset for help on using the changeset viewer.