Ticket #34923: 34923.2.customize-posts.diff
File 34923.2.customize-posts.diff, 9.7 KB (added by , 9 years ago) |
---|
-
src/wp-admin/css/customize-nav-menus.css
diff --git src/wp-admin/css/customize-nav-menus.css src/wp-admin/css/customize-nav-menus.css index cc6725e..c0204a2 100644
479 479 color: #23282d; 480 480 } 481 481 482 #available-menu-items .a ccordion-section-content {482 #available-menu-items .available-menu-items-list { 483 483 overflow-y: auto; 484 484 max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */ 485 485 background: transparent; … … 516 516 } 517 517 518 518 #available-menu-items .accordion-section-content { 519 padding: 1px 15px 15px 15px;520 margin: 0;521 519 max-height: 290px; 520 margin: 0; 521 padding: 0; 522 position: relative; 523 background: transparent; 524 } 525 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; 522 560 } 523 561 524 562 #available-menu-items .menu-item-tpl { -
src/wp-admin/js/customize-nav-menus.js
diff --git src/wp-admin/js/customize-nav-menus.js src/wp-admin/js/customize-nav-menus.js index d27f57c..d4363b1 100644
100 100 'click .menu-item-tpl': '_submit', 101 101 'click #custom-menu-item-submit': '_submitLink', 102 102 'keypress #custom-menu-item-name': '_submitLink', 103 'click .new-content-item .add-content': '_submitNew', 104 'keypress .create-item-input': '_submitNew', 103 105 'keydown': 'keyboardAccessible' 104 106 }, 105 107 … … 124 126 } 125 127 126 128 this.$search = $( '#menu-items-search' ); 127 this.sectionContent = this.$el.find( '.a ccordion-section-content' );129 this.sectionContent = this.$el.find( '.available-menu-items-list' ); 128 130 129 131 this.debounceSearch = _.debounce( self.search, 500 ); 130 132 … … 168 170 169 171 // Load more items. 170 172 this.sectionContent.scroll( function() { 171 var totalHeight = self.$el.find( '.accordion-section.open .a ccordion-section-content' ).prop( 'scrollHeight' ),173 var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ), 172 174 visibleHeight = self.$el.find( '.accordion-section.open' ).height(); 173 175 174 176 if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) { … … 349 351 } 350 352 items = new api.Menus.AvailableItemCollection( items ); // @todo Why is this collection created and then thrown away? 351 353 self.collection.add( items.models ); 352 typeInner = availableMenuItemContainer.find( '.a ccordion-section-content' );354 typeInner = availableMenuItemContainer.find( '.available-menu-items-list' ); 353 355 items.each(function( menuItem ) { 354 356 typeInner.append( itemTemplate( menuItem.attributes ) ); 355 357 }); … … 368 370 369 371 // Adjust the height of each section of items to fit the screen. 370 372 itemSectionHeight: function() { 371 var sections, totalHeight, accordionHeight, diff;373 var sections, lists, totalHeight, accordionHeight, diff, totalWidth, button, buttonWidth; 372 374 totalHeight = window.innerHeight; 373 375 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. 375 378 diff = totalHeight - accordionHeight; 376 379 if ( 120 < diff && 290 > diff ) { 377 380 sections.css( 'max-height', diff ); 381 lists.css( 'max-height', ( diff - 60 ) ); 378 382 } 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. 379 390 }, 380 391 381 392 // Highlights a menu item. … … 468 479 itemName.val( '' ); 469 480 }, 470 481 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 panel = this, 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 promise; 503 504 if ( ! this.currentMenuControl ) { 505 return; 506 } 507 508 if ( '' === itemName.val() ) { 509 itemName.addClass( 'invalid' ); 510 return; 511 } 512 513 // Only posts are supported currently. 514 if ( 'post_type' !== itemType ) { 515 return; 516 } 517 518 // Customize Posts is not available. 519 if ( ! wp.customize.Posts.insertAutoDraftPost ) { 520 return; 521 } 522 523 promise = wp.customize.Posts.insertAutoDraftPost( { 524 post_title: itemName.val(), 525 post_type: itemObject, 526 post_status: 'publish' 527 } ); 528 promise.done( function( data ) { 529 var menuItem = { 530 'title': itemName.val(), 531 'type': itemType, 532 'type_label': itemTypeLabel, 533 'object': itemObject, 534 'object_id': data.postId 535 }; 536 panel.currentMenuControl.addItemToMenu( menuItem ); 537 538 // @todo: add the new item to the list of available items. 539 540 // Reset the create content form. 541 itemName.val( '' ); 542 } ); 543 }, 544 471 545 // Opens the panel. 472 546 open: function( menuControl ) { 473 547 this.currentMenuControl = menuControl; -
src/wp-includes/class-wp-customize-nav-menus.php
diff --git src/wp-includes/class-wp-customize-nav-menus.php src/wp-includes/class-wp-customize-nav-menus.php index 4bb112b..0523802 100644
final class WP_Customize_Nav_Menus { 655 655 foreach ( $post_types as $slug => $post_type ) { 656 656 $item_types[] = array( 657 657 'title' => $post_type->labels->name, 658 'label' => $post_type->labels->singular_name, 658 659 'type' => 'post_type', 659 660 'object' => $post_type->name, 660 661 ); … … final class WP_Customize_Nav_Menus { 669 670 } 670 671 $item_types[] = array( 671 672 'title' => $taxonomy->labels->name, 673 'label' => $taxonomy->labels->singular_name, 672 674 'type' => 'taxonomy', 673 675 'object' => $taxonomy->name, 674 676 ); … … final class WP_Customize_Nav_Menus { 763 765 <span class="spinner"></span> 764 766 <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span> 765 767 </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> 767 769 </div> 768 770 <div id="new-custom-menu-item" class="accordion-section"> 769 771 <h4 class="accordion-section-title" role="presentation"> … … final class WP_Customize_Nav_Menus { 792 794 </div> 793 795 </div> 794 796 <?php 795 // Containers for per-post-type item browsing; items added with JS. 797 798 // Containers for per-post-type item browsing; items are added with JS. 796 799 foreach ( $this->available_item_types() as $available_item_type ) { 797 800 $id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] ); 798 801 ?> … … final class WP_Customize_Nav_Menus { 808 811 <span class="toggle-indicator" aria-hidden="true"></span> 809 812 </button> 810 813 </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> 814 <div class="accordion-section-content"> 815 <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> 816 <?php if ( 'post_type' === $available_item_type['type'] ) : ?> 817 <?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?> 818 <?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?> 819 <div class="new-content-item"> 820 <input type="text" class="create-item-input" placeholder="<?php 821 /* translators: %s: Singular title of post type or taxonomy */ 822 printf( __( 'Create New %s' ), $post_type_obj->labels->singular_name ); ?>"> 823 <button type="button" class="button add-content"><?php _e( 'Add' ); ?></button> 824 </div> 825 <?php endif; ?> 826 <?php endif; ?> 827 </div> 812 828 </div> 813 829 <?php 814 830 }