Topic: Spoiler Tags

Hello!

I'm running a german movie website and one of the disadvantages of discussing movies in a forum is: how can you tell important details of a movie without ruining the fun for people who haven't seen the movie? If you tell the surprise ending of a film somebody who wanted to see the movie will surely kill you.

So, I tried to make a workaround. It's not a real mod, only some additional lines in two scripts (version 1.1.2!). It works as follows:

[spoiler]This text will tell you the murderer.[/spoiler]

This will print your text like a quote, but in a almost unreadable color, nearly the same as the background color.

For an example have a look in this thread I've just started: http://www.senseofview.de/forum/viewtopic.php?id=109
The text is in german but I think you can see the functionality.

So, what have I changed? The only scripts I modified are edit.php and includes/parser.php and you have to make some additions in your style sheets.

Okay, first edit.php. In lines 112 and 113 I changed

$a = array("#\[quote\]#i", "#\[quote=#i" ... "#\[url=#i", "#\[/url\]#i");
$b = array('[quote]', '[quote=', '[/quote]', ... '[url]', '[url=', '[/url]');

to

$a = array("#\[quote\]#i", "#\[quote=#i" ... "#\[url=#i", "#\[/url\]#i", "#\[spoiler\]#i", "#\[/spoiler\]#i");
$b = array('[quote]', '[quote=' ... '[url]', '[url=', '[/url]', '[spoiler]', '[/spoiler]');

In includes/parser.php there is something more to do. Well, look around line 80 for:

$q_start = strpos($text, '[quote]');
$q_end = strpos($text, '[/quote]');

and add in the next line:

$s_start = strpos($text, '[spoiler]');
$s_end = strpos($text, '[/spoiler]');

Just some lines below add:

if ($s_start === false) $s_start = 65536;
if ($s_end === false) $s_end = 65536;

And below change

if (min($c_start, $c_end, $q_start, $q_end, $q2_start) == 65536)

to

if (min($c_start, $c_end, $q_start, $q_end, $q2_start, $s_start, $s_end) == 65536)

Below that you'll find something like this:

else if ($c_start < min($c_end, $q_start, $q_end))
{
  ...
}
else if ($c_end < min($c_start, $q_start, $q_end))
  message($lang_common['BBCode error'].' '.$lang_common['BBCode error 3']);

Just add almost the same, only modified for the spoiler tags:

// We found a [spoiler]
else if ($s_start < min($s_end, $q_start, $q_end))
{
    $tmp = strpos($text, '[/spoiler]');
    if ($tmp === false)
        message($lang_common['BBCode error'].' '.$lang_common['BBCode error 2']);
    else
        $text = substr($text, $tmp+10);

    $cur_index += $tmp+10;
}

// We found a [/spoiler] (this shouldn't happen since we handle both start and end tag in the if clause above)
else if ($s_end < min($s_start, $q_start, $q_end))
    message($lang_common['BBCode error'].' '.$lang_common['BBCode error 3']);

Search for the following line:

if (strpos($message, 'quote') !== false)

After the end of the if-clause add this:

if (strpos($message, 'spoiler') !== false)
{
    $message = str_replace('[spoiler]', '<br></span><table style="width:99%" align="center" cellspacing="4" cellpadding="6"><tr><td class="punspoiler"><span class="puntext"><strong>SPOILER!</strong></span><br><span class="punspoilertext">', $message);
    $message = str_replace('[/spoiler]', '</span></td></tr></table><span class="puntext">', $message);
}

That's it! As a last step you've to add to new classes to your style sheets. Just copy the TD.punquote and paste it as TD.punspoiler. And somewhere add a ".punspoilertext", which has a slightly darker color than the background-color of TD.punspoiler. Example:

TD.punspoiler {
    background-color: #F6F6F6;
    border: #606060;
    border-style: dashed;
    border-width: 1px
}
.punspoilertext { color: #D4D4D4; }

So, i hope this wasn't too confusing. If I missed important lines of the PunBB source it would be nice if you can show me where.

Re: Spoiler Tags

If you can settle on just having it in a different color or a simpler layout, you can get away with far less code changes.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: Spoiler Tags

oh, mighty leader shows some code then and prove the self smile

Im Jacks Broken Heart

4

Re: Spoiler Tags

Pardon the bump on an ancient thread, but does anyone have the equivalent mod for punBB 1.2?

Re: Spoiler Tags

I have seen something like this on a different forum once and considered it to be very cool and useful.

The tags were [spoiler] and [/spoiler] and the effect was that a box was created which was like this:

-----------------------------------------------------------------------
| Click here to read the spoiler text.                                |
-----------------------------------------------------------------------

and if you clicked it was like:

-----------------------------------------------------------------------
| Click here to read the spoiler text.                                |
-----------------------------------------------------------------------
| Spiderman has a coming out and dies shortly after.                  |
| :(                                                                  |
-----------------------------------------------------------------------

Can anyone do this?
Its "just" a hidden <div> but im too stoopid to do it myself.
I'd love to see this!

One of the lessons of history is that nothing is often a good thing to do and always a clever thing to say.
~ Will Durant (1885 - 1981)

Re: Spoiler Tags

OP: instead of using a table cell for something that isn't tabular data, you can probably get away with something like this:
<span class="spoiler" onmouseover="this.style.color='#FFFFFF';" onmouseout="this.style.color=this.style.backgroundColor='#000000'">Agent Smith bites off Neo's Finger and falls into The Matrix</span>
CSS:
.spoiler {COLOR: black; TEXT-DECORATION: none; background-color: black; font-weight: normal;}

7 (edited by Argyle 2005-01-30 09:01)

Re: Spoiler Tags

The output i have seen was:

<table border="0" align="center" width="90%" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <b>Spoiler:</b></font>
    </td>
  </tr>
  <tr>
    <td>
      <div style="padding:3px; border:black 1px solid; BACKGROUND-COLOR:#4C6575; color:#000000;">
        <div onClick="openclose('spoiler-316751-0')"><font face="verdana, tahoma, arial, helvetica" size="1"><b>Click here toshow and hide the spoiler text.</b></font></div>
        <div id="spoiler-316751-0" style="display:none; padding-top:10px; margin-top:3px; border-top:1px solid black;">bla bla               bla bla bla bla
           bla bla bla bla bla bla
           bla bla bla bla bla bla
           bla bla bla bla bla bla
         </div>
      </div>    
    </td>
  </tr>
</table>

Yes in this case it was a table. But i think it can be done without a table as well.
It looks just like a quote or code box for example.

One of the lessons of history is that nothing is often a good thing to do and always a clever thing to say.
~ Will Durant (1885 - 1981)