Cassiopeia template.js

[dgrammatiko]

The code in the template.js should be totally useless right now, let me explain:

var fieldsets = target.querySelectorAll('fieldset.btn-group');

This part existed for the grouped buttons in J3 but in J4 the functionality is done by html+css, no js needed or even if it is needed then it should be coupled with the actual Form Field (radio ?) not thrown in the template. The template is just an orchestrator, it doesn't and shouldn't impose things (embrace modular architecture)

var backToTop = document.getElementById('back-top');

This part is for the back to top but iirc now this is done by a simple anchor and a css property (smooth-scroll)

So the entire file is useless...

Expected result

No template.js needed anymore

Actual result

template.js has code that either doesn't belong there (eg Form Field Radio) or it can be replaced (or already has been replaced) by simple html+css (the back to top link)

System information (as much as possible)

Additional comments

[richard67]

I had already created an issue. Have closed it in favour of this here.

[dgrammatiko]

I had already created an issue. Have closed it in favour of this here.

Sorry, I've missed that. Anyways I think the explanation here is something that can be verified and tackled

[richard67]

Yes, that's why I've closed mine in favour of this one, because here the information comes from first and not from second hand 😉

[richard67]

After PR #244 has been merged, at least the back to top part of the template.js is not obsolete anymore.

[dgrammatiko]

After PR #244 has been merged, at least the back to top part of the template.js is not obsolete anymore.

Honestly you don't need JS for this: https://moderncss.dev/pure-css-smooth-scroll-back-to-top/ (plenty more articles for a css only solution)

[brianteeman]

it is needed if you insist on removing #back-to-top from the url

[dgrammatiko]

it is needed if you insist on removing #back-to-top from the url

No it's not and I just gave you the link with all the html/css. No freaking JS for moving to the top of the page in 2020...

[brianteeman]

Sorry dmitris the code in that demo and in all the pure css demos will keep the #anchor in the url. They didnt want that - hence the js.

As you don't believe me I have put the code from that article on a real link instead of in a codepen iframe and you can see for yourself that the #anchor is present

http://tee.mn/dimitris/

[richard67]

@dgrammatiko See also #242 .

[dgrammatiko]

They didnt want that - hence the js.

I just went through the issue and I have to say that people should firstly invest understanding how the web is really working before raising issues. The #whatever anchor part is fundamental to the web, eg if I want to send you a link with some info on CSS property: position: Table elements as sticky I would copy the link from the relative anchor https://caniuse.com/mdn-css_properties_position_position_sticky_table_elements instead of sending you the start of the page https://caniuse.com/?search=sticky . Also the anchor is not server side rendered so it doesn't affect the SEO and also if you accidentally share the link with the top anchor the experience for whomever is receiving and using the link won't be wrong or deviating from the standard visit of the site without the anchor.

In short they're solving a non existing problem.

[richard67]

That might all be right .. I've just linked the issue to make clear what has been done why.

[dgrammatiko]

That might all be right .. I've just linked the issue to make clear what has been done why.

Well, Javascript is a powerful language and will allow you to do a lot on the DOM, but before doing anything always ask if it worth the effort or is it really solving a problem. In this case there's no problem that needs a js solution.

My 2c

[brianteeman]

I am not saying I agree with removing the anchor - just explaining

[dgrammatiko]

I am not saying I agree with removing the anchor - just explaining

I know, my comments are not really targeting you or @richard67 . I just needed to explain why the whole js solution is a placebo...

[brianteeman]

Apart from the bit where you said that the link showed you how to do it without any #anchor in the url ;)

[dgrammatiko]

Apart from the bit where you said that the link showed you how to do it without any #anchor in the url ;)

Yeah my bad, I didn't read the issue right away...

[richard67]

Well, I wouldn't call myself a web expert at all, but as far as I know and have experienced with Google search console, the anchor should not really be an issue. I didn't really understand why #242 was an issue.

[dgrammatiko]

I didn't really understand why #242 was an issue.

It's not. The whole idea of "clean URLs" in the client side just doesn't exist and (as long as the anchors actually exist in the page) in fact as I explained above it's a feature (eg guide ppl to the particular part of the page that you want to share).

as far as I know and have experienced with Google search console, the anchor should not really be an issue

Since the anchor is only attached in the client side Google will never know about it. Also even if you manage to put anchors in your sitemap Google will ignore them. Also the platform has gone one step forward: https://chromestatus.com/feature/4733392803332096 so the old anchor is pretty safe...

[richard67]

Well, as we are finishing our development here soon, we might not fix this here but later in the CMS repo with a future PR.

At the end our work here did not touch it and leaves it like it was before.

[richard67]

So if we don't solve it here, we should move this issue to the CMS repository after we have made our PR for the CMS repo with our work.