Spoiler Tags Plugin v1.0

Find help with FlatPress plugins, report a plugin bug, request or present new plugins.
Post Reply
Tongara
Posts: 22
Joined: Wed Jan 22, 2020 11:09 am
Location: Birmingham, UK
Contact:

Spoiler Tags Plugin v1.0

Post by Tongara » Fri Mar 06, 2020 2:32 am

So, I've created my first plugin. As per the title, this plugin adds spoiler tags to Flatpress that you can use in posts and static pages. It was made with help from the "BBCode Plugin Tips" on the wiki, and requires the BBCode plugin by Hydra & NoWhereMan that comes as standard with Flatpress.

I found a post on the old Flatpress archive forum asking for this all the way back in 2012, but no one ever answered or took up the challenge. I decided to change that, and you can download my plugin by clicking HERE.

With this post, I'll teach you how to use my Flatpress Spoiler Tags Plugin.

Below is a standard spoiler tag. You can use it by simply wrapping your content in [spoiler][/spoiler] tags.
The spoiler has a default text of "Spoiler", as shown below:

Image

When clicked, it looks like this (what you will see will vary by whatever you put between the tags):

Image

You can define the text of the clickable spoiler field by defining the attribute like [spoiler=YourText] on the opening of the tag.
This can be seen below with the word "Spoiler1":

Image

Sadly, BBCode doesn't allow spaces in attributes and will stop parsing after the first word. Luckily, we can use a workaround to add a space to our spoiler attribute using an " " between words.
This is shown below with the words "Spoiler 2":

Image

You can style the spoiler very easily by editing the spoiler.css file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.

Sadly, these elements currently don't work for users of Internet Explorer, but according to user "Finesse" on THIS post on a StackOverflow question on this issue, adding the following polyfill inside the "<body>" of your blog will fix this:

Code: Select all

<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>
You can generally find the "<body>" tag in your theme's header.tpl file.

That's it, I hope you enjoy using the plugin!

You can see a live example of it working at https://www.clockworkknight.com/flat/?x ... 306-031247

Credit of course goes to Hydra & NoWhereMan for their BBCode plugin that comes as standard with Flatpress, the "BBCode Plugin Tips" on the wiki, and of course "Finesse" from StackOverflow for the Internet Explorer fix.

User avatar
Arvid
FlatPress Coder
Posts: 87
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: Spoiler Tags Plugin v1.0

Post by Arvid » Sun Apr 19, 2020 10:55 am

This is pretty cool :) Would you like to add it to the plugins page on the wiki?
Helpful FlatPress links: Project blog 📝 - FlatPress wiki 📖 - FlatPress@Twitter 🐦
Stay up to date with our feeds: Forum RSS feed 📜 - Project blog RSS feed 📜


🇩🇪 Habe aktuell für meinen Arbeitgeber hier im Ruhrgebiet eine Stelle zu besetzen! 🇩🇪
- Softwareentwickler (Webanwendungen) - unbefristet, sofort

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest