BB Code Enhancements - DI - BBCode [spoiler]

DI - BBCode [spoiler] 1.30

Product information:
It's simple BBcode. But all of released here was too "difficult" to install . This one is very simple . It use jQuery javascript library v.1.2.3.
And can be usefull for large listing, for image hiding and so on...

Usage:

[spoiler=Custom header]some text
some text
some text
some text[/spoiler]

or

[spoiler]text
text
text
text[/spoiler]

Result on screen-01.gif

Installation information:
Files edit: 0
Templates edit: 0
Files to upload: 5
Time to install: less then 1 minute

Installation instructions:

1. Upload all content in ./upload folder of plugin to your forum root directory
2. Import XML file through ACP: Plugin System > Manage Products > [Add/Import Product]
3. Optional: edit ./clientscript/vbulletin_css/spoiler.css to customize spoiler

Knowing problems:

1. Not work if a quick reply or quick edit with AJAX functions was used for adding spoiler to post. You must reload page.

Tips:

1. To edit default spoiler header when bbcode used without option - use that link ./admincp/phrase.php?do=edit&e[GLOBAL][spoiler_default_header]
2. If you use english phrase and then translate it on your own language, you must rebuil post cache ./admincp/misc.php?do=buildpostcache
   (full instructions in screenshots see in this post from Ims)
3. If you have very customized editor template (like in this post) and [SPOILER] button do not display you should add it manualy (if you want it of course ):
   • In Style manager ./admincp/template.php?do=modify open your style and choose Edit Temlates
   • Open editor_toolbar_on template
   • Find
     
     PHP Code:

     <if condition="$vBeditTemplate['extrabuttons'] != '' "> 

     and add it before
     PHP Code:

     <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_spoiler"><img src="$stylevar[imgdir_editor]/spoiler.gif" alt="[SPOILER]" width="21" height="20" border="0" /></div></td> 


History:
Released: 1.00 - 09.05.2008
v.1.00 - first public release

Updated: 1.10 - 12.05.2008
v.1.10 - changed slide time to be faster
v.1.10 - changed place of deafault header phrase
v.1.10 - fixed bug with new thread preview with spoiler
v.1.10 - fixed bug with new reply preview with spoiler post

Updated: 1.20 - 21.05.2008
v.1.20 - added link to vbulletin.org modification thread
v.1.20 - added version check link
v.1.20 - added SPOILER button in advanced editor
v.1.20 - added spoiler.gif for advanced editor
v.1.20 - fixed bbcode parsing in WYSIWYG editor (post)
v.1.20 - added history.txt and readme.txt file

Updated: 1.30 - 26.05.2008
v.1.30 - added flash demo
v.1.30 - added usage help in bbcode list ./misc.php?do=bbcode (post)
v.1.30 - added support for announcements (post)
v.1.30 - made modification - Valid XHTML 1.0 Transitional

Please, click install if you like it!

Thanks for help: Marco van Herwaarden & Boofo

[ArnyVee]

Am I assuming correctly by thinking that I can limit the view of this mod to registered users only by editing the xml file?

If so, any tips on where I put the code?

[fly]

Originally Posted by ArnyVee

Am I assuming correctly by thinking that I can limit the view of this mod to registered users only by editing the xml file?

If so, any tips on where I put the code?

Not really. You'll want the 'hide' hack for that.

[itsheinz]

great mod..imma use it now

[Kirschtorte]

Great job!

But there is a little bug i think.

1.) Create a spoiler and submit the Posting.
2.) Edit the spoiler and submit the changes.
3.) Now you will see, the spoiler doesn't work anymore. you can click, but nothing happens.

Only this two ways are possible to make the spoiler works again:

1.) reopen the page or
2.) refresh the browser window

That is not so good i find...

[Hubbitus]

Hello, guys.

Fix spoiler on quick post/edit is quite trivial. Main what we must doing it is attach event handler not only to page ready, but to post add/change too.

Please see attached patches.

One additional note. In archive bundled 2 patches, first, called "quick-post|edit.old.patch" is "quick" fix. But I also suggest (really this idea was by Plague admin of imho.ws ) move function initSpoilers and its attachment to document ready event into external file to allow caching it by browser. And full changes present in "quick-post|edit.patch".

With best wishes, Pavel.

[MixFTW]

hi i got some prob with displaying spoiler img on editor bar:

P.S.: i tried all instruction in this tread but img still didnt appear.

Any suggestions?

[Hubbitus]

What image now set for button? Adjust path to where you place it.

[Kirschtorte]

Hello,

you have to correct the path to the image. You can find it in the "spoiler.css" file in:
...yourforum/clientscript/vbulletin_css/spoiler.css

[Hell Bomb]

any change this becoming a 3.8 mod?

[Warlord]

To install this on the quick reply edit the showthread_quickreply template

Find:

PHP Code:

        <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" /></div></td>
    </if> 


Add after:

PHP Code:

<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_spoiler"><img src="$stylevar[imgdir_editor]/spoiler.gif" alt="[SPOILER]" width="21" height="20" border="0" /></div></td> 


EDIT: I created my own BB Code the old fashioned way and did not install this mod so to speak, but I don't see why it wouldn't work on 3.8

If not, just add the following BB Code.

In the Admin CP Click Custom BB Codes then select Add New BB Code. Fill in the blanks with this information.

Title: Spoiler
BB Code Tag Name: spoiler
Replacement:

<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b> 

<input type="button" value="Click to Reveal" style="width:100px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

{param}

</div>

</div>

Example: [spoiler]This text is Animation Spoiler[/spoiler]
Description: The [spoiler] tag allows you hide your text.

Make sure you upload the attached image to forumroot/images/editor.