[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Customize API: WP_Customize_Nav_Menu_Item_Control class
   4   *
   5   * @package WordPress
   6   * @subpackage Customize
   7   * @since 4.4.0
   8   */
   9  
  10  /**
  11   * Customize control to represent the name field for a given menu.
  12   *
  13   * @since 4.3.0
  14   *
  15   * @see WP_Customize_Control
  16   */
  17  class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
  18  
  19      /**
  20       * Control type.
  21       *
  22       * @since 4.3.0
  23       * @var string
  24       */
  25      public $type = 'nav_menu_item';
  26  
  27      /**
  28       * The nav menu item setting.
  29       *
  30       * @since 4.3.0
  31       * @var WP_Customize_Nav_Menu_Item_Setting
  32       */
  33      public $setting;
  34  
  35      /**
  36       * Constructor.
  37       *
  38       * @since 4.3.0
  39       *
  40       * @see WP_Customize_Control::__construct()
  41       *
  42       * @param WP_Customize_Manager $manager Customizer bootstrap instance.
  43       * @param string               $id      The control ID.
  44       * @param array                $args    Optional. Arguments to override class property defaults.
  45       *                                      See WP_Customize_Control::__construct() for information
  46       *                                      on accepted arguments. Default empty array.
  47       */
  48  	public function __construct( $manager, $id, $args = array() ) {
  49          parent::__construct( $manager, $id, $args );
  50      }
  51  
  52      /**
  53       * Don't render the control's content - it's rendered with a JS template.
  54       *
  55       * @since 4.3.0
  56       */
  57  	public function render_content() {}
  58  
  59      /**
  60       * JS/Underscore template for the control UI.
  61       *
  62       * @since 4.3.0
  63       */
  64  	public function content_template() {
  65          ?>
  66          <div class="menu-item-bar">
  67              <div class="menu-item-handle">
  68                  <span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
  69                  <span class="item-title" aria-hidden="true">
  70                      <span class="spinner"></span>
  71                      <span class="menu-item-title<# if ( ! data.title && ! data.original_title ) { #> no-title<# } #>">{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}</span>
  72                      <# if ( 0 === data.depth ) { #>
  73                          <span class="is-submenu" style="display: none;"><?php _e( 'sub item' ); ?></span>
  74                      <# } else { #>
  75                          <span class="is-submenu"><?php _e( 'sub item' ); ?></span>
  76                      <# } #>
  77                  </span>
  78                  <span class="item-controls">
  79                      <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
  80                      <# if ( 0 === data.depth ) { #>
  81                          <?php
  82                          /* translators: 1: Title of a menu item, 2: Type of a menu item. 3: Item index, 4: Total items. */
  83                          printf( __( 'Edit %1$s (%2$s, %3$d of %4$d)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '' );
  84                          ?>
  85                      <# } else if ( 1 === data.depth ) { #>
  86                          <?php
  87                              /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent. */
  88                              printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '' );
  89                          ?>
  90                      <# } else { #>
  91                          <?php
  92                              /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent, 6: Item depth. */
  93                              printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '', '{{data.depth}}' );
  94                          ?>
  95                      <# } #>
  96                      </span><span class="toggle-indicator" aria-hidden="true"></span></button>
  97                      <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
  98                      <?php
  99                          /* translators: 1: Title of a menu item, 2: Type of a menu item. */
 100                          printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
 101                      ?>
 102                      </span></button>
 103                  </span>
 104              </div>
 105          </div>
 106  
 107          <div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
 108              <# if ( 'custom' === data.item_type ) { #>
 109              <p class="field-url description description-thin">
 110                  <label for="edit-menu-item-url-{{ data.menu_item_id }}">
 111                      <?php _e( 'URL' ); ?><br />
 112                      <input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
 113                  </label>
 114              </p>
 115          <# } #>
 116              <p class="description description-thin">
 117                  <label for="edit-menu-item-title-{{ data.menu_item_id }}">
 118                      <?php _e( 'Navigation Label' ); ?><br />
 119                      <input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" placeholder="{{ data.original_title }}" class="widefat edit-menu-item-title" name="menu-item-title" />
 120                  </label>
 121              </p>
 122              <p class="field-link-target description description-thin">
 123                  <label for="edit-menu-item-target-{{ data.menu_item_id }}">
 124                      <input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
 125                      <?php _e( 'Open link in a new tab' ); ?>
 126                  </label>
 127              </p>
 128              <p class="field-title-attribute field-attr-title description description-thin">
 129                  <label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
 130                      <?php _e( 'Title Attribute' ); ?><br />
 131                      <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" />
 132                  </label>
 133              </p>
 134              <p class="field-css-classes description description-thin">
 135                  <label for="edit-menu-item-classes-{{ data.menu_item_id }}">
 136                      <?php _e( 'CSS Classes' ); ?><br />
 137                      <input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
 138                  </label>
 139              </p>
 140              <p class="field-xfn description description-thin">
 141                  <label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
 142                      <?php _e( 'Link Relationship (XFN)' ); ?><br />
 143                      <input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
 144                  </label>
 145              </p>
 146              <p class="field-description description description-thin">
 147                  <label for="edit-menu-item-description-{{ data.menu_item_id }}">
 148                      <?php _e( 'Description' ); ?><br />
 149                      <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>
 150                      <span class="description"><?php _e( 'The description will be displayed in the menu if the active theme supports it.' ); ?></span>
 151                  </label>
 152              </p>
 153  
 154              <?php
 155              /**
 156               * Fires at the end of the form field template for nav menu items in the customizer.
 157               *
 158               * Additional fields can be rendered here and managed in JavaScript.
 159               *
 160               * @since 5.4.0
 161               */
 162              do_action( 'wp_nav_menu_item_custom_fields_customize_template' );
 163              ?>
 164  
 165              <div class="menu-item-actions description-thin submitbox">
 166                  <# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
 167                  <p class="link-to-original">
 168                      <?php
 169                          /* translators: Nav menu item original title. %s: Original title. */
 170                          printf( __( 'Original: %s' ), '<a class="original-link" href="{{ data.url }}">{{ data.original_title }}</a>' );
 171                      ?>
 172                  </p>
 173                  <# } #>
 174  
 175                  <button type="button" class="button-link button-link-delete item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
 176                  <span class="spinner"></span>
 177              </div>
 178              <input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
 179              <input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
 180          </div><!-- .menu-item-settings-->
 181          <ul class="menu-item-transport"></ul>
 182          <?php
 183      }
 184  
 185      /**
 186       * Return parameters for this control.
 187       *
 188       * @since 4.3.0
 189       *
 190       * @return array Exported parameters.
 191       */
 192  	public function json() {
 193          $exported                 = parent::json();
 194          $exported['menu_item_id'] = $this->setting->post_id;
 195  
 196          return $exported;
 197      }
 198  }