Topic: Fancy Spoiler

Extension add nice spoiler bbcode tag.
Supported custom title. Not flickering.

Demo
http://punbb.org.ua/punbb/topic/112/

Download for PunBB 1.4
fancy_spoiler.zip — version 0.7

http://pic.lg.ua/x/4/341b86/sm_837a0148.png

http://pic.lg.ua/x/2/fc5f72/sm_d3f34943.png

2

Re: Fancy Spoiler

Awesome extension. Pretty useful, and minimalistic smile
Can anybody explain me, how to change spoiler's title color?
Cheers.

3

Re: Fancy Spoiler

extensions/fancy_spoiler/css/Oxygen/fancy_spoiler.min.css
Find:

#cb4b16;

and replace with your own.

Re: Fancy Spoiler

Can we maybe set that only registered users are allowed to see the spoiler?

5

Re: Fancy Spoiler

Not in this version. sad

6

Re: Fancy Spoiler

Just a quick solution which display a normal text instead of spoiler for not logged in users.
Replace the code in manifest.xml to that:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE extension SYSTEM "ext-1.0.dtd">


<extension engine="1.0">
    <id>fancy_spoiler</id>
    <title>Spoiler BBcode</title>
    <version>0.8.1</version>
    <description>Add BBcode tag «spoiler»</description>
    <author>dimka.linux@gmail.com</author>

    <minversion>1.4RC1</minversion>
    <maxtestedon>1.4.2</maxtestedon>


    <hooks>
        <!-- -->
        <hook id="pun_bbcode_pre_tags_merge"><![CDATA[
            $tags_without_attr[] = 'spoiler';
        ]]></hook>


        <!-- -->
        <hook id="ps_preparse_tags_start"><![CDATA[
            $tags_block[] = 'spoiler';
        ]]></hook>


        <!-- -->
        <hook id="ps_preparse_bbcode_start"><![CDATA[
            $tags[] = 'spoiler';
            $tags_opened[] = 'spoiler';
            $tags_closed[] = 'spoiler';
            $tags_fix[] = 'spoiler';
        ]]></hook>


        <!-- -->
        <hook id="ps_do_bbcode_start"><![CDATA[
            global $lang_fancy_spoiler;

            if (!isset($lang_fancy_spoiler)) {
                if ($forum_user['language'] != 'English' && file_exists($ext_info['path'].'/lang/'.$forum_user['language'].'/lang.php')) {
                    include $ext_info['path'].'/lang/'.$forum_user['language'].'/lang.php';
                } else {
                    include $ext_info['path'].'/lang/English/lang.php';
                }
            }
            
            if ($forum_user['is_guest'])
            {
                return "(Here should be a spoiler, but you are not logged in)";
            }
            
            if (strpos($text, '[spoiler') !== false)
            {
                $text = preg_replace('#\[spoiler=(&\#039;|&quot;|"|\'|)(.*?)\\1\]#e', '"</p><div class=\"fancy_spoiler_switcher\"><div class=\"fancy_spoiler_switcher_header\"><strong>+</strong>&nbsp;".str_replace(array(\'[\', \'\\"\'), array(\'&#91;\', \'"\'), \'$2\')."</div><div class=\"fancy_spoiler\"><p>"', $text);
                $text = preg_replace('#\[spoiler\]\s*#', '</p><div class="fancy_spoiler_switcher"><div class="fancy_spoiler_switcher_header" data-lang-open="'.$lang_fancy_spoiler["spoiler_open"].'" data-lang-close="'.$lang_fancy_spoiler["spoiler_close"].'"><strong>+</strong>&nbsp;'.$lang_fancy_spoiler["spoiler_open"].'</div><div class="fancy_spoiler"><p>', $text);
                $text = preg_replace('#\s*\[\/spoiler\]#S', '</p></div></div><p>', $text);
            }
        ]]></hook>


        <!-- -->
        <hook id="hd_head"><![CDATA[
            if (defined('FORUM_PAGE')) {
                if (in_array(FORUM_PAGE, array('news', 'postdelete', 'modtopic',
                    'post', 'viewtopic', 'searchposts',
                    'pun_pm-inbox', 'pun_pm-outbox', 'postedit', 'pun_pm-write'))) {

                    if (!isset($fancy_spoiler_styles_loaded )) {
                        $fancy_spoiler_styles_loaded = TRUE;

                        if ($forum_user['style'] != 'Oxygen' && file_exists($ext_info['path'].'/css/'.$forum_user['style'].'/fancy_spoiler.min.css')) {
                            $forum_loader->add_css($ext_info['url'].'/css/'.$forum_user['style'].'/fancy_spoiler.min.css', array('type' => 'url', 'media' => 'screen'));
                        } else {
                            // Optimize: inline for Oxygen
                            $forum_loader->add_css('#pun_bbcode_bar #pun_bbcode_button_fancy_spoiler.image{background:url("'.$ext_info['url'].'/css/Oxygen/img/spoiler.png") 50% 50% no-repeat}.fancy_spoiler_switcher{border:solid 1px #eee!important;border-radius:.2em;background:#fff;padding:.5em .75em;margin:.75em 1em}.fancy_spoiler_switcher_header{color:#cb4b16;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;user-select:none}.fancy_spoiler{margin-top:.7em!important;padding-top:.7em!important;color:#333;border-top:dashed 1px #eee!important}', array('type' => 'inline'));
                        }
                    }

                    $forum_loader->add_css('.fancy_spoiler { display: none; padding: .35em 0; }',    array('type' => 'inline', 'media' => 'screen'));

                    $forum_loader->add_css('
                        .fancy_spoiler {
                            display: block;
                            padding: 0.35em 0;
                            border: none !important;
                            margin: 0 !important;
                        }

                        .fancy_spoiler_switcher {
                            border: none !important;
                            background: inherit !important;
                            margin: 0 !important;
                            padding: 0;
                        }

                        .fancy_spoiler_switcher_header {
                            display: none;
                        }', array('type' => 'inline', 'media' => 'screen', 'noscript' => true));

                    // Use inline JS for small scripts
                    $forum_loader->add_js('PUNBB.fancy_spoiler=(function(){function b(c){return(c.offsetWidth!==0);}function a(c){return function(){var e=c,d=e.nextSibling;if(d&&PUNBB.common.hasClass(d,"fancy_spoiler")){if(!b(d)){d.style.display="block";if(e.getAttribute("data-lang-close")){e.innerHTML="<strong>-</strong>&nbsp;"+e.getAttribute("data-lang-close");}else{e.innerHTML="<strong>-</strong>&nbsp;"+e.innerHTML.substr(24);}}else{d.style.display="none";if(e.getAttribute("data-lang-open")){e.innerHTML="<strong>+</strong>&nbsp;"+e.getAttribute("data-lang-open");}else{e.innerHTML="<strong>+</strong>&nbsp;"+e.innerHTML.substr(24);}}return false;}return true;};}return{init:function(){var c=PUNBB.common.arrayOfMatched(function(d){return(PUNBB.common.hasClass(d,"fancy_spoiler_switcher_header"));},document.getElementsByTagName("div"));PUNBB.common.map(function(d){d.onclick=a(d);},c);}};}());PUNBB.common.addDOMReadyEvent(PUNBB.fancy_spoiler.init);', array('type' => 'inline'));
                }
            }
        ]]></hook>


        <!-- pun_bbcode - add button -->
        <hook id="pun_bbcode_pre_buttons_output"><![CDATA[
            $this->add_button(array('name'    => 'fancy_spoiler', 'title' => 'spoiler', 'tag' => 'spoiler', 'image' => true));
        ]]></hook>

        <!-- pun_bbcode - add styles for button -->
        <hook id="pun_bbcode_styles_loaded"><![CDATA[
            if ($forum_user['pun_bbcode_use_buttons'] == '1') {

                if (!isset($fancy_spoiler_styles_loaded )) {
                    $fancy_spoiler_styles_loaded = TRUE;

                    if ($forum_user['style'] != 'Oxygen' && file_exists($ext_info['path'].'/css/'.$forum_user['style'].'/fancy_spoiler.min.css')) {
                        $forum_loader->add_css($ext_info['url'].'/css/'.$forum_user['style'].'/fancy_spoiler.min.css', array('type' => 'url', 'media' => 'screen'));
                    } else {
                        // Optimize: inline for Oxygen
                        $forum_loader->add_css('#pun_bbcode_bar #pun_bbcode_button_fancy_spoiler.image{background:url("'.$ext_info['url'].'/css/Oxygen/img/spoiler.png") 50% 50% no-repeat}.fancy_spoiler_switcher{border:solid 1px #eee!important;border-radius:.2em;background:#fff;padding:.5em .75em;margin:.75em 1em}.fancy_spoiler_switcher_header{color:#cb4b16;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;user-select:none}.fancy_spoiler{margin-top:.7em!important;padding-top:.7em!important;color:#333;border-top:dashed 1px #eee!important}', array('type' => 'inline'));
                    }
                }
            }
        ]]></hook>
    </hooks>
</extension>

And refresh cache.

7 (edited by holystorm_x 2013-07-24 21:39)

Re: Fancy Spoiler

There is a bug. If you enter a spoiler tag like this:

[spoiler]texthere/spoiler]

