WordPress.org

Make WordPress Core

Changeset 21683


Ignore:
Timestamp:
08/31/2012 04:54:23 AM (8 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:
6 added
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/edit-form-advanced.php

    r21584 r21683  
    1919    add_thickbox();
    2020    wp_enqueue_script('media-upload');
     21    wp_enqueue_script( 'media-views' );
     22    wp_enqueue_style( 'media-views' );
     23    wp_plupload_default_settings();
     24    add_action( 'admin_footer', 'wp_print_media_templates' );
    2125}
    2226
  • trunk/wp-includes/media.php

    r21680 r21683  
    15961596    return apply_filters( 'wp_prepare_attachment_for_js', $response, $attachment, $meta );
    15971597}
     1598
     1599/**
     1600 * Prints the templates used in the media manager.
     1601 *
     1602 * @since 3.5.0
     1603 */
     1604function wp_print_media_templates( $attachment ) {
     1605    ?>
     1606    <script type="text/html" id="tmpl-media-modal">
     1607        <div class="media-modal">
     1608            <div class="media-modal-header">
     1609                <h3><%- title %></h3>
     1610                <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>"><?php echo 'Close'; ?></a>
     1611            </div>
     1612            <div class="media-modal-content"></div>
     1613        </div>
     1614        <div class="media-modal-backdrop"></div>
     1615    </script>
     1616
     1617    <script type="text/html" id="tmpl-media-workspace">
     1618        <div class="upload-attachments">
     1619            <% if ( selectOne ) { %>
     1620                <h3><?php _e( 'Drop a file here' ); ?></h3>
     1621                <span><?php _ex( 'or', 'Uploader: Drop a file here - or - Select a File' ); ?></span>
     1622                <a href="#" class="button-secondary"><?php _e( 'Select a File' ); ?></a>
     1623            <% } else { %>
     1624                <h3><?php _e( 'Drop files here' ); ?></h3>
     1625                <span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>
     1626                <a href="#" class="button-secondary"><?php _e( 'Select Files' ); ?></a>
     1627            <% } %>
     1628
     1629            <div class="media-progress-bar"><div></div></div>
     1630        </div>
     1631    </script>
     1632
     1633    <script type="text/html" id="tmpl-attachments">
     1634        <div class="attachments-header">
     1635            <h3><%- directions %></h3>
     1636            <input class="search" type="text" placeholder="<?php esc_attr_e('Search'); ?>" />
     1637        </div>
     1638    </script>
     1639
     1640    <script type="text/html" id="tmpl-attachment">
     1641        <div class="attachment-thumbnail <%- orientation %>">
     1642            <% if ( thumbnail ) { %>
     1643                <img src="<%- thumbnail %>" />
     1644            <% } %>
     1645
     1646            <% if ( uploading ) { %>
     1647                <div class="media-progress-bar"><div></div></div>
     1648            <% } %>
     1649            <div class="actions"></div>
     1650        </div>
     1651        <div class="describe"></div>
     1652    </script>
     1653    <?php
     1654}
  • trunk/wp-includes/script-loader.php

    r21658 r21683  
    315315    ) );
    316316
     317    $scripts->add( 'media-models', "/wp-includes/js/media-models$suffix.js", array( 'backbone', 'jquery' ), false, 1 );
     318    $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'media-models', 'wp-plupload' ), false, 1 );
     319    did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array(
     320        'insertMedia'         => __( 'Insert Media' ),
     321        'chooseFeatured'      => __( 'Choose a Featured Image' ),
     322        'selectMediaSingular' => __( 'Select a media file:' ),
     323        'selectMediaMultiple' => __( 'Select one or more media files:' ),
     324    ) );
     325
    317326    if ( is_admin() ) {
    318327        $scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );
     
    493502    $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css" );
    494503    $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
     504    $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css" );
    495505
    496506    foreach ( $rtl_styles as $rtl_style ) {
Note: See TracChangeset for help on using the changeset viewer.