[Summary view] [Print] [Text view]

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