Don't bind to class selectors or IDs

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
Post Reply
User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Don't bind to class selectors or IDs

Post by callumacrae »

When binding JS events to HTML classes or element IDs, it makes it tricky to know when modifying the HTML whether modifying the class will break some JS. You can't test every extension.

I propose using a js- namespace for classes which have JavaScript events binded to them (and those classes should never be styled).

Another alternative would be a `data-hook` attribute, e.g. `data-hook="alert-box"`.

It just makes stuff less fragile. I would be able and willing to implement this.

Ticket: https://tracker.phpbb.com/browse/PHPBB3-12806
Made by developers, for developers!
My blog

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: Don't bind to class selectors or IDs

Post by PayBas »

+1

I'd prefer the js- prefixed classes. Is there any parsing speed advantage to using data-attr?

User avatar
Louis7777
Registered User
Posts: 385
Joined: Fri Apr 04, 2014 12:32 am

Re: Don't bind to class selectors or IDs

Post by Louis7777 »

+1

I'd prefer custom data attributes.

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Don't bind to class selectors or IDs

Post by callumacrae »

PayBas wrote:Is there any parsing speed advantage to using data-attr?
It's actually mad slow.

Doesn't really matter, though. Just don't do it in a loop in a loop.

To anyone who think a 400% difference is significant: it's a 0.000008959 second difference. Nobody cares xD
Made by developers, for developers!
My blog

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 913
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: Don't bind to class selectors or IDs

Post by hanakin »

+1

either way is fine for me.

only caveat is those classes that are for behaviors which can be applied via js IE: is-visible, is-hidden, etc...

these can be applied via js but never used as hooks.

just pointing out for clarification.

@callumacrae some of the functions are going to need completely re-written, such as the parser https://tracker.phpbb.com/browse/PHPBB3-12806
Donations welcome via Paypal Image

User avatar
VSE
Extension Customisations
Extension Customisations
Posts: 674
Joined: Mon Mar 08, 2010 9:18 am

Re: Don't bind to class selectors or IDs

Post by VSE »

+1
Has an irascible disposition.

User avatar
Ger
Registered User
Posts: 293
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: Don't bind to class selectors or IDs

Post by Ger »

+1
Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Don't bind to class selectors or IDs

Post by callumacrae »

hanakin wrote:+1

either way is fine for me.

only caveat is those classes that are for behaviors which can be applied via js IE: is-visible, is-hidden, etc...

these can be applied via js but never used as hooks.

just pointing out for clarification.

@callumacrae some of the functions are going to need completely re-written, such as the parser https://tracker.phpbb.com/browse/PHPBB3-12806
Not everything needs to be converted. The more the better, and all new code can use it.

Converting stuff to use this isn't actually that tricky, though.
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Don't bind to class selectors or IDs

Post by brunoais »

+1
I prefer the data- attribute version, btw.

Post Reply