WordPress.org
Get WordPress

Make WordPress Core

Changeset 22648


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

Media: Add a base view class.

  • Centralizes view and subview management, unifying several disjointed constructs.
  • Utilizes the dispose functionality found in Backbone master, providing a standard method for memory management.

see #21390.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r22612 r22648  
    109109}
    110110
    111 .media-frame > .media-toolbar {
     111.media-frame-toolbar > .media-toolbar {
    112112    top: auto;
    113113    left: 200px;
    … …  
    117117}
    118118
    119 .media-frame.hide-toolbar > .media-toolbar {
     119.hide-toolbar .media-frame-toolbar > .media-toolbar {
    120120    bottom: -61px;
    121121}

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

    r22612 r22648  
    6161     */
    6262    media.controller.Region = function( options ) {
    63         _.extend( this, _.pick( options || {}, 'id', 'controller' ) );
     63        _.extend( this, _.pick( options || {}, 'id', 'controller', 'selector' ) );
    6464
    6565        this.on( 'activate:empty', this.empty, this );
    … …  
    114114                view.$el.addClass( 'mode-' + mode );
    115115
    116             // Remove the hide class.
    117             // this.$el.removeClass( 'hide-' + subview );
    118 
    119             if ( previous ) {
    120                 // Replace the view in place.
    121                 previous.$el.replaceWith( view.$el );
    122 
    123                 // Fire the view's `destroy` event if it exists.
    124                 if ( previous.destroy )
    125                     previous.destroy();
    126                 // Undelegate events.
    127                 previous.undelegateEvents();
    128             }
    129 
     116            this.controller.views.set( this.selector, view );
    130117            this._view = view;
    131118        },
    132119
    133120        empty: function() {
    134             this.view( new Backbone.View() );
     121            this.view( new media.View() );
    135122        }
    136123    });
    … …  
    575562     */
    576563
     564    // wp.media.Views
     565    // -------------
     566    //
     567    // A subview manager.
     568
     569    media.Views = function( view, views ) {
     570        this.view = view;
     571        this._views = _.isArray( views ) ? { '': views } : views || {};
     572    };
     573
     574    media.Views.extend = Backbone.Model.extend;
     575
     576    _.extend( media.Views.prototype, {
     577        get: function( selector ) {
     578            selector = selector || '';
     579            return this._views[ selector ];
     580        },
     581
     582        set: function( selector, views, options ) {
     583            var $selector, els, existing, add, method;
     584
     585            if ( ! _.isString( selector ) ) {
     586                options  = views;
     587                views    = selector;
     588                selector = '';
     589            }
     590
     591            views    = _.isArray( views ) ? views : [ views ];
     592            add      = options && options.add;
     593            existing = this.get( selector );
     594            method   = add ? 'attach' : 'replace';
     595
     596            if ( ! add && existing ) {
     597                this.unset( selector );
     598                _.invoke( existing, 'dispose' );
     599            }
     600
     601            this._views[ selector ] = add && existing ? existing.concat( views ) : views;
     602
     603            $selector = selector ? this.view.$( selector ) : this.view.$el;
     604            els = _.pluck( views, 'el' );
     605
     606            _.each( views, function( subview ) {
     607                var subviews = subview.views = subview.views || new this.constructor( subview );
     608                subviews.parent   = this.view;
     609                subviews.selector = selector;
     610            }, this );
     611
     612            this[ method ]( $selector, els );
     613            return this;
     614        },
     615
     616        add: function( selector, views ) {
     617            return this.set( selector, views, { add: true });
     618        },
     619
     620        unset: function( selector, views ) {
     621            var existing;
     622
     623            if ( ! _.isString( selector ) ) {
     624                views = selector;
     625                selector = '';
     626            }
     627
     628            views = _.isArray( views ) ? views : [ views ];
     629
     630            if ( existing = this.get( selector ) )
     631                this._views[ selector ] = _.difference( existing, views );
     632
     633            return this;
     634        },
     635
     636        render: function() {
     637            var root = this._views[''];
     638
     639            if ( root )
     640                this.replace( this.view.$el, _.pluck( root, 'el' ) );
     641
     642            _.each( this._views, function( views, selector ) {
     643                if ( selector )
     644                    this.replace( this.view.$( selector ), _.pluck( views, 'el' ) );
     645            }, this );
     646
     647            return this;
     648        },
     649
     650        dispose: function() {
     651            delete this.parent;
     652            delete this.selector;
     653
     654            _.chain( this._views ).flatten().invoke('dispose');
     655            this._views = [];
     656        },
     657
     658        replace: function( $target, els ) {
     659            if ( this.view.replace )
     660                return this.view.replace( $target, els );
     661
     662            $target.html( els );
     663        },
     664
     665        attach: function( $target, els ) {
     666            if ( this.view.attach )
     667                return this.view.attach( $target, els );
     668
     669            $target.append( els );
     670        }
     671    });
     672
     673    // wp.media.View
     674    // -------------
     675    //
     676    // The base view class.
     677    media.View = Backbone.View.extend({
     678        constructor: function() {
     679            this.views = new media.Views( this, this.views );
     680            Backbone.View.apply( this, arguments );
     681        },
     682
     683        dispose: function() {
     684            // Undelegating events, removing events from the model, and
     685            // removing events from the controller mirror the code for
     686            // `Backbone.View.dispose` in Backbone master.
     687            this.undelegateEvents();
     688
     689            if ( this.model && this.model.off )
     690                this.model.off( null, null, this );
     691
     692            if ( this.collection && this.collection.off )
     693                this.collection.off( null, null, this );
     694
     695            // Recursively dispose child views.
     696            if ( this.views )
     697                this.views.dispose();
     698
     699            return this;
     700        },
     701
     702        remove: function() {
     703            this.dispose();
     704            return Backbone.View.prototype.remove.apply( this, arguments );
     705        }
     706    });
     707
    577708    /**
    578709     * wp.media.view.Frame
    579710     */
    580     media.view.Frame = Backbone.View.extend({
    581 
     711    media.view.Frame = media.View.extend({
    582712        initialize: function() {
    583713            this._createRegions();
    … …  
    593723                this[ region ] = new media.controller.Region({
    594724                    controller: this,
    595                     id:         region
     725                    id:         region,
     726                    selector:   '.media-frame-' + region
    596727                });
    597728            }, this );
    … …  
    611742
    612743        render: function() {
    613             var els = _.map( this.regions, function( region ) {
    614                     return this[ region ].view().el;
    615                 }, this );
    616 
    617             // Detach the current views to maintain event bindings.
    618             $( els ).detach();
    619             this.$el.html( els );
    620 
     744            if ( ! this.template )
     745                return;
     746
     747            this.$el.html( this.template( this.options ) );
     748            this.views.render();
    621749            return this;
    622750        },
    … …  
    636764    media.view.MediaFrame = media.view.Frame.extend({
    637765        className: 'media-frame',
     766        template:  media.template('media-frame'),
    638767        regions:   ['menu','content','sidebar','toolbar'],
    639768
    … …  
    10851214
    10861215            this.menu.view().add({
    1087                 separateLibrary: new Backbone.View({
     1216                separateLibrary: new media.View({
    10881217                    className: 'separator',
    10891218                    priority: 60
    … …  
    11131242                        }
    11141243                    },
    1115                     separateCancel: new Backbone.View({
     1244                    separateCancel: new media.View({
    11161245                        className: 'separator',
    11171246                        priority: 40
    … …  
    11501279                        }
    11511280                    },
    1152                     separateCancel: new Backbone.View({
     1281                    separateCancel: new media.View({
    11531282                        className: 'separator',
    11541283                        priority: 40
    … …  
    13701499     * wp.media.view.Modal
    13711500     */
    1372     media.view.Modal = Backbone.View.extend({
     1501    media.view.Modal = media.View.extend({
    13731502        tagName:  'div',
    13741503        template: media.template('media-modal'),
    … …  
    14461575    // wp.media.view.UploaderWindow
    14471576    // ----------------------------
    1448     media.view.UploaderWindow = Backbone.View.extend({
     1577    media.view.UploaderWindow = media.View.extend({
    14491578        tagName:   'div',
    14501579        className: 'uploader-window',
    … …  
    15251654    });
    15261655
    1527     media.view.UploaderInline = Backbone.View.extend({
     1656    media.view.UploaderInline = media.View.extend({
    15281657        tagName:   'div',
    15291658        className: 'uploader-inline',
    … …  
    15811710     * wp.media.view.Toolbar
    15821711     */
    1583     media.view.Toolbar = Backbone.View.extend({
     1712    media.view.Toolbar = media.View.extend({
    15841713        tagName:   'div',
    15851714        className: 'media-toolbar',
    … …  
    18171946     * wp.media.view.Button
    18181947     */
    1819     media.view.Button = Backbone.View.extend({
     1948    media.view.Button = media.View.extend({
    18201949        tagName:    'a',
    18211950        className:  'media-button',
    … …  
    18932022     * wp.media.view.ButtonGroup
    18942023     */
    1895     media.view.ButtonGroup = Backbone.View.extend({
     2024    media.view.ButtonGroup = media.View.extend({
    18962025        tagName:   'div',
    18972026        className: 'button-group button-large media-button-group',
    … …  
    19212050     */
    19222051
    1923     media.view.PriorityList = Backbone.View.extend({
     2052    media.view.PriorityList = media.View.extend({
    19242053        tagName:   'div',
    19252054
    … …  
    19282057            this._views     = {};
    19292058
    1930             this.add( _.extend( {}, this.views, this.options.views ), { silent: true });
    1931             delete this.views;
     2059            this.add( _.extend( {}, this._views, this.options.views ), { silent: true });
    19322060            delete this.options.views;
    19332061
    … …  
    19942122
    19952123        toView: function( options ) {
    1996             return new Backbone.View( options );
     2124            return new media.View( options );
    19972125        }
    19982126    });
    … …  
    20272155    });
    20282156
    2029     media.view.MenuItem = Backbone.View.extend({
     2157    media.view.MenuItem = media.View.extend({
    20302158        tagName:   'li',
    20312159        className: 'media-menu-item',
    … …  
    20662194     * wp.media.view.Attachment
    20672195     */
    2068     media.view.Attachment = Backbone.View.extend({
     2196    media.view.Attachment = media.View.extend({
    20692197        tagName:   'li',
    20702198        className: 'attachment',
    … …  
    22642392     * wp.media.view.Attachments
    22652393     */
    2266     media.view.Attachments = Backbone.View.extend({
     2394    media.view.Attachments = media.View.extend({
    22672395        tagName:   'ul',
    22682396        className: 'attachments',
    … …  
    24552583     * wp.media.view.Search
    24562584     */
    2457     media.view.Search = Backbone.View.extend({
     2585    media.view.Search = media.View.extend({
    24582586        tagName:   'input',
    24592587        className: 'search',
    … …  
    24882616     * wp.media.view.AttachmentsBrowser
    24892617     */
    2490     media.view.AttachmentsBrowser = Backbone.View.extend({
     2618    media.view.AttachmentsBrowser = media.View.extend({
    24912619        tagName:   'div',
    24922620        className: 'attachments-browser',
    … …  
    25162644
    25172645            if ( this.options.sortable ) {
    2518                 this.toolbar.set( 'dragInfo', new Backbone.View({
     2646                this.toolbar.set( 'dragInfo', new media.View({
    25192647                    el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
    25202648                    priority: -40
    … …  
    25602688     * wp.media.view.SelectionPreview
    25612689     */
    2562     media.view.SelectionPreview = Backbone.View.extend({
     2690    media.view.SelectionPreview = media.View.extend({
    25632691        tagName:   'div',
    25642692        className: 'selection-preview',
    … …  
    26112739     * wp.media.view.Selection
    26122740     */
    2613     media.view.Selection = Backbone.View.extend({
     2741    media.view.Selection = media.View.extend({
    26142742        tagName:   'div',
    26152743        className: 'media-selection',
    … …  
    27082836     * wp.media.view.Settings
    27092837     */
    2710     media.view.Settings = Backbone.View.extend({
     2838    media.view.Settings = media.View.extend({
    27112839        events: {
    27122840            'click button':    'updateHandler',
    … …  
    28542982     * wp.media.view.AttachmentCompat
    28552983     */
    2856     media.view.AttachmentCompat = Backbone.View.extend({
     2984    media.view.AttachmentCompat = media.View.extend({
    28572985        tagName:   'form',
    28582986        className: 'compat-item',
    … …  
    29023030     * wp.media.view.Iframe
    29033031     */
    2904     media.view.Iframe = Backbone.View.extend({
     3032    media.view.Iframe = media.View.extend({
    29053033        className: 'media-iframe',
    29063034
    … …  
    29183046     * wp.media.view.Embed
    29193047     */
    2920     media.view.Embed = Backbone.View.extend({
     3048    media.view.Embed = media.View.extend({
    29213049        className: 'media-embed',
    29223050
    … …  
    29293057            }).render();
    29303058
    2931             this._settings = new Backbone.View();
     3059            this._settings = new media.View();
    29323060            this.refresh();
    29333061            this.model.on( 'change:type', this.refresh, this );
    … …  
    29713099     * wp.media.view.EmbedUrl
    29723100     */
    2973     media.view.EmbedUrl = Backbone.View.extend({
     3101    media.view.EmbedUrl = media.View.extend({
    29743102        tagName:   'label',
    29753103        className: 'embed-url',

  • trunk/wp-includes/media.php

    r22608 r22648  
    13921392function wp_print_media_templates( $attachment ) {
    13931393    ?>
     1394    <script type="text/html" id="tmpl-media-frame">
     1395        <div class="media-frame-menu"></div>
     1396        <div class="media-frame-content"></div>
     1397        <div class="media-frame-sidebar"></div>
     1398        <div class="media-frame-toolbar"></div>
     1399    </script>
     1400
    13941401    <script type="text/html" id="tmpl-media-modal">
    13951402        <div class="media-modal">
Note: See TracChangeset for help on using the changeset viewer.