より洗練された user-card-contents テーマを作成し、いくつかのカスタムユーザーフィールドを追加しました。このカードを「新しいトピックを作成」コンポーネントと同様に、閉じるボタン付きのスティッキー（固定）表示にしたいと考えています。
要素を閉じる呼び出しを防止するために、user-card-contents.js を上書きする必要があると考えていますが、合っていますでしょうか？これをテーマ内にパッケージ化することは可能でしょうか？
よろしくお願いいたします。
こんにちは、Pete さん。Meta へようこそ 
答えは短く「はい」です。変更がフロントエンドのみに影響する場合は、テーマやコンポーネント内で実装可能です。
「sticky」の意味について詳しく教えていただけますか？コンテンツに合わせてスクロールしながらも同じ位置に留まるようにしたいという意味であれば、それは CSS の変更になります。また、この変更はデスクトップとモバイルの両方に適用される予定ですか？
具体的にどの呼び出しを指しているのか詳しく説明していただけますか？（クリック時やスクロール時など）
閉じるボタンのマークアップは、ユーザーカードの Handlebars テンプレートに追加する必要があります。ボタンがクリックされた際のアクションを処理するロジックは、コンポーネントの .js ファイルに追加する必要があります。
完全なオーバーライドは必ずしも必要ないかもしれません。クラス内の特定のメソッドをオーバーライドするために使用できるフックがいくつかあります。もう少し具体的に何をしたいか教えていただければ、それについて詳しく共有できます。
ジョー、歓迎してくれてありがとう！
私が目指しているのは、card-contents-base.js のミックスインイベントハンドラー clickOutsideEventName がデスクトップでカードを閉じないようにすることです。その代わり、ユーザーがボタンをクリックして閉じるように強制したいと考えています。モバイルではおそらく異なるアプローチが必要になるでしょう。
このハンドルバーテンプレートは動作するようになりました。次は .js の仕組みを解明します 
TL;DR I think this is what you’re after
Theme JS
api.modifyClass("component:user-card-contents", {
didInsertElement() {
this._super(...arguments);
$("html").off(this.clickOutsideEventName);
},
actions: {
closeCard() {
this._close();
}
}
});
and then add this to your template somewhere
{{d-button
class="btn-flat"
action=(action "closeCard")
icon="times"
}}
The long version
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.
So, now we end up on this file
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
then passed on here as a property
and then finally consumed here
Cool, but what does all of that mean? Well if you look at where all of this code is added, you’ll notice that it’s inside didInsertElement
The Ember guides state
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.elementproperty.
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()
_close() is defined here
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
When you use modifyClass you can either add, modify or completely override a class method. We’ll focus on modifying a method since that’s what you want to do.
We want to modify didInsertElement() so we can do something like this
api.modifyClass('mixin:card-contents-base', {
didInsertElement() {
console.log("foo");
}
});
and try it out…
well that didn’t work.
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.
Like I mentioned before, that Mixin is used by both the user user-card-contents and group-card-contents Ember components (again, because Mixins are designed to make code reusable)
So, let’s look at the user-card-contents component here
If you read carefully, you’ll notice that we first import the Mixin we discussed above here
and then create a new Ember component and pass the Mixin to it.
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:
api.modifyClass('component:user-card-contents', {
didInsertElement() {
console.log("foo");
}
});
and see what happens…
voalá 
The change is registered and we can see it in the console, but we’re not quite there yet.
So, now that we can modify didInsertElement(), let’s try to get back to what you’re trying to do. If you remember, the mousedown handler is defined in didInsertElement here
So what can we do about it? Well, it’s a simple as this
$("html").off(clickOutsideEventName)
Will that work though? Nope. If you do this
api.modifyClass('component:user-card-contents', {
didInsertElement() {
$("html").off(clickOutsideEventName)
}
});
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
api.modifyClass('component:user-card-contents', {
didInsertElement() {
// code you want to add
$("html").off(clickOutsideEventName);
// code from core
this._super(...arguments);
}
});
then the code you want to add will run before anything else here
However, if you do this…
api.modifyClass('component:user-card-contents', {
didInsertElement() {
// code from core
this._super(...arguments);
// code you want to add
$("html").off(clickOutsideEventName);
}
});
then your code will run after everything here runs
This is a great way to keep your theme resilient to changes in core since everything in core runs first, then your code runs after that. So, let’s try this again and see what happens.
api.modifyClass('component:user-card-contents', {
didInsertElement() {
// code from core
this._super(...arguments);
// code you want to add
$("html").off(clickOutsideEventName);
}
});
and…
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.
How do we fix it? Remember this?
clickOutsideEventName is a property of the component, so if you use this.clickOutsideEventName then it should work. Let’s try that.
api.modifyClass('component:user-card-contents', {
didInsertElement() {
// code from core
this._super(...arguments);
// code you want to add
$("html").off(this.clickOutsideEventName);
},
});
And indeed it works
The user cards now open without any errors and clicking anywhere outside doesn’t do anything.
You can do the exact same thing for group cards like so
api.modifyClass('component:group-card-contents', {
didInsertElement() {
// code from core
this._super(...arguments);
// code you want to add
$("html").off(this.clickOutsideEventName);
},
});
The only thing left is to hookup that close button to the _close() method we discussed earlier and there are three steps to this.
- add a
closeCardaction (you can name whatever you want) - add a button to the user card template
- call that action when the button is clicked.
I’ll stick with the user cards for simplicity. So, we add this (along with what we already discussed)
api.modifyClass("component:user-card-contents", {
didInsertElement() {
this._super(...arguments);
$("html").off(this.clickOutsideEventName);
},
// new stuff
actions: {
closeCard() {
this._close();
}
}
});
all that does is that it calls the core _close() method whenever the closeCard custom action is triggered.
Next we need to add a button to the user card template or something like this
{{d-button
class="btn-flat"
action=(action "closeCard")
icon="times"
}}
My rough results look like this
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.
どうもありがとうございます。素晴らしいチュートリアルになりました！本当に助かりました。プラグイン API の存在は知りませんでした。
上記で最初にはっきりしなかった点として、テーマの JS 変更を script タグで囲み、プラグインの common/head_tag.html に配置する必要があります。
<script type="text/discourse-plugin" version="0.2">
</script>
単なる好奇心ですが、タグ内のバージョン番号はここで重要でしょうか？また、これらを header.html ではなく常に head_tag.html に配置するのが最善でしょうか、それともあまり関係ないのでしょうか？
ありがとうございます！
@Johani 必要であれば別のスレッドを作成することもできますが、現在はクライアント側の user-card コントローラーを特定しようとしています。このコントローラーは以下の動作を行います：
- 最初のクリック時に user-card を読み込む
- 2 回目のクリック時に user-summary にリダイレクトする
私の目的は、2 回目のクリックによる機能を削除することです。よろしくお願いします！