WordPress.org

Make WordPress Core

Ticket #22714: 22714.diff

File 22714.diff, 18.1 KB (added by koopersmith, 17 months ago)
  • wp-admin/js/custom-background.js

     
    2525 
    2626                        event.preventDefault(); 
    2727 
     28                        // If the media frame already exists, reopen it. 
    2829                        if ( frame ) { 
    2930                                frame.open(); 
    3031                                return; 
    3132                        } 
    3233 
     34                        // Create the media frame. 
    3335                        frame = wp.media({ 
    34                                 title:     $el.data('choose'), 
    35                                 library:   { 
     36                                // Set the title of the modal. 
     37                                title: $el.data('choose'), 
     38 
     39                                // Tell the modal to show only images. 
     40                                library: { 
    3641                                        type: 'image' 
     42                                }, 
     43 
     44                                // Customize the submit button. 
     45                                button: { 
     46                                        // Set the text of the button. 
     47                                        text: $el.data('update'), 
     48                                        // Tell the button not to close the modal, since we're 
     49                                        // going to refresh the page when the image is selected. 
     50                                        close: false 
    3751                                } 
    3852                        }); 
    3953 
    40                         frame.on( 'toolbar:render:select', function( view ) { 
    41                                 view.set({ 
    42                                         select: { 
    43                                                 style: 'primary', 
    44                                                 text:  $el.data('update'), 
     54                        // When an image is selected, run a callback. 
     55                        frame.on( 'select', function() { 
     56                                // Grab the selected attachment. 
     57                                var attachment = frame.state().get('selection').first(); 
    4558 
    46                                                 click: function() { 
    47                                                         var attachment = frame.state().get('selection').first(); 
    48                                                         $.post( ajaxurl, { 
    49                                                                 action: 'set-background-image', 
    50                                                                 attachment_id: attachment.id, 
    51                                                                 size: 'full' 
    52                                                         }, function() { 
    53                                                                 window.location.reload(); 
    54                                                         }); 
    55                                                 } 
    56                                         } 
     59                                // Run an AJAX request to set the background image. 
     60                                $.post( ajaxurl, { 
     61                                        action: 'set-background-image', 
     62                                        attachment_id: attachment.id, 
     63                                        size: 'full' 
     64                                }).done( function() { 
     65                                        // When the request completes, reload the window. 
     66                                        window.location.reload(); 
    5767                                }); 
    5868                        }); 
    5969 
    60                         frame.setState('library').open(); 
     70                        // Finally, open the modal. 
     71                        frame.open(); 
    6172                }); 
    6273        }); 
    6374})(jQuery); 
     75 No newline at end of file 
  • wp-admin/js/custom-header.js

     
    1818                        var $el = $(this); 
    1919                        event.preventDefault(); 
    2020 
     21                        // Create the media frame. 
    2122                        frame = wp.media({ 
    22                                 title:     $el.data('choose'), 
    23                                 library:   { 
     23                                // Set the title of the modal. 
     24                                title: $el.data('choose'), 
     25 
     26                                // Tell the modal to show only images. 
     27                                library: { 
    2428                                        type: 'image' 
     29                                }, 
     30 
     31                                // Customize the submit button. 
     32                                button: { 
     33                                        // Set the text of the button. 
     34                                        text: $el.data('update'), 
     35                                        // Tell the button not to close the modal, since we're 
     36                                        // going to refresh the page when the image is selected. 
     37                                        close: false 
    2538                                } 
    2639                        }); 
    2740 
    28                         frame.on( 'toolbar:render:select', function( view ) { 
    29                                 view.set({ 
    30                                         select: { 
    31                                                 style: 'primary', 
    32                                                 text:  $el.data('update'), 
     41                        // When an image is selected, run a callback. 
     42                        frame.on( 'select', function() { 
     43                                // Grab the selected attachment. 
     44                                var attachment = frame.state().get('selection').first(), 
     45                                        link = $el.data('updateLink'); 
    3346 
    34                                                 click: function() { 
    35                                                         var attachment = frame.state().get('selection').first(), 
    36                                                                 link = $el.data('updateLink'); 
    37  
    38                                                         window.location = link + '&file=' + attachment.id; 
    39                                                 } 
    40                                         } 
    41                                 }); 
     47                                // Tell the browser to navigate to the crop step. 
     48                                window.location = link + '&file=' + attachment.id; 
    4249                        }); 
    4350 
    44                         frame.setState('library').open(); 
     51                        frame.open(); 
    4552                }); 
    4653        }); 
    4754}(jQuery)); 
  • wp-includes/css/media-views.css

     
    11701170        background: red; 
    11711171} 
    11721172 
     1173.media-selection .selection-view { 
     1174        display: inline-block; 
     1175} 
     1176 
    11731177.media-selection .attachments { 
    11741178        display: inline-block; 
    11751179        height: 48px; 
  • wp-includes/js/media-views.js

     
    389389                }, 
    390390 
    391391                activate: function() { 
    392                         var library = this.get('library'), 
    393                                 selection = this.get('selection'), 
    394                                 mode; 
    395  
    396392                        if ( this.get('syncLastSelection') ) { 
    397393                                this.getLastSelection(); 
    398394                        } 
     
    404400 
    405401                        wp.Uploader.queue.on( 'add', this.uploading, this ); 
    406402 
    407                         selection.on( 'add remove reset', this.refreshSelection, this ); 
     403                        this.get('selection').on( 'add remove reset', this.refreshContent, this ); 
    408404 
    409405                        this.on( 'insert', this._insertDisplaySettings, this ); 
    410406 
     
    490486                        selection.reset( lastSelection.toArray() ).single( lastSelection.single() ); 
    491487                }, 
    492488 
    493                 refreshSelection: function() { 
    494                         this.frame.toolbar.get().refresh(); 
    495                         this.trigger( 'refresh:selection', this, this.get('selection') ); 
    496                         this.refreshContent(); 
    497                 }, 
    498  
    499489                refreshContent: function() { 
    500490                        var selection = this.get('selection'), 
    501491                                frame = this.frame, 
     
    13171307                }, 
    13181308 
    13191309                createToolbar: function( toolbar ) { 
    1320                         menu.view = new media.view.Toolbar({ 
     1310                        toolbar.view = new media.view.Toolbar({ 
    13211311                                controller: this 
    13221312                        }); 
    13231313                }, 
     
    14251415                        _.defaults( this.options, { 
    14261416                                selection: [], 
    14271417                                library:   {}, 
    1428                                 multiple:  false 
     1418                                multiple:  false, 
     1419                                state:    'library' 
    14291420                        }); 
    14301421 
    14311422                        this.createSelection(); 
     
    14681459                        this.on( 'content:create:browse', this.browseContent, this ); 
    14691460                        this.on( 'content:render:upload', this.uploadContent, this ); 
    14701461                        this.on( 'toolbar:create:select', this.createSelectToolbar, this ); 
    1471  
    1472                         this.on( 'refresh:selection', this.refreshSelectToolbar, this ); 
    14731462                }, 
    14741463 
    14751464                // Routers 
     
    15171506 
    15181507                // Toolbars 
    15191508                createSelectToolbar: function( toolbar, options ) { 
    1520                         options = _.defaults( options || {}, { 
    1521                                 event:  'select', 
    1522                                 silent: false, 
    1523                                 state:  false 
    1524                         }); 
     1509                        options = options || this.options.button || {}; 
     1510                        options.controller = this; 
    15251511 
    1526                         toolbar.view = new media.view.Toolbar({ 
    1527                                 controller: this, 
    1528                                 silent:     options.silent, 
    1529  
    1530                                 items: { 
    1531                                         select: { 
    1532                                                 style:    'primary', 
    1533                                                 text:     l10n.select, 
    1534                                                 priority: 80, 
    1535  
    1536                                                 click: function() { 
    1537                                                         var controller = this.controller; 
    1538  
    1539                                                         controller.close(); 
    1540                                                         controller.state().trigger( options.event ); 
    1541                                                         controller.reset(); 
    1542                                                         if ( options.state ) 
    1543                                                                 controller.setState( options.state ); 
    1544                                                 } 
    1545                                         } 
    1546                                 } 
    1547                         }); 
    1548                 }, 
    1549  
    1550                 refreshSelectToolbar: function() { 
    1551                         var selection = this.state().get('selection'); 
    1552  
    1553                         if ( ! selection || 'select' !== this.toolbar.mode() ) 
    1554                                 return; 
    1555  
    1556                         this.toolbar.get().get('select').model.set( 'disabled', ! selection.length ); 
     1512                        toolbar.view = new media.view.Toolbar.Select( options ); 
    15571513                } 
    15581514        }); 
    15591515 
     
    15641520                initialize: function() { 
    15651521                        _.defaults( this.options, { 
    15661522                                multiple:  true, 
    1567                                 editing:   false 
     1523                                editing:   false, 
     1524                                state:    'insert' 
    15681525                        }); 
    15691526 
    15701527                        media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments ); 
     
    16511608                bindHandlers: function() { 
    16521609                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments ); 
    16531610                        this.on( 'menu:create:gallery', this.createMenu, this ); 
    1654                         this.on( 'toolbar:create:main-insert', this.createSelectionToolbar, this ); 
    1655                         this.on( 'toolbar:create:main-gallery', this.createSelectionToolbar, this ); 
     1611                        this.on( 'toolbar:create:main-insert', this.createToolbar, this ); 
     1612                        this.on( 'toolbar:create:main-gallery', this.createToolbar, this ); 
     1613                        this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this ); 
     1614                        this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this ); 
    16561615 
    16571616                        var handlers = { 
    16581617                                        menu: { 
     
    16681627                                        toolbar: { 
    16691628                                                'main-insert':      'mainInsertToolbar', 
    16701629                                                'main-gallery':     'mainGalleryToolbar', 
    1671                                                 'main-embed':       'mainEmbedToolbar', 
    1672                                                 'featured-image':   'featuredImageToolbar', 
    16731630                                                'gallery-edit':     'galleryEditToolbar', 
    16741631                                                'gallery-add':      'galleryAddToolbar' 
    16751632                                        } 
     
    17571714                }, 
    17581715 
    17591716                // Toolbars 
    1760                 createSelectionToolbar: function( toolbar ) { 
    1761                         toolbar.view = new media.view.Toolbar.Selection({ 
     1717                selectionStatusToolbar: function( view ) { 
     1718                        var editable = this.state().get('editable'); 
     1719 
     1720                        view.set( 'selection', new media.view.Selection({ 
    17621721                                controller: this, 
    1763                                 editable:   this.state().get('editable') 
    1764                         }); 
     1722                                collection: this.state().get('selection'), 
     1723                                priority:   -40, 
     1724 
     1725                                // If the selection is editable, pass the callback to 
     1726                                // switch the content mode. 
     1727                                editable: editable && function() { 
     1728                                        this.controller.content.mode('edit-selection'); 
     1729                                } 
     1730                        }).render() ); 
    17651731                }, 
    17661732 
    17671733                mainInsertToolbar: function( view ) { 
    17681734                        var controller = this; 
    17691735 
    1770                         view.button = 'insert'; 
     1736                        this.selectionStatusToolbar( view ); 
     1737 
    17711738                        view.set( 'insert', { 
    17721739                                style:    'primary', 
    17731740                                priority: 80, 
    17741741                                text:     l10n.insertIntoPost, 
     1742                                requires: { selection: true }, 
    17751743 
    17761744                                click: function() { 
    17771745                                        var state = controller.state(), 
     
    17861754                mainGalleryToolbar: function( view ) { 
    17871755                        var controller = this; 
    17881756 
    1789                         view.button = 'gallery'; 
     1757                        this.selectionStatusToolbar( view ); 
     1758 
    17901759                        view.set( 'gallery', { 
    17911760                                style:    'primary', 
    17921761                                text:     l10n.createNewGallery, 
    17931762                                priority: 60, 
     1763                                requires: { selection: true }, 
    17941764 
    17951765                                click: function() { 
    17961766                                        var selection = controller.state().get('selection'), 
     
    18071777                        }); 
    18081778                }, 
    18091779 
    1810                 featuredImageToolbar: function() { 
    1811                         this.toolbar.set( new media.view.Toolbar.Select({ 
    1812                                 controller: this, 
    1813                                 text:       l10n.setFeaturedImage, 
    1814                                 state:      this.options.state || 'upload' 
    1815                         }) ); 
     1780                featuredImageToolbar: function( toolbar ) { 
     1781                        this.createSelectToolbar( toolbar, { 
     1782                                text:  l10n.setFeaturedImage, 
     1783                                state: this.options.state || 'upload' 
     1784                        }); 
    18161785                }, 
    18171786 
    1818                 mainEmbedToolbar: function() { 
    1819                         this.toolbar.set( new media.view.Toolbar.Embed({ 
     1787                mainEmbedToolbar: function( toolbar ) { 
     1788                        toolbar.view = new media.view.Toolbar.Embed({ 
    18201789                                controller: this 
    1821                         }) ); 
    1822  
    1823                         this.$el.removeClass('hide-toolbar'); 
     1790                        }); 
    18241791                }, 
    18251792 
    18261793                galleryEditToolbar: function() { 
     
    18321799                                                style:    'primary', 
    18331800                                                text:     editing ? l10n.updateGallery : l10n.insertGallery, 
    18341801                                                priority: 80, 
     1802                                                requires: { library: true }, 
    18351803 
    18361804                                                click: function() { 
    18371805                                                        var controller = this.controller, 
     
    22202188                className: 'media-toolbar', 
    22212189 
    22222190                initialize: function() { 
    2223                         this._views     = {}; 
    2224                         this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el ); 
    2225                         this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el ); 
     2191                        var state = this.controller.state(), 
     2192                                selection = this.selection = state.get('selection'), 
     2193                                library = this.library = state.get('library'); 
    22262194 
     2195                        this._views = {}; 
     2196 
     2197                        // The toolbar is composed of two `PriorityList` views. 
     2198                        this.primary   = new media.view.PriorityList(); 
     2199                        this.secondary = new media.view.PriorityList(); 
     2200                        this.primary.$el.addClass('media-toolbar-primary'); 
     2201                        this.secondary.$el.addClass('media-toolbar-secondary'); 
     2202 
     2203                        this.views.set([ this.secondary, this.primary ]); 
     2204 
    22272205                        if ( this.options.items ) 
    22282206                                this.set( this.options.items, { silent: true }); 
    22292207 
    22302208                        if ( ! this.options.silent ) 
    22312209                                this.render(); 
     2210 
     2211                        selection.on( 'add remove reset', this.refresh, this ); 
     2212                        library.on( 'add remove reset', this.refresh, this ); 
    22322213                }, 
    22332214 
    2234                 destroy: function() { 
    2235                         this.remove(); 
    2236  
    2237                         if ( this.model ) 
    2238                                 this.model.off( null, null, this ); 
    2239  
    2240                         if ( this.collection ) 
    2241                                 this.collection.off( null, null, this ); 
    2242  
    2243                         this.controller.off( null, null, this ); 
    2244  
    2245                         _.each( this._views, function( view ) { 
    2246                                 if ( view.destroy ) 
    2247                                         view.destroy(); 
    2248                         }); 
     2215                dispose: function() { 
     2216                        this.selection.off( null, null, this ); 
     2217                        this.library.off( null, null, this ); 
     2218                        return media.View.prototype.dispose.apply( this, arguments ); 
    22492219                }, 
    22502220 
    2251                 render: function() { 
    2252                         var views = _.chain( this._views ).sortBy( function( view ) { 
    2253                                 return view.options.priority || 10; 
    2254                         }).groupBy( function( view ) { 
    2255                                 return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary'; 
    2256                         }).value(); 
    2257  
    2258                         // Make sure to detach the elements we want to reuse. 
    2259                         // Otherwise, `jQuery.html()` will unbind their events. 
    2260                         $( _.pluck( this._views, 'el' ) ).detach(); 
    2261                         this.$primary.html( _.pluck( views.primary || [], 'el' ) ); 
    2262                         this.$secondary.html( _.pluck( views.secondary || [], 'el' ) ); 
    2263  
     2221                ready: function() { 
    22642222                        this.refresh(); 
    2265  
    2266                         return this; 
    22672223                }, 
    22682224 
    22692225                set: function( id, view, options ) { 
     2226                        var list; 
    22702227                        options = options || {}; 
    22712228 
    22722229                        // Accept an object with an `id` : `view` mapping. 
     
    22842241                                view.controller = view.controller || this.controller; 
    22852242 
    22862243                                this._views[ id ] = view; 
     2244 
     2245                                list = view.options.priority < 0 ? 'secondary' : 'primary'; 
     2246                                this[ list ].set( id, view, options ); 
    22872247                        } 
    22882248 
    22892249                        if ( ! options.silent ) 
    2290                                 this.render(); 
     2250                                this.refresh(); 
     2251 
    22912252                        return this; 
    22922253                }, 
    22932254 
     
    22972258 
    22982259                unset: function( id, options ) { 
    22992260                        delete this._views[ id ]; 
     2261                        this.primary.unset( id, options ); 
     2262                        this.secondary.unset( id, options ); 
     2263 
    23002264                        if ( ! options || ! options.silent ) 
    2301                                 this.render(); 
     2265                                this.refresh(); 
    23022266                        return this; 
    23032267                }, 
    23042268 
    2305                 refresh: function() {} 
     2269                refresh: function() { 
     2270                        var state = this.controller.state(), 
     2271                                library = state.get('library'), 
     2272                                selection = state.get('selection'); 
     2273 
     2274                        _.each( this._views, function( button ) { 
     2275                                if ( ! button.model || ! button.options || ! button.options.requires ) 
     2276                                        return; 
     2277 
     2278                                var requires = button.options.requires, 
     2279                                        disabled = false; 
     2280 
     2281                                if ( requires.selection && ! selection.length ) 
     2282                                        disabled = true; 
     2283                                else if ( requires.library && ! library.length ) 
     2284                                        disabled = true; 
     2285 
     2286                                button.model.set( 'disabled', disabled ); 
     2287                        }); 
     2288                } 
    23062289        }); 
    23072290 
    23082291        // wp.media.view.Toolbar.Select 
     
    23202303                                state: false, 
    23212304                                reset: true, 
    23222305                                close: true, 
    2323                                 text:  l10n.select 
     2306                                text:  l10n.select, 
     2307 
     2308                                // Does the button rely on the selection? 
     2309                                requires: { 
     2310                                        selection: true 
     2311                                } 
    23242312                        }); 
    23252313 
    23262314                        options.items = _.defaults( options.items || {}, { 
     
    23282316                                        style:    'primary', 
    23292317                                        text:     options.text, 
    23302318                                        priority: 80, 
    2331                                         click:    this.clickSelect 
     2319                                        click:    this.clickSelect, 
     2320                                        requires: options.requires 
    23322321                                } 
    23332322                        }); 
    23342323 
     
    23652354                        this.controller.state().props.on( 'change:url', this.refresh, this ); 
    23662355                }, 
    23672356 
     2357                dispose: function() { 
     2358                        this.controller.state().props.off( 'change:url', this.refresh, this ); 
     2359                        media.view.Toolbar.Select.prototype.dispose.apply( this, arguments ); 
     2360                }, 
     2361 
    23682362                refresh: function() { 
    23692363                        var url = this.controller.state().props.get('url'); 
    23702364                        this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) ); 
    2371                 } 
    2372         }); 
    23732365 
    2374         // wp.media.view.Toolbar.Selection 
    2375         // ------------------------------- 
    2376         media.view.Toolbar.Selection = media.view.Toolbar.extend({ 
    2377                 button: 'insert', 
    2378  
    2379                 initialize: function() { 
    2380                         var controller = this.controller; 
    2381  
    2382                         this.options.items = _.defaults( this.options.items || {}, { 
    2383                                 selection: new media.view.Selection({ 
    2384                                         controller: controller, 
    2385                                         collection: controller.state().get('selection'), 
    2386                                         priority:   -40, 
    2387  
    2388                                         // If the selection is editable, pass the callback to 
    2389                                         // switch the content mode. 
    2390                                         editable: this.options.editable && function() { 
    2391                                                 this.controller.content.mode('edit-selection'); 
    2392                                         } 
    2393                                 }).render() 
    2394                         }); 
    2395  
    2396                         media.view.Toolbar.prototype.initialize.apply( this, arguments ); 
    2397                 }, 
    2398  
    2399                 refresh: function() { 
    2400                         var selection = this.controller.state().get('selection'), 
    2401                                 button = this.get( this.button ); 
    2402  
    2403                         if ( ! button ) 
    2404                                 return; 
    2405  
    2406                         button.model.set( 'disabled', ! selection.length ); 
     2366                        media.view.Toolbar.Select.prototype.refresh.apply( this, arguments ); 
    24072367                } 
    24082368        }); 
    24092369 
     
    25162476                                this.render(); 
    25172477                }, 
    25182478 
    2519                 destroy: this.dispose, 
    2520  
    25212479                set: function( id, view, options ) { 
    25222480                        var priority, views, index; 
    25232481 
     
    36493607                                AttachmentView: media.view.Attachment.Selection 
    36503608                        }); 
    36513609 
     3610                        this.views.set( '.selection-view', this.attachments ); 
    36523611                        this.collection.on( 'add remove reset', this.refresh, this ); 
    36533612                }, 
    36543613 
    3655                 destroy: function() { 
    3656                         this.remove(); 
    3657                         this.collection.off( 'add remove reset', this.refresh, this ); 
    3658                         this.attachments.destroy(); 
    3659                 }, 
    3660  
    3661                 render: function() { 
    3662                         this.attachments.$el.detach(); 
    3663                         this.attachments.render(); 
    3664  
    3665                         this.$el.html( this.template( this.options ) ); 
    3666  
    3667                         this.$('.selection-view').replaceWith( this.attachments.$el ); 
     3614                ready: function() { 
    36683615                        this.refresh(); 
    3669                         return this; 
    36703616                }, 
    36713617 
    36723618                refresh: function() { 
     
    37283674                        this.model.on( 'change', this.updateChanges, this ); 
    37293675                }, 
    37303676 
    3731                 destroy: function() { 
    3732                         this.model.off( null, null, this ); 
    3733                 }, 
    3734  
    37353677                render: function() { 
    37363678                        this.$el.html( this.template( _.defaults({ 
    37373679                                model: this.model.toJSON() 
     
    39343876                        this.model.on( 'change:compat', this.render, this ); 
    39353877                }, 
    39363878 
    3937                 destroy: function() { 
    3938                         this.model.off( null, null, this ); 
    3939                 }, 
    3940  
    39413879                render: function() { 
    39423880                        var compat = this.model.get('compat'); 
    39433881                        if ( ! compat || ! compat.item ) 
     
    40053943                settings: function( view ) { 
    40063944                        view.render(); 
    40073945                        this._settings.$el.replaceWith( view.$el ); 
    4008                         if ( this._settings.destroy ) 
    4009                                 this._settings.destroy(); 
    40103946                        this._settings.remove(); 
    40113947                        this._settings = view; 
    40123948                }, 
     
    40553991                        this.model.on( 'change:url', this.render, this ); 
    40563992                }, 
    40573993 
    4058                 destroy: function() { 
    4059                         this.model.off( null, null, this ); 
    4060                 }, 
    4061  
    40623994                render: function() { 
    40633995                        var $input = this.$input; 
    40643996 
     
    41014033                        this.model.on( 'change:url', this.updateImage, this ); 
    41024034                }, 
    41034035 
    4104                 destroy: function() { 
    4105                         this.model.off( null, null, this ); 
    4106                         media.view.Settings.AttachmentDisplay.prototype.destroy.apply( this, arguments ); 
    4107                 }, 
    4108  
    41094036                updateImage: function() { 
    41104037                        this.$('img').attr( 'src', this.model.get('url') ); 
    41114038                }