Stupid Bouncy BBC (plus a range of marquees)

Stupid Bouncy BBC (plus a range of marquees) Started by Antechinus · September 15, 2020, 03:28:26 am · Read 15786 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Stupid Bouncy BBC (plus a range of marquees)

September 15, 2020, 03:28:26 am

Ok, brand new version of this beast is now available.
Updated: May 7, 2022.
Zip is attached to the bottom of this post.

Stupid Bouncy BBC
by Antechinus

Tag options
1/ Disabled tags
2/ Hover options
3/ Toggle options
4/ Timing options
5/ Height options
6/ Padding options
7/ Default animations
a) Default bounces
b) Vertical marquees
c) Horizontal marquees
8/ Custom animations
9/ Custom hover options

No editor button is provided. Type the tag like this:

Code: [Select]

[bouncy][/bouncy]

There are six optional parameters available:
bounce, height, hover, padding, time and toggle.
You can use none of these, or any combination of them.
Place them in any order in the leading tag. All of these are fine:

Code: [Select]

[bouncy][/bouncy]
[bouncy time=2][/bouncy]
[bouncy time=2 padding=32][/bouncy]
[bouncy padding=32 time=2][/bouncy]

The default CSS for this tag is customisable - if you know what you are doing.
The default CSS does not contain colours, or many other presentation details.
Add these to your theme's CSS, if you want to style this tag to match your theme.
Details would usually be added to the parrot_kingdom and parrot_show classes.

And remember: with great bouncy power comes great responsibility.

Disabled tags - Back to start

Note that the following BBC tags break layout if used inside bouncy.
Because of this, use of these tags inside the bouncy tag is disabled.

Code: [Select]

bdo, bouncy, center, code, html, hr, justify, left, list, ltr, me, move, quote, right, rtl, table, youtube

Hover options - Back to start

The hover option controls animation behaviour when the cursor is over the tag.
Default behaviour pauses animations when the cursor is over the main container.
To change the default behaviour, so that animations only start when
the cursor is over the main container, edit the default CSS here:

Code: (Find) [Select]

/* For God's sake, stop those bounces! :D */
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
	animation-play-state:paused;
}

Code: (Replace) [Select]

/* For God's sake, stop those bounces! :D */
.parrot_kingdom .parrot_cage,.parrot_kingdom .parrot {
	animation-play-state:paused;
}
.parrot_kingdom:hover .parrot_cage,.parrot_kingdom:hover .parrot {
	animation-play-state:running;
}

If hover=chase, people have to hover over the bouncing content to pause the animations.
This option is for when you feel like surprising someone (and thoroughly annoying them).

Code: [Select]

[bouncy hover=chase][/bouncy]

Of course, if someone does that to you with their bouncy tag you might want revenge.
If you set hover=nonstop the animations will never stop, no matter what anyone does.

Code: [Select]

[bouncy hover=nonstop][/bouncy]

If you are feeling particularly evil, use hover=peekaboo. This means the
animations will never stop, but if the cursor is hovered over the moving
content it disappears from view, before reappearing somewhere else.

Code: [Select]

[bouncy hover=peekaboo][/bouncy]

Note: nonstop and peekaboo are not controlled by the toggle option.
If you want to change that, edit this code near the top of the CSS file.

Code: (Find) [Select]

/* Classes inside :not() are immune to toggles! */
.parrot_kingdom:not(.nonstop,.peekaboo) .parrot_frozen + .parrot_cage,
.parrot_kingdom:not(.nonstop,.peekaboo) .parrot_frozen + .parrot_cage .parrot {
	animation-play-state:paused;
}

Code: (Replace) [Select]

/* Yes, Ant will let you use !important here. :D */
.parrot_frozen + .parrot_cage,.parrot_frozen + .parrot_cage .parrot {
	animation-play-state:paused!important;
}

Toggle options - Back to start

Setting toggle=true displays a toggle, to disable or enable animations.
Clicking any toggle disables or enables all bouncy animations on the page.

Code: [Select]

[bouncy toggle=true][/bouncy]

Note that reloading the page will reset animations to their default values.
In other words: toggling animations does not create a permanent setting.

Timing options - Back to start

The time option lets you change the animation time.
time only accepts whole seconds (no decimal places).

Code: [Select]

[bouncy time=1][/bouncy]
[bouncy time=22][/bouncy]
[bouncy time=333][/bouncy]

Height options - Back to start

