WordPress.org

Make WordPress Core

Changeset 22809


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