WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
05/30/2015 12:02:13 AM (10 years ago)
Author:
westonruter
Message:

Add JS templates for Customizer Panels and Sections.

This extends the approach taken for Customizer Controls in #29572.

Props celloexpressions, westonruter, ocean90.
See #30737.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/qunit/index.html

    r31502 r32658  
    1010        <script src="../../src/wp-includes/js/backbone.min.js"></script>
    1111        <script src="../../src/wp-includes/js/zxcvbn.min.js"></script>
     12        <script src="../../src/wp-includes/js/wp-util.js"></script>
    1213
    1314        <!-- QUnit -->
    … …  
    4041        <script src="wp-admin/js/customize-controls.js"></script>
    4142        <script src="wp-admin/js/customize-controls-utils.js"></script>
     43
     44        <!-- Customizer templates for sections -->
     45        <script type="text/html" id="tmpl-customize-section-default">
     46            <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
     47                <h3 class="accordion-section-title" tabindex="0">
     48                    {{ data.title }}
     49                    <span class="screen-reader-text">Press return or enter to expand</span>
     50                </h3>
     51                <ul class="accordion-section-content">
     52                    <# if ( data.description ) { #>
     53                        <li class="customize-section-description-container">
     54                            <p class="description customize-section-description">{{{ data.description }}}</p>
     55                        </li>
     56                    <# } #>
     57                </ul>
     58            </li>
     59        </script>
     60        <script type="text/html" id="tmpl-customize-section-titleless">
     61            <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
     62                <!-- Notice the lack of an h3 with title displayed inside. -->
     63                <ul class="accordion-section-content">
     64                    <# if ( data.description ) { #>
     65                        <li class="customize-section-description-container">
     66                            <p class="description customize-section-description">{{{ data.description }}}</p>
     67                        </li>
     68                    <# } #>
     69                </ul>
     70            </li>
     71        </script>
     72
     73        <!-- Customizer templates for panels -->
     74        <script type="text/html" id="tmpl-customize-panel-default">
     75            <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
     76                <h3 class="accordion-section-title" tabindex="0">
     77                    {{ data.title }}
     78                    <span class="screen-reader-text">Press return or enter to open this panel</span>
     79                </h3>
     80                <ul class="accordion-sub-container control-panel-content"></ul>
     81            </li>
     82        </script>
     83        <script type="text/html" id="tmpl-customize-panel-default-content">
     84            <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
     85                <div class="accordion-section-title" tabindex="0">
     86                    <span class="preview-notice">You are customizing <strong class="panel-title">{{ data.title }}</strong></span>
     87                </div>
     88                <# if ( data.description ) { #>
     89                    <div class="accordion-section-content description">
     90                        {{{ data.description }}}
     91                    </div>
     92                <# } #>
     93            </li>
     94        </script>
     95        <script type="text/html" id="tmpl-customize-panel-titleless">
     96            <li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
     97                <!-- Notice the lack of an h3 with title displayed inside. -->
     98                <ul class="accordion-sub-container control-panel-content"></ul>
     99            </li>
     100        </script>
     101        <script type="text/html" id="tmpl-customize-panel-titleless-content">
     102            <li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
     103                <!-- Notice lack of title containing preview notice -->
     104                <# if ( data.description ) { #>
     105                    <div class="accordion-section-content description">
     106                        {{{ data.description }}}
     107                    </div>
     108                <# } #>
     109            </li>
     110        </script>
    42111    </body>
    43112</html>
Note: See TracChangeset for help on using the changeset viewer.