ElkArte Community

Extending Elk => Addons => Topic started by: Antechinus on September 15, 2020, 03:28:26 am

Title: Stupid Bouncy BBC (plus a range of marquees)
Post by: Antechinus on 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 (#post_SBreadme1)
2/ Hover options (#post_SBreadme2)
3/ Toggle options (#post_SBreadme3)
4/ Timing options (#post_SBreadme4)
5/ Height options (#post_SBreadme5)
6/ Padding options (#post_SBreadme6)
7/ Default animations (#post_SBreadme7)
    a) Default bounces (#post_SBreadme7)
    b) Vertical marquees (#post_SBreadme7a)
    c) Horizontal marquees (#post_SBreadme7b)
8/ Custom animations (#post_SBreadme8)
9/ Custom hover options (#post_SBreadme9)

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

Code: [Select]
[bouncy][/bouncy]

There are six optional parameters available:
bounce (#post_SBreadme7),  height (#post_SBreadme5),  hover (#post_SBreadme2),  padding (#post_SBreadme6),  time (#post_SBreadme4) and  toggle (#post_SBreadme3).
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. :D


Disabled tags - Back to start (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 (#post_SBreadme0)

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 – /me 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! :D

ETA:
/me should stop using the /me bbcode because he is starting using it in RL too! :o
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. :D
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on 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. ;D

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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: emanuele on September 19, 2020, 04:02:09 pm
:D
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on 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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: emanuele on 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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on September 28, 2020, 09:52:10 pm
Bonzer. It's bound to be something simple, and once it's sorted havoc can be unleashed. :)
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on 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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Steeley on December 08, 2020, 08:28:25 pm
Shortly the world will rue your very name, Spuds..  :-X
(You DO know that's how Unix got started, right? Couple guys just messing around, it escaped the lab, and the rest is history..)
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on December 10, 2020, 04:36:26 pm
@Spuds: Cool. Will load it up on a test site and mess with it. Thanks.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on 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. :D

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. :P

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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on 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. :P
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 !
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on February 06, 2021, 10:26:02 pm
Quote from: Spuds –
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. :P
You are going to make emanuele pull out his hair !
Oh good. I like tormenting the innocent. It's one of my favourite hobbies. :D

Quote from: Spuds – I 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. :P So I changed it to this, which works:
Code: [Select]
		<remove-file name="THEMEDIR/css/stupid_bouncy.css" />

Quote from: Spuds –
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? :D

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. :D
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on 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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on February 07, 2021, 11:01:20 am
Quote from: Spuds –
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 – 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.
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.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on 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. :P
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on April 28, 2022, 10:30:01 pm
Improved bouncing parrot :bird:  how is that even possible !

Strange that its throwing an error during uninstall, sounds like a permissions error but the system checks for that during the test phase.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on April 29, 2022, 12:04:31 am
I figure out some tricks to make it behave a bit better, and add extra flexibility. ;)

And yes, it is weird how it refuses to uninstall the CSS file now. It's not a deal breaker, just an odd glitch.

Anyway, I have some improvements to the improved version on the way, so don't get too excited yet. :D

Note: For some reason I can't see the attachment to my previous post, even though the post has the paper clip icon showing. Might be another 2.0 beta bug.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on April 29, 2022, 12:26:14 pm
QuoteNote: For some reason I can't see the attachment to my previous post, even though the post has the paper clip icon showing. Might be another 2.0 beta bug.
Glad its not just me LOL ... I need to do a refresh of the site files this weekend, its all fine on my local, however often quick fixes / tests get applied to the site, as such sometimes templates and controllers get out of sync.  I'll get it fixed soon.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on April 30, 2022, 04:04:10 pm
I just removed that attachment anyway. I've been playing with the tag's code and have a better version sorted. Runs perfectly on SMF 2.0x or 2.1.x, so I just need to swap the innards over to an Elk package. :)

ETA: Hey, general question. At the moment the sources file has this format for the tag code...
Code: [Select]
/* Not sure what this does. If it's for Elk 1.0.x, get rid of it! */
function stupid_bouncy(&$codes)
{
global $modSettings;

// Only for when bbc is on.
if (empty($modSettings['enableBBC']))
return;

// Make sure the admin has not disabled the bouncy tag.
if (!empty($modSettings['disabledBBC']))
{
foreach (explode(',', $modSettings['disabledBBC']) as $tag)
{
if ($tag === 'bouncy')
return;
}
}
// Not sure what this does. If it's for Elk 1.0.x, get rid of it!
// Now to wreak havoc n unsuspecting web denizens!
$codes[] = array(
'tag' => 'bouncy',
'before' => '<div class="parrot_kingdom"><div class="parrot_cage"><div class="parrotz">',
'after' => '</div></div></div>',
'disallow_children' => array('bouncy', 'center', 'code', 'hr', 'left', 'list', 'me', 'quote', 'right', 'spoiler', 'table'),
);
}

But is also has this:
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.
// This appears to be the tag syntax for Elk 1.1.x.
// Interrogate damned devs! :P
$codes[] =
array(
\BBC\Codes::ATTR_TAG => 'bouncy',
\BBC\Codes::ATTR_TYPE => \BBC\Codes::TYPE_PARSED_CONTENT,
\BBC\Codes::ATTR_BEFORE => '<div class="parrot_kingdom"><div class="parrot_cage"><div class="parrotz">',
\BBC\Codes::ATTR_AFTER => '</div></div></div>',
\BBC\Codes::ATTR_DISALLOW_CHILDREN => array('bouncy', 'center', 'code', 'hr', 'left', 'list', 'me', 'quote', 'right', 'spoiler', 'table'),
\BBC\Codes::ATTR_BLOCK_LEVEL => false,
\BBC\Codes::ATTR_AUTOLINK => false,
\BBC\Codes::ATTR_LENGTH => 6,
);
}

Can the first load of crud be dropped, if I am only supporting Elk 1.1.x?
/me likes dropping crud I don't need. Less confusing. :P
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on April 30, 2022, 06:03:15 pm
Sorry homeboy, you should use the new format for the parser. 

Just like your vintage 1990 MC Hammer parachute pants and flip phone are dated, so is that vintage of the parser.  The new way (well since 1.1) is faster, cleaner, can make you good looking.  OK that last part is not true, but anyone under the age of 40 will see your code and think, hey this guy is not a old fossil, so there is that.

https://www.youtube.com/watch?v=otCpCn0l4Wo

You better get hype, boy, because you know you can't (You can't parse this)
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on April 30, 2022, 06:33:49 pm
I think you may have edited your question while I was replying ... As I recall when I helped package that up it had 1.1 and 1.0 stuff in the package.  Yes you can, and probably should, drop the 1.0 support, no need for it any longer and I don't think it will run on any current version of PHP anyway.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Steeley on April 30, 2022, 09:08:49 pm
Quote from: Spuds – Sorry homeboy, you should use the new format for the parser. 

Just like your vintage 1990 MC Hammer parachute pants and flip phone are dated, so is that vintage of the parser.  The new way (well since 1.1) is faster, cleaner, can make you good looking.  OK that last part is not true, but anyone under the age of 40 will see your code and think, hey this guy is not a old fossil, so there is that.

https://www.youtube.com/watch?v=otCpCn0l4Wo

You better get hype, boy, because you know you can't (You can't parse this)

I figgered march madness was over a month ago so the trash-talkin woulda run off by now, but noooooo...

[edit - no, that link was just wrong..]  I'm good with keepin it real
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on April 30, 2022, 09:19:10 pm
Times have changed LOL
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Steeley on April 30, 2022, 09:21:06 pm
yea ...(but keep my flip phone out of it..}  :-[
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on May 04, 2022, 05:11:19 pm
I'll take a look at this. I finally have the SMF version to the stage where people are not asking for more features. :D

Apart from bouncing parrots it now also does vertical and horizontal marquees, and a few other tricks. Transferring the code over to Elk should be pretty straightforward.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on May 06, 2022, 07:14:26 pm
Ok, what's up with this? It installs and uninstalls cleanly (no errors) but won't make an existing tag bounce (just renders the raw db content).

ETA: Yep, all the files are being extracted to where they should be. I checked that.

ETA2: Hang on, the CSS file is being called in head, as it should be, but the javascript file is not.
Obvious question here: does hook="pre_javascript_output" still exist in Elk 1.1.x?
(And no, this would not stop the tag bouncing - that's all CSS.)

Code: [Select]
//	Codes hook for 1.1.x - integrate_additional_bbc
// Called from ParseWrapper getCodes()
function stupid_bounces(&$codes)
{
$codes[] =
array(
\BBC\Codes::ATTR_TAG => 'bouncy',
\BBC\Codes::ATTR_TYPE => \BBC\Codes::TYPE_PARSED_CONTENT,
\BBC\Codes::ATTR_PARAM => array(
'bounce' => array(
\BBC\Codes::PARAM_ATTR_VALUE => '$1',
\BBC\Codes::PARAM_ATTR_MATCH => '([a-z\-]{1,9}|[a-z\-]{1,9}\_[a-z\-]{1,9}|[a-z\-]{1,9}\_[a-z\-]{1,9}\_[a-z\-]{1,9})',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),
'height' => array(
\BBC\Codes::PARAM_ATTR_VALUE => 'height:$1px;',
\BBC\Codes::PARAM_ATTR_MATCH => '(\d+)',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),
'hover' => array(
\BBC\Codes::PARAM_ATTR_VALUE => '$1',
\BBC\Codes::PARAM_ATTR_MATCH => '([a-z\-]{1,9})',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),
'padding' => array(
\BBC\Codes::PARAM_ATTR_VALUE => ' style="padding:$1px calc($1px / 2)"',
\BBC\Codes::PARAM_ATTR_MATCH => '(\d+)',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),
'time' => array(
\BBC\Codes::PARAM_ATTR_VALUE => 'animation-duration:$1s',
\BBC\Codes::PARAM_ATTR_MATCH => '(\d+)',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),
'toggle' => array(
\BBC\Codes::PARAM_ATTR_VALUE => ' parrot_show',
\BBC\Codes::PARAM_ATTR_MATCH => '(true)',
\BBC\Codes::PARAM_ATTR_OPTIONAL => true,
),

),
\BBC\Codes::ATTR_BEFORE => '<div class="parrot_kingdom{bounce}{hover}"{padding}><span class="parrot_toggle{toggle}"></span><div class="parrot_cage" style="{height}{time}"><div class="parrot" style="{time}">',
\BBC\Codes::ATTR_AFTER => '</div></div></div>',
\BBC\Codes::ATTR_DISALLOW_CHILDREN => array('bouncy', 'center', 'code', 'hr', 'left', 'list', 'me', 'quote', 'right', 'spoiler', 'table'),
\BBC\Codes::ATTR_BLOCK_LEVEL => false,
\BBC\Codes::ATTR_AUTOLINK => true,
\BBC\Codes::ATTR_LENGTH => 6,
);
}

ETA: Deleted test version of zip.
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on May 06, 2022, 08:04:40 pm
pre_javascript_output does indeed exist ... I'll take a look and see whats up
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Spuds on May 06, 2022, 09:54:56 pm
Only thing I noticed was the "plain" tag was not working, but it requires a "plain" tag definition.  Here is an attempted update.

The JS you added is at the bottom of the sources, it has deferred = true so its loaded at the bottom, which seems to make sense given what it is doing.

eta removed attachment
Title: Re: I finally did it: CSS3 standards-compliant bouncing parrots BBC!
Post by: Antechinus on May 06, 2022, 11:07:20 pm
Ok, ta. But why would it require a separate definition if all the parameters are optional? SMF does it all off the one definition, which is why I thought it would work in Elk. :P

And d'oh at the js file being loaded. I was looking in the wrong place.

Again, SMF 2.1 loads deferred js in head, but of course execution is deferred (due to the defer attribute in the script tag) which is a pretty normal way of doing it these days (because then the js doesn't block other content). So when I saw defer = true in Elk arrays I naturally assumed it would make use of the defer attribute in the script tag.

The way Elk 1.1.x does it is actually a bit old school: loading just before the body tag but with no defer attribute. That's the way it was done before the defer attribute was widely supported.

It's actually better for initial loading (ie: no files cached in the browser) to load js in head, but with the defer attribute in the script tag.
Title: Re: Stupid Bouncy BBC (plus a range of marquees)
Post by: Antechinus on May 06, 2022, 11:21:50 pm
Ok, it bounces now with a plain tag, but... it kills smileys... which means no bouncing parrots.
All you get is the actual typed smiley code:
Code: [Select]
:parrot:

So, tried changing the tag type in your plain tag example to:
Code: [Select]
Codes::ATTR_TYPE => Codes::TYPE_PARSED_CONTENT,

Result: smileys are back, but it stops bouncing, because the tag markup is no longer echoed to the browser.

You guys make it difficult to do things for Elk, y'know. :P

So... then I changed the plain tag from this:
Code: [Select]
	// A plain old tag
$codes[] = array(
Codes::ATTR_TAG => 'bouncy',
Codes::ATTR_TYPE => Codes::TYPE_PARSED_CONTENT,
Codes::ATTR_CONTENT => '<div class="parrot_kingdom"><div class="parrot_cage"><div class="parrot">$1</div></div></div>',
Codes::ATTR_DISALLOW_CHILDREN => array('bouncy', 'center', 'code', 'hr', 'left', 'list', 'me', 'quote', 'right', 'spoiler', 'table'),
Codes::ATTR_BLOCK_LEVEL => false,
Codes::ATTR_AUTOLINK => true,
Codes::ATTR_LENGTH => 6,
);

To this:
Code: [Select]
	// A plain old tag
$codes[] = array(
Codes::ATTR_TAG => 'bouncy',
Codes::ATTR_TYPE => Codes::TYPE_PARSED_CONTENT,
Codes::ATTR_BEFORE => '<div class="parrot_kingdom"><span class="parrot_toggle"></span><div class="parrot_cage"><div class="parrot">',
Codes::ATTR_AFTER => '</div></div></div>',
Codes::ATTR_DISALLOW_CHILDREN => array('bouncy', 'center', 'code', 'hr', 'left', 'list', 'me', 'quote', 'right', 'spoiler', 'table'),
Codes::ATTR_BLOCK_LEVEL => false,
Codes::ATTR_AUTOLINK => true,
Codes::ATTR_LENGTH => 6,
);

Result: everything works now. It bounces, and it has parrots. :D

See the OP of this thread (https://www.elkarte.net/community/index.php?topic=5831.0) for the latest version, and instructions on how it all works. :)
Title: Re: Stupid Bouncy BBC (plus a range of marquees)
Post by: Spuds on May 07, 2022, 08:34:03 am
Its done that way for speed, a plain tag is just that, no need to search for a bunch of attributes that may or may not exists in some order, that most people never use anyway.  Yes it causes the author to spend an extra moment in the definition but its provides system/site benefits from there on.

I had changed it to TYPE_UNPARSED_CONTENT, forgetting that you wanted the to stuff between the tags to be PARSED.   Unparsed simply wraps the content in the ATTR_CONTENT markup, while the later adds the ATTR_BEFORE markup, parses stuff like smiles, and then adds the ATTR_AFTER markup.

Glad you have it working.