Load slackin badge in widget



  • 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.


 

Suggested Topics


Star

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.