From 84c6e07c7248314343e75eb85cf7bb50acb80544 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 15 May 2016 15:28:42 +0200
Subject: [PATCH] Added visuals for spoilers

---
 .../templates/spoilerBBCodeTag.tpl            | 41 ++++++++-----------
 .../install/files/style/bbcode/spoiler.scss   | 13 ++++++
 2 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 wcfsetup/install/files/style/bbcode/spoiler.scss

diff --git a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
index 7785dc3b2c..3230c2431c 100644
--- a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
@@ -1,7 +1,7 @@
 <!-- begin:parser_nonessential -->
 <div class="spoilerBox jsSpoilerBox">
 	<header class="jsOnly">
-		<a class="button jsSpoilerToggle"{if $buttonTitle} data-has-custom-label="true"{/if}>{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
+		<a class="button small jsSpoilerToggle"{if $buttonTitle} data-has-custom-label="true"{/if}>{if $buttonTitle}{@$buttonTitle}{else}{lang}wcf.bbcode.spoiler.show{/lang}{/if}</a>
 	</header>
 	
 	<div style="display: none">
@@ -12,32 +12,23 @@
 {if !$__wcfSpoilerBBCodeJavaScript|isset}
 	{assign var='__wcfSpoilerBBCodeJavaScript' value=true}
 	<script data-relocate="true">
-		//<![CDATA[
-		$(function() {
-			$('.jsSpoilerBox').each(function(index, spoilerBox) {
-				var $toggle = $(spoilerBox).removeClass('jsSpoilerBox').find('> header > .jsSpoilerToggle');
-				$toggle.click(function() {
-					$toggle.toggleClass('active').parent().next().slideToggle({
-						complete: function() {
-							var $container = $(this);
-							if ($container.is(':visible')) {
-								WCF.DOMNodeInsertedHandler.execute();
-							}
-							
-							if (!$toggle.data('hasCustomLabel')) {
-								if ($container.is(':visible')) {
-									$toggle.text('{lang}wcf.bbcode.spoiler.hide{/lang}');
-								}
-								else {
-									$toggle.text('{lang}wcf.bbcode.spoiler.show{/lang}');
-								}
-							}
-						}
-					});
-				});
+		elBySelAll('.jsSpoilerBox', null, function(spoilerBox) {
+			spoilerBox.classList.remove('jsSpoilerBox');
+			
+			var toggleButton = elBySel('.jsSpoilerToggle', spoilerBox);
+			var container = toggleButton.parentNode.nextElementSibling;
+			
+			toggleButton.addEventListener(WCF_CLICK_EVENT, function(event) {
+				event.preventDefault();
+				
+				toggleButton.classList.toggle('active');
+				window[(toggleButton.classList.contains('active') ? 'elShow' : 'elHide')](container);
+				
+				if (!elDataBool(toggleButton, 'has-custom-label')) {
+					toggleButton.textContent = (toggleButton.classList.contains('active')) ? '{lang}wcf.bbcode.spoiler.hide{/lang}' : '{lang}wcf.bbcode.spoiler.show{/lang}';
+				}
 			});
 		});
-		//]]>
 	</script>
 {/if}
 <!-- end:parser_nonessential -->
diff --git a/wcfsetup/install/files/style/bbcode/spoiler.scss b/wcfsetup/install/files/style/bbcode/spoiler.scss
new file mode 100644
index 0000000000..dcf26b8221
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/spoiler.scss
@@ -0,0 +1,13 @@
+.spoilerBox > div {
+	border-left: 5px solid $wcfContentBorderInner;
+	margin-top: 10px;
+	padding: 10px 0 10px 20px;
+	
+	> p:first-child {
+		margin-top: 0;
+	}
+	
+	> p:last-child {
+		margin-bottom: 0;
+	}
+}
-- 
2.20.1