WordPress.org
Get WordPress

Make WordPress Core

Changeset 22578


Ignore:
Timestamp:
11/14/2012 09:51:41 PM (12 years ago)
Author:
koopersmith
Message:

Media: Convert templates to use a data variable instead of with statements. see #21390.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/js/media-models.js

    r22541 r22578  
    8181                    evaluate:    /<#([\s\S]+?)#>/g,
    8282                    interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
    83                     escape:      /\{\{([^\}]+?)\}\}(?!\})/g
     83                    escape:      /\{\{([^\}]+?)\}\}(?!\})/g,
     84                    variable:    'data'
    8485                };
    8586

  • trunk/wp-includes/media.php

    r22568 r22578  
    13911391    <script type="text/html" id="tmpl-media-modal">
    13921392        <div class="media-modal">
    1393             <h3 class="media-modal-title">{{ title }}</h3>
     1393            <h3 class="media-modal-title">{{ data.title }}</h3>
    13941394            <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
    13951395        </div>
    … …  
    14251425
    14261426    <script type="text/html" id="tmpl-attachment">
    1427         <div class="attachment-preview type-{{ type }} subtype-{{ subtype }} {{ orientation }}">
    1428             <# if ( uploading ) { #>
     1427        <div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
     1428            <# if ( data.uploading ) { #>
    14291429                <div class="media-progress-bar"><div></div></div>
    1430             <# } else if ( 'image' === type ) { #>
     1430            <# } else if ( 'image' === data.type ) { #>
    14311431                <div class="thumbnail">
    14321432                    <div class="centered">
    1433                         <img src="{{ url }}" draggable="false" />
     1433                        <img src="{{ data.url }}" draggable="false" />
    14341434                    </div>
    14351435                </div>
    14361436            <# } else { #>
    1437                 <img src="{{ icon }}" class="icon" draggable="false" />
    1438                 <div class="filename">{{ filename }}</div>
     1437                <img src="{{ data.icon }}" class="icon" draggable="false" />
     1438                <div class="filename">{{ data.filename }}</div>
    14391439            <# } #>
    14401440
    1441             <# if ( buttons.close ) { #>
     1441            <# if ( data.buttons.close ) { #>
    14421442                <a class="close button" href="#">&times;</a>
    14431443            <# } #>
    14441444        </div>
    1445         <# if ( describe ) { #>
    1446             <# if ( 'image' === type ) { #>
     1445        <# if ( data.describe ) { #>
     1446            <# if ( 'image' === data.type ) { #>
    14471447                <textarea class="describe"
    14481448                    placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
    1449                     >{{ caption }}</textarea>
     1449                    >{{ data.caption }}</textarea>
    14501450            <# } else { #>
    14511451                <textarea class="describe"
    1452                     <# if ( 'video' === type ) { #>
     1452                    <# if ( 'video' === data.type ) { #>
    14531453                        placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    1454                     <# } else if ( 'audio' === type ) { #>
     1454                    <# } else if ( 'audio' === data.type ) { #>
    14551455                        placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    14561456                    <# } else { #>
    14571457                        placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
    14581458                    <# } #>
    1459                     >{{ title }}</textarea>
     1459                    >{{ data.title }}</textarea>
    14601460            <# } #>
    14611461        <# } #>
    … …  
    14661466        <div class="attachment-info">
    14671467            <div class="thumbnail">
    1468                 <# if ( uploading ) { #>
     1468                <# if ( data.uploading ) { #>
    14691469                    <div class="media-progress-bar"><div></div></div>
    1470                 <# } else if ( 'image' === type ) { #>
    1471                     <img src="{{ url }}" draggable="false" />
     1470                <# } else if ( 'image' === data.type ) { #>
     1471                    <img src="{{ data.url }}" draggable="false" />
    14721472                <# } else { #>
    1473                     <img src="{{ icon }}" class="icon" draggable="false" />
     1473                    <img src="{{ data.icon }}" class="icon" draggable="false" />
    14741474                <# } #>
    14751475            </div>
    14761476            <div class="details">
    1477                 <div class="filename">{{ filename }}</div>
    1478                 <div class="uploaded">{{ dateFormatted }}</div>
    1479                 <# if ( 'image' === type && ! uploading ) { #>
    1480                     <div class="dimensions">{{ width }} &times; {{ height }}</div>
     1477                <div class="filename">{{ data.filename }}</div>
     1478                <div class="uploaded">{{ data.dateFormatted }}</div>
     1479                <# if ( 'image' === data.type && ! data.uploading ) { #>
     1480                    <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
    14811481                <# } #>
    14821482            </div>
    14831483            <div class="compat-meta">
    1484                 <# if ( compat && compat.meta ) { #>
    1485                     {{{ compat.meta }}}
     1484                <# if ( data.compat && data.compat.meta ) { #>
     1485                    {{{ data.compat.meta }}}
    14861486                <# } #>
    14871487            </div>
    14881488        </div>
    14891489
    1490         <# if ( 'image' === type ) { #>
     1490        <# if ( 'image' === data.type ) { #>
    14911491            <label class="setting" data-setting="title">
    14921492                <span><?php _e('Title'); ?></span>
    1493                 <input type="text" value="{{ title }}" />
     1493                <input type="text" value="{{ data.title }}" />
    14941494            </label>
    14951495            <label class="setting" data-setting="caption">
    … …  
    14971497                <textarea
    14981498                    placeholder="<?php esc_attr_e('Describe this image&hellip;'); ?>"
    1499                     >{{ caption }}</textarea>
     1499                    >{{ data.caption }}</textarea>
    15001500            </label>
    15011501            <label class="setting" data-setting="alt">
    15021502                <span><?php _e('Alt Text'); ?></span>
    1503                 <input type="text" value="{{ alt }}" />
     1503                <input type="text" value="{{ data.alt }}" />
    15041504            </label>
    15051505        <# } else { #>
    15061506            <label class="setting" data-setting="title">
    15071507                <span><?php _e('Title'); ?></span>
    1508                 <input type="text" value="{{ title }}"
    1509                 <# if ( 'video' === type ) { #>
     1508                <input type="text" value="{{ data.title }}"
     1509                <# if ( 'video' === data.type ) { #>
    15101510                    placeholder="<?php esc_attr_e('Describe this video&hellip;'); ?>"
    1511                 <# } else if ( 'audio' === type ) { #>
     1511                <# } else if ( 'audio' === data.type ) { #>
    15121512                    placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
    15131513                <# } else { #>
    … …  
    15211521        <div class="selection-info">
    15221522            <span class="count"></span>
    1523             <# if ( clearable ) { #>
     1523            <# if ( data.clearable ) { #>
    15241524                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
    15251525            <# } #>
    … …  
    15291529
    15301530    <script type="text/html" id="tmpl-media-selection-preview">
    1531         <div class="selected-img selected-count-{{ count }}">
    1532             <# if ( thumbnail ) { #>
    1533                 <img src="{{ thumbnail }}" draggable="false" />
     1531        <div class="selected-img selected-count-{{ data.count }}">
     1532            <# if ( data.thumbnail ) { #>
     1533                <img src="{{ data.thumbnail }}" draggable="false" />
    15341534            <# } #>
    15351535
    1536             <span class="count">{{ count }}</span>
     1536            <span class="count">{{ data.count }}</span>
    15371537        </div>
    1538         <# if ( clearable ) { #>
     1538        <# if ( data.clearable ) { #>
    15391539            <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
    15401540        <# } #>
    … …  
    15481548            <select class="alignment"
    15491549                data-setting="align"
    1550                 <# if ( userSettings ) { #>
     1550                <# if ( data.userSettings ) { #>
    15511551                    data-user-setting="align"
    15521552                <# } #>>
    … …  
    15721572                <select class="link-to"
    15731573                    data-setting="link"
    1574                     <# if ( userSettings ) { #>
     1574                    <# if ( data.userSettings ) { #>
    15751575                        data-user-setting="urlbutton"
    15761576                    <# } #>>
    … …  
    15931593        </div>
    15941594
    1595         <# if ( 'undefined' !== typeof sizes ) { #>
     1595        <# if ( 'undefined' !== typeof data.sizes ) { #>
    15961596            <label class="setting">
    15971597                <span><?php _e('Size'); ?></span>
    15981598                <select class="size" name="size"
    15991599                    data-setting="size"
    1600                     <# if ( userSettings ) { #>
     1600                    <# if ( data.userSettings ) { #>
    16011601                        data-user-setting="imgsize"
    16021602                    <# } #>>
    … …  
    16141614                            continue;
    16151615                        ?>
    1616                         <# if ( sizes['<?php echo esc_js( $value ); ?>'] ) { #>
     1616                        <# if ( data.sizes['<?php echo esc_js( $value ); ?>'] ) { #>
    16171617                            <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'medium' ); ?>>
    16181618                                <?php echo esc_html( $name ); ?>
    … …  
    16381638            <select class="link-to"
    16391639                data-setting="link"
    1640                 <# if ( userSettings ) { #>
     1640                <# if ( data.userSettings ) { #>
    16411641                    data-user-setting="urlbutton"
    16421642                <# } #>>
    … …  
    16731673    <script type="text/html" id="tmpl-embed-image-settings">
    16741674        <div class="thumbnail">
    1675             <img src="{{ model.url }}" draggable="false" />
     1675            <img src="{{ data.model.url }}" draggable="false" />
    16761676        </div>
    16771677
    … …  
    17211721    </script>
    17221722
    1723     <script type="text/html" id="tmpl-editor-attachment">
    1724         <div class="editor-attachment-preview">
    1725             <# if ( url ) { #>
    1726                 <img src="{{ url }}" width="{{ width }}" height="{{ height }}" draggable="false" />
    1727             <# } #>
    1728 
    1729             <# if ( uploading ) { #>
    1730                 <div class="media-progress-bar"><div></div></div>
    1731             <# } #>
    1732             <div class="overlay">
    1733                 <div class="button close">&times;</div>
    1734             </div>
    1735         </div>
    1736         <div class="describe"></div>
    1737     </script>
    1738 
    1739     <script type="text/html" id="tmpl-editor-gallery">
    1740         <# if ( url ) { #>
    1741             <img src="{{ url }}" draggable="false" />
    1742         <# } #>
    1743 
    1744         <div class="overlay">
    1745             <div class="button close">&times;</div>
    1746             <div class="button edit"><?php _e('Edit'); ?></div>
    1747         </div>
    1748     </script>
    1749 
    17501723    <script type="text/html" id="tmpl-attachments-css">
    1751         <style type="text/css" id="{{ id }}-css">
    1752             #{{ id }} {
    1753                 padding: 0 {{ gutter }}px;
     1724        <style type="text/css" id="{{ data.id }}-css">
     1725            #{{ data.id }} {
     1726                padding: 0 {{ data.gutter }}px;
    17541727            }
    17551728
    1756             #{{ id }} .attachment {
    1757                 margin: {{ gutter }}px;
    1758                 width: {{ edge }}px;
     1729            #{{ data.id }} .attachment {
     1730                margin: {{ data.gutter }}px;
     1731                width: {{ data.edge }}px;
    17591732            }
    17601733
    1761             #{{ id }} .attachment-preview,
    1762             #{{ id }} .attachment-preview .thumbnail {
    1763                 width: {{ edge }}px;
    1764                 height: {{ edge }}px;
     1734            #{{ data.id }} .attachment-preview,
     1735            #{{ data.id }} .attachment-preview .thumbnail {
     1736                width: {{ data.edge }}px;
     1737                height: {{ data.edge }}px;
    17651738            }
    17661739
    1767             #{{ id }} .portrait .thumbnail img {
    1768                 width: {{ edge }}px;
     1740            #{{ data.id }} .portrait .thumbnail img {
     1741                width: {{ data.edge }}px;
    17691742                height: auto;
    17701743            }
    17711744
    1772             #{{ id }} .landscape .thumbnail img {
     1745            #{{ data.id }} .landscape .thumbnail img {
    17731746                width: auto;
    1774                 height: {{ edge }}px;
     1747                height: {{ data.edge }}px;
    17751748            }
    17761749        </style>
Note: See TracChangeset for help on using the changeset viewer.