WordPress.org
Get WordPress

Make WordPress Core

Ticket #34923: 34923.ui.1.diff

File 34923.ui.1.diff, 10.2 KB (added by celloexpressions, 10 years ago)

Add event handlers to create-items UI, add menu items to menus. Needs the part that actually creates new posts, which is being worked on in the customize posts plugin.

  • src/wp-admin/css/customize-nav-menus.css

     
    479479        color: #23282d;
    480480}
    481481
    482 #available-menu-items .accordion-section-content {
     482#available-menu-items .available-menu-items-list {
    483483        overflow-y: auto;
    484484        max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
    485485        background: transparent;
    … …  
    516516}
    517517
    518518#available-menu-items .accordion-section-content {
    519         padding: 1px 15px 15px 15px;
     519        max-height: 290px;
    520520        margin: 0;
    521         max-height: 290px;
     521        padding: 0;
     522        position: relative;
     523        background: transparent;
    522524}
    523525
     526#available-menu-items .accordion-section-content .available-menu-items-list {
     527        margin: 0 0 45px 0;
     528        padding: 1px 15px 15px 15px;
     529}
     530
     531#available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
     532        margin-bottom: 0;
     533}
     534
     535#new-custom-menu-item .accordion-section-content {
     536        padding: 0 15px 15px 15px;
     537}
     538
     539#available-menu-items .accordion-section-content .new-content-item {
     540        width: calc(100% - 30px);
     541        padding: 8px 15px;
     542        position: absolute;
     543        bottom: 0;
     544        z-index: 10;
     545        background: #eee;
     546}
     547
     548#available-menu-items .new-content-item .add-content {
     549        float: right;
     550        padding-left: 6px;
     551}
     552
     553#available-menu-items .new-content-item .add-content:before {
     554        content: "\f543";
     555        font: 20px/16px dashicons;
     556        position: relative;
     557        display: inline-block;
     558        top: 5px;
     559        left: -2px;
     560}
     561
    524562#available-menu-items .menu-item-tpl {
    525563        margin: 0;
    526564}

  • src/wp-admin/js/customize-nav-menus.js

     
    100100                        'click .menu-item-tpl': '_submit',
    101101                        'click #custom-menu-item-submit': '_submitLink',
    102102                        'keypress #custom-menu-item-name': '_submitLink',
     103                        'click .new-content-item .add-content': '_submitNew',
     104                        'keypress .create-item-input': '_submitNew',
    103105                        'keydown': 'keyboardAccessible'
    104106                },
    105107
    … …  
    124126                        }
    125127
    126128                        this.$search = $( '#menu-items-search' );
    127                         this.sectionContent = this.$el.find( '.accordion-section-content' );
     129                        this.sectionContent = this.$el.find( '.available-menu-items-list' );
    128130
    129131                        this.debounceSearch = _.debounce( self.search, 500 );
    130132
    … …  
    168170
    169171                        // Load more items.
    170172                        this.sectionContent.scroll( function() {
    171                                 var totalHeight = self.$el.find( '.accordion-section.open .accordion-section-content' ).prop( 'scrollHeight' ),
     173                                var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ),
    172174                                        visibleHeight = self.$el.find( '.accordion-section.open' ).height();
    173175
    174176                                if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {
    … …  
    349351                                }
    350352                                items = new api.Menus.AvailableItemCollection( items ); // @todo Why is this collection created and then thrown away?
    351353                                self.collection.add( items.models );
    352                                 typeInner = availableMenuItemContainer.find( '.accordion-section-content' );
     354                                typeInner = availableMenuItemContainer.find( '.available-menu-items-list' );
    353355                                items.each(function( menuItem ) {
    354356                                        typeInner.append( itemTemplate( menuItem.attributes ) );
    355357                                });
    … …  
    368370
    369371                // Adjust the height of each section of items to fit the screen.
    370372                itemSectionHeight: function() {
    371                         var sections, totalHeight, accordionHeight, diff;
     373                        var sections, lists, totalHeight, accordionHeight, diff, totalWidth, button, buttonWidth;
    372374                        totalHeight = window.innerHeight;
    373375                        sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' );
    374                         accordionHeight =  46 * ( 2 + sections.length ) - 13; // Magic numbers.
     376                        lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' );
     377                        accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers.
    375378                        diff = totalHeight - accordionHeight;
    376379                        if ( 120 < diff && 290 > diff ) {
    377380                                sections.css( 'max-height', diff );
     381                                lists.css( 'max-height', ( diff - 60 ) );
    378382                        }
     383                        // Fit the new-content input and button in the available space.
     384                        totalWidth = this.$el.width();
     385                        // Clone button to get width of invisible element.
     386                        button = this.$el.find( '.accordion-section .new-content-item .add-content' ).first().clone().appendTo( 'body' ).css({ 'display': 'block', 'visibility': 'hidden' });
     387                        buttonWidth = button.outerWidth();
     388                        button.remove();
     389                        this.$el.find( '.accordion-section .new-content-item .create-item-input' ).width( ( totalWidth - buttonWidth - 70 ) ); // 70 = additional margins and padding.
    379390                },
    380391
    381392                // Highlights a menu item.
    … …  
    468479                        itemName.val( '' );
    469480                },
    470481
     482                // Submit handler for keypress (enter) on field and click on button.
     483                _submitNew: function( event ) {
     484                        // Only proceed with keypress if it is Enter.
     485                        if ( 'keypress' === event.type && 13 !== event.which ) {
     486                                return;
     487                        }
     488
     489                        var container = $( event.target ).closest( '.accordion-section-content' );
     490                       
     491                        this.submitNew( container );
     492                },
     493
     494                // Creates a new object and adds an associated menu item to the menu.
     495                submitNew: function( container ) {
     496                        var menuItem, objectId,
     497                                itemName = container.find( '.create-item-input' ),
     498                                dataContainer = container.find( '.available-menu-items-list' ),
     499                                itemType = dataContainer.data( 'type' ),
     500                                itemObject = dataContainer.data( 'object' ),
     501                                itemTypeLabel = dataContainer.data( 'type_label' );
     502
     503                        if ( ! this.currentMenuControl ) {
     504                                return;
     505                        }
     506
     507                        if ( '' === itemName.val() ) {
     508                                itemName.addClass( 'invalid' );
     509                                return;
     510                        }
     511
     512                        if ( 'post_type' === itemType ) {
     513                                // @todo: add new post of type itemObject, get id for menu item parent object id.
     514                                objectId = -1;
     515                        } else {
     516                                // @todo: add new term in taxonomy itemObject, get id for menu item parent object id.
     517                                objectId = -1;
     518                        }
     519
     520                        menuItem = {
     521                                'title': itemName.val(),
     522                                'type': itemType,
     523                                'type_label': itemTypeLabel,
     524                                'object': itemObject,
     525                                'object_id': objectId
     526                        };
     527
     528                        this.currentMenuControl.addItemToMenu( menuItem );
     529
     530                        // @todo: add the new item to the list of available items.
     531                       
     532                        // Reset the create content form.
     533                        itemName.val( '' );
     534                },
     535
    471536                // Opens the panel.
    472537                open: function( menuControl ) {
    473538                        this.currentMenuControl = menuControl;

  • src/wp-includes/class-wp-customize-nav-menus.php

     
    655655                        foreach ( $post_types as $slug => $post_type ) {
    656656                                $item_types[] = array(
    657657                                        'title'  => $post_type->labels->name,
     658                                        'label'  => $post_type->labels->singular_name,
    658659                                        'type'   => 'post_type',
    659660                                        'object' => $post_type->name,
    660661                                );
    … …  
    669670                                }
    670671                                $item_types[] = array(
    671672                                        'title'  => $taxonomy->labels->name,
     673                                        'label'  => $taxonomy->labels->singular_name,
    672674                                        'type'   => 'taxonomy',
    673675                                        'object' => $taxonomy->name,
    674676                                );
    … …  
    763765                                        <span class="spinner"></span>
    764766                                        <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
    765767                                </div>
    766                                 <ul class="accordion-section-content" data-type="search"></ul>
     768                                <ul class="accordion-section-content available-menu-items-list" data-type="search"></ul>
    767769                        </div>
    768770                        <div id="new-custom-menu-item" class="accordion-section">
    769771                                <h4 class="accordion-section-title" role="presentation">
    … …  
    792794                                </div>
    793795                        </div>
    794796                        <?php
    795                         // Containers for per-post-type item browsing; items added with JS.
     797                        /**
     798                         * Filter the content types that do not allow new items to be created from nav menus.
     799                         *
     800                         * Types are formated as 'post_type'|'taxonomy' _ post_type_name; for example, 'taxonomy_post_format'.
     801                         *
     802                         * @since 4.6.0
     803                         *
     804                         * @param array  $types  Array of disallowed types.
     805                         */
     806                        $disallowed_new_content_types = apply_filters( 'customize_nav_menus_disallow_new_content_types', array( 'taxonomy_post_format' ) );
     807
     808                        // Containers for per-post-type item browsing; items are added with JS.
    796809                        foreach ( $this->available_item_types() as $available_item_type ) {
    797810                                $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
    798811                                ?>
    … …  
    808821                                                        <span class="toggle-indicator" aria-hidden="true"></span>
    809822                                                </button>
    810823                                        </h4>
    811                                         <ul class="accordion-section-content" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>"></ul>
     824                                        <div class="accordion-section-content">
     825                                                <ul class="available-menu-items-list" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>" data-type_label="<?php echo esc_attr( $available_item_type['label'] ); ?>"></ul>
     826                                                <?php if ( 'post_type' === $available_item_type['type'] ) {
     827                                                        $post_type = get_post_type_object( $available_item_type['object'] );
     828                                                        $cap = $post_type->cap->publish_posts;
     829                                                        $label = $post_type->labels->singular_name;
     830                                                } else {
     831                                                        $taxonomy = get_taxonomy( $available_item_type['object'] );
     832                                                        $cap = $taxonomy->cap->manage_terms;
     833                                                        $label = $taxonomy->labels->singular_name;
     834                                                }
     835                                                if ( current_user_can( $cap ) && ! in_array( $available_item_type['type'] . '_' . $available_item_type['object'], $disallowed_new_content_types ) ) : ?>
     836                                                        <div class="new-content-item">
     837                                                                <input type="text" class="create-item-input" placeholder="<?php
     838                                                                /* translators: %s: Singular title of post type or taxonomy */
     839                                                                printf( __( 'Create New %s' ), $label ); ?>">
     840                                                                <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
     841                                                        </div>
     842                                                <?php endif; ?>
     843                                        </div>
    812844                                </div>
    813845                                <?php
    814846                        }