Custom BB-Code: Spoiler #2

New Issue

Crono · 2020-12-03T10:09:47+01:00

Crono commented

2020-12-03 10:09:47 +01:00

We use several BBCodes, which are not part of default forum engine, major part of them (Strike through, Subscript, Superscript, Center and Youtube) can be found in phpbb's BBC codes library (http://www.phpbb3bbcodes.com/custom-bbcodes/), but we have our own unique spoiler BCCodes with this code:
To BBCode usage row:

[spoiler]{TEXT}[/spoiler]

To HTML replacement row:

<div style="padding: 1px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 0px; 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>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onclick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none; background-color: none;"><span style="font-size: 0.8em;">{TEXT}</span></div></div></div>

From this [forum-topic](https://forum.generally-racers.com/viewtopic.php?f=36&t=1005). > We use several BBCodes, which are not part of default forum engine, major part of them (Strike through, Subscript, Superscript, Center and Youtube) can be found in phpbb's BBC codes library (http://www.phpbb3bbcodes.com/custom-bbcodes/), but we have our own unique spoiler BCCodes with this code: > To BBCode usage row: > > `[spoiler]{TEXT}[/spoiler]` > > To HTML replacement row: > > ```hmtl > <div style="padding: 1px; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 0px; 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>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onclick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none; background-color: none;"><span style="font-size: 0.8em;">{TEXT}</span></div></div></div> > ```

Crono added the

enhancement

label 2020-12-03 10:09:47 +01:00

Crono self-assigned this 2020-12-03 10:09:47 +01:00

Crono commented

2020-12-05 13:25:48 +01:00

New spoiler code was used, due to incompatability.

BB-Code:

[spoiler={TEXT1?}]{TEXT2}[/spoiler]

HTML-Replacement

<style> summary { user-select: none; outline: 0 !important; } summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; } summary::-webkit-details-marker { display: none } summary::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; } details[open] summary::before{ content: "\f056"; } details.bbcspoiler[open] summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; } details.bbcspoiler:not([open]) summary::after { content: attr(title-close); font-weight:bold; cursor: pointer; } details .bbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <details class="bbcspoiler"> <xsl:choose> <xsl:when test="@spoiler"> <summary><span class="bbctitle">{TEXT1}</span></summary> </xsl:when> <xsl:otherwise> <summary title-open="{L_COLLAPSE_VIEW}" title-close="{L_DISPLAY}"><span class="bbctitle"></span></summary> </xsl:otherwise> </xsl:choose> <div class="bbccontent">{TEXT2}</div> </details>

Help-Text

Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler]

[New spoiler](https://www.phpbb.com/customise/db/bbcode/spoiler_no_js/) code was used, due to incompatability. BB-Code: ``` [spoiler={TEXT1?}]{TEXT2}[/spoiler] ``` HTML-Replacement ```html <style> summary { user-select: none; outline: 0 !important; } summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; } summary::-webkit-details-marker { display: none } summary::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; } details[open] summary::before{ content: "\f056"; } details.bbcspoiler[open] summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; } details.bbcspoiler:not([open]) summary::after { content: attr(title-close); font-weight:bold; cursor: pointer; } details .bbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <details class="bbcspoiler"> <xsl:choose> <xsl:when test="@spoiler"> <summary><span class="bbctitle">{TEXT1}</span></summary> </xsl:when> <xsl:otherwise> <summary title-open="{L_COLLAPSE_VIEW}" title-close="{L_DISPLAY}"><span class="bbctitle"></span></summary> </xsl:otherwise> </xsl:choose> <div class="bbccontent">{TEXT2}</div> </details> ``` Help-Text ``` Hidden text: [spoiler=hidden text title]hidden text[/spoiler] or [spoiler]hidden text[/spoiler] ```

Crono closed this issue

2020-12-05 13:28:04 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Crono/phpbb-theme-simplicity-grif#2