Make WordPress Core

Changeset 28752


Ignore:
Timestamp:
06/13/2014 09:41:20 PM (10 years ago)
Author:
wonderboymusic
Message:

Add "edit" mode for [embed] and URL media previews.

See #28532.

Location:
trunk/src/wp-includes/js
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r28748 r28752  
    811811    } );
    812812
    813     wp.mce.views.register( 'embed', {
    814         View: wp.mce.embedView
    815     } );
    816 
    817     wp.mce.views.register( 'embedURL', {
     813    wp.mce.embedMixin = {
     814        View: wp.mce.embedView,
     815        edit: function( node ) {
     816            var embed = media.embed,
     817                self = this,
     818                frame,
     819                data,
     820                isURL = 'embedURL' === this.shortcode;
     821
     822            $( document ).trigger( 'media:edit' );
     823
     824            data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
     825            frame = embed.edit( data, isURL );
     826            frame.on( 'close', function() {
     827                frame.detach();
     828            } );
     829            frame.state( 'embed' ).props.on( 'change:url', function (model, url) {
     830                if ( ! url ) {
     831                    return;
     832                }
     833                frame.state( 'embed' ).metadata = model.toJSON();
     834            } );
     835            frame.state( 'embed' ).on( 'select', function() {
     836                var shortcode;
     837
     838                if ( isURL ) {
     839                    shortcode = frame.state( 'embed' ).metadata.url;
     840                } else {
     841                    shortcode = embed.shortcode( frame.state( 'embed' ).metadata ).string();
     842                }
     843                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     844                wp.mce.views.refreshView( self, shortcode );
     845                frame.detach();
     846            } );
     847            frame.open();
     848        }
     849    };
     850
     851    wp.mce.views.register( 'embed', _.extend( {}, wp.mce.embedMixin ) );
     852
     853    wp.mce.views.register( 'embedURL', _.extend( {}, wp.mce.embedMixin, {
    818854        toView: function( content ) {
    819855            var re = /(?:^|<p>)(https?:\/\/[^\s"]+?)(?:<\/p>\s*|$)/gi,
     
    831867                }
    832868            };
    833         },
    834         View: wp.mce.embedView
    835     } );
     869        }
     870    } ) );
    836871
    837872}(jQuery));
  • trunk/src/wp-includes/js/media-editor.js

    r28149 r28752  
    299299    };
    300300
     301    wp.media.embed = {
     302        coerce : wp.media.coerce,
     303
     304        defaults : {
     305            url : '',
     306            width: '',
     307            height: ''
     308        },
     309
     310        edit : function( data, isURL ) {
     311            var frame, props = {}, shortcode;
     312
     313            if ( isURL ) {
     314                props.url = data.replace(/<[^>]+>/g, '');
     315            } else {
     316                shortcode = wp.shortcode.next( 'embed', data ).shortcode;
     317
     318                props = _.defaults( shortcode.attrs.named, this.defaults );
     319                if ( shortcode.content ) {
     320                    props.url = shortcode.content;
     321                }
     322            }
     323
     324            frame = wp.media({
     325                frame: 'post',
     326                state: 'embed',
     327                metadata: props
     328            });
     329
     330            return frame;
     331        },
     332
     333        shortcode : function( model ) {
     334            var self = this, content;
     335
     336            _.each( this.defaults, function( value, key ) {
     337                model[ key ] = self.coerce( model, key );
     338
     339                if ( value === model[ key ] ) {
     340                    delete model[ key ];
     341                }
     342            });
     343
     344            content = model.url;
     345            delete model.url;
     346
     347            return new wp.shortcode({
     348                tag: 'embed',
     349                attrs: model,
     350                content: content
     351            });
     352        }
     353    };
     354
    301355    wp.media.collection = function(attributes) {
    302356        var collections = {};
  • trunk/src/wp-includes/js/media-views.js

    r28697 r28752  
    14031403            priority: 120,
    14041404            type:     'link',
    1405             url:      ''
     1405            url:      '',
     1406            metadata: {}
    14061407        },
    14071408
     
    14091410        sensitivity: 200,
    14101411
    1411         initialize: function() {
     1412        initialize: function(options) {
     1413            this.metadata = options.metadata;
    14121414            this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
    1413             this.props = new Backbone.Model({ url: '' });
     1415            this.props = new Backbone.Model( this.metadata || { url: '' });
    14141416            this.props.on( 'change:url', this.debouncedScan, this );
    14151417            this.props.on( 'change:url', this.refresh, this );
     
    22792281                multiple:  true,
    22802282                editing:   false,
    2281                 state:    'insert'
     2283                state:    'insert',
     2284                metadata:  {}
    22822285            });
    22832286            /**
     
    23312334
    23322335                // Embed states.
    2333                 new media.controller.Embed(),
     2336                new media.controller.Embed( { metadata: options.metadata } ),
    23342337
    23352338                new media.controller.EditImage( { model: options.editImage } ),
     
    64416444
    64426445        initialize: function() {
    6443             this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') );
     6446            var self = this;
     6447
     6448            this.$input = $('<input id="embed-url-field" type="text" />').val( this.model.get('url') );
    64446449            this.input = this.$input[0];
    64456450
     
    64486453
    64496454            this.model.on( 'change:url', this.render, this );
     6455
     6456            if ( this.model.get( 'url' ) ) {
     6457                _.delay( function () {
     6458                    self.model.trigger( 'change:url' );
     6459                }, 500 );
     6460            }
    64506461        },
    64516462        /**
Note: See TracChangeset for help on using the changeset viewer.