[ Index ]

PHP Cross Reference of WordPress

title

Body

[close]

/wp-admin/js/ -> postbox.js (source)

   1  /**
   2   * Contains the postboxes logic, opening and closing postboxes, reordering and saving
   3   * the state and ordering to the database.
   4   *
   5   * @since 2.5.0
   6   * @requires jQuery
   7   * @output wp-admin/js/postbox.js
   8   */
   9  
  10  /* global ajaxurl, postBoxL10n, postboxes */
  11  
  12  (function($) {
  13      var $document = $( document );
  14  
  15      /**
  16       * This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see
  17       * around the content on the edit page.
  18       *
  19       * @since 2.7.0
  20       *
  21       * @namespace postboxes
  22       *
  23       * @type {Object}
  24       */
  25      window.postboxes = {
  26  
  27          /**
  28           * Handles a click on either the postbox heading or the postbox open/close icon.
  29           *
  30           * Opens or closes the postbox. Expects `this` to equal the clicked element.
  31           * Calls postboxes.pbshow if the postbox has been opened, calls postboxes.pbhide
  32           * if the postbox has been closed.
  33           *
  34           * @since 4.4.0
  35           *
  36           * @memberof postboxes
  37           *
  38           * @fires postboxes#postbox-toggled
  39           *
  40           * @return {void}
  41           */
  42          handle_click : function () {
  43              var $el = $( this ),
  44                  p = $el.parent( '.postbox' ),
  45                  id = p.attr( 'id' ),
  46                  ariaExpandedValue;
  47  
  48              if ( 'dashboard_browser_nag' === id ) {
  49                  return;
  50              }
  51  
  52              p.toggleClass( 'closed' );
  53  
  54              ariaExpandedValue = ! p.hasClass( 'closed' );
  55  
  56              if ( $el.hasClass( 'handlediv' ) ) {
  57                  // The handle button was clicked.
  58                  $el.attr( 'aria-expanded', ariaExpandedValue );
  59              } else {
  60                  // The handle heading was clicked.
  61                  $el.closest( '.postbox' ).find( 'button.handlediv' )
  62                      .attr( 'aria-expanded', ariaExpandedValue );
  63              }
  64  
  65              if ( postboxes.page !== 'press-this' ) {
  66                  postboxes.save_state( postboxes.page );
  67              }
  68  
  69              if ( id ) {
  70                  if ( !p.hasClass('closed') && $.isFunction( postboxes.pbshow ) ) {
  71                      postboxes.pbshow( id );
  72                  } else if ( p.hasClass('closed') && $.isFunction( postboxes.pbhide ) ) {
  73                      postboxes.pbhide( id );
  74                  }
  75              }
  76  
  77              /**
  78               * Fires when a postbox has been opened or closed.
  79               *
  80               * Contains a jQuery object with the relevant postbox element.
  81               *
  82               * @since 4.0.0
  83               * @ignore
  84               *
  85               * @event postboxes#postbox-toggled
  86               * @type {Object}
  87               */
  88              $document.trigger( 'postbox-toggled', p );
  89          },
  90  
  91          /**
  92           * Adds event handlers to all postboxes and screen option on the current page.
  93           *
  94           * @since 2.7.0
  95           *
  96           * @memberof postboxes
  97           *
  98           * @param {string} page The page we are currently on.
  99           * @param {Object} [args]
 100           * @param {Function} args.pbshow A callback that is called when a postbox opens.
 101           * @param {Function} args.pbhide A callback that is called when a postbox closes.
 102           * @return {void}
 103           */
 104          add_postbox_toggles : function (page, args) {
 105              var $handles = $( '.postbox .hndle, .postbox .handlediv' );
 106  
 107              this.page = page;
 108              this.init( page, args );
 109  
 110              $handles.on( 'click.postboxes', this.handle_click );
 111  
 112              /**
 113               * @since 2.7.0
 114               */
 115              $('.postbox .hndle a').click( function(e) {
 116                  e.stopPropagation();
 117              });
 118  
 119              /**
 120               * Hides a postbox.
 121               *
 122               * Event handler for the postbox dismiss button. After clicking the button
 123               * the postbox will be hidden.
 124               *
 125               * @since 3.2.0
 126               *
 127               * @return {void}
 128               */
 129              $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
 130                  var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
 131                  e.preventDefault();
 132                  $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
 133              });
 134  
 135              /**
 136               * Hides the postbox element
 137               *
 138               * Event handler for the screen options checkboxes. When a checkbox is
 139               * clicked this function will hide or show the relevant postboxes.
 140               *
 141               * @since 2.7.0
 142               * @ignore
 143               *
 144               * @fires postboxes#postbox-toggled
 145               *
 146               * @return {void}
 147               */
 148              $('.hide-postbox-tog').bind('click.postboxes', function() {
 149                  var $el = $(this),
 150                      boxId = $el.val(),
 151                      $postbox = $( '#' + boxId );
 152  
 153                  if ( $el.prop( 'checked' ) ) {
 154                      $postbox.show();
 155                      if ( $.isFunction( postboxes.pbshow ) ) {
 156                          postboxes.pbshow( boxId );
 157                      }
 158                  } else {
 159                      $postbox.hide();
 160                      if ( $.isFunction( postboxes.pbhide ) ) {
 161                          postboxes.pbhide( boxId );
 162                      }
 163                  }
 164  
 165                  postboxes.save_state( page );
 166                  postboxes._mark_area();
 167  
 168                  /**
 169                   * @since 4.0.0
 170                   * @see postboxes.handle_click
 171                   */
 172                  $document.trigger( 'postbox-toggled', $postbox );
 173              });
 174  
 175              /**
 176               * Changes the amount of columns based on the layout preferences.
 177               *
 178               * @since 2.8.0
 179               *
 180               * @return {void}
 181               */
 182              $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
 183                  var n = parseInt($(this).val(), 10);
 184  
 185                  if ( n ) {
 186                      postboxes._pb_edit(n);
 187                      postboxes.save_order( page );
 188                  }
 189              });
 190          },
 191  
 192          /**
 193           * Initializes all the postboxes, mainly their sortable behaviour.
 194           *
 195           * @since 2.7.0
 196           *
 197           * @memberof postboxes
 198           *
 199           * @param {string} page The page we are currently on.
 200           * @param {Object} [args={}] The arguments for the postbox initializer.
 201           * @param {Function} args.pbshow A callback that is called when a postbox opens.
 202           * @param {Function} args.pbhide A callback that is called when a postbox
 203           *                               closes.
 204           *
 205           * @return {void}
 206           */
 207          init : function(page, args) {
 208              var isMobile = $( document.body ).hasClass( 'mobile' ),
 209                  $handleButtons = $( '.postbox .handlediv' );
 210  
 211              $.extend( this, args || {} );
 212              $('#wpbody-content').css('overflow','hidden');
 213              $('.meta-box-sortables').sortable({
 214                  placeholder: 'sortable-placeholder',
 215                  connectWith: '.meta-box-sortables',
 216                  items: '.postbox',
 217                  handle: '.hndle',
 218                  cursor: 'move',
 219                  delay: ( isMobile ? 200 : 0 ),
 220                  distance: 2,
 221                  tolerance: 'pointer',
 222                  forcePlaceholderSize: true,
 223                  helper: function( event, element ) {
 224                      /* `helper: 'clone'` is equivalent to `return element.clone();`
 225                       * Cloning a checked radio and then inserting that clone next to the original
 226                       * radio unchecks the original radio (since only one of the two can be checked).
 227                       * We get around this by renaming the helper's inputs' name attributes so that,
 228                       * when the helper is inserted into the DOM for the sortable, no radios are
 229                       * duplicated, and no original radio gets unchecked.
 230                       */
 231                      return element.clone()
 232                          .find( ':input' )
 233                              .attr( 'name', function( i, currentName ) {
 234                                  return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
 235                              } )
 236                          .end();
 237                  },
 238                  opacity: 0.65,
 239                  stop: function() {
 240                      var $el = $( this );
 241  
 242                      if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
 243                          $el.sortable('cancel');
 244                          return;
 245                      }
 246  
 247                      postboxes.save_order(page);
 248                  },
 249                  receive: function(e,ui) {
 250                      if ( 'dashboard_browser_nag' == ui.item[0].id )
 251                          $(ui.sender).sortable('cancel');
 252  
 253                      postboxes._mark_area();
 254                      $document.trigger( 'postbox-moved', ui.item );
 255                  }
 256              });
 257  
 258              if ( isMobile ) {
 259                  $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
 260                  this._pb_change();
 261              }
 262  
 263              this._mark_area();
 264  
 265              // Set the handle buttons `aria-expanded` attribute initial value on page load.
 266              $handleButtons.each( function () {
 267                  var $el = $( this );
 268                  $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
 269              });
 270          },
 271  
 272          /**
 273           * Saves the state of the postboxes to the server.
 274           *
 275           * It sends two lists, one with all the closed postboxes, one with all the
 276           * hidden postboxes.
 277           *
 278           * @since 2.7.0
 279           *
 280           * @memberof postboxes
 281           *
 282           * @param {string} page The page we are currently on.
 283           * @return {void}
 284           */
 285          save_state : function(page) {
 286              var closed, hidden;
 287  
 288              // Return on the nav-menus.php screen, see #35112.
 289              if ( 'nav-menus' === page ) {
 290                  return;
 291              }
 292  
 293              closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
 294              hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
 295  
 296              $.post(ajaxurl, {
 297                  action: 'closed-postboxes',
 298                  closed: closed,
 299                  hidden: hidden,
 300                  closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
 301                  page: page
 302              });
 303          },
 304  
 305          /**
 306           * Saves the order of the postboxes to the server.
 307           *
 308           * Sends a list of all postboxes inside a sortable area to the server.
 309           *
 310           * @since 2.8.0
 311           *
 312           * @memberof postboxes
 313           *
 314           * @param {string} page The page we are currently on.
 315           * @return {void}
 316           */
 317          save_order : function(page) {
 318              var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
 319  
 320              postVars = {
 321                  action: 'meta-box-order',
 322                  _ajax_nonce: $('#meta-box-order-nonce').val(),
 323                  page_columns: page_columns,
 324                  page: page
 325              };
 326  
 327              $('.meta-box-sortables').each( function() {
 328                  postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
 329              } );
 330  
 331              $.post( ajaxurl, postVars );
 332          },
 333  
 334          /**
 335           * Marks empty postbox areas.
 336           *
 337           * Adds a message to empty sortable areas on the dashboard page. Also adds a
 338           * border around the side area on the post edit screen if there are no postboxes
 339           * present.
 340           *
 341           * @since 3.3.0
 342           * @access private
 343           *
 344           * @memberof postboxes
 345           *
 346           * @return {void}
 347           */
 348          _mark_area : function() {
 349              var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
 350  
 351              $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
 352                  var t = $(this);
 353  
 354                  if ( visible == 1 || t.children('.postbox:visible').length ) {
 355                      t.removeClass('empty-container');
 356                  }
 357                  else {
 358                      t.addClass('empty-container');
 359                      t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
 360                  }
 361              });
 362  
 363              if ( side.length ) {
 364                  if ( side.children('.postbox:visible').length )
 365                      side.removeClass('empty-container');
 366                  else if ( $('#postbox-container-1').css('width') == '280px' )
 367                      side.addClass('empty-container');
 368              }
 369          },
 370  
 371          /**
 372           * Changes the amount of columns on the post edit page.
 373           *
 374           * @since 3.3.0
 375           * @access private
 376           *
 377           * @memberof postboxes
 378           *
 379           * @fires postboxes#postboxes-columnchange
 380           *
 381           * @param {number} n The amount of columns to divide the post edit page in.
 382           * @return {void}
 383           */
 384          _pb_edit : function(n) {
 385              var el = $('.metabox-holder').get(0);
 386  
 387              if ( el ) {
 388                  el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
 389              }
 390  
 391              /**
 392               * Fires when the amount of columns on the post edit page has been changed.
 393               *
 394               * @since 4.0.0
 395               * @ignore
 396               *
 397               * @event postboxes#postboxes-columnchange
 398               */
 399              $( document ).trigger( 'postboxes-columnchange' );
 400          },
 401  
 402          /**
 403           * Changes the amount of columns the postboxes are in based on the current
 404           * orientation of the browser.
 405           *
 406           * @since 3.3.0
 407           * @access private
 408           *
 409           * @memberof postboxes
 410           *
 411           * @return {void}
 412           */
 413          _pb_change : function() {
 414              var check = $( 'label.columns-prefs-1 input[type="radio"]' );
 415  
 416              switch ( window.orientation ) {
 417                  case 90:
 418                  case -90:
 419                      if ( !check.length || !check.is(':checked') )
 420                          this._pb_edit(2);
 421                      break;
 422                  case 0:
 423                  case 180:
 424                      if ( $( '#poststuff' ).length ) {
 425                          this._pb_edit(1);
 426                      } else {
 427                          if ( !check.length || !check.is(':checked') )
 428                              this._pb_edit(2);
 429                      }
 430                      break;
 431              }
 432          },
 433  
 434          /* Callbacks */
 435  
 436          /**
 437           * @since 2.7.0
 438           * @access public
 439           *
 440           * @property {Function|boolean} pbshow A callback that is called when a postbox
 441           *                                     is opened.
 442           * @memberof postboxes
 443           */
 444          pbshow : false,
 445  
 446          /**
 447           * @since 2.7.0
 448           * @access public
 449           * @property {Function|boolean} pbhide A callback that is called when a postbox
 450           *                                     is closed.
 451           * @memberof postboxes
 452           */
 453          pbhide : false
 454      };
 455  
 456  }(jQuery));


Generated: Fri Apr 3 01:00:03 2020 Cross-referenced by PHPXref 0.7.1