Spoiler bbcode - html code


(Katie Hunter) #1

Hi, I would like to know what would be the html code for the spoiler bbcode we use here at discourse.

I use this code and i’d like to modify it.

<div style="margin: 0px;"> 
<div class="smallfont" style="margin-bottom: 2px;"> 
<strong>Spoiler!</strong> <input value="Show" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Hide'; } 
else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Show'; }" type="button" />
</div> 
<div class="alt2" style="border: 0px inset; padding: 0px;"> 
<div class="spoiler" style="display: none;">{param}</div> 
</div> 
</div>

(cpradio) #2

See Folding spoilers


(Katie Hunter) #3

Thanks. I know this thread but it doesn’t give the html code. @sam , @codinghorror , @eviltrout ?


(cpradio) #4
<details>
<summary>Modding Tools</summary>
<b>Title: UltimateSuite - UltimateLib</b> <i>Recommended</i>
<b>Author: </b>@alphabit @SirEverard<br>
<b>Link:</b> http://example.com/</details>```

produces:
<details>
<summary>Modding Tools</summary>
<b>Title: UltimateSuite - UltimateLib</b> <i>Recommended</i>
<b>Author: </b>@alphabit @SirEverard<br>
<b>Link:</b> http://example.com/</details>

Edit: Fixed code section

(cpradio) #5

[spoiler]this is a spoiler[/spoiler]

produces:

this is a spoiler


(Katie Hunter) #6

I need the HTML code = ) i know how to use the spoiler bbcode. An HTML code for the spoiler bbcode would be something like this below:

<div style="margin: 0px;"> 
<div class="smallfont" style="margin-bottom: 2px;"> 
<strong>Spoiler!</strong> <input value="Show" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Hide'; } 
else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Show'; }" type="button" />
</div> 
<div class="alt2" style="border: 0px inset; padding: 0px;"> 
<div class="spoiler" style="display: none;">{param}</div> 
</div> 
</div>

That is what i want. The html code of the spoiler that Discourse uses.

@sam ? Any discourse staff ?


(cpradio) #7

View source?
<span class="spoiled" style="color: rgba(0, 0, 0, 0); text-shadow: black 0px 0px 10px; cursor: pointer; background-color: rgba(0, 0, 0, 0);">this is a spoiler</span>


(Katie Hunter) #8

I know this code… but it doesn’t work on click, so when i add it and click on the spoiler i can’t see the hidden txt, i think it is missing some parts + the class spoiled is missing.

It should be something like this below, it is in a different design but it works on click, probably the design will need to be modified.

<div style="margin: 0px;"> 
<div class="smallfont" style="margin-bottom: 2px;"> 
<strong>Spoiler!</strong> <input value="Show" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Hide'; } 
else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Show'; }" type="button" />
</div> 
<div class="alt2" style="border: 0px inset; padding: 0px;"> 
<div class="spoiler" style="display: none;">{param}</div> 
</div> 
</div>

(NomNuggetNom ) #9

Hey, I’m working on a plugin for this! Should be done very soon :smile:

Preview:

Just having trouble converting inner BBcode HTML :frowning:


(Katie Hunter) #10

Umm, I don’t think it is that complicated to convert the spoiler tag to pure BBcode html. Only Discourse Dev would know how but for some reason they don’t want to share it. I’ve tagged them several times in this thread but no direct reply.

@sam , @codinghorror , @eviltrout


(Robin Ward) #11

It’s nothing personal. We get a lot of notifications and issues to triage. Whenever I see Discourse users trying to help each other, I don’t immediately jump in as I feel that grows the community if people can figure out how to help each other without us.

The spoiler support for Discourse comes via our BBCode dialect. The entire code to support it is this chunk:

rawBBCode('spoiler', function(contents) {
  if (/<img/i.test(contents)) {
    return ['div', { 'class': 'spoiler' }, contents];
  } else {
    return ['span', { 'class': 'spoiler' }, contents];
  }
});

That outputted code is eventually converted from JsonML to HTML at the rendering phase.


(Toby Erkson) #12

What’s the purpose of a [spoiler]? If you don’t want to show something then just don’t show it. ???


(NomNuggetNom ) #13

I think something more like the code block would be better because you can’t have newlines inside <details>. I tried adapting the code:

Discourse.Dialect.replaceBlock({
  start: '[details]',
  stop: '[/details]',
  rawContents: false,

  emitter: function(blockContents) {
    return ['details'].concat(blockContents.join("\n"));
  }
});

But it is breaking all my text. Please give me a hand here :(.


(Robin Ward) #14

Can you explain exactly what you’re trying to do? Just replace [details]...[/details] with <details>xyz</details>?


(NomNuggetNom ) #15

Basically, yes. I need to do the same with [summary] or [title].

However, newlines within <details>...</details> must be removed.


Optimally I’d like to do something more complex, like:
[details "Title"]Content[/details]
being replaced with
<details><summary>Title</summary>Content</details>


EDIT: Also tried:
replaceBBCode('details', function(contents) { return ['details'].concat(contents.join("\n")); });
No luck.


(Kane York) #16

Have you tried doing the recursive parse? I think it was shown somewhere else in the code…


(NomNuggetNom ) #17

I’m not sure what you mean :frowning:

EDIT: @riking This?

/**
  Creates a BBCode handler that accepts parameters. Passes them to the emitter.
  Processes the inside recursively so it can be nested.

  @method replaceBBCodeParams
  @param {tag} tag the tag we want to match
  @param {function} emitter the function that creates JsonML for the tag
**/
function replaceBBCodeParams(tag, emitter) {
  replaceBBCodeParamsRaw(tag, function (param, contents) {
    return emitter(param, this.processInline(contents));
  });
} 

(Robin Ward) #18

Why do you need to replace new lines inside the details? Do you want all other formatting to happen in there, just no new lines? That seems a bit odd to me.

Otherwise something like this would work:

Discourse.Dialect.replaceBlock({
  start: /(\[details\])([\s\S]*)/igm,
  stop: '[/details]',
  rawContents: true,

  emitter: function(blockContents) {
    return ['details', blockContents.join("\n")];
  }
});

(NomNuggetNom ) #19

Yes, all other formatting needs to happen. The removal of newlines is because the HTML tag <details> freaks out if there are new lines. Thanks, I’ll give it a try.


EDIT: That’s throwing this error:

ExecJS::ProgramError: Unexpected token punc «)», expected punc «,» (line: 39405, col: 47, pos: 1621805)

Error
    at new JS_Parse_Error (:2357:10754)
    at js_error (:2357:10973)
    at croak (:2357:19198)
    at token_error (:2357:19335)
    at expect_token (:2357:19558)
    at expect (:2357:19696)
    at expr_list (:2357:27763)
    at :2357:28033
    at :2357:20069
    at expr_atom (:2357:27310)
    at maybe_unary (:2357:30108)
    at expr_ops (:2357:30866)
    at maybe_conditional (:2357:30958)
    at maybe_assign (:2357:31401)
    at expression (:2357:31714)

(Robin Ward) #20

That’s a server side error, did it work client side?