Make WordPress Core


Ignore:
Timestamp:
08/03/2015 07:27:27 PM (10 years ago)
Author:
westonruter
Message:

Customizer: Add QUnit tests for menus.

Props adamsilverstein, westonruter, jorbin.
Fixes #32688.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/qunit/index.html

    r33451 r33528  
    3535        <script src="../../src/wp-includes/js/shortcode.js"></script>
    3636        <script src="../../src/wp-admin/js/customize-controls.js"></script>
     37
     38        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/core.js'></script>
     39        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/widget.js'></script>
     40        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/mouse.js'></script>
     41        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/sortable.js'></script>
     42        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/draggable.js'></script>
     43        <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/droppable.js'></script>
     44
     45        <script src="../../src/wp-admin/js/nav-menu.js"></script>
    3746        <script src="../../src/wp-admin/js/customize-nav-menus.js"></script>
    3847        <script src="../../src/wp-admin/js/word-count.js"></script>
     
    116125        </script>
    117126
    118         <!-- TinyMCE -->
     127        <!-- Templates for Customizer Menus -->
     128        <script type="text/html" id="tmpl-customize-control-nav_menu-content">
     129                    <button type="button" class="button-secondary add-new-menu-item" aria-label="Add or remove menu items" aria-expanded="false" aria-controls="available-menu-items">
     130            Add Items       </button>
     131        <button type="button" class="not-a-button reorder-toggle" aria-label="Reorder menu items" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
     132            <span class="reorder">Reorder</span>
     133            <span class="reorder-done">Done</span>
     134        </button>
     135        <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}">When in reorder mode, additional controls to reorder menu items will be available in the items list above.</p>
     136        <span class="add-menu-item-loading spinner"></span>
     137        <span class="menu-delete-item">
     138            <button type="button" class="not-a-button menu-delete">
     139                Delete menu <span class="screen-reader-text">{{ data.menu_name }}</span>
     140            </button>
     141        </span>
     142                <ul class="menu-settings">
     143            <li class="customize-control">
     144                <span class="customize-control-title">Menu locations</span>
     145            </li>
     146
     147                        <li class="customize-control customize-control-checkbox assigned-menu-location">
     148                <label>
     149                    <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="primary" class="menu-location" /> Primary Menu                   <span class="theme-location-set">(Current: <span class="current-menu-location-name-primary"></span>)</span>
     150                </label>
     151            </li>
     152                        <li class="customize-control customize-control-checkbox assigned-menu-location">
     153                <label>
     154                    <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="social" class="menu-location" /> Social Links Menu                   <span class="theme-location-set">(Current: <span class="current-menu-location-name-social"></span>)</span>
     155                </label>
     156            </li>
     157
     158        </ul>
     159                </script>
     160                <script type="text/html" id="tmpl-customize-control-nav_menu_name-content">
     161                    <label>
     162            <# if ( data.label ) { #>
     163                <span class="customize-control-title screen-reader-text">{{ data.label }}</span>
     164            <# } #>
     165            <input type="text" class="menu-name-field live-update-section-title" />
     166        </label>
     167                </script>
     168                <script type="text/html" id="tmpl-customize-control-nav_menu_auto_add-content">
     169                    <span class="customize-control-title">Menu options</span>
     170        <label>
     171            <input type="checkbox" class="auto_add" />
     172            Automatically add new top-level pages to this menu      </label>
     173                </script>
     174                <script type="text/html" id="tmpl-customize-control-nav_menu_item-content">
     175                    <div class="menu-item-bar">
     176            <div class="menu-item-handle">
     177                <span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
     178                <span class="item-title" aria-hidden="true">
     179                    <span class="spinner"></span>
     180                    <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
     181                </span>
     182                <span class="item-controls">
     183                    <button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text">Edit menu item: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.item_type_label }})</span><span class="toggle-indicator" aria-hidden="true"></span></button>
     184                    <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text">Remove Menu Item: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.item_type_label }})</span></button>
     185                </span>
     186            </div>
     187        </div>
     188
     189        <div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
     190            <# if ( 'custom' === data.item_type ) { #>
     191            <p class="field-url description description-thin">
     192                <label for="edit-menu-item-url-{{ data.menu_item_id }}">
     193                    URL<br />
     194                    <input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
     195                </label>
     196            </p>
     197        <# } #>
     198            <p class="description description-thin">
     199                <label for="edit-menu-item-title-{{ data.menu_item_id }}">
     200                    Navigation Label<br />
     201                    <input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-title" name="menu-item-title" />
     202                </label>
     203            </p>
     204            <p class="field-link-target description description-thin">
     205                <label for="edit-menu-item-target-{{ data.menu_item_id }}">
     206                    <input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
     207                    Open link in a new tab              </label>
     208            </p>
     209            <p class="field-attr-title description description-thin">
     210                <label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
     211                    Title Attribute<br />
     212                    <input type="text" id="edit-menu-item-attr-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title" />
     213                </label>
     214            </p>
     215            <p class="field-css-classes description description-thin">
     216                <label for="edit-menu-item-classes-{{ data.menu_item_id }}">
     217                    CSS Classes<br />
     218                    <input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
     219                </label>
     220            </p>
     221            <p class="field-xfn description description-thin">
     222                <label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
     223                    Link Relationship (XFN)<br />
     224                    <input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
     225                </label>
     226            </p>
     227            <p class="field-description description description-thin">
     228                <label for="edit-menu-item-description-{{ data.menu_item_id }}">
     229                    Description<br />
     230                    <textarea id="edit-menu-item-description-{{ data.menu_item_id }}" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description">{{ data.description }}</textarea>
     231                    <span class="description">The description will be displayed in the menu if the current theme supports it.</span>
     232                </label>
     233            </p>
     234
     235            <div class="menu-item-actions description-thin submitbox">
     236                <# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
     237                <p class="link-to-original">
     238                    Original: <a class="original-link" href="{{ data.url }}">{{ data.original_title }}</a>              </p>
     239                <# } #>
     240
     241                <button type="button" class="not-a-button item-delete submitdelete deletion">Remove</button>
     242                <span class="spinner"></span>
     243            </div>
     244            <input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
     245            <input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
     246        </div><!-- .menu-item-settings-->
     247        <ul class="menu-item-transport"></ul>
     248        </script>
     249
     250                <script type="text/html" id="tmpl-available-menu-item">
     251            <li id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
     252                <div class="menu-item-bar">
     253                    <div class="menu-item-handle">
     254                        <span class="item-type" aria-hidden="true">{{ data.type_label }}</span>
     255                        <span class="item-title" aria-hidden="true">
     256                            <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
     257                        </span>
     258                        <button type="button" class="not-a-button item-add">
     259                            <span class="screen-reader-text">Add to menu: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.type_label }})</span>
     260                        </button>
     261                    </div>
     262                </div>
     263            </li>
     264        </script>
     265
     266        <script type="text/html" id="tmpl-menu-item-reorder-nav">
     267            <div class="menu-item-reorder-nav">
     268                <button type="button" class="menus-move-up">Move up</button><button type="button" class="menus-move-down">Move down</button><button type="button" class="menus-move-left">Move one level up</button><button type="button" class="menus-move-right">Move one level down</button>         </div>
     269        </script>
     270        <div hidden>
     271            <div id="available-menu-items" class="accordion-container">
     272            <div class="customize-section-title">
     273                <button type="button" class="customize-section-back" tabindex="-1">
     274                    <span class="screen-reader-text">Back</span>
     275                </button>
     276                <h3>
     277                    <span class="customize-action">
     278                        Customizing &#9656; Menus                   </span>
     279                    Add Menu Items              </h3>
     280            </div>
     281            <div id="available-menu-items-search" class="accordion-section cannot-expand">
     282                <div class="accordion-section-title">
     283                    <label class="screen-reader-text" for="menu-items-search">Search Menu Items</label>
     284                    <input type="text" id="menu-items-search" placeholder="Search menu items&hellip;" aria-describedby="menu-items-search-desc" />
     285                    <p class="screen-reader-text" id="menu-items-search-desc">The search results will be updated as you type.</p>
     286                    <span class="spinner"></span>
     287                    <span class="clear-results"><span class="screen-reader-text">Clear Results</span></span>
     288                </div>
     289                <ul class="accordion-section-content" data-type="search"></ul>
     290            </div>
     291            <div id="new-custom-menu-item" class="accordion-section">
     292                <h4 class="accordion-section-title" role="presentation">
     293                    Custom Links                    <button type="button" class="not-a-button" aria-expanded="false">
     294                        <span class="screen-reader-text">Toggle section: Custom Links</span>
     295                        <span class="toggle-indicator" aria-hidden="true"></span>
     296                    </button>
     297                </h4>
     298                <div class="accordion-section-content">
     299                    <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
     300                    <p id="menu-item-url-wrap">
     301                        <label class="howto" for="custom-menu-item-url">
     302                            <span>URL</span>
     303                            <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
     304                        </label>
     305                    </p>
     306                    <p id="menu-item-name-wrap">
     307                        <label class="howto" for="custom-menu-item-name">
     308                            <span>Link Text</span>
     309                            <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
     310                        </label>
     311                    </p>
     312                    <p class="button-controls">
     313                        <span class="add-to-menu">
     314                            <input type="submit" class="button-secondary submit-add-to-menu right" value="Add to Menu" name="add-custom-menu-item" id="custom-menu-item-submit">
     315                            <span class="spinner"></span>
     316                        </span>
     317                    </p>
     318                </div>
     319            </div>
     320            <div id="available-menu-items-post_type-post" class="accordion-section">
     321                    <h4 class="accordion-section-title" role="presentation">
     322                        Post                        <span class="spinner"></span>
     323                        <span class="no-items">No items</span>
     324                        <button type="button" class="not-a-button" aria-expanded="false">
     325                            <span class="screen-reader-text">Toggle section: Post</span>
     326                            <span class="toggle-indicator" aria-hidden="true"></span>
     327                        </button>
     328                    </h4>
     329                    <ul class="accordion-section-content" data-type="post_type" data-object="post"></ul>
     330                </div>
     331                                <div id="available-menu-items-post_type-page" class="accordion-section">
     332                    <h4 class="accordion-section-title" role="presentation">
     333                        Page                        <span class="spinner"></span>
     334                        <span class="no-items">No items</span>
     335                        <button type="button" class="not-a-button" aria-expanded="false">
     336                            <span class="screen-reader-text">Toggle section: Page</span>
     337                            <span class="toggle-indicator" aria-hidden="true"></span>
     338                        </button>
     339                    </h4>
     340                    <ul class="accordion-section-content" data-type="post_type" data-object="page"></ul>
     341                </div>
     342                                <div id="available-menu-items-taxonomy-category" class="accordion-section">
     343                    <h4 class="accordion-section-title" role="presentation">
     344                        Category                        <span class="spinner"></span>
     345                        <span class="no-items">No items</span>
     346                        <button type="button" class="not-a-button" aria-expanded="false">
     347                            <span class="screen-reader-text">Toggle section: Category</span>
     348                            <span class="toggle-indicator" aria-hidden="true"></span>
     349                        </button>
     350                    </h4>
     351                    <ul class="accordion-section-content" data-type="taxonomy" data-object="category"></ul>
     352                </div>
     353                                <div id="available-menu-items-taxonomy-post_tag" class="accordion-section">
     354                    <h4 class="accordion-section-title" role="presentation">
     355                        Tag                     <span class="spinner"></span>
     356                        <span class="no-items">No items</span>
     357                        <button type="button" class="not-a-button" aria-expanded="false">
     358                            <span class="screen-reader-text">Toggle section: Tag</span>
     359                            <span class="toggle-indicator" aria-hidden="true"></span>
     360                        </button>
     361                    </h4>
     362                    <ul class="accordion-section-content" data-type="taxonomy" data-object="post_tag"></ul>
     363                </div>
     364                                <div id="available-menu-items-taxonomy-post_format" class="accordion-section">
     365                    <h4 class="accordion-section-title" role="presentation">
     366                        Format                      <span class="spinner"></span>
     367                        <span class="no-items">No items</span>
     368                        <button type="button" class="not-a-button" aria-expanded="false">
     369                            <span class="screen-reader-text">Toggle section: Format</span>
     370                            <span class="toggle-indicator" aria-hidden="true"></span>
     371                        </button>
     372                    </h4>
     373                    <ul class="accordion-section-content" data-type="taxonomy" data-object="post_format"></ul>
     374                </div>
     375                        </div><!-- #available-menu-items -->
     376            </div><!-- end nav menu templates -->
     377
    119378
    120379        <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
Note: See TracChangeset for help on using the changeset viewer.