|
@@ -104,7 +104,7 @@ function onReplyingToUpdated() {
|
|
|
closeLink.textContent = 'x';
|
|
closeLink.textContent = 'x';
|
|
|
domParent.textContent = "";
|
|
domParent.textContent = "";
|
|
|
domParent.appendChild(closeLink);
|
|
domParent.appendChild(closeLink);
|
|
|
- domParent.appendChild(createMessageDom("reply_" +SELECTED_ROOM.id, REPLYING_TO));
|
|
|
|
|
|
|
+ domParent.appendChild(createMessageDom("reply_" +SELECTED_ROOM.id, REPLYING_TO, true));
|
|
|
} else {
|
|
} else {
|
|
|
document.body.classList.remove(R.klass.replyingTo);
|
|
document.body.classList.remove(R.klass.replyingTo);
|
|
|
}
|
|
}
|
|
@@ -113,9 +113,10 @@ function onReplyingToUpdated() {
|
|
|
/**
|
|
/**
|
|
|
* @param {string} channelId
|
|
* @param {string} channelId
|
|
|
* @param {SlackMessage} msg
|
|
* @param {SlackMessage} msg
|
|
|
|
|
+ * @param {boolean=} skipAttachment
|
|
|
* @return {Element}
|
|
* @return {Element}
|
|
|
**/
|
|
**/
|
|
|
-function doCreateMessageDom(channelId, msg) {
|
|
|
|
|
|
|
+function doCreateMessageDom(channelId, msg, skipAttachment) {
|
|
|
var dom = document.createElement("div")
|
|
var dom = document.createElement("div")
|
|
|
,ts = document.createElement("div")
|
|
,ts = document.createElement("div")
|
|
|
,text = document.createElement("div")
|
|
,text = document.createElement("div")
|
|
@@ -124,6 +125,7 @@ function doCreateMessageDom(channelId, msg) {
|
|
|
,authorName = document.createElement("span")
|
|
,authorName = document.createElement("span")
|
|
|
,hover = document.createElement("ul")
|
|
,hover = document.createElement("ul")
|
|
|
,hoverReply = document.createElement("li")
|
|
,hoverReply = document.createElement("li")
|
|
|
|
|
+ ,attachments = document.createElement("ul")
|
|
|
,sender = msg.raw["user"] ?
|
|
,sender = msg.raw["user"] ?
|
|
|
SLACK.context.users[msg.raw["user"]] :
|
|
SLACK.context.users[msg.raw["user"]] :
|
|
|
SLACK.context.bots[msg.raw["bot_id"]];
|
|
SLACK.context.bots[msg.raw["bot_id"]];
|
|
@@ -138,39 +140,37 @@ function doCreateMessageDom(channelId, msg) {
|
|
|
hover.className = R.klass.msg.hover.container;
|
|
hover.className = R.klass.msg.hover.container;
|
|
|
hoverReply.className = R.klass.msg.hover.reply;
|
|
hoverReply.className = R.klass.msg.hover.reply;
|
|
|
ts.textContent = (new Date(msg.ts * 1000)).toLocaleTimeString();
|
|
ts.textContent = (new Date(msg.ts * 1000)).toLocaleTimeString();
|
|
|
- var msgContents = msg.raw["text"] || "";
|
|
|
|
|
- msgContents = msgContents
|
|
|
|
|
- .replace(new RegExp('<([@#]?)([^>]*)>', 'g'),
|
|
|
|
|
- function(_, type, entity) {
|
|
|
|
|
- var sub = entity.split('|');
|
|
|
|
|
|
|
+ text.innerHTML = formatSlackText(msg.raw["text"] || "");
|
|
|
|
|
+ authorName.textContent = sender ? sender.name : (msg.raw["username"] || "?");
|
|
|
|
|
+ if (!sender && !msg.raw["username"])
|
|
|
|
|
+ text.textContent = msg.raw["subtype"] || JSON.stringify(msg.raw);
|
|
|
|
|
+ authorImg.src = sender ? sender.icons.image_48 : "";
|
|
|
|
|
+ author.appendChild(authorImg);
|
|
|
|
|
+ author.appendChild(authorName);
|
|
|
|
|
+ hover.appendChild(hoverReply);
|
|
|
|
|
+ dom.appendChild(author);
|
|
|
|
|
+ dom.appendChild(text);
|
|
|
|
|
+ dom.appendChild(ts);
|
|
|
|
|
+ dom.appendChild(attachments);
|
|
|
|
|
+ attachments.className = R.klass.msg.attachment.list;
|
|
|
|
|
+ if (skipAttachment !== true && msg.raw["attachments"]) {
|
|
|
|
|
+ msg.raw["attachments"].forEach(function(attachment) {
|
|
|
|
|
+ var domAttachment = createAttachmentDom(channelId, msg, attachment);
|
|
|
|
|
+ if (domAttachment)
|
|
|
|
|
+ attachments.appendChild(domAttachment);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ dom.appendChild(hover);
|
|
|
|
|
+ return dom;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * @param {string} fullText
|
|
|
|
|
+ * @return {string}
|
|
|
|
|
+**/
|
|
|
|
|
+function formatSlackText(fullText) {
|
|
|
|
|
+ var msgContents = fullText.split(/\r?\n/g);
|
|
|
|
|
|
|
|
- if (type === '@') {
|
|
|
|
|
- if (!sub[1]) {
|
|
|
|
|
- var user = SLACK.context.getMember(sub[0]);
|
|
|
|
|
- sub[1] = user ? ('@' +user.name) : "Unknown member"; // TODO locale
|
|
|
|
|
- } else if ('@' !== sub[1][0]) {
|
|
|
|
|
- sub[1] = '@' +sub[1];
|
|
|
|
|
- }
|
|
|
|
|
- sub[0] = '#' +sub[0];
|
|
|
|
|
- sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkuser;
|
|
|
|
|
- } else if (type === '#') {
|
|
|
|
|
- if (!sub[1]) {
|
|
|
|
|
- var chan = SLACK.context.getChannel(sub[0]);
|
|
|
|
|
- sub[1] = chan ? ('#' +chan.name) : "Unknown channel"; // TODO locale
|
|
|
|
|
- } else if ('#' !== sub[1][0]) {
|
|
|
|
|
- sub[1] = '#' +sub[1];
|
|
|
|
|
- }
|
|
|
|
|
- sub[0] = '#' +sub[0];
|
|
|
|
|
- sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkchan;
|
|
|
|
|
- } else {
|
|
|
|
|
- if (!sub[1])
|
|
|
|
|
- sub[1] = sub[0];
|
|
|
|
|
- sub[2] = R.klass.msg.link;
|
|
|
|
|
- }
|
|
|
|
|
- return '<a href="' +sub[0] +'" class="' +sub[2] +'"' +(!type ? ' target="_blank"' : '') +'>' +sub[1] +'</a>';
|
|
|
|
|
- })
|
|
|
|
|
- .split(/\r?\n/g);
|
|
|
|
|
- ;
|
|
|
|
|
for (var msgContentIndex=0, nbMsgContents = msgContents.length; msgContentIndex < nbMsgContents; msgContentIndex++) {
|
|
for (var msgContentIndex=0, nbMsgContents = msgContents.length; msgContentIndex < nbMsgContents; msgContentIndex++) {
|
|
|
var msgContent = msgContents[msgContentIndex]
|
|
var msgContent = msgContents[msgContentIndex]
|
|
|
,_msgContent = ""
|
|
,_msgContent = ""
|
|
@@ -192,6 +192,7 @@ function doCreateMessageDom(channelId, msg) {
|
|
|
return "";
|
|
return "";
|
|
|
return '<span class="' +Object.keys(mods).join(' ') +'">';
|
|
return '<span class="' +Object.keys(mods).join(' ') +'">';
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
// Skip trailing
|
|
// Skip trailing
|
|
|
while (i < msgLength && (msgContent[i] === ' ' || msgContent[i] === '\t'))
|
|
while (i < msgLength && (msgContent[i] === ' ' || msgContent[i] === '\t'))
|
|
|
i++;
|
|
i++;
|
|
@@ -252,33 +253,195 @@ function doCreateMessageDom(channelId, msg) {
|
|
|
// Should not append
|
|
// Should not append
|
|
|
_msgContent += '</span>';
|
|
_msgContent += '</span>';
|
|
|
}
|
|
}
|
|
|
|
|
+ _msgContent = _msgContent.replace(new RegExp('<([@#]?)([^>]*)>', 'g'),
|
|
|
|
|
+ function(matched, type, entity) {
|
|
|
|
|
+ var sub = entity.split('|');
|
|
|
|
|
+
|
|
|
|
|
+ if (type === '@') {
|
|
|
|
|
+ if (!sub[1]) {
|
|
|
|
|
+ var user = SLACK.context.getMember(sub[0]);
|
|
|
|
|
+ sub[1] = user ? ('@' +user.name) : "Unknown member"; // TODO locale
|
|
|
|
|
+ } else if ('@' !== sub[1][0]) {
|
|
|
|
|
+ sub[1] = '@' +sub[1];
|
|
|
|
|
+ }
|
|
|
|
|
+ sub[0] = '#' +sub[0];
|
|
|
|
|
+ sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkuser;
|
|
|
|
|
+ } else if (type === '#') {
|
|
|
|
|
+ if (!sub[1]) {
|
|
|
|
|
+ var chan = SLACK.context.getChannel(sub[0]);
|
|
|
|
|
+ sub[1] = chan ? ('#' +chan.name) : "Unknown channel"; // TODO locale
|
|
|
|
|
+ } else if ('#' !== sub[1][0]) {
|
|
|
|
|
+ sub[1] = '#' +sub[1];
|
|
|
|
|
+ }
|
|
|
|
|
+ sub[0] = '#' +sub[0];
|
|
|
|
|
+ sub[2] = R.klass.msg.link +' ' +R.klass.msg.linkchan;
|
|
|
|
|
+ } else if (sub[0].indexOf("://") !== -1) {
|
|
|
|
|
+ if (!sub[1])
|
|
|
|
|
+ sub[1] = sub[0];
|
|
|
|
|
+ sub[2] = R.klass.msg.link;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return matched;
|
|
|
|
|
+ }
|
|
|
|
|
+ return '<a href="' +sub[0] +'" class="' +sub[2] +'"' +(!type ? ' target="_blank"' : '') +'>' +sub[1] +'</a>';
|
|
|
|
|
+ });
|
|
|
if (quote)
|
|
if (quote)
|
|
|
msgContents[msgContentIndex] = '<span class="' +R.klass.msg.style.quote +'">' +_msgContent +'</span>';
|
|
msgContents[msgContentIndex] = '<span class="' +R.klass.msg.style.quote +'">' +_msgContent +'</span>';
|
|
|
else
|
|
else
|
|
|
msgContents[msgContentIndex] = _msgContent;
|
|
msgContents[msgContentIndex] = _msgContent;
|
|
|
}
|
|
}
|
|
|
- text.innerHTML = msgContents.join('<br/>');
|
|
|
|
|
- authorName.textContent = sender ? sender.name : (msg.raw["username"] || "?");
|
|
|
|
|
- if (!sender && !msg.raw["username"])
|
|
|
|
|
- text.textContent = msg.raw["subtype"] || JSON.stringify(msg.raw);
|
|
|
|
|
- authorImg.src = sender ? sender.icons.image_48 : "";
|
|
|
|
|
- author.appendChild(authorImg);
|
|
|
|
|
- author.appendChild(authorName);
|
|
|
|
|
- hover.appendChild(hoverReply);
|
|
|
|
|
- dom.appendChild(author);
|
|
|
|
|
- dom.appendChild(text);
|
|
|
|
|
- dom.appendChild(ts);
|
|
|
|
|
- dom.appendChild(hover);
|
|
|
|
|
- return dom;
|
|
|
|
|
|
|
+ return msgContents.join('<br/>');
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/**
|
|
|
|
|
+ * @param {string} channelId
|
|
|
|
|
+ * @param {SlackMessage} msg
|
|
|
|
|
+ * @param {*} attachment
|
|
|
|
|
+ * @return {Element|null}
|
|
|
|
|
+**/
|
|
|
|
|
+function createAttachmentDom(channelId, msg, attachment) {
|
|
|
|
|
+ var rootDom = document.createElement("li")
|
|
|
|
|
+ ,attachmentBlock = document.createElement("div")
|
|
|
|
|
+
|
|
|
|
|
+ ,pretext = document.createElement("div")
|
|
|
|
|
+
|
|
|
|
|
+ ,titleBlock = document.createElement("a")
|
|
|
|
|
+
|
|
|
|
|
+ ,authorBlock = document.createElement("div")
|
|
|
|
|
+ ,authorImg = document.createElement("img")
|
|
|
|
|
+ ,authorName = document.createElement("a")
|
|
|
|
|
+
|
|
|
|
|
+ ,textBlock = document.createElement("div")
|
|
|
|
|
+ ,textDom = document.createElement("div")
|
|
|
|
|
+ ,thumbImgDom = document.createElement("img")
|
|
|
|
|
+ ,imgDom = document.createElement("img")
|
|
|
|
|
+
|
|
|
|
|
+ ,footerBlock = document.createElement("div")
|
|
|
|
|
+ ,footerIcon = document.createElement("img")
|
|
|
|
|
+ ,footerText = document.createElement("span")
|
|
|
|
|
+ ,footerTs = document.createElement("span")
|
|
|
|
|
+ ;
|
|
|
|
|
+
|
|
|
|
|
+ rootDom.className = R.klass.msg.attachment.container;
|
|
|
|
|
+ //Color
|
|
|
|
|
+ var color = "#e3e4e6";
|
|
|
|
|
+ if (attachment["color"]) {
|
|
|
|
|
+ if (attachment["color"][0] === '#')
|
|
|
|
|
+ color = attachment["color"][0];
|
|
|
|
|
+ else if (attachment["color"] === "good")
|
|
|
|
|
+ color = "#2fa44f";
|
|
|
|
|
+ else if (attachment["color"] === "warning")
|
|
|
|
|
+ color = "#de9e31";
|
|
|
|
|
+ else if (attachment["color"] === "danger")
|
|
|
|
|
+ color = "#d50200";
|
|
|
|
|
+ }
|
|
|
|
|
+ attachmentBlock.style.borderColor = color;
|
|
|
|
|
+
|
|
|
|
|
+ //Pretext
|
|
|
|
|
+ pretext.className = R.klass.msg.attachment.pretext;
|
|
|
|
|
+ if (attachment["pretext"]) {
|
|
|
|
|
+ pretext.innerHTML = formatSlackText(attachment["pretext"]);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ pretext.classList.add(R.klass.hidden);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Title
|
|
|
|
|
+ titleBlock.target = "_blank";
|
|
|
|
|
+ if (attachment["title"]) {
|
|
|
|
|
+ titleBlock.innerHTML = formatSlackText(attachment["title"]);
|
|
|
|
|
+ if (attachment["title_link"]) {
|
|
|
|
|
+ titleBlock.href = attachment["title_link"];
|
|
|
|
|
+ }
|
|
|
|
|
+ titleBlock.className = R.klass.msg.attachment.title;
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ titleBlock.className = R.klass.hidden + " " +R.klass.msg.attachment.title;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Author
|
|
|
|
|
+ authorName.target = "_blank";
|
|
|
|
|
+ authorBlock.className = R.klass.msg.author;
|
|
|
|
|
+ if (attachment["author_name"]) {
|
|
|
|
|
+ authorName.innerHTML = formatSlackText(attachment["author_name"]);
|
|
|
|
|
+ authorName.href = attachment["author_link"] || "";
|
|
|
|
|
+ authorName.className = R.klass.msg.authorname;
|
|
|
|
|
+ authorImg.className = R.klass.msg.authorAvatar;
|
|
|
|
|
+ if (attachment["author_icon"])
|
|
|
|
|
+ authorImg.src = attachment["author_icon"];
|
|
|
|
|
+ else
|
|
|
|
|
+ authorImg.classList.add(R.klass.hidden);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ authorBlock.classList.add(R.klass.hidden);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Text
|
|
|
|
|
+ textDom.innerHTML = formatSlackText(attachment["text"] || "");
|
|
|
|
|
+ textDom.klassName = R.klass.msg.attachment.text;
|
|
|
|
|
+
|
|
|
|
|
+ // Img (small one)
|
|
|
|
|
+ thumbImgDom.className = R.klass.msg.attachment.thumbImg;
|
|
|
|
|
+ if (attachment["thumb_url"])
|
|
|
|
|
+ thumbImgDom.src = attachment["thumb_url"];
|
|
|
|
|
+ else
|
|
|
|
|
+ thumbImgDom.classList.add(R.klass.hidden);
|
|
|
|
|
+
|
|
|
|
|
+ //Img (the big one)
|
|
|
|
|
+ imgDom.className = R.klass.msg.attachment.img;
|
|
|
|
|
+ if (attachment["image_url"])
|
|
|
|
|
+ imgDom.src = attachment["image_url"];
|
|
|
|
|
+ else
|
|
|
|
|
+ imgDom.classList.add(R.klass.hidden);
|
|
|
|
|
+
|
|
|
|
|
+ //Footer
|
|
|
|
|
+ footerBlock.className = R.klass.msg.attachment.footer;
|
|
|
|
|
+ footerText.className = R.klass.msg.attachment.footerText;
|
|
|
|
|
+ footerIcon.className = R.klass.msg.attachment.footerIcon;
|
|
|
|
|
+ if (attachment["footer"]) {
|
|
|
|
|
+ footerText.innerHTML = formatSlackText(attachment["footer"]);
|
|
|
|
|
+ if (attachment["footer_icon"])
|
|
|
|
|
+ footerIcon.src = attachment["footer_icon"];
|
|
|
|
|
+ else
|
|
|
|
|
+ footerIcon.classList.add(R.klass.hidden);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ footerIcon.classList.add(R.klass.hidden);
|
|
|
|
|
+ footerText.classList.add(R.klass.hidden);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //Ts
|
|
|
|
|
+ footerTs.className = R.klass.msg.ts;
|
|
|
|
|
+ if (attachment["ts"])
|
|
|
|
|
+ footerTs.textContent = new Date(parseFloat(attachment["ts"])).toString();
|
|
|
|
|
+ else
|
|
|
|
|
+ footerTs.classList.add(R.klass.hidden);
|
|
|
|
|
+
|
|
|
|
|
+ // TODO Field [ {title, value, short } ]
|
|
|
|
|
+ // TODO actions (button stuff)
|
|
|
|
|
+
|
|
|
|
|
+ authorBlock.appendChild(authorImg);
|
|
|
|
|
+ authorBlock.appendChild(authorName);
|
|
|
|
|
+ textBlock.appendChild(textDom);
|
|
|
|
|
+ textBlock.appendChild(thumbImgDom);
|
|
|
|
|
+ footerBlock.appendChild(footerIcon);
|
|
|
|
|
+ footerBlock.appendChild(footerText);
|
|
|
|
|
+ footerBlock.appendChild(footerTs);
|
|
|
|
|
+ attachmentBlock.appendChild(titleBlock);
|
|
|
|
|
+ attachmentBlock.appendChild(authorBlock);
|
|
|
|
|
+ attachmentBlock.appendChild(textBlock);
|
|
|
|
|
+ attachmentBlock.appendChild(imgDom);
|
|
|
|
|
+ attachmentBlock.appendChild(footerBlock);
|
|
|
|
|
+ rootDom.appendChild(pretext);
|
|
|
|
|
+ rootDom.appendChild(attachmentBlock);
|
|
|
|
|
+ console.log(attachment);
|
|
|
|
|
+ return rootDom;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* @param {string} channelId
|
|
* @param {string} channelId
|
|
|
* @param {SlackMessage} msg
|
|
* @param {SlackMessage} msg
|
|
|
|
|
+ * @param {boolean=} skipAttachment
|
|
|
* @return {Element}
|
|
* @return {Element}
|
|
|
**/
|
|
**/
|
|
|
-function doCreateMeMessageDom(channelId, msg) {
|
|
|
|
|
- var dom = doCreateMessageDom(channelId, msg);
|
|
|
|
|
|
|
+function doCreateMeMessageDom(channelId, msg, skipAttachment) {
|
|
|
|
|
+ var dom = doCreateMessageDom(channelId, msg, skipAttachment);
|
|
|
dom.classList.add(R.klass.msg.meMessage);
|
|
dom.classList.add(R.klass.msg.meMessage);
|
|
|
return dom;
|
|
return dom;
|
|
|
}
|
|
}
|
|
@@ -286,13 +449,14 @@ function doCreateMeMessageDom(channelId, msg) {
|
|
|
/**
|
|
/**
|
|
|
* @param {string} channelId
|
|
* @param {string} channelId
|
|
|
* @param {SlackMessage} msg
|
|
* @param {SlackMessage} msg
|
|
|
|
|
+ * @param {boolean=} skipAttachment
|
|
|
* @return {Element}
|
|
* @return {Element}
|
|
|
**/
|
|
**/
|
|
|
-function createMessageDom(channelId, msg) {
|
|
|
|
|
|
|
+function createMessageDom(channelId, msg, skipAttachment) {
|
|
|
if (msg.subtype === "me_message") {
|
|
if (msg.subtype === "me_message") {
|
|
|
- return doCreateMeMessageDom(channelId, msg);
|
|
|
|
|
|
|
+ return doCreateMeMessageDom(channelId, msg, skipAttachment);
|
|
|
}
|
|
}
|
|
|
- return doCreateMessageDom(channelId, msg);
|
|
|
|
|
|
|
+ return doCreateMessageDom(channelId, msg, skipAttachment);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function updateTitle() {
|
|
function updateTitle() {
|