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]
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.caseyftw.com%2Fupload%2Fspoiler.png&hash=37861b893f95f253ac3177d69d0d08b5dd63ac7c)
(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 (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 (http://www.simplemachines.org/community/index.php?topic=293165.msg1933092#msg1933092).
And that's it! Enjoy!
Does this work for all versions of SMF?
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.
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.
Moved to Tips and Tricks (http://www.simplemachines.org/community/index.php?board=72.0) and added to Tips and Tricks (index) (http://www.simplemachines.org/community/index.php?topic=15899.0). Thanks for your tip.
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..
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.
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,
),
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.
I assume there is a mod already for that ::)
http://custom.simplemachines.org/mods/index.php?mod=195
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.
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
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;
}
Hey, all I was just wondering if anyone had tested this on RC5?
Nevermind answered my own question. Yes it does work in RC5.
http://custom.simplemachines.org/mods/index.php?mod=2833 (http://custom.simplemachines.org/mods/index.php?mod=2833)