Confluence(に限らず)ドラッグアンドドロップでJiraのチケット番号を取得する
Confluence画面にJiraの画面からチケットのURLをドラッグアンドドロップしたら、チケット番号(ABC-1のような)を取得できるような機能を作りたくなった。処理対象のチケット番号を、手入力ではなく画面からポイっとできるようにできれば、色々使い道はあると思う。(この内容はConfluenceに依存するわけではない)
作るもの
(とりあえずのテスト用) 以下のような画面を用意して、Drop Ticket Linkのテキストボックスに、JiraからURLを含む何かをドラッグアンドドロップすると、チケットのリンクが取り出せるというものを作ってみる。
HTML部分
2つのテキストボックスを作り、それぞれIDをlink
、key
と振っておく。動作はJavascriptで記述するので、ここでは特別な設定はしていない。
<form class="aui">
<div class="field-group">
<label for="text-input">Drop Ticket Link<span class="aui-icon icon-required">required</span></label>
<input class="text" type="text" id="link" readonly="true">
</div>
<div class="field-group">
<label for="text-input">Key</label>
<input class="text" type="text" id="key" readonly="true">
</div>
</form>
<script type="text/javascript">
...
</script>
スクリプト部分
MDNのドラッグアンドドロップの資料を参考にドラッグオーバーした時に「リンク」に見えるようにする。ドロップしたら、URL形式か確認し、URLであればKeyに相当する部分を正規表現で抽出し、テキストボックスに表示する。ドラッグアンドドロップのAPIを使うので、会社で推奨の古いIEだと動かないかもしれないが、最近のChromeやFirefoxなら動くと思う。
// HTMLとのつながり
const input = AJS.$('#link');
const output = AJS.$('#key');
// Jira URLの形(ここではlocalhost:10080/browse/{key})
const JIRA_URL = /localhost:10080\/browse\/(\w+-\w+)\?*\s*/;
// ブラウザによって、データタイプの表現が異なる。ChromeとFirefoxは以下で区別できる。
const SUPPORTED_TYPES= [
'text/uri-list',
'text/x-moz-url'
];
// テキストボックスにドラッグオーバーしたときの見た目の変化。
input.on( 'dragover', ( event ) => {
event.originalEvent.dataTransfer.dropEffect = 'link';
event.stopPropagation();
event.preventDefault();
} );
// ドロップした時の動作
input.on( 'drop', function( event ) {
let url = '';
let key = '';
// URLを含むか確認し、取得する
const filtered = SUPPORTED_TYPES.filter( t => event.originalEvent.dataTransfer.types.includes( t ) );
if( filtered.length ) {
url = event.originalEvent.dataTransfer.getData( filtered[0] );
}
// 正規表現で該当するか確認し、インデックス1のKeyを取り出し、テキストボックスへ反映する。
key = JIRA_URL.exec( url )[1];
if( key ) {
output.val( key );
}
event.stopPropagation();
event.preventDefault();
} );
動かした結果
動画ではないのでわかりにくいが、期待する動作になった。Chromeからのドラッグオーバー時は、Chromeのサムネイル表示と「リンク」のカーソルが表示された。(キャプチャしたらカーソルが消えてしまった)
ドロップしたら、キー(ここではSMP-1)がKeyテキストボックスに表示された。
Author And Source
この問題について(Confluence(に限らず)ドラッグアンドドロップでJiraのチケット番号を取得する), 我々は、より多くの情報をここで見つけました https://qiita.com/stm32p103/items/3591e0fae423ae24d81d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .