 |
 |
 |
 |
#313140 - 02/12/07 06:33 PM
[7.x] UBB Spoiler Tags
|
Wizard
Registered: 01/10/00
Posts: 5285
Loc: Portland, OR, USA
|
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>" ),
IF 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, ' ' + "[spoiler]" + thisSpoiler + "[/spoiler]" + ' ' );
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);
To allow users to specify their own warning: In libs/ubbthreads.inc.php, add after the [spoiler] tag set: array( "#\[spoiler=(.+?)\](.+?)\[/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>" ), Usage Instructions: [spoiler]This text will be hidden[/spoiler]
[spoiler=This will be the warning]This text will be hidden[/spoiler] NOTE: 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.
Attachments
2361-spoiler-closed.jpg (145 downloads)2362-spoiler-open.jpg (147 downloads)
|
|
Top
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
 |
#313142 - 02/12/07 06:42 PM
Re: [7.x] UBB Spoiler Tags
[Re: Gizmo]
|
Newbie
Registered: 03/24/06
Posts: 23
|
|
|
Top
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
 |
#313382 - 03/05/07 04:01 PM
Re: [7.x] UBB Spoiler Tags
[Re: Cuervo]
|
Wizard
Registered: 01/10/00
Posts: 5285
Loc: Portland, OR, USA
|
So, are you saying that both of your spoiler mods must be in the code to get the markup part of it to work? Or, you can use either one by itself? I'm saying, they're both seperate... The first, lib file addition, HAS TO BE applied for ANYTHING to work; the second, the markup panel crap, can be added IF YOU WANT it... Sue: sub spoilers rule lol... As for search engine, Not sure how to suppress it there... I do however believe that if spoilers are critical to your community, they should be posted wiht a description above them, as to filter them out of any search results.
|
|
Top
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
 |
#313388 - 03/05/07 06:04 PM
Re: [7.x] UBB Spoiler Tags
[Re: Gizmo]
|
User
Registered: 11/10/01
Posts: 29
|
I did find something while I was trying to install this. I think the part of 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>should read <a href="javascript: void(0)" 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>
The "javascript: x() is javascript void(0) I'm not sure on this, but it's what I found in my file. Something of importance; when you click the markup button it brings up the add spoiler box and lets you add the text, but when you click the ok button it doesn't add the text to the post. Any ideas on that one, Gizmo?
Edited by Cuervo (03/05/07 07:06 PM)
_________________________
-Cuervo zOMG and oNOES
|
|
Top
|
|
|
|
 |
 |
 |
 |
|
 |
 |
 |
 |
Registered: 03/05/07
Posts: 83
|
|
 |
 |
 |
 |
|