Added proper support for font size and color

[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / spoilerBBCodeTag.tpl

diff --git a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
index 2e15a949af8d238a1a3d0936b103fc2048384360..3230c2431cfbf1b4cde667cc8909a545c48a8028 100644 (file)
--- a/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/spoilerBBCodeTag.tpl
@@ -1,7 +1,7 @@
 <!-- begin:parser_nonessential -->
-<div class="container containerPadding spoilerBox jsSpoilerBox">
+<div class="spoilerBox jsSpoilerBox">
        <header class="jsOnly">
-               <a class="button jsSpoilerToggle">{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">
@@ -9,30 +9,26 @@
        </div>
 </div>
 
-<script data-relocate="true">
-       //<![CDATA[
-       $(function() {
-               var $spoilerBox = $('.jsSpoilerBox').removeClass('jsSpoilerBox');
-               $spoilerBox.find('> header > .jsSpoilerToggle').click(function() {
-                       var $spoilerToggle = $(this);
-                       $spoilerToggle.toggleClass('active').parent().next().slideToggle({
-                               complete: function() {
-                                       if ($(this).is(':visible')) {
-                                               WCF.DOMNodeInsertedHandler.execute();
-                                       }
-                                       
-                                       {if !$buttonTitle}
-                                               if ($(this).is(':visible')) {
-                                                       $spoilerToggle.text('{lang}wcf.bbcode.spoiler.hide{/lang}');
-                                               }
-                                               else {
-                                                       $spoilerToggle.text('{lang}wcf.bbcode.spoiler.show{/lang}');
-                                               }
-                                       {/if}
+{if !$__wcfSpoilerBBCodeJavaScript|isset}
+       {assign var='__wcfSpoilerBBCodeJavaScript' value=true}
+       <script data-relocate="true">
+               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>
+       </script>
+{/if}
 <!-- end:parser_nonessential -->