WordPress.org
Get WordPress

Make WordPress Core

Changeset 22809


Ignore:
Timestamp:
11/22/2012 06:30:25 AM (14 years ago)
Author:
koopersmith
Message:

Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390.

Location:
trunk/wp-includes
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r22798 r22809  
    192192        top: 0;
    193193        right: 0;
    194         bottom: 61px;
     194        bottom: 0;
    195195        width: 267px;
    196196        padding: 0 16px 24px;
    … …  
    199199        border-left: 1px solid #dfdfdf;
    200200        overflow: auto;
    201 }
    202 
    203 .hide-sidebar .media-sidebar {
    204         right: -300px;
    205201}
    206202
    … …  
    404400        top: 0;
    405401        left: 200px;
    406         right: 300px;
     402        right: 0;
    407403        bottom: 61px;
    408404        height: auto;
    … …  
    410406        margin: 0;
    411407        overflow: auto;
    412 }
    413 
    414 .media-frame.hide-sidebar .region-content {
    415         right: 0;
    416408}
    417409
    … …  
    691683
    692684.attachments-browser .media-toolbar {
     685        right: 300px;
    693686        height: 50px;
    694687}
    … …  
    705698        top: 50px;
    706699        left: 0;
    707         right: 0;
     700        right: 300px;
    708701        bottom: 0;
    709702        overflow: auto;

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

    r22774 r22809  
    354354
    355355                        workflow.on( 'insert', function( selection ) {
    356                                 var state = workflow.state(),
    357                                         details = state.get('details');
     356                                var state = workflow.state();
    358357
    359358                                selection = selection || state.get('selection');
    360359
    361                                 if ( ! selection || ! details )
     360                                if ( ! selection )
    362361                                        return;
    363362
    364363                                selection.each( function( attachment ) {
    365                                         var detail = details[ attachment.cid ];
    366 
    367                                         if ( detail )
    368                                                 detail = detail.toJSON();
    369 
    370                                         // Reset the attachment details.
    371                                         delete details[ attachment.cid ];
    372 
    373                                         attachment = attachment.toJSON();
    374 
    375                                         this.send.attachment( detail, attachment );
     364                                        var display = state.display( attachment ).toJSON();
     365                                        this.send.attachment( display, attachment.toJSON() );
    376366                                }, this );
    377367                        }, this );

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

    r22798 r22809  
    767767                        // If single has changed, fire an event.
    768768                        if ( this._single !== previous ) {
     769                                if ( previous )
     770                                        previous.trigger( 'selection:unsingle', previous, this );
    769771                                if ( this._single )
    770772                                        this._single.trigger( 'selection:single', this._single, this );
    771                                 if ( previous )
    772                                         previous.trigger( 'selection:unsingle', previous, this );
    773773                        }
    774774

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

    r22806 r22809  
    211211                        this.menu();
    212212                        this.toolbar();
    213                         this.sidebar();
    214213                        this.content();
    215214                },
    … …  
    239238        });
    240239
    241         _.each(['toolbar','sidebar','content'], function( region ) {
     240        _.each(['toolbar','content'], function( region ) {
    242241                media.controller.State.prototype[ region ] = function() {
    243242                        var mode = this.get( region );
    … …  
    276275                                this.set( 'gutter', 8 );
    277276
    278                         if ( ! this.get('details') )
    279                                 this.set( 'details', [] );
     277                        this.resetDisplays();
    280278
    281279                        media.controller.State.prototype.initialize.apply( this, arguments );
    … …  
    283281
    284282                activate: function() {
    285                         var selection = this.get('selection');
     283                        var library = this.get('library'),
     284                                selection = this.get('selection');
    286285
    287286                        this._excludeStateLibrary();
    … …  
    295294                                wp.Uploader.queue.on( 'add', this.selectUpload, this );
    296295
    297                         selection.on( 'selection:single selection:unsingle', this.sidebar, this );
    298296                        selection.on( 'add remove reset', this.refreshSelection, this );
    299297
    300298                        this._updateEmpty();
    301                         this.get('library').on( 'add remove reset', this._updateEmpty, this );
     299                        library.on( 'add remove reset', this._updateEmpty, this );
    302300                        this.on( 'change:empty', this.refresh, this );
    303301                        this.refresh();
     302
     303
     304                        this.on( 'insert', this._insertDisplaySettings, this );
    304305                },
    305306
    … …  
    322323                reset: function() {
    323324                        this.get('selection').clear();
    324                 },
    325 
    326                 sidebar: function() {
    327                         var sidebar = this.frame.sidebar;
    328 
    329                         if ( this.get('selection').single() )
    330                                 sidebar.mode( this.get('sidebar') );
    331                         else
    332                                 sidebar.mode('clear');
     325                        this.resetDisplays();
    333326                },
    334327
    … …  
    349342
    350343                refresh: function() {
    351                         this.frame.$el.toggleClass( 'hide-sidebar hide-toolbar', this.get('empty') );
     344                        this.frame.$el.toggleClass( 'hide-toolbar', this.get('empty') );
    352345                        this.content();
    353346                        this.refreshSelection();
     347                },
     348
     349                resetDisplays: function() {
     350                        this._displays = [];
     351                        this._defaultDisplaySettings = {
     352                                align: getUserSetting( 'align', 'none' ),
     353                                size:  getUserSetting( 'imgsize', 'medium' ),
     354                                link:  getUserSetting( 'urlbutton', 'post' )
     355                        };
     356                },
     357
     358                display: function( attachment ) {
     359                        var displays = this._displays;
     360
     361                        if ( ! displays[ attachment.cid ] )
     362                                displays[ attachment.cid ] = new Backbone.Model( this._defaultDisplaySettings );
     363
     364                        return displays[ attachment.cid ];
     365                },
     366
     367                _insertDisplaySettings: function() {
     368                        var selection = this.get('selection'),
     369                                display;
     370
     371                        // If inserting one image, set those display properties as the
     372                        // default user setting.
     373                        if ( selection.length !== 1 )
     374                                return;
     375
     376                        display = this.display( selection.first() ).toJSON();
     377
     378                        setUserSetting( 'align', display.align );
     379                        setUserSetting( 'imgsize', display.size );
     380                        setUserSetting( 'urlbutton', display.link );
    354381                },
    355382
    … …  
    449476                        id:      'upload',
    450477                        content: 'upload',
    451                         sidebar: 'empty',
    452478                        toolbar: 'empty',
    453479
    … …  
    489515                        sortable:   true,
    490516                        searchable: false,
    491                         toolbar:    'gallery-edit',
    492                         sidebar:    'settings'
     517                        toolbar:    'gallery-edit'
    493518                },
    494519
    … …  
    513538                        this.get('library').observe( wp.Uploader.queue );
    514539
     540                        this.frame.content.on( 'activate:browse', this.gallerySettings, this );
     541
    515542                        media.controller.Library.prototype.activate.apply( this, arguments );
    516543                },
    … …  
    519546                        // Stop watching for uploaded attachments.
    520547                        this.get('library').unobserve( wp.Uploader.queue );
     548
     549                        this.frame.content.off( null, null, this );
    521550                        media.controller.Library.prototype.deactivate.apply( this, arguments );
    522551                },
    523552
    524                 sidebar: function() {
    525                         media.controller.Library.prototype.sidebar.apply( this, arguments );
    526                         this.frame.sidebar.trigger('gallery-settings');
    527                         return this;
     553                gallerySettings: function() {
     554                        var library = this.get('library');
     555
     556                        if ( ! library )
     557                                return;
     558
     559                        library.gallery = library.gallery || new Backbone.Model();
     560
     561                        this.frame.content.view().sidebar.set({
     562                                gallery: new media.view.Settings.Gallery({
     563                                        controller: this,
     564                                        model:      library.gallery,
     565                                        priority:   40
     566                                })
     567                        });
    528568                }
    529569        });
    … …  
    10341074                className: 'media-frame',
    10351075                template:  media.template('media-frame'),
    1036                 regions:   ['menu','content','sidebar','toolbar'],
     1076                regions:   ['menu','content','toolbar'],
    10371077
    10381078                initialize: function() {
    … …  
    11091149
    11101150                iframeContent: function() {
    1111                         this.$el.addClass('hide-toolbar hide-sidebar');
     1151                        this.$el.addClass('hide-toolbar');
    11121152                        this.content.view( new media.view.Iframe({
    11131153                                controller: this
    … …  
    12161256                        this.content.on( 'activate:browse', this.browseContent, this );
    12171257                        this.content.on( 'activate:upload', this.uploadContent, this );
    1218                         this.sidebar.on( 'activate:clear', this.clearSidebar, this );
    1219                         this.sidebar.on( 'activate:settings', this.settingsSidebar, this );
    12201258                        this.toolbar.on( 'activate:select', this.selectToolbar, this );
    12211259
    … …  
    12551293                                upload:     state.get('upload'),
    12561294                                filters:    state.get('filterable'),
     1295                                display:    state.get('displaySettings'),
    12571296
    12581297                                AttachmentView: state.get('AttachmentView')
    … …  
    12611300
    12621301                uploadContent: function() {
    1263                         this.$el.addClass('hide-sidebar hide-toolbar');
     1302                        this.$el.addClass('hide-toolbar');
    12641303
    12651304                        this.content.view( new media.view.UploaderInline({
    12661305                                controller: this
    1267                         }) );
    1268                 },
    1269 
    1270                 // Sidebars
    1271                 clearSidebar: function() {
    1272                         this.sidebar.view( new media.view.Sidebar({
    1273                                 controller: this
    1274                         }) );
    1275                 },
    1276 
    1277                 settingsSidebar: function( options ) {
    1278                         var single = this.state().get('selection').single(),
    1279                                 views = {};
    1280 
    1281                         views.details = new media.view.Attachment.Details({
    1282                                 controller: this,
    1283                                 model:      single,
    1284                                 priority:   80
    1285                         }).render();
    1286 
    1287 
    1288                         if ( single.get('compat') ) {
    1289                                 views.compat = new media.view.AttachmentCompat({
    1290                                         controller: this,
    1291                                         model:      single,
    1292                                         priority:   120
    1293                                 }).render();
    1294                         }
    1295 
    1296                         this.sidebar.view( new media.view.Sidebar({
    1297                                 controller: this,
    1298                                 silent:     options && options.silent,
    1299                                 views:      views
    13001306                        }) );
    13011307                },
    … …  
    13711377                                        multiple:   this.options.multiple,
    13721378                                        menu:       'main',
    1373                                         sidebar:    'attachment-settings',
    1374 
     1379
     1380                                        // Show the attachment display settings.
     1381                                        displaySettings: true,
    13751382                                        // Update user settings when users adjust the
    13761383                                        // attachment display settings.
    … …  
    14231430                                        },
    14241431
    1425                                         sidebar: {
    1426                                                 'attachment-settings': 'attachmentSettingsSidebar'
    1427                                         },
    1428 
    14291432                                        toolbar: {
    14301433                                                'main-attachments': 'mainAttachmentsToolbar',
    … …  
    14401443                                }, this );
    14411444                        }, this );
    1442 
    1443                         this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
    14441445                },
    14451446
    … …  
    15041505                        }).render();
    15051506
    1506                         this.$el.addClass('hide-sidebar');
    15071507                        this.content.view( view );
    15081508                        view.url.focus();
    … …  
    15521552                                        model:      library.gallery,
    15531553                                        priority:   40
    1554                                 }).render()
    1555                         }, options );
    1556                 },
    1557 
    1558                 attachmentSettingsSidebar: function( options ) {
    1559                         var state = this.state(),
    1560                                 display = state.get('details'),
    1561                                 single = state.get('selection').single();
    1562 
    1563                         this.settingsSidebar({ silent: true });
    1564 
    1565                         display[ single.cid ] = display[ single.cid ] || new Backbone.Model({
    1566                                 align: getUserSetting( 'align', 'none' ),
    1567                                 size:  getUserSetting( 'imgsize', 'medium' ),
    1568                                 link:  getUserSetting( 'urlbutton', 'post' )
    1569                         });
    1570 
    1571                         this.sidebar.view().set({
    1572                                 display: new media.view.Settings.AttachmentDisplay({
    1573                                         controller:   this,
    1574                                         model:        display[ single.cid ],
    1575                                         attachment:   single,
    1576                                         priority:     160,
    1577                                         userSettings: state.get('displayUserSettings')
    15781554                                }).render()
    15791555                        }, options );
    … …  
    22432219                unset: function( id ) {
    22442220                        var view = this.get( id );
     2221
    22452222                        if ( view )
    2246                                 view.dispose();
     2223                                view.remove();
    22472224
    22482225                        delete this._views[ id ];
    … …  
    28792856
    28802857                initialize: function() {
    2881                         var filters, FiltersConstructor;
    2882 
    28832858                        this.controller = this.options.controller;
    28842859
    … …  
    28872862                                search:  true,
    28882863                                upload:  false,
     2864                                display: false,
    28892865
    28902866                                AttachmentView: media.view.Attachment.Library
    28912867                        });
     2868
     2869                        this.createToolbar();
     2870                        this.createAttachments();
     2871                        this.createSidebar();
     2872                },
     2873
     2874                dispose: function() {
     2875                        this.options.selection.off( null, null, this );
     2876                        media.View.prototype.dispose.apply( this, arguments );
     2877                        return this;
     2878                },
     2879
     2880                createToolbar: function() {
     2881                        var filters, FiltersConstructor;
    28922882
    28932883                        this.toolbar = new media.view.Toolbar({
    … …  
    29342924                                }, this.options.upload ) ).render() );
    29352925                        }
    2936 
     2926                },
     2927
     2928                createAttachments: function() {
    29372929                        this.attachments = new media.view.Attachments({
    29382930                                controller: this.controller,
    … …  
    29472939
    29482940                        this.views.add( this.attachments );
     2941                },
     2942
     2943                createSidebar: function() {
     2944                        this.sidebar = new media.view.Sidebar({
     2945                                controller: this.controller
     2946                        });
     2947
     2948                        this.views.add( this.sidebar );
     2949
     2950                        this.options.selection.on( 'selection:single', this.createSingle, this );
     2951                        this.options.selection.on( 'selection:unsingle', this.disposeSingle, this );
     2952                },
     2953
     2954                createSingle: function() {
     2955                        var sidebar = this.sidebar,
     2956                                single = this.options.selection.single(),
     2957                                views = {};
     2958
     2959                        sidebar.set( 'details', new media.view.Attachment.Details({
     2960                                controller: this.controller,
     2961                                model:      single,
     2962                                priority:   80
     2963                        }) );
     2964
     2965                        if ( single.get('compat') ) {
     2966                                sidebar.set( 'compat', new media.view.AttachmentCompat({
     2967                                        controller: this.controller,
     2968                                        model:      single,
     2969                                        priority:   120
     2970                                }) );
     2971                        }
     2972
     2973                        if ( this.options.display ) {
     2974                                sidebar.set( 'display', new media.view.Settings.AttachmentDisplay({
     2975                                        controller:   this.controller,
     2976                                        model:        this.model.display( single ),
     2977                                        attachment:   single,
     2978                                        priority:     160,
     2979                                        userSettings: this.model.get('displayUserSettings')
     2980                                }) );
     2981                        }
     2982                },
     2983
     2984                disposeSingle: function() {
     2985                        var sidebar = this.sidebar;
     2986                        sidebar.unset('details');
     2987                        sidebar.unset('compat');
     2988                        sidebar.unset('display');
    29492989                }
    29502990        });

  • trunk/wp-includes/media.php

    r22790 r22809  
    14051405                <div class="media-frame-menu"></div>
    14061406                <div class="media-frame-content"></div>
    1407                 <div class="media-frame-sidebar"></div>
    14081407                <div class="media-frame-toolbar"></div>
    14091408                <div class="media-frame-uploader"></div>
Note: See TracChangeset for help on using the changeset viewer.