Changeset 22362 for trunk/wp-includes/media.php

Timestamp:

11/04/2012 10:59:12 PM (12 years ago)

Author:

koopersmith

Message:

Streamlining media, part I.

The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.

This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.

The fine print follows.

---

Styles

• Tightened padding around the modal to optimize for a smaller default screen size.
• Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated upload state).
• Add a size for hero buttons.
• Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).

---

Code

wp.media.controller.StateManager

• Don't fire activate and deactivate if attempting to switch to the current state.

wp.media.controller.State

• Add a base state class to bind default methods (as not all states will inherit from the Library state).
• On activate, fire activate(), menu(), content(), sidebar(), and toolbar().
• The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's menu attribute.
• menu() automatically fetches the state's menu attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's id.

wp.media.controller.Library

• Now inherits from wp.media.controller.State.

wp.media.controller.Upload

• A new state to improve the upload experience.
• Displays a large dropzone when empty (a UploaderInline view).
• When attachments are uploaded, displays management interface (a library state restricted to attachments uploaded during the current session).

wp.media.view.Frame

• In menu(), content(), sidebar(), and toolbar(), only change the view if it differs from the current view. Also, ensure hide-* classes are properly removed.

*

wp.media.view.PriorityList

• A new container view used to sort and render child views by the priority property.
• Used by wp.media.view.Sidebar and wp.media.view.Menu.
• Next step: Use two instances to power wp.media.view.Toolbar.

wp.media.view.Menu and wp.media.view.MenuItem

• A new PriorityList view that renders a list of views used to switch between states.
• MenuItem instances have id attributes that are tied directly to states.
• Separators can be added as plain Backbone.View instances with the separator class.
• Supports any type of Backbone.View.

media.view.Menu.Landing

• The landing menu for the 'insert media' workflow.
• Includes an inactive link to an "Embed from URL" state.
• Next steps: only use in select cases to allot for other workflows (such as featured images).

wp.media.view.AttachmentsBrowser

• A container to render an Attachments view with accompanying UI controls (similar to what the Attachments view was when it contained the $list property).
• Currently only renders a Search view as a control.
• Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.

wp.media.view.Attachments

• If the Attachments scroll buffer is not filled with Attachment views, continue loading more attachments.
• Use this.model instead of this.controller.state() to allow Attachments views to have differing edge and gutter properties.
• Add edge(), a method used to calculate the optimal dimensions for an attachment based on the current width of the Attachments container element.
• edge() is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
• Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.

wp.media.view.UploaderWindow

• Now generates a $browser element as the browse button (instead of a full UploaderInline view). Using a portable browse button prevents us from having to create a new wp.Uploader instance every time we want access to a browse button.

wp.media.view.UploaderInline

• No longer directly linked to the UploaderWindow view or its wp.Uploader instance.
• Used as the default upload state view.

wp.media.view.Selection

• An interactive representation of the selected Attachments.
• Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of SelectionPreview.

---

see #21390.

File:

• trunk/wp-includes/media.php (modified) (5 diffs)

trunk/wp-includes/media.php

@@ -1301 +1301 @@
             <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
         </div>
-        <div class="media-modal-backdrop"></div>
+        <div class="media-modal-backdrop">
+            <div></div>
+        </div>
     </script>
 
@@ -1311 +1313 @@
 
     <script type="text/html" id="tmpl-uploader-inline">
-        <h3><?php _e( 'Drop files here' ); ?></h3>
-        <!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
-        <a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
-        <div class="media-progress-bar"><div></div></div>
-    </script>
-
-    <script type="text/html" id="tmpl-sidebar">
-        <h2 class="sidebar-title"><%- title %></h2>
-        <div class="sidebar-content"></div>
+        <div class="uploader-inline-content">
+            <h3><?php _e( 'Drop files anywhere to upload' ); ?></h3>
+            <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
+            <div class="media-progress-bar"><div></div></div>
+        </div>
     </script>
 
@@ -1361 +1359 @@
 
     <script type="text/html" id="tmpl-attachment-details">
+        <h3><?php _e('Edit Attachment Details'); ?></h3>
         <div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
             <% if ( uploading ) { %>
@@ -1393 +1392 @@
     </script>
 
+    <script type="text/html" id="tmpl-media-selection">
+        <div class="selection-info">
+            <span class="count"></span>
+            <% if ( clearable ) { %>
+                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
+            <% } %>
+        </div>
+        <div class="selection-view"></div>
+    </script>
+
     <script type="text/html" id="tmpl-media-selection-preview">
         <div class="selected-img selected-count-<%- count %>">
@@ -1487 +1496 @@
         <style type="text/css" id="<%- id %>-css">
             #<%- id %> {
-                padding: <%- gutter %>px;
+                padding: 0 <%- gutter %>px;
             }