WordPress.org
Get WordPress

Make WordPress Core

Changeset 22809


Ignore:
Timestamp:
11/22/2012 06:30:25 AM (12 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.