[nodebb-plugin-spoilers] Spoiler text in posts

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.

Decreased the width of the spoiler when it's collapsed so you don't accidentally trigger it while scrolling down a page
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.

glitch

...

I suppose that would help, thanks. On my own installation, however, I get the same results. I know the plugin is installed because I see the little crossed out eye in the markdown editor. It renders just like my test example here, though.

esiao

Seems like the plugin is broken on NodeBB 0.6.0
As stated here by @Ted
https://github.com/psychobunny/nodebb-plugin-spoilers/issues/3

a_5mith

Seems @psychobunny needs to start merging commits instead of sitting on Reddit/r/procrastination.

psychobunny

haha derp. You know its bad when I get three PR's doing roughly the same thing. Anyways merged and published, thanks guys