News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Expanding & Collapsing Spoiler Tag

Started by dougiefresh, November 30, 2014, 07:40:36 PM

Previous topic - Next topic

rez_spb

Hello!
I have downloaded and installed your mod (v3.1), and here's the fun part.

Issue:
Guests see the spoilers when global 'Check to disable spoilers for guests globally' parameter is set when using 'parsed_equals' form.
S2R:

  • install mod v3.1
  • forbid guests to see spoilers globally (set $modSettings['spoiler_no_guests'])
  • insert spoiler: [spoiler=Guests see me]They really do![/spoiler]
Expected behavior:

  • Guests see that spoiler exists
  • Spoiler content is hidden
Actual results:

  • Guests see that spoiler exist
  • Guests see the spoiler contents

Reason:
Well actually in this form of the tag no validation is made, and 'type' is set to 'parsed_equals' (so no content could be parsed). The BBCode_Spoiler_Validate function won't work as it is nor it actually should.

Dirty fix:
Disclaimer: not a developer, don't even know PHP, so please adopt this, though it works.

Subs-BBCode-Spoiler.php:
Replace:

$bbc[] = array(
'tag' => 'spoiler',
'type' => 'parsed_equals',
'before' => '<div style="padding: 3px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span 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.innerHTML = \'<b>' . $txt['spoiler'] . ': $1 &#149; </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["debug_hide"] . '</a>\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerHTML = \'<b>' . $txt['spoiler'] . ': $1 &#149; </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["debug_show"] . '</a>\'; }" /><b>' . $txt['spoiler'] . ': $1 &#149; </b><a href="#" onClick="return false;">' . $txt["debug_show"] . '</a></span></div><div class="quotecontent"><div style="display: none;">',
'after' => '</div></div></div>',
'disallow_children' => array_unique($disallowed),
'block-level' => true,
);

... with:

$bbc[] = array(
'tag' => 'spoiler',
// type changed
'type' => 'unparsed_equals_content',
// commented out as we get content now
//'before' => '<div style="padding: 3px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span 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.innerHTML = \'<b>' . $txt['spoiler'] . ': $1 &#149; </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["debug_hide"] . '</a>\'; } else { this.parentNode.parentNode.getElementsByTagName(\'div\')[1].getElementsByTagName(\'div\')[0].style.display = \'none\'; this.innerHTML = \'<b>' . $txt['spoiler'] . ': $1 &#149; </b><a href=\\\'#\\\' onClick=\\\'return false;\\\'>' . $txt["debug_show"] . '</a>\'; }" /><b>' . $txt['spoiler'] . ': $1 &#149; </b><a href="#" onClick="return false;">' . $txt["debug_show"] . '</a></span></div><div class="quotecontent"><div style="display: none;">',
//'after' => '</div></div></div>',
'disallow_children' => array_unique($disallowed),
// added custom validation or else guests can see everything when using [spoiler=NAME]TEXT[/spoiler]
'validate' => 'BBCode_Spoiler_Validate_equals',
'block-level' => true,
);


Also, add validation function for this form.

Before:
function BBCode_Spoiler_Validate(&$tag, &$data, &$disabled)
{ ...

... add:

function BBCode_Spoiler_Validate_equals(&$tag, &$data, &$disabled)
{
global $txt, $user_info, $modSettings;

// guests are handled by global forum setting only
if (!empty($modSettings['spoiler_no_guests']) && !empty($user_info['is_guest']))
return ($tag['content'] = $txt['spoiler_no_guest_html']);
$text = $txt['spoiler'];
$show = $txt['debug_show'];
$hide = $txt['debug_hide'];
// don't expand by default
$expand = false;
// parsing is recommended, separate is due to structure
$data[0] = parse_bbc($data[0]);
$data[1] = parse_bbc($data[1]);
$tag['content'] = <<<EOT
<div style="padding: 3px; font-size: 1em;">
<div style="text-transform: uppercase; border-bottom: 1px solid #5873B0; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
<span 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.innerHTML = '<b>$text: $data[1] &#149;</b> <a href=\'#\' onClick=\'return false;\'>$hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>$text: $data[1] &#149;</b> <a href=\'#\' onClick=\'return false;\'>$show</a>'; }" />
<b>$text: $data[1] &#149;</b>
EOT;
$tag['content'] = $tag['content'] . '<a href="#" onClick="return false;">' . ($expand ? $hide : $show) . '</a>' . <<<EOT
</span>
</div>
<div class="quotecontent">
EOT;
$tag['content'] = $tag['content'] . '<div style="display: ' . ($expand ? '' : 'none') . ';">' . $data[0] . '</div></div></div>';
}




And one more thing.
When form with extended params is used, and global setting forbids guests to see spoilers, the 'guests=y' part is simply useless. To change this behavior to allow post writer to add a spoiler which can override global setting, following change in BBCode_Spoiler_Validate function is needed.

Replace:

if ((!empty($modSettings['spoiler_no_guests']) || $guests == 'n' || $guests == 'no' || $guests == 'false') && !empty($user_info['is_guest']))
return ($tag['content'] = $txt['spoiler_no_guest_html']);

... with:

$allow_guests = false;
if ($guests == 'y' || $guests == 'yes' || $guests == 'true') {
$allow_guests = true;
}
// explicit setting overrides global forum setting
if (!empty($modSettings['spoiler_no_guests']) && !empty($user_info['is_guest']) && $allow_guests == false)
return ($tag['content'] = $txt['spoiler_no_guest_html']);


That's it for the feedback.

dougiefresh

Uploaded v3.2 - February 10th, 2017
o Added code so that the border underneath the "Spoiler" text could be removed.
o Fixed code where guests are not allowed to view spoilers, but could anyways.
o Fixed code where guests were allowed to view spoilers, but couldn't.




Quote from: Kortal on January 17, 2017, 05:10:30 PM
Would it be possible to change a bit the spoiler design ? something more like quickspoiler or simplespoiler would be very nice.
(I just hate this straight line below the spoiler... lol)
@Kortal:  I've added an option to remove the border from underneath the "Spoiler" text for you.  Hopefully, this helps you.....

I've got a lot on my plate at the moment, so redesigning the mod's appearance isn't on my list of things to do at the moment.  If you want to send over some CSS stuff on how you want it to look, I'll consider adding it to the mod.

Quote from: Steve on January 18, 2017, 06:38:02 AM
I don't know Dougie's feelings on the subject but here's my unsolicited two cents worth:

Mod designers intentionally design their mods to look different and work different than other mods. Otherwise, what's the point of creating a mod that does the same basic thing as existing mods (in this case, hiding content)?
@Steve:  I'm not against redesigning the mod, just against redesigning it AT THIS TIME.  If anyone wants to send over some CSS stuff on how you want it to look, I'll consider adding it to the mod.

Quote from: Steve on January 18, 2017, 06:38:02 AM
My vote would be to leave it as is OR have an option to have the lines or not. :)
Implemented that way for now.

Quote from: rez_spb on February 10, 2017, 02:15:37 AM
Guests see the spoilers when global 'Check to disable spoilers for guests globally' parameter is set when using 'parsed_equals' form.
@rez_spb:  Thank you for the bug report!  Unfortunately, it had already been addressed before receiving the bug report, just not published yet....

rez_spb

Quote from: dougiefresh on February 10, 2017, 11:14:13 AM
@rez_spb:  Thank you for the bug report!  Unfortunately, it had already been addressed before receiving the bug report, just not published yet....
Thank you for your hard work, glad to hear it was already addressed! Will go with your implementation not to break compatibility for the future (I don't actually like dirty hacks).

Wellwisher

I need some help, I made some changes to the design. I have turned it into a multi-purpose spoiler tag. Works as coded.

One trouble I am having from a design perspective is trying to target the "hide/ close" button on the spoiler, i basically want to float:right the button and possibly style the button.

Here's what I have done with it, it's mostly visual (gone with a twitter style spoiler tag):


twitter:



Your smf mod version I am working on:



I basically need help targetting that button to move to the right. Issue is, i can do that but when i close and open tag again, the button reverts to its original place next to the text.

Wellwisher

Quote from: Wellwisher on September 15, 2017, 09:07:25 PM



I basically need help targetting that button to move to the right. Issue is, i can do that but when i close and open tag again, the button reverts to its original place next to the text.


Solved.  :)




[id^='msg_'] a {
  float: right;
}


Arantor