it will eventually break the page by making posts go further and further right.

Re: Fancy Spoiler

Broken tags is not bug. Just dont enter like this.

Re: Fancy Spoiler

holystorm_x wrote:

There is a bug. If you enter a spoiler tag like this:

[spoiler]texthere/spoiler]

it will eventually break the page by making posts go further and further right.

I have discovered what was the problem. The hook ps_preparse_bbcode_start should be removed and its code should be moved to ps_preparse_tags_start. After changes hook ps_preparse_tags_start will look like this:

        <!-- -->
        <hook id="ps_preparse_tags_start"><![CDATA[
            $tags[] = 'spoiler';
            $tags_opened[] = 'spoiler';
            $tags_closed[] = 'spoiler';
            $tags_block[] = 'spoiler';
            $tags_fix[] = 'spoiler';
        ]]></hook>

Now I have no more problems with broken spoiler tag written by users smile

If you want to contact me quickly - send e-mail, not PM.
<?php $t='<?php $t=%c%s%c; printf($t,39,$t,39,10);%c'; printf($t,39,$t,39,10);

Re: Fancy Spoiler

keeshii wrote:
holystorm_x wrote:

There is a bug. If you enter a spoiler tag like this:

[spoiler]texthere/spoiler]

it will eventually break the page by making posts go further and further right.

