こんにちは 
今日、フォーラムでイシュエコレクターの実装を始めましたので、私が作成した非常にシンプルなテーマコンポーネントをご紹介いたします。
最終的には、以下のようになります。
必要なもの
- Jira のイシュエコレクター
- 基本的な JS の知識
イシュエコレクター ID の取得
コレクターを機能させるには、その ID が必要です。
使用するイシュエコレクターに移動し、URL から collectorId パラメータを取得します。
https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e
私の場合は 176cb88e です。
新しいテーマコンポーネントを作成し、以下のコードを <head> セクションで使用します。
以下のキーをそれぞれの値に置き換えてください。
- MY_COLLECTOR_ID →
176cb88e - REPLACE_ME_AJAX → Jira イシュエコレクターの「Embedding this issue collector」→「Embed in JavaScript」セクションにあるスクリプトソース
- MY_PROJECT_KEY → 複数のイシュエコレクターを挿入する場合は、イシュエコレクターのプロジェクトキーを指定してください。
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
'MY_COLLECTOR_ID': {
"triggerFunction": function(showCollectorDialog) {
jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
e.preventDefault();
showCollectorDialog();
});
}
}
});
});
</script>
<script>
$(document).ready(function() {
jQuery.ajax({
url: "REPLACE_ME_AJAX",
type: "get",
cache: true,
dataType: "script"
});
});
</script>
私は自分のニーズに合わせて CSS ボタンを 2 つだけ作成しましたが、必要に応じて自由に追加してください。
[data-wrap*="jira-bug-"] {
p {
border-radius: 2em;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.53em 0.8em;
border: none;
font-weight: normal;
margin: 1px;
font-size: var(--font-0);
line-height: normal;
color: var(--primary-low);
background: var(--danger);
cursor: pointer;
transition: all 0.25s;
}
p:hover {
color: #000;
background: #fff;
border-color: #0060df;
}
}
[data-wrap*="jira-feature"] {
p {
border-radius: 2em;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.53em 0.8em;
border: none;
margin: 1px;
font-weight: normal;
font-size: var(--font-0);
line-height: normal;
color: var(--secondary-low);
background: var(--success-medium);
cursor: pointer;
transition: all 0.25s;
}
p:hover {
color: #000;
background: #fff;
border-color: #0060df;
}
}
次に、イシュエコレクターを投稿に埋め込む方法です。
[wrap=jira-bug-MY_PROJECT_KEY]
:bug: バグを報告
[/wrap]
[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: 機能提案
[/wrap]
これで完了です！これで、投稿内に動作するイシュエコレクターをボタンとして追加できます！