Advertisement:

Author Topic: Expanding & Collapsing Spoiler Tag  (Read 21907 times)

Offline rez_spb

  • Newbie
  • *
  • Posts: 2
Re: Expanding & Collapsing Spoiler Tag [BUG?]
« Reply #80 on: February 10, 2017, 02:15:37 AM »
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:
Code: [Select]
$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:
Code: [Select]
$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:
Code: [Select]
function BBCode_Spoiler_Validate(&$tag, &$data, &$disabled)
{ ...
... add:
Code: [Select]
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:
Code: [Select]
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:
Code: [Select]
$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.

Offline dougiefresh

  • SMF Hero
  • ******
  • Posts: 2,358
    • XPtsp.com Community
Re: Expanding & Collapsing Spoiler Tag
« Reply #81 on: February 10, 2017, 11:14:13 AM »
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.



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.

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.

My vote would be to leave it as is OR have an option to have the lines or not. :)
Implemented that way for now.

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....
NOTICE:  My website is back up!

My Free Simple Machines mods on XPtsp.com and Simple Machines Customization Site!
My mods are being uploaded and are available at GitHub as well!

Offline rez_spb

  • Newbie
  • *
  • Posts: 2
Re: Expanding & Collapsing Spoiler Tag
« Reply #82 on: February 10, 2017, 12:56:16 PM »
@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).

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 368
  • Gender: Male
Re: Expanding & Collapsing Spoiler Tag
« Reply #83 on: September 15, 2017, 09:07:25 PM »
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.

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 368
  • Gender: Male
Re: Expanding & Collapsing Spoiler Tag
« Reply #84 on: September 16, 2017, 09:16:36 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.  :)


Code: [Select]

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


Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 67,877
    • Arantor on GitHub
Re: Expanding & Collapsing Spoiler Tag
« Reply #85 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?
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 368
  • Gender: Male
Re: Expanding & Collapsing Spoiler Tag
« Reply #86 on: September 17, 2017, 03:36:08 PM »
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)

Offline dougiefresh

  • SMF Hero
  • ******
  • Posts: 2,358
    • XPtsp.com Community
Re: Expanding & Collapsing Spoiler Tag
« Reply #87 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....
NOTICE:  My website is back up!

My Free Simple Machines mods on XPtsp.com and Simple Machines Customization Site!
My mods are being uploaded and are available at GitHub as well!

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 368
  • Gender: Male
Re: Expanding & Collapsing Spoiler Tag
« Reply #88 on: September 18, 2017, 02:39:41 PM »
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:

Code: [Select]

$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):

Code: [Select]

<!--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.

« Last Edit: September 18, 2017, 02:54:44 PM by Wellwisher »

Offline Wellwisher

  • Jr. Member
  • **
  • Posts: 368
  • Gender: Male
Re: Expanding & Collapsing Spoiler Tag
« Reply #89 on: September 18, 2017, 02:50:23 PM »
@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: