BBCodes: updated default SPOILER

See repository.xml for suggested CSS
s9e · Sep 30, 2022 · 20a3c13 · 20a3c13
1 parent d556923
commit 20a3c13
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 43 deletions.
diff --git a/docs/Bundles/Forum.md b/docs/Bundles/Forum.md
@@ -12,7 +12,7 @@ $html = TextFormatter::render($xml);
 echo $html;
 ```
 ```html
-<blockquote><div><cite>John Doe wrote:</cite>Star Wars spoiler: <div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler </span></div><div class="spoiler-content" style="display:none">Snapes kills Dumbledore</div></div></div></blockquote>
+<blockquote><div><cite>John Doe wrote:</cite>Star Wars spoiler: <details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler </summary><div class="spoiler-content">Snapes kills Dumbledore</div></details></div></blockquote>
 ```
 
 ### Plugins
@@ -53,5 +53,5 @@ $html = TextFormatter::render($xml, [
 echo $html;
 ```
 ```html
-<blockquote><div><cite>John Doe escribió:</cite>Star Wars spoiler <img alt=":)" class="emoji" draggable="false" src="https://twemoji.maxcdn.com/v/latest/svg/1f642.svg"> <div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Mostrar</span><span style="display:none">Ocultar</span></button><span class="spoiler-title">Spoiler </span></div><div class="spoiler-content" style="display:none">Spocks kills Dumbledore</div></div></div></blockquote>
+<blockquote><div><cite>John Doe escribió:</cite>Star Wars spoiler <img alt=":)" class="emoji" draggable="false" src="https://twemoji.maxcdn.com/v/latest/svg/1f642.svg"> <details class="spoiler"><summary class="spoiler-header" data-hide="Ocultar" data-show="Mostrar">Spoiler </summary><div class="spoiler-content">Spocks kills Dumbledore</div></details></div></blockquote>
 ```