The height option is for dealing with a bug in browsers based on Chrome.
It refers to the height of the moving content - not overall height of the tag.
Setting height is necessary for all animations (except horizontal marquees).
The best value for height is equal to the height of the moving content.
For example, this would be the best value for a 64px high smiley:

Code: [Select]

[bouncy height=64]:big_smiley:[/bouncy]

If in doubt: guess the height, then set it a bit larger (20px extra is ok).

Padding options - Back to start

Padding is not necessary for the basic bounce animation, or for the marquees.
padding is useful for spinning or flipping content - bounce=flip/spin/zomg.
If the content is partly hidden at top, bottom, left or right: add some padding.
Enter any number to add that amount of top and bottom padding in pixels:

Code: [Select]

[bouncy padding=32][/bouncy]

Doing this automatically adds half that amount of left and right padding.
This is a good compromise for a wide range of content and animations.

Default animations - Back to start

Container height can be changed by wrapping bouncy in size.
You can use this to adjust bounce height for bouncing animations.
You can also use it to adjust the scroll height for vertical marquees.

Code: [Select]

[size=4][bouncy][/bouncy][/size]
[size=5][bouncy][/bouncy][/size]
[size=6][bouncy][/bouncy][/size]

Standard content bounces four times, across the page and back.
The bounce option lets you select from another 15 animations.

bounce=flip adds a flip to the first and last bounce on each side.
bounce=spin adds a continuous spin to the standard four bounces.
bounce=zomg changes the standard bounces to a spinning ricochet.
bounce=zomg_alt reverses the direction of bounce=zomg.

Code: [Select]

[bouncy bounce=flip][/bouncy]
[bouncy bounce=spin][/bouncy]
[bouncy bounce=zomg][/bouncy]
[bouncy bounce=zomg_alt][/bouncy]

Vertical marquees - Back to start

vert_rise changes the tag to a bottom-to-top vertical marquee.
vert_fall changes the tag to a top-to-bottom vertical marquee.
vert_both changes the tag to an alternating vertical marquee.

Code: [Select]

[bouncy bounce=vert_rise][/bouncy]
[bouncy bounce=vert_fall][/bouncy]
[bouncy bounce=vert_both][/bouncy]

Horizontal marquees - Back to start

bounce=move_left changes the bouncy tag to a right-to-left marquee.
bounce=move_right changes the bouncy tag to a left-to-right marquee.
bounce=move_both changes the bouncy tag to an alternating marquee.
This option is mainly intended for extra stupidity with animated gifs.
Most of these gifs have animals walking or running from left to right.
move_both will flip the gif 180 degrees when it is moving right to left.
This means the gifs will always be walking or running the correct way.
both_move is basically the same as move_both, but reversed,
to suit gifs that are animated to move from right to left by default.

Code: [Select]

[bouncy bounce=move_left][/bouncy]
[bouncy bounce=move_right][/bouncy]
[bouncy bounce=move_both][/bouncy]
[bouncy bounce=both_move][/bouncy]

There are horizontally-flipped alternatives of these four options.
These are included mainly for total silliness. You can set up bouncy
tags stacked down the page, and then have gif content in each tag
running in the opposite direction to the adjacent tags.

bounce=move_left_alt switches bounce=move_left horizontally.
This makes gifs that have left to right animations look correct
when they are starting at the right side, and moving left.
bounce=move_right_alt switches bounce=move_right horizontally.
This makes gifs that have right to left animations look correct
when they are starting at the left side, and moving right.
bounce=move_both_alt switches bounce=move_both horizontally.
This makes gifs that have left to right animations look correct when they
start at the right side, moving left initially, before changing direction.
bounce=both_move_alt switches bounce=both_move horizontally.
This makes that gifs have right to left animations look correct when they
start at the left side, moving right initially, before changing direction.

Code: [Select]

[bouncy bounce=move_left_alt]
[bouncy bounce=move_right_alt]
[bouncy bounce=move_both_alt][/bouncy]
[bouncy bounce=both_move_alt][/bouncy]

Custom animations - Back to start

You can create custom animations by writing your own CSS.
Subs-Stupid-Bouncy.php accepts bounce names that are:
1/ composed of all lowercase letters
2/ in groups of one to nine letters
3/ in one, two, or three groups
4/ separated by an underscore

Add custom bounce classes to any CSS file called on that page.
For bounce=lollipop, deranged_bandicoot, and this_is_bonkers:

Code: [Select]

.lollipop {foo: ****}
.lollipop .parrot_cage {foo: ****}
.lollipop .parrot {foo: ****}

