wp-admin/js/postbox.js

   1 /* global ajaxurl, postBoxL10n */
   2
   3 var postboxes;
   4
   5 (function($) {
   6         var $document = $( document );
   7
   8         postboxes = {
   9                 handle_click : function () {
  10                         var $el = $( this ),
  11                                 p = $el.parent( '.postbox' ),
  12                                 id = p.attr( 'id' ),
  13                                 ariaExpandedValue;
  14
  15                         if ( 'dashboard_browser_nag' === id ) {
  16                                 return;
  17                         }
  18
  19                         p.toggleClass( 'closed' );
  20
  21                         ariaExpandedValue = ! p.hasClass( 'closed' );
  22
  23                         if ( $el.hasClass( 'handlediv' ) ) {
  24                                 // The handle button was clicked.
  25                                 $el.attr( 'aria-expanded', ariaExpandedValue );
  26                         } else {
  27                                 // The handle heading was clicked.
  28                                 $el.closest( '.postbox' ).find( 'button.handlediv' )
  29                                         .attr( 'aria-expanded', ariaExpandedValue );
  30                         }
  31
  32                         if ( postboxes.page !== 'press-this' ) {
  33                                 postboxes.save_state( postboxes.page );
  34                         }
  35
  36                         if ( id ) {
  37                                 if ( !p.hasClass('closed') && $.isFunction( postboxes.pbshow ) ) {
  38                                         postboxes.pbshow( id );
  39                                 } else if ( p.hasClass('closed') && $.isFunction( postboxes.pbhide ) ) {
  40                                         postboxes.pbhide( id );
  41                                 }
  42                         }
  43
  44                         $document.trigger( 'postbox-toggled', p );
  45                 },
  46
  47                 add_postbox_toggles : function (page, args) {
  48                         var $handles = $( '.postbox .hndle, .postbox .handlediv' );
  49
  50                         this.page = page;
  51                         this.init( page, args );
  52
  53                         $handles.on( 'click.postboxes', this.handle_click );
  54
  55                         $('.postbox .hndle a').click( function(e) {
  56                                 e.stopPropagation();
  57                         });
  58
  59                         $( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {
  60                                 var hide_id = $(this).parents('.postbox').attr('id') + '-hide';
  61                                 e.preventDefault();
  62                                 $( '#' + hide_id ).prop('checked', false).triggerHandler('click');
  63                         });
  64
  65                         $('.hide-postbox-tog').bind('click.postboxes', function() {
  66                                 var $el = $(this),
  67                                         boxId = $el.val(),
  68                                         $postbox = $( '#' + boxId );
  69
  70                                 if ( $el.prop( 'checked' ) ) {
  71                                         $postbox.show();
  72                                         if ( $.isFunction( postboxes.pbshow ) ) {
  73                                                 postboxes.pbshow( boxId );
  74                                         }
  75                                 } else {
  76                                         $postbox.hide();
  77                                         if ( $.isFunction( postboxes.pbhide ) ) {
  78                                                 postboxes.pbhide( boxId );
  79                                         }
  80                                 }
  81                                 postboxes.save_state( page );
  82                                 postboxes._mark_area();
  83                                 $document.trigger( 'postbox-toggled', $postbox );
  84                         });
  85
  86                         $('.columns-prefs input[type="radio"]').bind('click.postboxes', function(){
  87                                 var n = parseInt($(this).val(), 10);
  88
  89                                 if ( n ) {
  90                                         postboxes._pb_edit(n);
  91                                         postboxes.save_order( page );
  92                                 }
  93                         });
  94                 },
  95
  96                 init : function(page, args) {
  97                         var isMobile = $( document.body ).hasClass( 'mobile' ),
  98                                 $handleButtons = $( '.postbox .handlediv' );
  99
 100                         $.extend( this, args || {} );
 101                         $('#wpbody-content').css('overflow','hidden');
 102                         $('.meta-box-sortables').sortable({
 103                                 placeholder: 'sortable-placeholder',
 104                                 connectWith: '.meta-box-sortables',
 105                                 items: '.postbox',
 106                                 handle: '.hndle',
 107                                 cursor: 'move',
 108                                 delay: ( isMobile ? 200 : 0 ),
 109                                 distance: 2,
 110                                 tolerance: 'pointer',
 111                                 forcePlaceholderSize: true,
 112                                 helper: function( event, element ) {
 113                                         // `helper: 'clone'` is equivalent to `return element.clone();`
 114                                         // Cloning a checked radio and then inserting that clone next to the original
 115                                         // radio unchecks the original radio (since only one of the two can be checked).
 116                                         // We get around this by renaming the helper's inputs' name attributes so that,
 117                                         // when the helper is inserted into the DOM for the sortable, no radios are
 118                                         // duplicated, and no original radio gets unchecked.
 119                                         return element.clone()
 120                                                 .find( ':input' )
 121                                                         .attr( 'name', function( i, currentName ) {
 122                                                                 return 'sort_' + parseInt( Math.random() * 100000, 10 ).toString() + '_' + currentName;
 123                                                         } )
 124                                                 .end();
 125                                 },
 126                                 opacity: 0.65,
 127                                 stop: function() {
 128                                         var $el = $( this );
 129
 130                                         if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) {
 131                                                 $el.sortable('cancel');
 132                                                 return;
 133                                         }
 134
 135                                         postboxes.save_order(page);
 136                                 },
 137                                 receive: function(e,ui) {
 138                                         if ( 'dashboard_browser_nag' == ui.item[0].id )
 139                                                 $(ui.sender).sortable('cancel');
 140
 141                                         postboxes._mark_area();
 142                                         $document.trigger( 'postbox-moved', ui.item );
 143                                 }
 144                         });
 145
 146                         if ( isMobile ) {
 147                                 $(document.body).bind('orientationchange.postboxes', function(){ postboxes._pb_change(); });
 148                                 this._pb_change();
 149                         }
 150
 151                         this._mark_area();
 152
 153                         // Set the handle buttons `aria-expanded` attribute initial value on page load.
 154                         $handleButtons.each( function () {
 155                                 var $el = $( this );
 156                                 $el.attr( 'aria-expanded', ! $el.parent( '.postbox' ).hasClass( 'closed' ) );
 157                         });
 158                 },
 159
 160                 save_state : function(page) {
 161                         var closed, hidden;
 162
 163                         // Return on the nav-menus.php screen, see #35112.
 164                         if ( 'nav-menus' === page ) {
 165                                 return;
 166                         }
 167
 168                         closed = $( '.postbox' ).filter( '.closed' ).map( function() { return this.id; } ).get().join( ',' );
 169                         hidden = $( '.postbox' ).filter( ':hidden' ).map( function() { return this.id; } ).get().join( ',' );
 170
 171                         $.post(ajaxurl, {
 172                                 action: 'closed-postboxes',
 173                                 closed: closed,
 174                                 hidden: hidden,
 175                                 closedpostboxesnonce: jQuery('#closedpostboxesnonce').val(),
 176                                 page: page
 177                         });
 178                 },
 179
 180                 save_order : function(page) {
 181                         var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
 182
 183                         postVars = {
 184                                 action: 'meta-box-order',
 185                                 _ajax_nonce: $('#meta-box-order-nonce').val(),
 186                                 page_columns: page_columns,
 187                                 page: page
 188                         };
 189                         $('.meta-box-sortables').each( function() {
 190                                 postVars[ 'order[' + this.id.split( '-' )[0] + ']' ] = $( this ).sortable( 'toArray' ).join( ',' );
 191                         } );
 192                         $.post( ajaxurl, postVars );
 193                 },
 194
 195                 _mark_area : function() {
 196                         var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables');
 197
 198                         $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
 199                                 var t = $(this);
 200
 201                                 if ( visible == 1 || t.children('.postbox:visible').length ) {
 202                                         t.removeClass('empty-container');
 203                                 }
 204                                 else {
 205                                         t.addClass('empty-container');
 206                                         t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
 207                                 }
 208                         });
 209
 210                         if ( side.length ) {
 211                                 if ( side.children('.postbox:visible').length )
 212                                         side.removeClass('empty-container');
 213                                 else if ( $('#postbox-container-1').css('width') == '280px' )
 214                                         side.addClass('empty-container');
 215                         }
 216                 },
 217
 218                 _pb_edit : function(n) {
 219                         var el = $('.metabox-holder').get(0);
 220
 221                         if ( el ) {
 222                                 el.className = el.className.replace(/columns-\d+/, 'columns-' + n);
 223                         }
 224
 225                         $( document ).trigger( 'postboxes-columnchange' );
 226                 },
 227
 228                 _pb_change : function() {
 229                         var check = $( 'label.columns-prefs-1 input[type="radio"]' );
 230
 231                         switch ( window.orientation ) {
 232                                 case 90:
 233                                 case -90:
 234                                         if ( !check.length || !check.is(':checked') )
 235                                                 this._pb_edit(2);
 236                                         break;
 237                                 case 0:
 238                                 case 180:
 239                                         if ( $('#poststuff').length ) {
 240                                                 this._pb_edit(1);
 241                                         } else {
 242                                                 if ( !check.length || !check.is(':checked') )
 243                                                         this._pb_edit(2);
 244                                         }
 245                                         break;
 246                         }
 247                 },
 248
 249                 /* Callbacks */
 250                 pbshow : false,
 251
 252                 pbhide : false
 253         };
 254
 255 }(jQuery));