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テキストボックスに表示された。