Using the “postbox” class as in the new/edit post admin pages

  • Resolved nutsmuggler

    (@nutsmuggler)


    15 years, 9 months ago

    Hello folks,
    I am building a plugin which employs admin pages. I am following the WP stylistic pattern as close as possible. For optional values, I would like to use the “postbox” class employed in the “New post” and “Edit post” page. This class is used to hide and show divs, like “Tags”, “Excerpt”, etc. I inserted a “.postbox” div in my custom form, and also a “togbox” switch; I also tried to load the “/wp-admin/js/postbox.js” script, but the switch dows not work. I know I could replicate the behaviour with jQuery, but I’d like to relay on th existing framework.
    Any suggestion?
    Cheers,
    Davide

Viewing 7 replies - 1 through 7 (of 7 total)
  • Roger Theriault

    (@rogertheriault)

    15 years, 9 months ago

    Perhaps it depends on page structure? Did you try replicating the container divs? (Especially #poststuff which is mentioned in the CSS) (And … load the CSS? 🙂 Does it add the “closed” class when you test with FireBug and click on the tab?

    Thread Starter nutsmuggler

    (@nutsmuggler)

    15 years, 9 months ago

    Thanks for the suggestion. I double-checked: the structure of my custom plugin admin page replicates exactly the common “post” admin page structure, so #poststuff is there. And no, unfortunately “.closed ” is not automatically added…
    Looking at the postbox.js file I ended up believing that replicating this behaviour is more complicated that I thought. I think this feature will be in the 2.0 version of my plugin 🙂
    Thanks anyway,
    Davide

    Roger Theriault

    (@rogertheriault)

    15 years, 9 months ago

    I looked at the postbox.js code and it’s not terribly complex…

    jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');

    This actually adds the togbox at runtime, so you don’t need to put it in your code. You just need

    <div class="postbox">
<h3>Section Name</h3>
<div class="inside">
...
</div>
</div>

    Here’s the jQuery code that sets up the click. When you click (on the h3 technically) it toggles the closed class of the parent div (the same div with the postbox class). If you don’t have an h3 to match it doesn’t work. (And if you need something other than an h3, just change the code).

    jQuery('.postbox h3').click( function() {
   jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
   save_postboxes_state(page); } );

    The rest of the code just deals with saving the status of the postbox elements, via an AJAX call to a backend wp-admin/admin-ajax.php

    But you’ll need to also include page.js or at the very least do this:

    jQuery(document).ready( function() {
    add_postbox_toggles('page');
}

    otherwise the toggles and, most importantly, the onClick callbacks, don’t get added and nothing happens, since the code in postbox.js is inside that function add_postbox_toggles().

    Alternately, and maybe much simpler, don’t include the wp JavaScript files, just create your own js file and include it… or embed it if you prefer, since it’s pretty short. (You’ll need to also include jQuery of course).

    jQuery(document).ready( function() {
    jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');
    jQuery('.postbox h3').click( function() {
        jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
    });
}

    (This omits all the other functionality, including remembering the state of the postboxes, but keeps the style)

    Thread Starter nutsmuggler

    (@nutsmuggler)

    15 years, 9 months ago

    I’ve applied your javascript, it works prefectly.
    I’m adding a simple control: I’ve added the box the “closed” class, then if the input inside it contains some values I remove the “closed” class.
    I’ll post this as soon as it works.
    Thanks again,
    Davide

    Thread Starter nutsmuggler

    (@nutsmuggler)

    15 years, 9 months ago

    Ok, here we go:

    jQuery(document).ready( function() {
	    	jQuery('.postbox h3').prepend('<a class="togbox">+</a> ');
	    	if(jQuery("textarea[@name=event_notes]").val()!="") {
			   jQuery("textarea[@name=event_notes]").parent().parent().removeClass('closed');
			}
			jQuery('.postbox h3').click( function() {
	        	jQuery(jQuery(this).parent().get(0)).toggleClass('closed');
	    	});
	});

    It works like a charm, but I would like to extend it and make it more general. As you see, the removeClass part works only for one specific postbox; which is the syntax to make it more general? I am thinkng about something like “if an input or a textarea is not empty, remove the “closed” class from its parent parent.”
    Cheers,
    Davide

    Roger Theriault

    (@rogertheriault)

    15 years, 9 months ago

    You select things just like CSS, plus a few more options…

    So it would be jQuery('.postbox :text') for example. Although that may not be the optimal way to do it (see below).

    There’s a tutorial on selectors on the jQuery site http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want or you might want to pick up “jQuery in Action”, which is an excellent book.

    You’ll want to check out Traversing and filters to learn how to manipulate a matched set, it will allow you to eliminate the if statements and repetitive selectors.

    i.e.

    jQuery('.postbox').hasClass('closed').find(':text').filter(
    function (index) { return $(this).val()!="";
}).parent().removeClass('closed');

    (I haven’t tested this… hopefully it’s close to right 🙂
    It selects everything with postbox class, then selects the subset with a class of closed (not absolutely needed), then selects the text input element children, compares these to de-select the empty ones, then selects the parent divs, and finally removes your closed class.

    Thread Starter nutsmuggler

    (@nutsmuggler)

    15 years, 9 months ago

    Thanks for the suggestions, I’ll give them a try later. Thanks for all the discussion, I’ve probably learned more about jQuery here than in the rest of my attempts.
    Cheers, Davide

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Using the “postbox” class as in the new/edit post admin pages’ is closed to new replies.