https://github.com/rauchg/slackin
I'm trying to add the badge it adds to a widget, but it doesn't load/can't find the script tag. Currently I'm using this:
<script async defer src="https://slack.yourdomain.com/slackin.js"></script>
Content of slackin.js
(function(){
// give up and resort to `target=_blank`
// if we're not modern enough
if (!document.body.getBoundingClientRect
|| !document.body.querySelectorAll
|| !window.postMessage) {
return;
}
// search for a script tag pointing to slackin.js
function search(){
var replaced = 0;
var scripts = document.querySelectorAll('script');
var script;
for (var i = 0; i < scripts.length; i++) {
script = scripts[i];
if (!script.src) continue;
if (/\/slackin\.js(\?.*)?$/.test(script.src)) {
// replace script with iframe
replace(script);
// we abort the search for subsequent
// slackin.js executions to exhaust
// the queue
return true;
}
}
}
var LARGE; // boolean for large/small mode, from query param
// replace the script tag with an iframe
function replace(script){
var parent = script.parentNode;
if (!parent) return;
LARGE = /\?large/.test(script.src);
var iframe = document.createElement('iframe');
var iframePath = '/iframe' + (LARGE ? '?large' : '');
iframe.src = script.src.replace(/\/slackin\.js.*/, iframePath);
iframe.style.borderWidth = 0;
iframe.className = '__slackin';
// a decent aproximation that we adjust later
// once we have the knowledge of the actual
// numbers of users, based on a user count
// of 3 digits by 3 digits
iframe.style.width = (LARGE ? 190 : 140) + 'px';
// height depends on target size
iframe.style.height = (LARGE ? 30 : 20) + 'px';
// hidden by default to avoid flicker
iframe.style.visibility = 'hidden';
parent.insertBefore(iframe, script);
parent.removeChild(script);
// setup iframe RPC
iframe.onload = function(){
setup(iframe);
};
}
// setup an "RPC" channel between iframe and us
function setup(iframe){
var id = Math.random() * (1 << 24) | 0;
iframe.contentWindow.postMessage('slackin:' + id, '*');
window.addEventListener('message', function(e){
if (typeof e.data !== 'string') return;
// show dialog upon click
if ('slackin-click:' + id === e.data) {
showDialog(iframe);
}
// update width
var wp = 'slackin-width:' + id + ':';
if (wp === e.data.substr(0, wp.length)) {
var width = e.data.substr(wp.length);
iframe.style.width = width + 'px';
// ensure it's shown (since first time hidden)
iframe.style.visibility = 'visible';
}
// redirect to URL
var redir = 'slackin-redirect:' + id + ':';
if (redir === e.data.substr(0, redir.length)) {
location.href = e.data.substr(redir.length);
}
});
}
// show the dialog around the iframe
// by, yes, creating a new iframe
var showing = false;
function showDialog(iframe){
if (showing) return;
showing = true;
if (LARGE) {
unitSize = '14px';
arrowHeight = 13;
} else {
unitSize = '10px';
arrowHeight = 9;
}
// container div
var div = document.createElement('div');
div.className = '__slackin';
div.style.fontSize = unitSize;
div.style.border = '.1em solid #D6D6D6';
div.style.padding = '0';
div.style.margin = '0';
div.style.lineHeight = '0';
div.style.backgroundColor = '#FAFAFA';
div.style.width = '25em';
div.style.height = '15.5em';
div.style.position = 'absolute';
div.style.left = '-10000px';
div.style.top = '-10000px';
div.style.borderRadius = '.4em';
div.style.padding = '.4em';
div.style.boxSizing = 'content-box';
// new iframe
var ni = document.createElement('iframe');
ni.className = '__slackin';
ni.style.width = '25em';
ni.style.height = '15.5em';
ni.style.borderWidth = 0;
ni.src = iframe.src.replace('iframe', 'iframe/dialog');
ni.onload = function(){
setup(ni);
window.addEventListener('scroll', dposition);
window.addEventListener('resize', dposition);
position();
};
// arrows
var a1 = document.createElement('div');
var a2 = document.createElement('div');
[a1, a2].forEach(function(a){
a.style.border = 'solid transparent';
a.style.pointerEvents = 'none';
a.style.width = '0';
a.style.height = '0';
a.style.margin = '0';
a.style.padding = '0';
a.style.position = 'absolute';
a.style.display = 'inline';
});
a1.style.borderColor = 'rgba(214, 214, 214, 0)';
a2.style.borderColor = 'rgba(250, 250, 250, 0)';
a1.style.borderWidth = '.7em';
a1.style.marginLeft = '-.65em';
a2.style.borderWidth = '.6em';
a2.style.marginLeft = '-.6em';
// append
div.appendChild(a1);
div.appendChild(a2);
div.appendChild(ni);
document.body.appendChild(div);
function position(){
[div, a1, a2].forEach(function(el){
el.style.left = '';
el.style.right = '';
el.style.bottom = '';
el.style.top = '';
});
var divPos = div.getBoundingClientRect();
var iframePos = iframe.getBoundingClientRect();
var divHeight = divPos.height + arrowHeight;
var st = document.body.scrollTop;
var sl = document.body.scrollLeft;
var iw = window.innerWidth;
var ih = window.innerHeight;
var iframeTop = iframePos.top + st;
var iframeLeft = iframePos.left + sl;
// position vertically / arrows
if (st + iframePos.bottom + divHeight > st + ih) {
div.style.top = (iframeTop - divHeight) + 'px';
a1.style.top = a2.style.top = '100%';
a1.style.borderBottomColor = 'rgba(214, 214, 214, 0)';
a2.style.borderBottomColor = 'rgba(250, 250, 250, 0)';
a1.style.borderTopColor = '#d6d6d6';
a2.style.borderTopColor = '#fafafa';
} else {
div.style.top = (iframeTop + iframePos.height + arrowHeight) + 'px';
a1.style.bottom = a2.style.bottom = '100%';
a1.style.borderTopColor = 'rgba(214, 214, 214, 0)';
a2.style.borderTopColor = 'rgba(250, 250, 250, 0)';
a1.style.borderBottomColor = '#d6d6d6';
a2.style.borderBottomColor = '#fafafa';
}
// position horizontally
var left = iframePos.left
+ Math.round(iframePos.width / 2)
- Math.round(divPos.width / 2);
if (left < sl) left = sl;
if (left + divPos.width > sl + iw) {
left = sl + iw - divPos.width;
}
div.style.left = left + 'px';
a1.style.left =
a2.style.left = (iframeLeft - left + Math.round(iframePos.width / 2)) + 'px';
}
// debounced positionining
var timer;
function dposition(){
clearTimeout(timer);
timer = setTimeout(position, 100);
}
function hide(){
showing = false;
window.removeEventListener('scroll', dposition);
window.removeEventListener('resize', dposition);
document.body.removeChild(div);
document.documentElement.removeEventListener('click', click, true);
}
function click(ev){
if ('__slackin' != ev.target.className) {
hide();
}
}
document.documentElement.addEventListener('click', click, true);
}
var found = search();
if (!found) setTimeout(search, 5000);
})();
If anyone here could help me getting this to work in a widget, I would be really thankful!
Thanks.
