News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[Tip] Collapsable Spoiler/Block Tag

Started by heavyccasey, February 15, 2009, 03:29:49 AM

Previous topic - Next topic

heavyccasey

Ever wished you had a spoiler tag on your forum? Well here's one now!

Sure, there are a lot of mods that do this, but it uses the standard BBC system and its JavaScript is simple.

The following is tested on 1.1.5 - 1.1.8 as well as on 2.0 RC1 (thanks Antechinus!), but other 1.1 versions should work also.


Default-titled Block
This block will have a preset title.

It looks like this:
[spoiler]Text here[/spoiler]

(Please ignore the pink, it's Valentine's Day! :P)

Subs.php
Find:

);

// This is mainly for the bbc manager, so it's easy to add tags above.  Custom BBC should be added above this line.


Add Before:
array(
'tag' => 'spoiler',
'before' => '<fieldset><legend onclick="var isHidden = this.parentNode.getElementsByTagName(\'span\')[0]; isHidden.style.display = isHidden.style.display ? \'\' : \'none\'" style="border-bottom: 1px dotted black">Spoiler </legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),



Custom-titled Block

[block=XYZ]Text here[/block]
Instead of "Spoiler", it will be replaced by "XYZ".

Subs.php
Find:

);

// This is mainly for the bbc manager, so it's easy to add tags above.  Custom BBC should be added above this line.


Add Before:

array(
'tag' => 'block',
'type' => 'unparsed_equals',
'before' => '<fieldset><legend onclick="var isHidden = this.parentNode.getElementsByTagName(\'span\')[0]; isHidden.style.display = isHidden.style.display ? \'\' : \'none\'" style="border-bottom: 1px dotted black">$1&nbsp;(click to show/hide)</legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),



...Or, you can add both.

If you want to use a button instead of text, take a look at this post.

And that's it! Enjoy!

Antechinus

Does this work for all versions of SMF?

heavyccasey

Sorry, in my excitement, I forgot the version information. It'll work on 1.1.5 - 1.1.8. I think it'll work on 2.0, seeing as the BBC array has remained almost exactly the same, but I can't test it.

Antechinus

#3
I'll test RC1 for you and post the results. :)

ETA: I'll tell you what would be a nice touch. Alter the code slightly so that instead of displaying text it displays a Hide/Show submit button like vB uses for the same purpose.

Marcus Forsberg


heavyccasey

#5
Quote from: Antechinus on February 15, 2009, 03:46:59 AM
ETA: I'll tell you what would be a nice touch. Alter the code slightly so that instead of displaying text it displays a Hide/Show submit button like vB uses for the same purpose.

If you insist...
array(
'tag' => 'spoiler',
'before' => '<fieldset><legend>Spoiler <button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),
array(
'tag' => 'block',
'type' => 'unparsed_equals',
'before' => '<fieldset><legend>$1 <button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
'after' => '</span></fieldset>',
'block_level' => true,
),
There you go :)

EDIT: Actually, let me see if I can make the button look more pleasant..

Antechinus

#6
It works with RC1, but could be improved a little. Making it a complete mod adding the edits for Post.template.php to enable easy application of the tags would be nifty.  :D

ETA: Also with the hide/show button available the extra text is superfluous and could be ditched. Styling the button can be left to the theme's css. No real need to deal with that.

Antechinus

I know SMF 2 is supposed to be feature locked but this one is so good and so easy to add I might just annoy the devs about it.  ;D

This may result in an early death though.  :P

Anyway in practice I think just running this is sufficient:

array(
                'tag' => 'spoiler',
                'before' => '<fieldset><legend><button type="button" onclick="var isHidden = this.parentNode.parentNode.getElementsByTagName(\'span\')[0]; if (isHidden.style.display) {isHidden.style.display = \'\'; this.innerHTML = \'hide\';} else {isHidden.style.display = \'none\'; this.innerHTML = \'show\';}">show</button></legend><span style="display: none">',
                'after' => '</span></fieldset>',
                'block_level' => true,
            ),

heavyccasey

Quote from: Antechinus on February 15, 2009, 04:08:31 AM
I know SMF 2 is supposed to be feature locked but this one is so good and so easy to add I might just annoy the devs about it.  ;D
I'd be happy if my code was even the inspiration for something incorporated into SMF :)

I personally prefer the text over the button and a title over no title though.

Kermit

My Mods
Please don't PM/mail me for support,unless i invite you
Formerly known as Duncan85
Quote
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe."

A. Einstein

Antechinus

Doing it this way is a lot simpler and it looks cleaner as well.

Anyway I thought of another tweak that I prefer even more. If you add this to the style.css:

/* A fieldset, for show and hide tags. */
fieldset
{
color: #000000;
background: none;
border: none;
margin: 0;
padding: 4px 4px 0 4px;
font-size: 11px;
line-height: 1.4em;
}


It gets rid of the border around the collapsed field and just shows the button. I prefer this as the default border styling doesn't match some custom themes anyway. Of course you could style the border in the fieldset class if you wanted to.

heavyccasey

Quote from: Duncan85 on February 15, 2009, 05:26:16 AM
I assume there is a mod already for that  ::)

http://custom.simplemachines.org/mods/index.php?mod=195
Actually, that looks much more complete than this. I'd use that... except I don't really need the extra options.

Quote from: Antechinus on February 15, 2009, 05:40:01 AM
Anyway I thought of another tweak that I prefer even more. If you add this to the style.css:
I'd do that if I weren't so lazy. I just do it with inline styles... otherwise I'd have to edit every theme :P

Antechinus

#12
I'm always editing the hell out of themes anyway so....................

Also I give the members around two dozen to choose from which means inline styles aren't going to work anyway.

ETA: For the button version I also added this to style.css:

button
{
    cursor: pointer;
}

ksharks

#13
Hey, all I was just wondering if anyone had tested this on RC5?

Nevermind answered my own question. Yes it does work in RC5.


Advertisement: