Spoiler Tags Plugin v1.0

Find help with FlatPress plugins, report a plugin bug, request or present new plugins.
Post Reply
Tongara
Posts: 77
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: 558
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?

User avatar
fraenkiman
Posts: 210
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Re: Spoiler Tags Plugin v1.0

Post by fraenkiman » Sat Oct 15, 2022 8:51 pm

Hello, everyone,

I took the liberty of creating a wiki article for Tongara's plugin.

In addition, in v1.0.1 it is no longer necessary to manually place the polyfill JavaScript in the body.

Have fun with the plugin

Best regards
Frank
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

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

Re: Spoiler Tags Plugin v1.0

Post by Arvid » Sun Dec 11, 2022 1:26 pm

A little suggestion: The plugin crashes if the BBCode plugin is not activated. Solution is easy, just check for the existance of plugin_bbcode_init():

Code: Select all

function plugin_spoilertags() {
	if (!function_exists('plugin_bbcode_init')) {
		return;
	}
	$bbcode = plugin_bbcode_init();
All the best,
Arvid

User avatar
fraenkiman
Posts: 210
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Spoiler Tags Plugin v1.0.2

Post by fraenkiman » Wed Dec 14, 2022 12:06 am

Hello Arvid,

thank you very much for your hint and the solution :) .
The fix for the plugin is complete and available for download on the wiki.

With best regards
Frank
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

Shatter
Posts: 1
Joined: Sat Dec 17, 2022 6:10 pm
Location: GB
Contact:

Re: Spoiler Tags Plugin v1.0

Post by Shatter » Sat Dec 17, 2022 6:46 pm

I was wondering if there is a way to change the look of the spoiler title?
Something in the flavor of changing the triangle to a different image or icon
and changing the color of the font?

Thanks in advance

User avatar
fraenkiman
Posts: 210
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Re: Spoiler Tags Plugin v1.0

Post by fraenkiman » Sat Dec 17, 2022 11:58 pm

Hello Shatter,

you can do that via stylesheet. You can experiment around with the following spoilertags.css:

Code: Select all

details > summary {
    list-style-type: none;
    color: #B83C32; /* Colors of the font of the spoiler title */
    font-weight: bold; 
    text-decoration: none;
    cursor: pointer;
}

details > summary::-webkit-details-marker { /* FIX for Safari */
    display: none;
}

details > summary::before {
    /* content: 'β–Ά'; */
    content: url(../../../fp-plugins/spoilertags/img/expand_right.png); /* Image as expand sign; size is not scalable !!! */
    vertical-align: top;
}

details[open] > summary::before {
    /* content: 'β–Ό'; */
    content: url(../../../fp-plugins/spoilertags/img/expand_down.png); /* Image as expand sign; size is not scalable !!! */
    vertical-align: top;
}

details {
    display: block; /* Do not deactivate !!! */
    border: #ccc solid 1px; /* Framing of the hidden content inside the spoiler tag */
    border-radius: 3px;
    padding: 5px;
}

details:hover {
    border: #999 solid 1px;
}

details[open] > summary {
    margin-bottom: 5px;
    font-style: italic; /* italic font of spoiler title when expanded 'β–Ό' */
}
I recommend to test the changes with different browsers.

With best regards
Frank
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

Post Reply

Who is online

Users browsing this forum: No registered users and 20 guests