返信・引用機能をSlackに追加してみた その2
本章では、SlackのHTMLのDOM構造に仕様変更が入っていたので、Slack返信機能を調整しました。
背景
背景等については、こちらを参照ください。
kikki.hatenablog.com
スクリプト
以下、2015-12-17時点での最新のスクリプトになります。前回利用されていた方は、スクリプトを全置換頂ければと思います。
// ==UserScript== // @name Slack - reply & quote a message - // @namespace http://kikki.hatenablog.com/ // @version 1.0.2 // @description Reply & Quote a message in Slack // @author kikki // @match https://*.slack.com/* // @grant none // ==/UserScript== /* 2015-12-17 v1.0.2 * Adjust slack's DOM specification change 2015-08-28 v1.0.1 * Changed event to add buttons * Auto resize a message textbox 2015-08-27 v1.0.0 * Initial Release */ (function() { var orgFunc = TS.templates.builders.buildMsgHTML; TS.templates.builders.buildMsgHTML = function(O, h) { var target = orgFunc(O, h); if (!$(target)[0].id.startsWith('msg_')) { return target; } var msg = $(target); var msgContent = msg.children('.message_content'); var timeStampA = msgContent.children('a.timestamp'); var refUrl = $(timeStampA).attr("href"); var quoteBtn = $('<button class="btnQuote" style="margin: 5px 0 0 72px;" data-refurl="' + refUrl + '" onclick="onQuoteClick(this)">Quote</button>'); msg.append(quoteBtn); var senderUser = jQuery.trim(msgContent.children("a.message_sender").text()); var repMessage = jQuery.trim(msgContent.children("span.message_body").text()).match(/^.*$/m)[0]; if(!repMessage) repMessage = jQuery.trim(msgContent.children("span.msg_inline_file_preview_title").text()).match(/^.*$/m)[0]; var replyBtn = $('<button class="btnReply" style="margin: 5px 0 0 10px;" data-user="' + senderUser + '" data-repMes="' + repMessage + '" onclick="onReplyClick(this)">Reply</button>'); msg.append(replyBtn); return msg[0].outerHTML; } })(); window.onQuoteClick = function(target) { var messageText = document.getElementById('message-input'); messageText.value += '\n' + (/https:\/\/[a-zA-Z0-9]+\.slack\.com/g).exec(location.href)[0] + $(target).data('refurl'); $('#message-input').trigger("autosize").trigger("autosize-resize") } window.onReplyClick = function(target){ var messageText = document.getElementById('message-input'); messageText.value = '@' + $(target).data('user') + ':\n' + ( $(target).data('repmes') ? ( '>' + $(target).data('repmes') + '\n' ) : "" ) + messageText.value; $('#message-input').trigger("autosize").trigger("autosize-resize") }