I have discovered what was the problem. The hook ps_preparse_bbcode_start should be removed and its code should be moved to ps_preparse_tags_start. After changes hook ps_preparse_tags_start will look like this:

        <!-- -->
        <hook id="ps_preparse_tags_start"><![CDATA[
            $tags[] = 'spoiler';
            $tags_opened[] = 'spoiler';
            $tags_closed[] = 'spoiler';
            $tags_block[] = 'spoiler';
            $tags_fix[] = 'spoiler';
        ]]></hook>

Now I have no more problems with broken spoiler tag written by users smile

if use this method, we cant make multiple spoiler big_smile

sorry my BAD english T___T
Have a nice day >.<
(^____^)v

Re: Fancy Spoiler

then..
if im post like this

[spoiler]zzz/spoiler][spoiler]zzz/spoiler]

there is not getting eror warning, n then make strang result in post.php sad

sorry my BAD english T___T
Have a nice day >.<
(^____^)v

12

Re: Fancy Spoiler

kudataz wrote:

then..
if im post like this

[spoiler]zzz/spoiler][spoiler]zzz/spoiler]

there is not getting eror warning, n then make strang result in post.php sad

use http://punbb.informer.com/forums/topic/ … vaspoiler/ tongue

Parserus, UserAgentAnalyzer.
I speak only Russian  :P

Re: Fancy Spoiler

Delightful & clean!  Works a treat!

Re: Fancy Spoiler

Works for 1.4.4. Thanks.