Margins rectangle consistency

[jotakar]

Hello,

I would like to suggest a modification to the data-jos_rootMargin attribute so that it can be interpreted as rootMargin.
I see that the rootMargin values are top% right% bottom% left% (as in CSS).
But data-jos_rootMargin is right% top% left% bottom%.
If I understand correctly, both attributes have similar meaning, or perhaps I am wrong in interpreting the functions of each attribute.
In any case, the usual way in CSS to handle the values is top right bottom left; using this order helps with consistency.
EDIT:
I'm trying to understand this attribute data-jos_rootMargin but it looks like it is not used, it has no effect in animation.
I digged in code and I can see that this attribute does not appear when calculate rootMargin.
I can see it does not use jos_rootmargin, but jos_rootmargin_top, jos_rootmargin_right, jos_rootmargin_left, jos_rootmargin_bottom.
Is ii a bug or am I confused?

Thanks

[jesvijonathan]

Correct !

The doc has it wrong, it is : 0th position for topMargin & 2nd position for bottomMargin & 1st position for right & 3rd position for left.

JOS-Animation-Library/dev/jos.js

Line 456 in 8a79401

box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0],

So it would be : top% right% bottom% left%

I'll update the Docs and provide a better example for this, but I agree, It is confusing & there was a ticket to improve this #27.

[jotakar]

As I mentioned in my first post, it seems that data-jos_rootmargin is not being read by the script. While exploring the code, I noticed on line 455 (let rootMargin ...) that it sets rootMargin by checking for jos_rootmargin_top, jos_rootmargin_right, etc., but it doesn't read jos_rootmargin. Could this be a bug? I found that if I modify the code to include reading jos_rootmargin, the attribute works, making it possible to use different rootMargin values for different elements.
Ah, I noticed some inconsistency in the code. It primarily uses camelCase notation, except for animationinverse and scrolldirection, which could lead to confusion.
I hope this helps improve the code (assuming I’m not making any mistakes, of course)
Thanks

[jesvijonathan]

Yes, this is a bug..
You might have to use global root margin properties for now....

I'll update this thread once it is fixed.
Thank you

[jotakar]

Ok, I fixed it in my copy of JOS with this code
let tempRootMargin = box.dataset.jos_rootmargin || this.default_rootMargin;
let rootMargin = ["top", "right", "bottom", "left"].map(side => {
const value = box.dataset["jos_rootmargin_"+side] || tempRootMargin.split(" ")[["top", "right", "bottom", "left"].indexOf(side)];
return value.startsWith("-") ? value.substring(1) : -${value};
}).join(" ");