NOTE: Spoiler Tags are included in UBB.Threads 7.2.
Author: Gizmo (James of
VNC Web Design)
Requirements:
- Valid UBB.Threads 7.0 install and license
About:
This UBBCode will allow you to hide text in posts from users unless they choose to view it; thus allowing users to post movie, news, etc, spoilers and not have to ruin everyones fun!
Demo:
Please see the attached images:
2361-spoiler-closed.jpg - What people see before the spoiler is revealed.
2362-spoiler-open.jpg - What people see after the spoiler is revealed.
You can also see it in action
here.
Install Instructions:
Open libs/ubbthreads.inc.php
Find:
array( "#\[email:([+_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4}))\](.+?)\[/email]#i", '<a href="mailto:\1">\5</a>' ),
Add Under:
array( "#\[spoiler\](.+?)\[/spoiler\]#i", "<div class=\"ubbcode-block\"><div class=\"ubbcode-header\">Warning, Spoiler: <input type=\"button\" class=\"form-button\" value=\"Show\" 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=\"ubbcode-body\"><div style=\"display: none;\">\\1</div></div></div>" ),
you want to add this to the markup panel on the "Full Reply"/"Topic Creation" pages:
Step 1:
Open templates/default/standardtext_editor.tpl
Find:
<a href="javascript: x()" onclick="DoPrompt('image');" title="{$lang.IMAGE_ALT}" alt="{$lang.IMAGE_ALT}"><img id="image" onmouseover="raiseButton(this.id);" onmouseout="normalButton(this.id);" onmousedown="lowerButton(this.id);" class="markup_panel_normal_button" src="{$config.BASE_URL}/images/{$style_array.markup_panel}/image.gif" /></a>
Add Under:
<a href="javascript: x()" onclick="DoPrompt('spoiler');" title="Spoiler" alt="Spoiler"><img id="spoiler" onmouseover="raiseButton(this.id);" onmouseout="normalButton(this.id);" onmousedown="lowerButton(this.id);" class="markup_panel_normal_button" src="{$config.BASE_URL}/images/{$style_array.markup_panel}/spoiler.gif" /></a>
Step 2:
Open ubb_js/standard_text_editor.js
Find:
if (action == "image") {
var thisImage = prompt(enterImage, "http://");
if (thisImage == null){return;}
insertAtCaret(document.replier.Body, ' ' + "[img]" + thisImage + "[/img]" + ' ' );
document.replier.texteditor.focus();
return;
}
Add Under:
if (action == "spoiler") {
var thisSpoiler = prompt("Enter Spoiler", "");
if (thisSpoiler == null){return;}
insertAtCaret(document.replier.Body, ' ' + "" + ' ' );
document.replier.texteditor.focus();
return;
}
Step 3:
You'll need to insert a spoiler.gif into your markup panel directory, I am appending one supplied by Cuervo.
To filter spoilers out of the ActiveTopics system, simply:
Open scripts/activetopics.inc.php
Find:
$topics[$i]['forum_id'] = $forum_id;
Add Above:
$post_body = preg_replace('/\[spoiler\](.*?)\[\/spoiler\]/si', '', $post_body);
$post_body = preg_replace('/<div class="ubbcode-block"><div class="ubbcode-header">(.*?)<\/div><div class="ubbcode-body"><div style="display: none;">(.*?)<\/div><\/div><\/div>/si', '', $post_body);
:
In libs/ubbthreads.inc.php, add after the [spoiler] tag set:
array( "#\(.+?)\[/spoiler\]#i", "<div class=\"ubbcode-block\"><div class=\"ubbcode-header\">\\1 <input type=\"button\" class=\"form-button\" value=\"{$ubbt_lang['SPOILER_SHOW']}\" 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 = '{$ubbt_lang['SPOILER_HIDE']}'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{$ubbt_lang['SPOILER_SHOW']}'; }\" /></div><div class=\"ubbcode-body\"><div style=\"display: none;\">\\2</div></div></div>" ),
:
[spoiler]This text will be hidden
:
Every time a user visits the page, the spoiler text will be hidden again. Also, multi-level spoilers are not a possibility yet; I'll make that the next project
. Additionally, the classes used are the standard ubb-code ones.
