Give media a heart transplant.

Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the `Frame`, which is a hybrid view and state machine.

The state machine is a collection of states, which are just generic instances of `Backbone.Model`. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships).

The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events.

This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view).

Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch.

Adds events to detect dragging changes in `wp.Uploader` and adds methods to detect and leverage browser support for CSS3 transitions.

see #21390, #21809.


git-svn-id: https://develop.svn.wordpress.org/trunk@22320 602fd350-edb4-49c9-b593-d223f7449a82

wp-admin/includes/meta-boxes.php

@@ -1018,7 +1018,7 @@ function post_thumbnail_meta_box( $post ) {
 		var $element     = $('#select-featured-image'),
 			$thumbnailId = $element.find('input[name="thumbnail_id"]'),
 			title        = '<?php _e( "Choose a Featured Image" ); ?>',
-			workflow, setFeaturedImage;
+			workflow, selection, setFeaturedImage;
 
 		setFeaturedImage = function( thumbnailId ) {
 			$element.find('img').remove();
@@ -1037,7 +1037,9 @@ function post_thumbnail_meta_box( $post ) {
 					}
 				});
 
-				workflow.selection.on( 'add', function( model ) {
+				selection = workflow.state().get('selection');
+
+				selection.on( 'add', function( model ) {
 					var sizes = model.get('sizes'),
 						size;
 
@@ -1051,8 +1053,8 @@ function post_thumbnail_meta_box( $post ) {
 					// data besides just calling toJSON().
 					size = size || model.toJSON();
 
-					workflow.modal.close();
+					workflow.close();
-					workflow.selection.clear();
+					selection.clear();
 
 					$( '<img />', {
 						src:    size.url,
@@ -1061,7 +1063,7 @@ function post_thumbnail_meta_box( $post ) {
 				});
 			}
 
-			workflow.modal.open();
+			workflow.open();
 		});
 
 		$element.on( 'click', '.remove', function( event ) {

wp-admin/js/media-upload.js

@@ -104,11 +104,10 @@ var tb_position;
 
 			workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
 				title:    wp.media.view.l10n.insertMedia,
-				multiple: true,
+				multiple: true
-				describe: true
 			} ) );
 
-			workflow.on( 'update:insert', function( selection ) {
+			workflow.get('library').on( 'insert', function( selection ) {
 				this.insert( selection.map( function( attachment ) {
 					if ( 'image' === attachment.get('type') )
 						return wp.media.string.image( attachment ) + ' ';
@@ -117,7 +116,7 @@ var tb_position;
 				}).join('') );
 			}, this );
 
-			workflow.on( 'update:gallery', function( selection ) {
+			workflow.get('gallery').on( 'update', function( selection ) {
 				var view = wp.mce.view.get('gallery'),
 					shortcode;
 

wp-includes/css/media-views.css

@@ -75,6 +75,7 @@
 	position: relative;
 	z-index: 50;
 	height: 60px;
+	padding: 0 10px;
 	border-bottom: 1px solid #dfdfdf;
 }
 
@@ -101,64 +102,11 @@
 }
 
 /**
- * Workspace
+ * Frame
  */
-.media-workspace {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
 
-.upload-attachments {
+.media-frame .attachments,
-	position: absolute;
+.media-frame .media-toolbar {
-	top: 0;
-	left: 0;
-	bottom: 0;
-	width: 180px;
-	margin: 10px;
-	text-align: center;
-	border: 3px dashed #dfdfdf;
-	background: #fff;
-	z-index: 100;
-}
-
-.upload-attachments h3 {
-	font-size: 18px;
-	font-weight: 200;
-	color: #777;
-	padding: 40px 0 0;
-	margin: 0;
-}
-
-.upload-attachments span {
-	display: block;
-	color: #777;
-	margin: 10px 0;
-}
-
-.upload-attachments a {
-	display: inline-block;
-	margin: 0 auto;
-}
-
-.drag-over .upload-attachments {
-	width: auto;
-	right: 0;
-	border-color: #83B4D8;
-	box-shadow: 0 0 0 10px #fff;
-}
-
-.existing-attachments {
-	position: absolute;
-	top: 0;
-	left: 200px;
-	right: 0;
-	bottom: 0;
-	margin: 0 20px;
-}
-
-.media-workspace .attachments,
-.media-workspace .media-toolbar {
 	-webkit-transition-property: left, right, top, bottom, margin;
 	-moz-transition-property:    left, right, top, bottom, margin;
 	-ms-transition-property:     left, right, top, bottom, margin;
@@ -172,9 +120,9 @@
 	transition-duration:         0.2s;
 }
 
-.media-workspace .attachments {
+.media-frame .attachments {
 	position: absolute;
-	top: 0;
+	top: 61px;
 	left: 0;
 	right: 0;
 	bottom: 0;
@@ -182,22 +130,21 @@
 	width: auto;
 }
 
-.media-workspace.with-toolbar .attachments {
+.media-frame.hide-toolbar .attachments {
-	top: 61px;
+	top: 0;
 }
 
-.media-workspace .media-toolbar {
+.media-frame .media-toolbar {
-	margin-top: -61px;
-}
-
-.media-workspace.with-toolbar .media-toolbar {
 	margin-top: 0;
 }
 
-.media-workspace .media-toolbar .add-to-gallery {
+.media-frame.hide-toolbar .media-toolbar {
-	display: none;
+	margin-top: -61px;
 }
 
+.media-frame .media-toolbar .add-to-gallery {
+	display: none;
+}
 /**
  * Attachments
  */
@@ -213,6 +160,7 @@
 	left: 0;
 	right: 0;
 	height: 50px;
+	padding: 0 10px;
 	background: #fff;
 }
 
@@ -242,7 +190,7 @@
 	right: 0;
 	bottom: 0;
 	overflow: auto;
-	margin: 0 -10px 20px;
+	margin: 0 0 20px;
 }
 
 /**
@@ -445,12 +393,70 @@
 	margin: -8px 0 0 -4px;
 }
 
-.upload-attachments .media-progress-bar {
+.uploader-window {
-	margin-top: 80px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba( 0, 86, 132, 0.9 );
+
+	/*z-index: -200;*/
+	z-index: 250000;
 	display: none;
+	text-align: center;
+	opacity: 0;
+
+	-webkit-transition: opacity 250ms;
+	-moz-transition:    opacity 250ms;
+	-ms-transition:     opacity 250ms;
+	-o-transition:      opacity 250ms;
+	transition:         opacity 250ms;
 }
 
-.uploading .upload-attachments .media-progress-bar {
+/*.drag-over .uploader-window {
+	z-index: 250000;
+}*/
+
+.uploader-window-content {
+	position: absolute;
+	top: 30px;
+	left: 30px;
+	right: 30px;
+	bottom: 30px;
+	border: 1px dashed #fff;
+}
+
+.uploader-window h3 {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	-webkit-transform: translateY( -50% );
+	-moz-transform:    translateY( -50% );
+	-ms-transform:     translateY( -50% );
+	-o-transform:      translateY( -50% );
+	transform:         translateY( -50% );
+
+	font-size: 18px;
+	font-weight: 200;
+	color: #fff;
+	padding: 0;
+}
+
+.uploader-window .media-progress-bar {
+	margin-top: 20px;
+	max-width: 300px;
+	background: transparent;
+	border-color: #fff;
+	/*display: none;*/
+}
+
+.uploader-window .media-progress-bar div {
+	background: #fff;
+}
+
+.uploading .uploader-window .media-progress-bar {
 	display: block;
 }
 

wp-includes/js/mce-view.js

@@ -692,12 +692,11 @@ window.wp = window.wp || {};
 					return;
 
 				this.workflow = wp.media({
-					view:      'gallery',
+					state:     'gallery',
 					selection: this.attachments.models,
 					title:     mceview.l10n.editGallery,
 					editing:   true,
-					multiple:  true,
+					multiple:  true
-					describe:  true
 				});
 
 				// Create a single-use workflow. If the workflow is closed,

wp-includes/js/media-models.js

@@ -14,8 +14,8 @@ window.wp = window.wp || {};
 	 * @return {object}            A media workflow.
 	 */
 	media = wp.media = function( attributes ) {
-		if ( media.controller.Workflow )
+		if ( media.view.Frame )
-			return new media.controller.Workflow( attributes ).attach().render();
+			return new media.view.Frame( attributes ).render().attach().open();
 	};
 
 	_.extend( media, { model: {}, view: {}, controller: {} });

wp-includes/js/plupload/wp-plupload.js

@@ -114,7 +114,7 @@ window.wp = window.wp || {};
 				if ( active )
 					return;
 
-				dropzone.addClass('drag-over');
+				dropzone.trigger('dropzone:enter').addClass('drag-over');
 				active = true;
 			});
 
@@ -126,7 +126,7 @@ window.wp = window.wp || {};
 				// See http://core.trac.wordpress.org/ticket/21705
 				timer = setTimeout( function() {
 					active = false;
-					dropzone.removeClass('drag-over');
+					dropzone.trigger('dropzone:leave').removeClass('drag-over');
 				}, 0 );
 			});
 		}( this.dropzone, this.supports.dragdrop ));

wp-includes/media.php

@@ -1299,24 +1299,13 @@ function wp_print_media_templates( $attachment ) {
 		<div class="media-modal">
 			<h3 class="media-modal-title"><%- title %></h3>
 			<a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
-			<div class="media-modal-content"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>
 	</script>
 
-	<script type="text/html" id="tmpl-media-workspace">
+	<script type="text/html" id="tmpl-uploader-window">
-		<div class="upload-attachments">
+		<div class="uploader-window-content">
-			<% if ( selectOne ) { %>
+			<h3><?php _e( 'Drop files here to upload' ); ?></h3>
-				<h3><?php _e( 'Drop a file here' ); ?></h3>
-				<span><?php _ex( 'or', 'Uploader: Drop a file here - or - Select a File' ); ?></span>
-				<a href="#" class="button-secondary"><?php _e( 'Select a File' ); ?></a>
-			<% } else { %>
-				<h3><?php _e( 'Drop files here' ); ?></h3>
-				<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>
-				<a href="#" class="button-secondary"><?php _e( 'Select Files' ); ?></a>
-			<% } %>
-
-			<div class="media-progress-bar"><div></div></div>
 		</div>
 	</script>