WordPress.org
Get WordPress

Make WordPress Core

Changeset 22578


Ignore:
Timestamp:
11/14/2012 09:51:41 PM (14 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.