diff --git a/docs/Plugins/BBCodes/Add_from_the_repository.md b/docs/Plugins/BBCodes/Add_from_the_repository.md
@@ -428,30 +428,27 @@ array (
 ###### SPOILER
 ```[SPOILER title={TEXT1?}]{TEXT2}[/SPOILER]```
 ```xsl
-<div class="spoiler">
-	<div class="spoiler-header">
-		<button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Show</span><span style="display:none">Hide</span></button>
-		<span class="spoiler-title">Spoiler: {TEXT1}</span>
-	</div>
-	<div class="spoiler-content" style="display:none">{TEXT2}</div>
-</div>
+<details class="spoiler" data-s9e-livepreview-ignore-attrs="open">
+	<summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler: {TEXT1}</summary>
+	<div class="spoiler-content">{TEXT2}</div>
+</details>
 ```
 <table>
 	<tr>
 		<th>Var name</th>
 		<th>Default</th>
 		<th>Description</th>
 	</tr>
-	<tr>
-		<td><code>showStr</code></td>
-		<td>Show</td>
-		<td>String used for the Show button</td>
-	</tr>
 	<tr>
 		<td><code>hideStr</code></td>
 		<td>Hide</td>
 		<td>String used for the Hide button</td>
 	</tr>
+	<tr>
+		<td><code>showStr</code></td>
+		<td>Show</td>
+		<td>String used for the Show button</td>
+	</tr>
 	<tr>
 		<td><code>spoilerStr</code></td>
 		<td>Spoiler:</td>

diff --git a/src/Bundles/Forum.php b/src/Bundles/Forum.php
diff --git a/src/Bundles/Forum/Renderer.php b/src/Bundles/Forum/Renderer.php
diff --git a/src/Plugins/BBCodes/Configurator/repository.xml b/src/Plugins/BBCodes/Configurator/repository.xml
@@ -328,24 +328,25 @@
 	<bbcode name="SPOILER">
 		<usage>[SPOILER title={TEXT1?}]{TEXT2}[/SPOILER]</usage>
 		<!--
-			var nextSiblingStyle = parentNode.nextSibling.style,
-				firstChildStyle  = firstChild.style,
-				lastChildStyle   = lastChild.style;
-
-			firstChildStyle.display  = nextSiblingStyle.display;
-			nextSiblingStyle.display = lastChildStyle.display = (firstChildStyle.display) ? '' : 'none';
-
-			// Don't submit if inside a form
-			return false;
+			/* Suggested CSS to replace the details marker with a string */
+			.spoiler-header
+			{
+				list-style-type: none;
+			}
+			.spoiler-header::before
+			{
+				content: attr(data-show);
+			}
+			.spoiler[open] > .spoiler-header::before
+			{
+				content: attr(data-hide);
+			}
 		-->
 		<template><![CDATA[
-			<div class="spoiler">
-				<div class="spoiler-header">
-					<button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>]]><var name="showStr" description="String used for the Show button">Show</var><![CDATA[</span><span style="display:none">]]><var name="hideStr" description="String used for the Hide button">Hide</var><![CDATA[</span></button>
-					<span class="spoiler-title">]]><var name="spoilerStr" description="String used for the spoiler label">Spoiler:</var><![CDATA[ {TEXT1}</span>
-				</div>
-				<div class="spoiler-content" style="display:none">{TEXT2}</div>
-			</div>
+			<details class="spoiler" data-s9e-livepreview-ignore-attrs="open">
+				<summary class="spoiler-header" data-hide="]]><var name="hideStr" description="String used for the Hide button">Hide</var><![CDATA[" data-show="]]><var name="showStr" description="String used for the Show button">Show</var><![CDATA[">]]><var name="spoilerStr" description="String used for the spoiler label">Spoiler:</var><![CDATA[ {TEXT1}</summary>
+				<div class="spoiler-content">{TEXT2}</div>
+			</details>
 		]]></template>
 	</bbcode>
 

diff --git a/tests/Bundles/data/Forum/018.html b/tests/Bundles/data/Forum/018.html
@@ -1 +1 @@
-<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler </span></div><div class="spoiler-content" style="display:none">Snape kills Dumbledore</div></div>
+<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler </summary><div class="spoiler-content">Snape kills Dumbledore</div></details>
diff --git a/tests/Bundles/data/Forum/019.html b/tests/Bundles/data/Forum/019.html
@@ -1 +1 @@
-<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler It's about Harry Potter</span></div><div class="spoiler-content" style="display:none">Snape kills Dumbledore</div></div>
+<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler It's about Harry Potter</summary><div class="spoiler-content">Snape kills Dumbledore</div></details>
diff --git a/tests/Bundles/data/Forum/020.html b/tests/Bundles/data/Forum/020.html
@@ -1 +1 @@
-<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Montrer</span><span style="display:none">Cacher</span></button><span class="spoiler-title">Le spoiler </span></div><div class="spoiler-content" style="display:none">Snape tue Dumbledore</div></div>
+<details class="spoiler"><summary class="spoiler-header" data-hide="Cacher" data-show="Montrer">Le spoiler </summary><div class="spoiler-content">Snape tue Dumbledore</div></details>
diff --git a/tests/Plugins/BBCodes/BBCodesTest.php b/tests/Plugins/BBCodes/BBCodesTest.php
@@ -607,25 +607,25 @@ function ($configurator)
 				"Spoiler ahead!\n" .
 				"[spoiler]Now you're spoiled[/spoiler]",
 				"Spoiler ahead!\n" .
-				'<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?\'\':\'none\';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler: </span></div><div class="spoiler-content" style="display:none">Now you\'re spoiled</div></div>',
+				'<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler: </summary><div class="spoiler-content">Now you\'re spoiled</div></details>',
 			],
 			[
 				"Spoiler ahead!\n" .
 				'[spoiler="your spoilage status"]Now you\'re spoiled[/spoiler]',
 				"Spoiler ahead!\n" .
-				'<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?\'\':\'none\';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler: your spoilage status</span></div><div class="spoiler-content" style="display:none">Now you\'re spoiled</div></div>'
+				'<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler: your spoilage status</summary><div class="spoiler-content">Now you\'re spoiled</div></details>'
 			],
 			[
 				"Spoiler ahead!\n" .
 				"[spoiler][spoiler='Last chance']Now you're spoiled[/spoiler][/spoiler]",
 				"Spoiler ahead!\n" .
-				'<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?\'\':\'none\';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler: </span></div><div class="spoiler-content" style="display:none"><div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?\'\':\'none\';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler: Last chance</span></div><div class="spoiler-content" style="display:none">Now you\'re spoiled</div></div></div></div>'
+				'<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler: </summary><div class="spoiler-content"><details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler: Last chance</summary><div class="spoiler-content">Now you\'re spoiled</div></details></div></details>'
 			],
 			[
 				"Spoiler ahead!\n" .
 				"[spoiler]Now you're spoiled[/spoiler]",
 				"Spoiler ahead!\n" .
-				'<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?\'\':\'none\';return!1"><span>Montrer</span><span style="display:none">Cacher</span></button><span class="spoiler-title">Spoiler : </span></div><div class="spoiler-content" style="display:none">Now you\'re spoiled</div></div>',
+				'<details class="spoiler"><summary class="spoiler-header" data-hide="Cacher" data-show="Montrer">Spoiler : </summary><div class="spoiler-content">Now you\'re spoiled</div></details>',
 				function ($configurator)
 				{
 					$configurator->BBCodes->addFromRepository('SPOILER', 'default', [
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="spoiler"><div class="spoiler-header"><button onclick="var a=parentNode.nextSibling.style,b=firstChild.style,c=lastChild.style;b.display=a.display;a.display=c.display=(b.display)?'':'none';return!1"><span>Show</span><span style="display:none">Hide</span></button><span class="spoiler-title">Spoiler </span></div><div class="spoiler-content" style="display:none">Snape kills Dumbledore</div></div>
		<details class="spoiler"><summary class="spoiler-header" data-hide="Hide" data-show="Show">Spoiler </summary><div class="spoiler-content">Snape kills Dumbledore</div></details>