Simple spoiler tag

[AzaToth]

Didn't have the nergy to create a package, so here are the code, put in the array for bbcode in Subs.php, for 1.1b3 only!

            array(
                'tag'               => 'spoiler',
                'before'            => '<fieldset class="spoiler" onMouseOver="this.lastChild.style.display = \'block\';" onMouseOut="this.lastChild.style.display=\'none\'"><legend>Spoiler</legend><div class="spoiler" style="display: none">',
                'after'             => '</div></fieldset>',
                'block_level'       => true,
            ),

[AzaToth]

ok, got the energy, so package made: http://mods.simplemachines.org/index.php?mod=195

[Snickers]

Could you provide a screenshot,
please?

[AzaToth]

Could you provide a screenshot,
please?

ok:

[Snickers]

thanks.. I was wondering, could you make it into a button?

Something like this?

So it shows button, and then when you click buttom it shows text instead?

textarea, .bginput
{
   background: #253648;
   color: #AAD3DD;
   font: 8pt tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   border: 1px #141E28 solid;
}


<span style="display:none">TEXT BEHIND SPOILER</span><input type="button" onclick="ShowSpoiler(this);" value="Show Spoiler" class="bginput"></div>

[Klozi]

Could you convert or edit it for SMF 1.0.5, please?

[AzaToth]

thanks.. I was wondering, could you make it into a button?

Something like this?

So it shows button, and then when you click buttom it shows text instead?

textarea, .bginput
{
   background: #253648;
   color: #AAD3DD;
   font: 8pt tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
   border: 1px #141E28 solid;
}


<span style="display:none">TEXT BEHIND SPOILER</span><input type="button" onclick="ShowSpoiler(this);" value="Show Spoiler" class="bginput"></div>

Have done one implementation for that in my mod now, feel free to try and comment.

[AzaToth]

Could you convert or edit it for SMF 1.0.5, please?

Could be hard, the syntax differs a lot for this kind of mod. I think there is some sort of spoiler-tag mod for 1.0.5 which using fasterparsecode etc...

[Snickers]

the download link in your MOD page is not working...

man I hope the button looks like I am imagining it

It would be awesome!

[AzaToth]

the download link in your MOD page is not working...

man I hope the button looks like I am imagining it

It would be awesome!

Don't know when/if they approve the mod 

The button-model looks like this:

and:


The code is if you cant get it otherwise:

Code Select Expand

<?xml version="1.1"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
<id>azatoth:spoiler</id>


    <!-- Source files -->

    <file name="$sourcedir/Subs.php">
        <operation>
            <search position="before"><![CDATA[
global $txt, $scripturl, $context, $modSettings;
]]></search>
            <add><![CDATA[global $settings;
]]></add>
        </operation>
        <operation>
            <search position="before"><![CDATA[
array(
'tag' => 'white',
'before' => '<span style="color: white;">',
'after' => '</span>',
),
]]></search>
            <add><![CDATA[
            array(
                'tag'               => 'spoiler',
                'before'            =>  (
                    $settings['spoiler_tag'] == 2 ? '<div class="spoiler"><div class="spoilerheader"><input type="button" class="spoilerbutton" value="Spoiler" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == \'none\') { n.style.display = \'block\'; } else { n.style.display = \'none\';} return false;" /> (click to show/hide)</div><div class="spoilerbody" style="display: none">' :  (
                        $settings['spoiler_tag'] == 1 ? '<div class="spoiler"><div class="spoilerheader"><a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == \'none\') { n.style.display = \'block\'; } else { n.style.display = \'none\';} return false;"> Spoiler</a> (click to show/hide)</div><div class="spoilerbody" style="display: none">' : (
                            '<fieldset class="spoiler" onMouseOver="this.lastChild.style.display = \'block\';" onMouseOut="this.lastChild.style.display=\'none\'"><legend>Spoiler</legend><div class="spoilerbody" style="display: none">'
                        )
                    )
                ),
                'after'             => (
                    $settings['spoiler_tag'] == 2 ? '</div></div>' : (
                        $settings['spoiler_tag'] == 1 ? '</div></div>' : (
                            '</div></fieldset>'
                        )
                    )
                ),
                'disallow_children' => array('spoiler'),
                'block_level'       => true,
            ),
]]></add>
        </operation>
    </file>

    <!-- Default Theme -->
<file name="$boarddir/Themes/default/style.css">
    <operation>
            <search position="before"><![CDATA[
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}]]></search>
            <add><![CDATA[
fieldset.spoiler {
    border: 1px dashed gray;               
}

fieldset.spoiler > legend {
    font-size: 1.2em;
}

div.spoilerheader a {
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

div.spoilerheader input {
    background-color: #253648;
    color: #aad3dd;
    font: 0.9em sans-serif;
    border: 1px solid #141e28;
}
   
div.spoilerbody {
    color: #0f0f0f;
    border: 1px dotted gray;
    padding: 1em;
    margin: 1em;
}

fieldset.spoiler div.spoilerbody {
    border: 0px;
    padding: 0em;
}
]]></add>
</operation>
    </file>
   
    <file name="$boarddir/Themes/default/languages/Themes.english.php">
        <operation>
            <search position="before"><![CDATA[
$txt['themeadmin_edit_preview'] = 'Preview';
]]></search>
            <add><![CDATA[
$txt['spoiler_tag_label'] = 'Spoiler Tag';
$txt['spoiler_tag_desc'] = 'Default is <b>fieldOnHoverShow</b>, undefined themes will get those. Additional is <b>linkOnClickShowHide</b>, wich is a link you click on and <b>buttonOnClickShowHide</b> wich is a button you click on.';
$txt['spoiler_tag_onhoverovershow'] = 'fieldOnHoverShow';
$txt['spoiler_tag_onlinkclickshow'] = 'linkOnClickShowHide';
$txt['spoiler_tag_onbuttonclickshow'] = 'buttonOnClickShowHide';
]]></add>
        </operation>
    </file>
   
    <file name="$boarddir/Themes/default/Settings.template.php">
        <operation>
            <search position="before"><![CDATA[
array(
'id' => 'hide_post_group',
'label' => $txt['hide_post_group'],
'description' => $txt['hide_post_group_desc'],
),
]]></search>
            <add><![CDATA[
        array(
            'id' => 'spoiler_tag',
            'label' => $txt['spoiler_tag_label'],
            'description' => $txt['spoiler_tag_desc'],
            'options' => array(
                0 => $txt['spoiler_tag_onhoverovershow'],
                1 => $txt['spoiler_tag_onlinkclickshow'],
                2 => $txt['spoiler_tag_onbuttonclickshow'],
            ),           
        ),
]]></add>
        </operation>
    </file>

    <!--    Classic Theme -->
    <file name="$boarddir/Themes/classic/style.css">
    <operation>
            <search position="after"><![CDATA[
/* The main post box - this makes it as wide as possible. */
]]></search>
            <add><![CDATA[
fieldset.spoiler {
    border: 1px dashed gray;               
}

fieldset.spoiler > legend {
    font-size: 1.2em;
}

div.spoilerheader a {
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

div.spoilerheader input {
    font-family: sans-serif;
    font-size: 1.1em;
    font-weight: bold;

}
div.spoilerbody {
    color: #0f0f0f;
    border: 1px dotted gray;
    padding: 1em;
    margin: 1em;
}

fieldset.spoiler div.spoilerbody {
    border: 0px;
    padding: 0em;
}
]]></add>
</operation>
    </file>


   
</modification>


[Snickers]

I did as the turial asked me too, but it shows the one you can move mouse over to see spoiler?
(I just installed it and wrote [spoiler]testing[/spoiler]
I want the button 

How to change that setting 

[Snickers]

ok, got that fixed..

but it doesn't show a button it just slows a black square box? (it does wrok thouh, I can click it and see spoiler)

[AzaToth]

ok, got that fixed..

but it doesn't show a button it just slows a black square box? (it does wrok thouh, I can click it and see spoiler)

yea, it was some strange colors, made it a more neutral button now (0.1.0)

[Snickers]

Thanks man, it works like charm now!

[Snickers]

So what are you gonna work on now?

A simple hide tag? 

(You know, it shows a hide button, and people has to have posted in the topic to be able to click hide and see whats behind it)

[perplexed]

I got file corruption errors when I tried to load this mod even though I used version 0.1.7 - I have 1.1b3p

So then I found this thread,  can I install the 'spoiler tag' by putting the above code somewhere?  If so, can you tell me exactly how to do it?

I would love to have this option

thanks

[Gobo]

Hi

Is there a possibility of having this mod for 1.1RC2 please ?

[^DooM^]

I would like to add my vote for an RC2 version of this mod..

[AzaToth]

I would like to add my vote for an RC2 version of this mod..

That's a rather strange request, first, this wasn't a mod, but a tips and triks, therefore it's somewhat version undependedt. Seccond, Spoiler tag has beed updated to 1.1 RC2.

[^DooM^]

It's still a modification hence I called it a mod

Depends which way you want to look at it I guess.

Thanks for the link..