.deranged_bandicoot {foo: ****}
.deranged_bandicoot .parrot_cage {foo: ****}
.deranged_bandicoot .parrot {foo: ****}

.this_is_bonkers {foo: ****}
.this_is_bonkers .parrot_cage {foo: ****}
.this_is_bonkers .parrot {foo: ****}

Note that these examples would not be accepted:

Code: [Select]

bounce=lollipop2 /* Contains an integer */
bounce=lollipopS /* Contains an uppercase letter */
bounce=deranged-bandicoot /* Not separated by an underscore */

Custom hover options - Back to start

You can create custom hover options by writing your own CSS.
Subs-Stupid-Bouncy.php accepts hover class names that are:
1/ lowercase letters only
2/ maximum of nine letters

Code: [Select]

hover=newhover  /* This will be accepted. */
hover=new_hover /* This will not be accepted. */

Quote from: Old post contentSo far it's just for SMF 2.0, being my first experiment with hooks. I assume porting it to Elk 1.1. will be a piece of cake, but won't get around to it today.
Quote from: emanuele – December 17, 2012, 03:53:03 pm
emanuele hopes Antechinus will make the bouncing parrots BBCode configurable (i.e. speed, bouncing rate, width, height, etc.) so that he can put a bunch in his signature bouncing all over the places!

ETA:
emanuele should stop using the /me bbcode because he is starting using it in RL too!
Re configurable: at the moment it has a CSS file, so you will be able to edit that to mess with the transitions, etc. If anyone wants to make a super configurable version with $1, etc all over the place, they can go for it. Personally I think that might be a bit much.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #1 – September 17, 2020, 03:49:22 am

Ay up! So I made an Elk add-on. Got it to install without errors, after only blowing up my test site once. Pretty good for a first go at it.

It's meant to just make a new tag, with no editor button (for the sake of sanity). Only catch is that although it installs without errors, it doesn't make anything bounce. It just gives this in the error log:

Code: [Select]

    antechinus
    Today at 06:42:53 PM
    127.0.0.1

    QGMwxJnemBDUpgOOFKcAMohjh6mDlscP
    Type of error: Undefined
    Notice: Undefined offset: 1

    http://127.0.0.1/Elk_11x/index.php?topic=1.new

    File: B:/VertrigoServ/www/Elk_11x/sources/subs/BBC/Codes.php
    Line: 995

Not sure where I went wrong. Yes, the tag is enabled in Admin > BBC, so it's not the obvious. Can someone take a look at the package when they get a chance?

ETA: Removed dodgy old zip.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #2 – September 19, 2020, 04:02:09 pm

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #3 – September 19, 2020, 11:06:59 pm

Ahem. 'Tis all very well people giving likes and smileys, but it doesn't work yet, and I would appreciate any tips on what is wrong with the code.
Obviously the CSS works, but something (probably minor) is borked with the sources and/or XML stuffz.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #4 – September 28, 2020, 04:34:31 pm

Weeell, actually I didn't read the entire message... recently it happens quite frequently.

hmm... index 1 should be \BBC\Codes::ATTR_TAG that is used in your code.
Could it be you have some other bbcode around?
Will give it a go over the weekend.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #5 – September 28, 2020, 09:52:10 pm

Bonzer. It's bound to be something simple, and once it's sorted havoc can be unleashed.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #6 – December 08, 2020, 04:54:17 pm

Only thing I saw (on 1.1 at least) was it was not loading the CSS file ... reverse logic in the stupid_css function. I fixed that (removed the !) and then allowed the admin to turn off the code if needed.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #7 – December 08, 2020, 08:28:25 pm

Shortly the world will rue your very name, Spuds..

