Question on design pattern used for examples

[KianBadie]

I am currently refactoring my site and have decided to rewrite my javascript in a similar way to your examples (like this dialog component you made). So far, it is the only example I could find on the internet that uses classes (pre-es6 classes in this case) to encapsulate behavior of html and css (like managing classist, adding event listeners, etc). Most other examples I have seen of classes only cover JavaScript functionality like managing its own properties.

My apologies if this is the wrong place to ask, but would you know of any resources to learn how to write components like you have in this repository. While the existing examples are super helpful, there are still scenarios that I'm unsure of how to handle (for example, not just adding but removing event listeners inside prototype functions). I have come up with solutions, but it would be nice to educate myself so I can be confident I am doing things along with a trusted pattern.

[jongund]

Thank you for your interest in the APG coding practices. Can you send me an example of your current website and code?

[KianBadie]

@jongund Of course, thank you so much for being willing to check things out! Here is an example of a modal on the site:

• modal.html
• Modal.js
• An example on the testing site with an open modal. The production site is a bit behind, so the testing site currently has the most accessible version.

We are using pandoc to render templates. So if the template expressions cause any confusion I would be happy to clarify.

As you can see, I kind of have a similar pattern to you guys. I send the root element into a class-like function that builds a set of methods, properties, and attaches event listeners. I kind of reached that pattern as I read different resources online. But I have never found an explicit pattern to stick to. Which is why the way you guys made widgets interested me.