[nodebb-plugin-spoilers] Spoiler text in posts

[psychobunny]

Allows you to embed spoilers in NodeBB post content. Just use the following syntax, which is similar to that found on StackOverflow.

>! spoiler text here

Installation

npm install nodebb-plugin-spoilers

Get it on GitHub

[psychobunny]

0.0.2 - updated to add a bit of color to differentiate from a regular blockquote (using your theme's @warning swatch)

[psychobunny]

0.0.3 - updated to add a button in composer to add spoiler text.

[Tanner]

Tried to install and I had nothing added to the composer nor does the syntax seem to work. Am I missing something essential here?

[a_5mith]

@Tanner Did you activate it and restart your forum? It works on latest... I've reworked mine from the original, but only style changes. Added some delay to stop it from popping when you hover past it, forced spoilers to be one size until you hover on them for a second, then they expand and show the content.

You can see it working here

[Tanner]

@a_5mith I was checking in the wrong install...my bad

[Tanner]

@psychobunny Is it possible to have spoilers show up as a single line and then have a dropdown, similar to how quoted posts are done? Right now the spoilers take up too much space when they're multiple lines.

[a_5mith]

@Tanner I've attached all the CSS code I've used to achieve this, I've outlined what I've done too.

1. Decreased the width of the spoiler when it's collapsed so you don't accidentally trigger it while scrolling down a page
2. Spoiler is a fixed height until hovered inside the "spoiler zone"then it expands. iPad and Mobile require a click on the left border.

See it in action here: http://35hz.co.uk/topic/1941/reintroducing-spoiler-tags

And the code:

blockquote.spoiler {
background: none repeat scroll 0 0 #fefefe;
border-left-color: red;
overflow: hidden;
width:10%;
max-height:40px;
       -webkit-transition: max-height .8s linear;
-moz-transition: max-height .8s linear;
transition: max-height .8s linear;
 }
blockquote.spoiler:hover {
 background: none repeat scroll 0 0 #fefefe;
border-left-color: red;
width:100%; 
max-height:inherit!important;
width:inherit!important;
transition-delay:1.1s;
   -webkit-transition: max-height .8s linear;
-moz-transition: max-height .8s linear;
transition: max-height .8s linear;

 }

Change colours as required. color:#000 would set the text to black instead of orangey.

[Tanner]

@a_5mith I'm more looking for a clickable dropdown option similar to the quote function rather than a hover dropdown.

[a_5mith]

@Tanner You'd need to edit a bit more than just CSS for that then. Good luck.

[pwFoo]

Instead show on hover a "click to view" link / button should be a useful option?
At mobile hover isn't possible, but plugin works fine at Nexus 5 with click to view

[a_5mith]

@pwFoo hover is implemented on mobiles as the first click. Android will usually show the hover whilst the page is loading, because important info shouldnt be hidden in on:hover events, iOS do it differently, iOS count a hover event as one tap, then make you tap again to access the page.

I will look into this later, see what can be done through CSS.

[pwFoo]

@a_5mith
Works fine with my Android Nexus 5. If at desktop browsers behavior could be changes from hover to click easily would be a nice option.
But I also can live with hover to view at desktop

[art]

It's really nice. Does the image load via ajax?

It would be nice to have something like this just to deal with large images. Some forum pages you go to, people have posted a million giant images and you can sit there for an hour while the page loads. If you're on mobile, forget about it.

Either completely hide the image and load via ajax. OR show a thumbnail and then load via ajax over hover or click.

Just a thought, probably for another plugin.

[a_5mith]

@art some sort of lazy loading library would be good for this, I'm currently working on lazy loading all the media on my site via different libraries, as I'm not skilled in rolling my own.

So far I've got YouTube videos done, but still working on soundcloud, mixcloud, hearthis.at, webm files and normal images/gifs.

[bitcalc]

@psychobunny said:

0.0.3 - updated to add a button in composer to add spoiler text.

my icon disappeared recently

[shinyidol]

Just updated to 0.5.2 and text just comes up as quoted now.

[esiao]

@shinyidol if you're using nodebb-buttons-galore update to the latest. There was a conflict between the two Plugins.

[glitch]

! test

I don't think I understand how this is supposed to work. To me, spoiler text means text that is hidden without action taken. If that's what this plugin is supposed to do, could I please be told the correct way to do it?

[a_5mith]

@glitch said:

! test

I don't think I understand how this is supposed to work. To me, spoiler text means text that is hidden without action taken. If that's what this plugin is supposed to do, could I please be told the correct way to do it?

Plugin isn't installed here.