Changeset 21683

Timestamp:

08/31/2012 04:54:23 AM (12 years ago)

Author:

koopersmith

Message:

Add new media workflow scripts, styles, and templates.

Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:

new wp.media.controller.Workflow().render().modal.open();

The Javascript is broken up into two files, with the slugs media-models and media-views.

• media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.

• media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...

To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':

wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );

see #21390.

Location:

trunk

Files:

• wp-admin/edit-form-advanced.php (modified) (1 diff)
• wp-includes/css/media-views.css (added)
• wp-includes/css/media-views.min.css (added)
• wp-includes/js/media-models.js (added)
• wp-includes/js/media-models.min.js (added)
• wp-includes/js/media-views.js (added)
• wp-includes/js/media-views.min.js (added)
• wp-includes/media.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (2 diffs)

trunk/wp-admin/edit-form-advanced.php

@@ -19 +19 @@
     add_thickbox();
     wp_enqueue_script('media-upload');
+    wp_enqueue_script( 'media-views' );
+    wp_enqueue_style( 'media-views' );
+    wp_plupload_default_settings();
+    add_action( 'admin_footer', 'wp_print_media_templates' );
 }
 

trunk/wp-includes/media.php

@@ -1596 +1596 @@
     return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );
 }
+
+/**
+ * Prints the templates used in the media manager.
+ *
+ * @since 3.5.0
+ */
+function wp_print_media_templates( $attachment ) {
+    ?>
+    <script type="text/html" id="tmpl-media-modal">
+        <div class="media-modal">
+            <div class="media-modal-header">
+                <h3><%- title %></h3>
+                <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>"><?php echo 'Close'; ?></a>
+            </div>
+            <div class="media-modal-content"></div>
+        </div>
+        <div class="media-modal-backdrop"></div>
+    </script>
+
+    <script type="text/html" id="tmpl-media-workspace">
+        <div class="upload-attachments">
+            <% if ( selectOne ) { %>
+                <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>
+
+    <script type="text/html" id="tmpl-attachments">
+        <div class="attachments-header">
+            <h3><%- directions %></h3>
+            <input class="search" type="text" placeholder="<?php esc_attr_e('Search'); ?>" />
+        </div>
+    </script>
+
+    <script type="text/html" id="tmpl-attachment">
+        <div class="attachment-thumbnail <%- orientation %>">
+            <% if ( thumbnail ) { %>
+                <img src="<%- thumbnail %>" />
+            <% } %>
+
+            <% if ( uploading ) { %>
+                <div class="media-progress-bar"><div></div></div>
+            <% } %>
+            <div class="actions"></div>
+        </div>
+        <div class="describe"></div>
+    </script>
+    <?php
+}

trunk/wp-includes/script-loader.php

@@ -315 +315 @@
     ) );
 
+    $scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
+    $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'media-models', 'wp-plupload' ), false, 1 );
+    did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
+        'insertMedia'         => __( 'Insert Media' ),
+        'chooseFeatured'      => __( 'Choose a Featured Image' ),
+        'selectMediaSingular' => __( 'Select a media file:' ),
+        'selectMediaMultiple' => __( 'Select one or more media files:' ),
+    ) );
+
     if ( is_admin() ) {
         $scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );
@@ -493 +502 @@
     $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css" );
     $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
+    $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css" );
 
     foreach ( $rtl_styles as $rtl_style ) {