Changeset 22547

Timestamp:

11/12/2012 05:57:12 AM (13 years ago)

Author:

koopersmith

Message:

Media: Add Embed from URL tab.

Note: There is a bug that currently blocks adding several successive embeds.

see #21390.

Location:

trunk

Files:

• wp-admin/includes/meta-boxes.php (modified) (1 diff)
• wp-admin/js/custom-background.js (modified) (1 diff)
• wp-admin/js/custom-header.js (modified) (1 diff)
• wp-admin/js/media-upload.js (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (5 diffs)
• wp-includes/js/media-views.js (modified) (19 diffs)
• wp-includes/media.php (modified) (5 diffs)

trunk/wp-admin/includes/meta-boxes.php

@@ -1054 +1054 @@
 
             frame.toolbar.on( 'activate:select', function() {
-                frame.toolbar.view().add({
+                frame.toolbar.view().set({
                     select: {
                         style: 'primary',

trunk/wp-admin/js/custom-background.js

@@ -39 +39 @@
 
             frame.toolbar.on( 'activate:select', function() {
-                frame.toolbar.view().add({
+                frame.toolbar.view().set({
                     select: {
                         style: 'primary',

trunk/wp-admin/js/custom-header.js

@@ -26 +26 @@
 
             frame.toolbar.on( 'activate:select', function() {
-                frame.toolbar.view().add({
+                frame.toolbar.view().set({
                     select: {
                         style: 'primary',

trunk/wp-admin/js/media-upload.js

@@ -145 +145 @@
             }, this );
 
+            workflow.get('embed').on( 'select', function() {
+                var embed = workflow.state().toJSON(),
+                    options;
+
+                if ( 'link' === embed.type ) {
+                    this.insert( wp.html.string({
+                        tag:     'a',
+                        content: embed.title || embed.url,
+                        attrs:   {
+                            href: embed.url
+                        }
+                    }) );
+
+                } else if ( 'image' === embed.type ) {
+                    _.defaults( embed, {
+                        align:   'none',
+                        url:     '',
+                        alt:     '',
+                        linkUrl: '',
+                        link:    'none'
+                    });
+
+                    options = {
+                        single: true,
+                        tag:    'img',
+                        attrs:  {
+                            'class': 'align' + embed.align,
+                            src:     embed.url,
+                            alt:     embed.alt
+                        }
+                    };
+
+                    if ( 'custom' === embed.link || 'file' === embed.link ) {
+                        options = {
+                            tag:     'a',
+                            content: options,
+                            attrs:   {
+                                href: 'custom' === embed.link ? embed.linkUrl : embed.url
+                            }
+                        };
+                    }
+
+                    this.insert( wp.html.string( options ) );
+                }
+            }, this );
+
             return workflow;
         },

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

@@ +1 @@
+/**
+ * Base Styles
+ */
+
+.media-frame input,
+.media-frame textarea {
+    padding: 6px 8px;
+    line-height: 16px;
+}
+
+.media-frame select,
+.wp-admin .media-frame select {
+    height: 28px;
+    line-height: 28px;
+    margin-top: 3px;
+}
+
 /**
  * Modal
@@ -97 +114 @@
     bottom: 0;
     border-width: 1px 0 0 0;
+    box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
 }
 
@@ -218 +236 @@
 
 .media-sidebar .setting input,
-.media-sidebar .setting textarea,
-.compat-item .field input,
-.compat-item .field textarea {
-    padding: 6px 8px;
-    line-height: 16px;
-}
-
-.media-sidebar .setting input,
 .media-sidebar .setting textarea {
     width: 65%;
@@ -237 +247 @@
 }
 
-.media-sidebar .setting select,
-.compat-item .field select {
-    height: 28px;
-    line-height: 28px;
+.media-sidebar select {
     margin-top: 3px;
 }
@@ -986 +993 @@
     overflow: hidden;
 }
+
+/**
+ * Embed from URL
+ */
+.embed-url {
+    display: block;
+    position: relative;
+    height: 75px;
+    padding: 16px 16px;
+    margin: 0;
+    z-index: 50;
+    border-bottom: 1px solid #dfdfdf;
+    box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
+    font-size: 18px;
+    font-weight: 200;
+}
+
+.embed-url span {
+    display: block;
+    padding: 4px 0 6px 2px;
+}
+
+.embed-url input {
+    padding: 12px 14px;
+    width: 100%;
+    min-width: 200px;
+    /*max-width: 500px;*/
+    box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
+}
+
+.embed-link-settings,
+.embed-image-settings {
+    position: absolute;
+    background: #f5f5f5;
+    top: 108px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 16px 16px 32px;
+    overflow: auto;
+}
+
+.media-embed .thumbnail {
+    max-width: 100%;
+    max-height: 200px;
+    position: relative;
+    float: left;
+}
+
+.media-embed .thumbnail img {
+    max-height: 200px;
+}
+
+.media-embed .thumbnail:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+    overflow: hidden;
+}
+
+.media-embed .setting {
+    width: 100%;
+    margin-top: 10px;
+    float: left;
+    display: block;
+    clear: both;
+}
+
+.media-embed .setting span {
+    display: block;
+    width: 200px;
+    font-size: 13px;
+    line-height: 24px;
+    color: #999;
+    text-shadow: 0 1px 0 #fff;
+}
+
+.media-embed .setting .button-group {
+    margin: 2px 0;
+}
+
+.media-embed .setting input,
+.media-embed .setting textarea {
+    display: block;
+    width: 100%;
+    max-width: 400px;
+    margin: 1px 0;
+}

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

@@ -317 +317 @@
 
         deactivate: function() {
-            this.off( 'change:library change:exclude', this.buildComposite, this );
-            this.off( 'change:excludeState', this._excludeState, this );
-            this.destroyComposite();
-
-            wp.Uploader.queue.off( 'add', this.selectUpload, this );
+            this.off( 'change:empty', this.refresh, this );
+            this.get('library').off( 'add remove reset', this._updateEmpty, this );
 
             // Unbind all event handlers that use this state as the context
             // from the selection.
             this.get('selection').off( null, null, this );
-            this.get('library').off( 'add remove reset', this._updateEmpty, this );
-            this.off( 'change:empty', this.refresh, this );
+
+            wp.Uploader.queue.off( 'add', this.selectUpload, this );
+
+            this.off( 'change:excludeState', this._excludeState, this );
+            this.off( 'change:library change:exclude', this.buildComposite, this );
+
+            this.destroyComposite();
         },
 
@@ -526 +528 @@
     });
 
+
+    // wp.media.controller.Embed
+    // -------------------------
+    media.controller.Embed = media.controller.State.extend({
+        defaults: {
+            id:      'embed',
+            url:     '',
+            menu:    'main',
+            content: 'embed',
+            toolbar: 'main-embed',
+            type:    'link'
+        },
+
+        initialize: function() {
+            this.on( 'change:url', this.scan, this );
+            media.controller.State.prototype.initialize.apply( this, arguments );
+        },
+
+        scan: function() {
+            var attributes = { type: 'link' };
+
+            if ( /(?:jpe?g|png|gif)$/i.test( this.get('url') ) )
+                attributes.type = 'image';
+
+            this.trigger( 'scan', attributes );
+            this.set( attributes );
+        },
+
+        reset: function() {
+            _.each( _.without( _.keys( this.attributes ), _.keys( this.defaults ) ), function( key ) {
+                this.unset( key );
+            }, this );
+
+            this.set( 'url', '' );
+            this.frame.toolbar.view().refresh();
+        }
+    });
+
     /**
      * ========================================================================
@@ -859 +899 @@
 
         // Toolbars
-        selectToolbar: function() {
+        selectToolbar: function( options ) {
+            options = _.defaults( options || {}, {
+                event:  'select',
+                silent: false,
+                state:  false
+            });
+
             this.toolbar.view( new media.view.Toolbar({
                 controller: this,
+                silent:     options.silent,
+
                 items: {
                     select: {
@@ -872 +920 @@
 
                             controller.close();
-                            controller.state().trigger('select');
-                            controller.reset().state( controller.options.state );
+                            controller.state().trigger( options.event );
+                            controller.reset();
+                            if ( options.state )
+                                controller.state( options.state );
                         }
                     }
@@ -941 +991 @@
 
                 new media.controller.Upload( main ),
+
+                // Embed states.
+                new media.controller.Embed(),
 
                 // Gallery states.
@@ -992 +1045 @@
 
                     content: {
-                        embed:  'embedContent'
+                        embed: 'embedContent'
                     },
 
@@ -1122 +1175 @@
 
         // Content
-        embedContent: function() {},
+        embedContent: function() {
+            var view = new media.view.Embed({
+                controller: this,
+                model:      this.state()
+            }).render();
+
+            this.$el.addClass('hide-sidebar');
+            this.content.view( view );
+            view.url.focus();
+        },
 
         // Sidebars
         onSidebarGallerySettings: function( options ) {
             var library = this.state().get('library');
+
+            if ( ! library )
+                return;
 
             library.gallery = library.gallery || new Backbone.Model();
@@ -1170 +1235 @@
         },
 
-        mainEmbedToolbar: function() {},
+        mainEmbedToolbar: function() {
+            this.toolbar.view( new media.view.Toolbar.Embed({
+                controller: this
+            }) );
+
+            this.$el.removeClass('hide-toolbar');
+        },
 
         batchEditToolbar: function() {
@@ -1496 +1567 @@
 
             if ( this.options.items )
-                this.add( this.options.items, { silent: true });
+                this.set( this.options.items, { silent: true });
 
             if ( ! this.options.silent )
@@ -1504 +1575 @@
         destroy: function() {
             this.remove();
+
+            if ( this.model )
+                this.model.off( null, null, this );
+
+            if ( this.collection )
+                this.collection.off( null, null, this );
+
+            this.controller.off( null, null, this );
+
             _.each( this._views, function( view ) {
                 if ( view.destroy )
@@ -1528 +1608 @@
         },
 
-        add: function( id, view, options ) {
+        set: function( id, view, options ) {
             options = options || {};
 
@@ -1534 +1614 @@
             if ( _.isObject( id ) ) {
                 _.each( id, function( view, id ) {
-                    this.add( id, view, { silent: true });
+                    this.set( id, view, { silent: true });
                 }, this );
 
-                if ( ! options.silent )
-                    this.render();
-                return this;
+            } else {
+                if ( ! ( view instanceof Backbone.View ) ) {
+                    view.classes = [ id ].concat( view.classes || [] );
+                    view = new media.view.Button( view ).render();
+                }
+
+                view.controller = view.controller || this.controller;
+
+                this._views[ id ] = view;
             }
 
-            if ( ! ( view instanceof Backbone.View ) ) {
-                view.classes = [ id ].concat( view.classes || [] );
-                view = new media.view.Button( view ).render();
-            }
-
-            view.controller = view.controller || this.controller;
-
-            this._views[ id ] = view;
             if ( ! options.silent )
                 this.render();
@@ -1559 +1637 @@
         },
 
-        remove: function( id, options ) {
+        unset: function( id, options ) {
             delete this._views[ id ];
             if ( ! options || ! options.silent )
@@ -1569 +1647 @@
     });
 
+    // wp.media.view.Toolbar.Select
+    // ----------------------------
+    media.view.Toolbar.Select = media.view.Toolbar.extend({
+        initialize: function() {
+            var options = this.options,
+                controller = options.controller,
+                selection = controller.state().get('selection');
+
+            _.bindAll( this, 'clickSelect' );
+
+            _.defaults( options, {
+                event: 'select',
+                state: false,
+                reset: true,
+                close: true,
+                text:  l10n.select
+            });
+
+            options.items = _.defaults( options.items || {}, {
+                select: {
+                    style:    'primary',
+                    text:     options.text,
+                    priority: 80,
+                    click:    this.clickSelect
+                }
+            });
+
+            media.view.Toolbar.prototype.initialize.apply( this, arguments );
+        },
+
+        clickSelect: function() {
+            var options = this.options,
+                controller = this.controller;
+
+            if ( options.close )
+                controller.close();
+
+            if ( options.event )
+                controller.state().trigger( options.event );
+
+            if ( options.reset )
+                controller.reset();
+
+            if ( options.state )
+                controller.state( options.state );
+        }
+    });
+
+    // wp.media.view.Toolbar.Embed
+    // ---------------------------
+    media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({
+        initialize: function() {
+            var controller = this.options.controller;
+
+            _.defaults( this.options, {
+                text: l10n.insertEmbed
+            });
+
+            media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
+            controller.on( 'change:url', this.refresh, this );
+        },
+
+        refresh: function() {
+            var url = this.controller.state().get('url');
+            this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) );
+        }
+    });
+
     // wp.media.view.Toolbar.Insert
-    // ---------------------------------
+    // ----------------------------
     media.view.Toolbar.Insert = media.view.Toolbar.extend({
         initialize: function() {
@@ -1887 +2033 @@
         click: function() {
             var options = this.options;
+
             if ( options.click )
                 options.click.call( this );
@@ -2345 +2492 @@
 
             if ( this.options.search ) {
-                this.toolbar.add( 'search', new media.view.Search({
+                this.toolbar.set( 'search', new media.view.Search({
                     controller: this.controller,
                     model:      this.collection.props,
@@ -2353 +2500 @@
 
             if ( this.options.sortable ) {
-                this.toolbar.add( 'dragInfo', new Backbone.View({
+                this.toolbar.set( 'dragInfo', new Backbone.View({
                     el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
                     priority: -40
@@ -2565 +2712 @@
                 $buttons = $setting.find('button').removeClass('active');
                 $buttons.filter( '[value="' + value + '"]' ).addClass('active');
+
+            // Handle text inputs and textareas.
+            } else if ( $setting.is('input[type="text"], textarea') ) {
+                if ( ! $setting.is(':focus') )
+                    $setting.val( value );
             }
         },
@@ -2719 +2871 @@
         }
     });
+
+    /**
+     * wp.media.view.Embed
+     */
+    media.view.Embed = Backbone.View.extend({
+        className: 'media-embed',
+
+        initialize: function() {
+            this.controller = this.options.controller;
+
+            this.url = new media.view.EmbedUrl({
+                controller: this.controller,
+                model:      this.model
+            }).render();
+
+            this._settings = new Backbone.View();
+            this.refresh();
+            this.model.on( 'change:type', this.refresh, this );
+        },
+
+        render: function() {
+            this.$el.html([ this.url.el, this._settings.el ]);
+            this.url.focus();
+            return this;
+        },
+
+        settings: function( view ) {
+            view.render();
+            this._settings.$el.replaceWith( view.$el );
+            if ( this._settings.destroy )
+                this._settings.destroy();
+            this._settings.remove();
+            this._settings = view;
+        },
+
+        refresh: function() {
+            var type = this.model.get('type'),
+                constructor;
+
+            if ( 'image' === type )
+                constructor = media.view.EmbedImage;
+            else if ( 'link' === type )
+                constructor = media.view.EmbedLink;
+            else
+                return;
+
+            this.settings( new constructor({
+                controller: this.controller,
+                model:      this.model,
+                priority:   40
+            }) );
+        }
+    });
+
+    /**
+     * wp.media.view.EmbedUrl
+     */
+    media.view.EmbedUrl = Backbone.View.extend({
+        tagName:   'label',
+        className: 'embed-url',
+
+        events: {
+            'keyup': 'url'
+        },
+
+        initialize: function() {
+            this.label = this.make( 'span', null, this.options.label || l10n.url );
+            this.input = this.make( 'input', {
+                type:  'text',
+                value: this.model.get('url') || ''
+            });
+
+            this.$label = $( this.label );
+            this.$input = $( this.input );
+            this.$el.append([ this.label, this.input ]);
+
+            this.model.on( 'change:url', this.render, this );
+        },
+
+        destroy: function() {
+            this.model.off( null, null, this );
+        },
+
+        render: function() {
+            var $input = this.$input;
+
+            if ( $input.is(':focus') )
+                return;
+
+            this.input.value = this.model.get('url') || 'http://';
+            return this;
+        },
+
+        url: function( event ) {
+            this.model.set( 'url', event.target.value );
+        },
+
+        focus: function() {
+            var $input = this.$input;
+            // If the input is visible, focus and select its contents.
+            if ( $input.is(':visible') )
+                $input.focus()[0].select();
+        }
+    });
+
+    /**
+     * wp.media.view.EmbedLink
+     */
+    media.view.EmbedLink = media.view.Settings.extend({
+        className: 'embed-link-settings',
+        template:  media.template('embed-link-settings')
+    });
+
+    /**
+     * wp.media.view.EmbedImage
+     */
+    media.view.EmbedImage =  media.view.Settings.AttachmentDisplay.extend({
+        className: 'embed-image-settings',
+        template:  media.template('embed-image-settings'),
+
+        initialize: function() {
+            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
+            this.model.on( 'change:url', this.updateImage, this );
+        },
+
+        destroy: function() {
+            this.model.off( null, null, this );
+            media.view.Settings.AttachmentDisplay.prototype.destroy.apply( this, arguments );
+        },
+
+        updateImage: function() {
+            this.$('img').attr( 'src', this.model.get('url') );
+        }
+    });
 }(jQuery));

trunk/wp-includes/media.php

@@ -1327 +1327 @@
 
         // Generic
+        'url'         => __( 'URL' ),
         'insertMedia' => __( 'Insert Media' ),
         'search'      => __( 'Search' ),
@@ -1347 +1348 @@
         // Embed
         'embedFromUrlTitle' => __( 'Embed From URL' ),
+        'insertEmbed'       => __( 'Insert embed' ),
 
         // Batch
@@ -1571 +1573 @@
         </div>
 
-        <# if ( ! _.isUndefined( sizes ) ) { #>
+        <# if ( 'undefined' !== typeof sizes ) { #>
             <label class="setting">
                 <span><?php _e('Size'); ?></span>
@@ -1588 +1590 @@
 
                     foreach ( $sizes as $value => $name ) : ?>
-                        <# if ( ! _.isUndefined( sizes['<?php echo esc_js( $value ); ?>'] ) ) { #>
+                        <# if ( sizes['<?php echo esc_js( $value ); ?>'] ) { #>
                             <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
                                 <?php echo esc_html( $name ); ?>
@@ -1636 +1638 @@
     </script>
 
+    <script type="text/html" id="tmpl-embed-link-settings">
+        <label class="setting">
+            <span><?php _e('Title'); ?></span>
+            <input type="text" class="alignment" data-setting="title" />
+        </label>
+    </script>
+
+    <script type="text/html" id="tmpl-embed-image-settings">
+        <div class="thumbnail">
+            <img src="{{ model.url }}" draggable="false" />
+        </div>
+
+        <label class="setting caption">
+            <span><?php _e('Caption'); ?></span>
+            <textarea data-setting="caption" />
+        </label>
+
+        <label class="setting alt-text">
+            <span><?php _e('Alt Text'); ?></span>
+            <input type="text" data-setting="alt" />
+        </label>
+
+        <label class="setting align">
+            <span><?php _e('Align'); ?></span>
+            <div class="button-group button-large" data-setting="align">
+                <button class="button" value="left">
+                    <?php esc_attr_e('Left'); ?>
+                </button>
+                <button class="button" value="center">
+                    <?php esc_attr_e('Center'); ?>
+                </button>
+                <button class="button" value="right">
+                    <?php esc_attr_e('Right'); ?>
+                </button>
+                <button class="button active" value="none">
+                    <?php esc_attr_e('None'); ?>
+                </button>
+            </div>
+        </label>
+
+        <div class="setting link-to">
+            <span><?php _e('Link To'); ?></span>
+            <div class="button-group button-large" data-setting="link">
+                <button class="button" value="file">
+                    <?php esc_attr_e('Image URL'); ?>
+                </button>
+                <button class="button" value="custom">
+                    <?php esc_attr_e('Custom URL'); ?>
+                </button>
+                <button class="button active" value="none">
+                    <?php esc_attr_e('None'); ?>
+                </button>
+            </div>
+            <input type="text" class="link-to-custom" data-setting="linkUrl" />
+        </div>
+    </script>
+
     <script type="text/html" id="tmpl-editor-attachment">
         <div class="editor-attachment-preview">