[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[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));
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Sat Nov 23 20:47:33 2019 | Cross-referenced by PHPXref 0.7 |