(You DO know that's how Unix got started, right? Couple guys just messing around, it escaped the lab, and the rest is history..)

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #8 – December 10, 2020, 04:36:26 pm

@Spuds: Cool. Will load it up on a test site and mess with it. Thanks.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #9 – February 06, 2021, 05:13:40 pm

So, two months later... I finally get around to trying it. Hey, it works! Yay! I like the addition of an admin option to disable the tag. That makes a lot of sense for this particular tag.

I'll double check the CSS to see if I can improve it, and also check that it will play nicely with the proposed change to CSS grid in Display.template.php.

Then it can go on the add-ons site, for greater bouncy interwebz depravity.

ETA: Aha! Noticed that although it installs without errors, and works when installed, attempting to uninstall creates an error. It fails to remove the stupid_bouncy.css file from default/css. That was me using incorrect xml syntax to do the file removal. I've attached a fixed version.

This still has the old CSS, but it works well enough for the moment.

ETA2: Actually, there is something wrong with how the hooks are being managed. Did I mention I hate hooks? Basic code edits are so much cleaner and easier to keep track of.

Anyway, function stupid_bouncy is only supposed to be processed for installation on Elk 1.0.x, according to the xml. Yet, for some reason, it is being processed for installation on 1.1.x too, and for some reason the admin setting is in that function.

So, given that function is only mentioned in <install for="1.0 - 1.0.99"> why, I have to ask, is it being processed for <install for="1.1 - 1.1.99"> ? ? ?

This does not seem to make sense. Nor does it seem to make sense to have a 1.1.x admin setting in a function which is only intended for 1.0.x.

This is all causing problem when the mod is uninstalled. It leaves stray crud in the "Integration Hooks" section of Admin > Maintenance.

I am thinking it would make more sense to entirely remove any support for Elk 1.0.x and just have one function that does all the necessary. Which, of course, means completely rewriting StupidBouncy.subs.php and package-info.xml.

ETA: Removed old version of mod.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #10 – February 06, 2021, 09:19:39 pm

QuoteETA2: Actually, there is something wrong with how the hooks are being managed. Did I mention I hate hooks? Basic code edits are so much cleaner and easier to keep track of.

You are going to make emanuele pull out his hair !

I only tested this on 1.1 and it installed and uninstalled as expected. The files were added and removed.

The package installs a unified StupidBouncy.subs.php file, the hooks that get installed for 1.1 simply call that file and specifically the 1.1 only function, the 1.0 function is just there and not used.

Likewise if this was installed on 1.0 it should install the exact same (2) files, but the 1.0 hook is set to only call the 1.0 function, ignoring the 1.1 function.

Now you could create two separate files one for 1.0 and one for 1.1 but I don't think thats worth the effort.

Not sure I answered the question !

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #11 – February 06, 2021, 10:26:02 pm

Quote from: Spuds – February 06, 2021, 09:19:39 pm
QuoteETA2: Actually, there is something wrong with how the hooks are being managed. Did I mention I hate hooks? Basic code edits are so much cleaner and easier to keep track of.
You are going to make emanuele pull out his hair !

Oh good. I like tormenting the innocent. It's one of my favourite hobbies.

Quote from: Spuds – February 06, 2021, 09:19:39 pmI only tested this on 1.1 and it installed and uninstalled as expected. The files were added and removed.

I was testing it on 1.1.6 on local. It was removing the sources file just fine, but I had written the uninstall for the CSS file like this:

Code: [Select]

		<remove-file name="stupid_bouncy.css" destination="THEMEDIR/css" />

It didn't like that.

So I changed it to this, which works:

Code: [Select]

		<remove-file name="THEMEDIR/css/stupid_bouncy.css" />

Quote from: Spuds – February 06, 2021, 09:19:39 pm
The package installs a unified StupidBouncy.subs.php file, the hooks that get installed for 1.1 simply call that file and specifically the 1.1 only function, the 1.0 function is just there and not used.

Ok, what is happening is that the comments that say "for 1.0 and 1.1.x" cover function stupid_css and function stupid_bouncy. The first one obviously does the CSS file, so is required anyway. The second one covers both the admin setting and one chunk of $codes[] for markup. It also does this in package-info.xml, as part of <install for="1.0 - 1.0.99">:

Code: [Select]

		<hook hook="integrate_bbc_codes" file="SUBSDIR/StupidBouncy.subs.php" function="stupid_bouncy" />

That one seems to be fine. The hook is added and removed when you uninstall and uninstall. The problem is with this, in <install for="1.1 - 1.1.99">:

Code: [Select]

		<hook hook="integrate_additional_bbc" file="SUBSDIR/StupidBouncy.subs.php" function="stupid_bounces" />

This one is leaving behind hook="integrate_additional_bbc", as a "hook not found" warning in action=admin;area=maintain;sa=hooks; after I uninstall the mod. The actual function from the sources file is:

Code: [Select]

/**
 *	stupid_bouncy
 *
 * Codes hook for 1.1.x, integrate_additional_bbc, Called from ParseWrapper getCodes()
 *
 * @param mixed[] $codes array of codes as defined for parse_bbc
 */
function stupid_bounces(&$codes)
{
	// Add our tag info to the parser, this controls how the tag will render
	$codes[] =
		array(
			\BBC\Codes::ATTR_TAG => 'bouncy',
			\BBC\Codes::ATTR_TYPE => \BBC\Codes::TYPE_PARSED_CONTENT,
			\BBC\Codes::ATTR_BEFORE => '<div class="parrot_cage"><div class="parrotz">',
			\BBC\Codes::ATTR_AFTER => '</div></div>',
			\BBC\Codes::ATTR_DISALLOW_CHILDREN => array('move, quote, code, hr'),
			\BBC\Codes::ATTR_BLOCK_LEVEL => true,
			\BBC\Codes::ATTR_AUTOLINK => false,
			\BBC\Codes::ATTR_LENGTH => 6,
		);
}

So somehow this is going a tad haywire, and leaving the db thinking a hook should be there after uninstalling, but it can't find the thing so it grumbles. The grumbles don't seem to break anything, but better if it doesn't grumble.

That's why I was thinking it might make sense to ditch one function and just have a 1.1.x-only function that covers everything. Hopefully this will mean no grumbles.

Am I making sense now?

ETA: Really I just need to know which chunk of code I can drop from the sources file (ie: the $codes[] and hook part of function stupid_bouncy, or the $codes[] and hook part of function stupid_bounces) if I'm just wanting it to install on 1.1.x.

I can probably figure this out myself by swearing at things and breaking the test site a couple of times.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #12 – February 07, 2021, 09:35:00 am

QuoteI was testing it on 1.1.6 on local. It was removing the sources file just fine, but I had written the uninstall for the CSS file like this:

Done that myself, and that syntax seems like it would work but it does not. Maybe something to consider adding for 2.0 as its strange that you have to write it one way for install and another for uninstall.

QuoteThis one is leaving behind hook="integrate_additional_bbc", as a "hook not found" warning in action=admin;area=maintain;sa=hooks; after I uninstall the mod. The actual function from the sources file is:

I've installed and uninstalled this several times on my 1.1.7 and its removing the hook as it should. Sooooo that likely means you have some crud in your DB settings that stores the hook.
I've seen this happen when writing / testing the addons, it does not (fully) uninstall one time due to an error so it leaves that dangling hook behind, a hook Klingon. I think you can remove that with repair settings, I don't think you can do that in the ACP. Or simply if that is the only additional BBC thing you have just use phpadmin or whatever, open the elkarte_settings table and delete the integrate_additional_bbc variable.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #13 – February 07, 2021, 11:01:20 am

Quote from: Spuds – February 07, 2021, 09:35:00 am
QuoteI was testing it on 1.1.6 on local. It was removing the sources file just fine, but I had written the uninstall for the CSS file like this:
Done that myself, and that syntax seems like it would work but it does not. Maybe something to consider adding for 2.0 as its strange that you have to write it one way for install and another for uninstall.

I just noticed how the install and uninstall were written for the sources file (which worked) so I copied the same syntax. As long as it works I can't see that anything really needs changing. It makes sense to me that deleting an existing file wouldn't involve a destination as such, and that you'd just target the file by its path.

Quote from: Spuds – February 07, 2021, 09:35:00 amI've installed and uninstalled this several times on my 1.1.7 and its removing the hook as it should. Sooooo that likely means you have some crud in your DB settings that stores the hook.
I've seen this happen when writing / testing the addons, it does not (fully) uninstall one time due to an error so it leaves that dangling hook behind, a hook Klingon. I think you can remove that with repair settings, I don't think you can do that in the ACP. Or simply if that is the only additional BBC thing you have just use phpadmin or whatever, open the elkarte_settings table and delete the integrate_additional_bbc variable.

Ok. That makes sense. It did throw some whoopsies when I was trying to get it working, and I only got around to checking that section of admin yesterday. I'll sort out the db and see how it goes.

ETA: That seems to fix it. Although I'm still thinking there's not much point having install/uninstall code for 1.0.x these days, so I'll probably still simplify things and bung it all in the one function. I'm not big on having code that nobody will ever use.

Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!

Reply #14 – April 28, 2022, 02:00:36 am

I've just done an updated version of this, for Elk 1.1.x only.
It has improved markup and CSS for better behaviour and more flexibility of content.

However, for some stupid reason it is now throwing a "Modification parse error" on uninstall. This is related to it refusing to delete the mod's CSS file on uninstall. It has no other effects.

And the stupid thing is I have not changed the uninstall code in the XML, nor have I changed anything in Sources except for a bit of tag markup. So, no idea why it is throwing a wobbly now, and honestly I don't really care. It works anyway.