Won't that affect every link in every post? As well as the header for quote and code tags?

Wellwisher

Quote from: Arantor on September 17, 2017, 03:05:05 AM
Won't that affect every link in every post? As well as the header for quote and code tags?

Yeah, I found that out later. I could implement this but meant reworking a number of div elements. Kinda annoying so I left it like this for the time being:



I will go back to it when I have time. If we were able to target that button, it will open up design options for custom themes. Check out the font-awesome icon on the left.  8)

dougiefresh

Hmmmm.....   Interesting.  I like the new design!  Would you be willing to share your modded file?  I probably can fix this issue real quick...  Probably can make it a choice between the current and new design, too....

Wellwisher

#88
Quote from: dougiefresh on September 18, 2017, 10:10:36 AM
Hmmmm.....   Interesting.  I like the new design!  Would you be willing to share your modded file?  I probably can fix this issue real quick...  Probably can make it a choice between the current and new design, too....

Happy to do so, it's only fair since you've built the mod.

Here's the text in index.english.php file I modded:



$txt['debug_show'] = ' [View]';
$txt['spoiler'] = "This media may contain sensitive material.  ";
$txt['debug_hide'] = '[Close]';



FontAwesome added in the <header> tag (some themes already have a version of it installed):



<!--FontAwesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">



I belay the rest of the styling edits I made were in Subs-BBcode-Spoiler.php attached to this post.


Wellwisher

@dougiefresh I was also trying to add a simple hype-link after the text "This media may contain sensitive material." but I kept failing. Basically I wanted users to be pointed to a 'knowledge-base' article as to what "sensitive material" mean't.  :laugh:

dougiefresh

@Everybody: Support for all of my current spoiler-inspired mods are going to be discontinued shortly once I get my new "Yet Another Spoiler Mod" written, as it'll combine the functionality of all of them.  It will have a bunch of new options, including the ability to switch spoiler styles and the ability to change the default strings used without changing the language files themselves.

@rez_spb:  Your changes have been integrated in the above-mentioned mod.  Thank you!

@Wellwisher:  I apologize for the delay in fixing this issue.  But I've got good news for ya.  The good news is that I've managed to fix your issue with the mod's Show/Hide link for you.  All I had to do was add a class name to the link itself, and BAM!  It's focusable for styling changes..... 

Yes, I managed to add the brackets and "removed" the colon from the "Spoiler:" text for the WellWisher style, all without changes to the language file, as well as a few other nifty element-targeting tricks!  :P

Do you mind if I use WellWisher as the name of the new style?

Wellwisher

@dougiefresh this is Christmas come early buddy. Great work! I am quite happy with some credit but honestly there was no need, you've laid out all the hard work so thank you. You're free to implement and use it however you like without the need to credit me. I am pleased this change opens up so many styling options, it will make your mod a must have. Plus on mobile devices, it will look and feel great!

Just viewing it again, it looks so clean and modern! P.S Add capital "S" letter for word "Show".  :P

All the best dougiefresh.

dougiefresh

#92
@WellWisher:  I've also gotten a link in the Spoiler replacement text in the Admin panel to work using HTML....   ;D  Man, it took some recoding of the Javascript to make that work correctly....  8)

UPDATE:  Dammit, the HTML link doesn't function yet....  :-[

dougiefresh

#93
@WellWisher: Try this: Yet Another Spoiler ModPlease note that the logging functionality doesn't quite work yet....

dougiefresh

Quote from: dougiefresh on December 11, 2017, 12:12:08 PM
@WellWisher: Try this: Yet Another Spoiler ModPlease note that the logging functionality doesn't quite work yet....
Updated mod....

Wellwisher

@dougiefresh thanks mate for the update. I will need to test this on my local since my custom theme is shambles atm.

Got a quick question: Say if i uninstall the previous version of your plugin and reinstall it with the current, updated version - will the old spoiler tags disappear?

dougiefresh

The posts with spoiler tags are in database.  They won't be effected by uninstalling the mod.  However, the contents of said spoilers will be revealed to everybody, because the software to translate them is gone.

dougiefresh

All development of this mod has been discontinued.  Any further development of this spoiler will take place in the Yet Another Spoiler Mod.  Please note you must uninstall this mod in order to install Yet Another Spoiler Mod.

Advertisement: