I’ve created a more elaborate user-card-contents theme, adding some custom user fields. I’d like to make the card sticky, with a close button - in a similar manner to the “Create a new Topic” component.
Am I right in thinking that I will need to overwrite the user-card-contents.js to prevent the call to close the element? Would I be able to package this within the theme?
the short answer is yes. If your changes only affect the front-end, then they can be done in a theme / component.
Can you please elaborate on what you mean by sticky? If you mean that you want it to scroll with the content while remaining in the same position then that would be a CSS change. Also, is the change intended to be included on both desktop and mobile?
Can you please describe which call you’re are referring to specifically? (as on on click or on scroll etc)
The markup for the close button would need to be added to the handlebars template for the user card. The logic to handle the action when the button is clicked would need be added to the component .js file.
A full override might not be necessary, there are some hooks that you can use to override specific methods in a class. I can share more about that if you describe what you want to do a bit more.
What I’m looking to do is prevent the card-contents-base.js mixin event handler clickOutsideEventName from closing the card on desktop. Instead I would like to force users to click a button to close it. I’ll likely need to do something different for mobile.
Got this handlebars template working, now onto figuring out the .js
You probably already know most of this since you’ve already worked on your theme but I will try to keep it a little bit more detailed for the broader audience.
The first thing I’d do is to search either locally or on Github. On Github you’d get something like this. In most cases, a search term will have more than one result and you’d either have to be more specific or manually scan the result to find something close to what you want.
This file is a Mixin. Why do I mention this? Because you need to be aware that mixins can be shared in a number of different places. In this case, it’s used for both user cards and group cards. So, the changes you make here will affect both.
If you search in the file, you’ll find that clickOutsideEventName is first defined here
Ember guarantees that, by the time didInsertElement() is called:
The component’s element has been both created and inserted into the DOM.
The component’s element is accessible via the component’s this.element property.
Why do we need this? Because we need a different mousedown handler for user cards and group cards. If we go back a bit, you’ll now notice that the id of the element is used in the clickOutsideEventName
Which like we discussed above is then passed on as a property.
Now, let’s move on to how all of this relates to what you’re doing.
You’re trying to prevent the cards from being closed when the user clicks outside of them. So, let’s try to find out a way to do that. If you recall, we discussed how clickOutsideEventName eventually gets consumed here
In a nutshell this adds a mousedown handler to the HTML element when a card is inserted (on the first page view). We then check the target of the mousedown event. If the target is somewhere in the card, we bail. If it’s outside of the card, we close it by calling this._close()
And this is what you’ll need to call when you add your close button - but we’ll get back to that later.
Now, the goal is to remove this mousedown handler if you want clicks outside the card not to close it. So how do we do this? Well, we’ll need to modify didInsertElement() and here’s how that can be done.
Discourse themes have access to the plugin API, which contains many methods that you can use. There’s a bit more details about the most commonly used ones here
If you remember, the file we’re working with is a Mixin. A Mixin is an Ember class. So, the method we’re going to use is modifyClass
why is that? Well it turns out that the modifyClass method doesn’t currently support modifying Mixins (as far as I’ve tested) I will make a note to figure out why that’s the case and check if we can fix that. For now though, let’s get back to what you want to do.
Well, we can’t modify Mixins, so I guess we’re stuck, yeah? No. Let’s dig a little bit deeper.
What does that mean? it means that didInsertElement() for user-card-contents is actually inherited from the Mixin. The same can be said about group-card-contents.
Where does that leave us? Well, there’s good news and bad news. The good news is that if you want to make changes to the user-card-contents without affecting group-card-contents then you can! The bad news is that if you want your changes to apply to both, then you’ll have to duplicate some code.
Let’s go back to modifyClass and try again with user-card-contents. So something like this:
You’ll end up with something broken. Why is that? because that’s not a modification of the method. That’s a full override of the core didInsertElement() method for that component. So, none of the code in core is actually applied if you do this.
How do we fix this? Well it turns out that Ember has a thing called this._super(...arguments)
What does that do? it allows you to append or prepend code in addition to what the class method already has. For example, if you do this
// code you want to add
// code from core
then the code you want to add will run before anything else here
Why is this happening? it’s because of different code context. In the Ember component file clickOutsideEventName is already defined by the time it’s consumed. Your theme is in a different file, so clickOutsideEventName is not defined there.
And of course you can do something similar for group cards like I mentioned above.
I’ll leave the group card and mobile implementation as exercise for you since you’d essentially use the exact same concepts we discussed above if you want to make changes to those but please let me know if you run into any problems.