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