Add ?large to /iframe and /iframe/dialog

Passed along from ?large to control the badge size, they now also
control the iframe and dialog size because after all, if you're on a
page with larger font-size that demands a larger badge, the small dialog
with small text is gonna look out of place:  https://git.io/v2Xy4

The large badge is about 1.5x the size of the small badge (30px to 20px;
the other ratios aren't as exact), but I found that making the large
dialog 1.4x the size of the small dialog looked better than 1.5x
(that is, bumping the em/rem unit font size from 10px to 14px rather
than 15px):

font-size: 14px  https://git.io/v2XDh
vs
font-size: 15px  https://git.io/v2XyJ

lib/assets/badge.js

@@ -28,14 +28,16 @@
     }
   }
 
+  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;
 
-    var large = /\?large/.test(script.src);
+    LARGE = /\?large/.test(script.src);
     var iframe = document.createElement('iframe');
-    var iframePath = '/iframe' + (large ? '?large' : '');
+    var iframePath = '/iframe' + (LARGE ? '?large' : '');
     iframe.src = script.src.replace(/\/slackin\.js.*/, iframePath);
     iframe.style.borderWidth = 0;
     iframe.className = '__slackin';
@@ -44,10 +46,10 @@
     // 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';
+    iframe.style.width = (LARGE ? 190 : 140) + 'px';
 
     // height depends on target size
-    iframe.style.height = (large ? 30 : 20) + 'px';
+    iframe.style.height = (LARGE ? 30 : 20) + 'px';
 
     // hidden by default to avoid flicker
     iframe.style.visibility = 'hidden';
@@ -90,10 +92,18 @@
     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 = '10px';
+    div.style.fontSize = unitSize;
     div.style.border = '.1em solid #D6D6D6';
     div.style.padding = '0';
     div.style.margin = '0';
@@ -114,7 +124,7 @@
     ni.style.width = '25em';
     ni.style.height = '15.5em';
     ni.style.borderWidth = 0;
-    ni.src = iframe.src.replace(/\?.*/, '') + '/dialog';
+    ni.src = iframe.src.replace('iframe', 'iframe/dialog');
     ni.onload = function(){
       window.addEventListener('scroll', dposition);
       window.addEventListener('resize', dposition);
@@ -139,7 +149,7 @@
     a2.style.borderColor = 'rgba(250, 250, 250, 0)';
 
     a1.style.borderWidth = '.7em';
-    a1.style.marginLeft = '-.7em';
+    a1.style.marginLeft = '-.65em';
     a2.style.borderWidth = '.6em';
     a2.style.marginLeft = '-.6em';
 
@@ -159,7 +169,7 @@
 
       var divPos = div.getBoundingClientRect();
       var iframePos = iframe.getBoundingClientRect();
-      var divHeight = divPos.height + 9; // arrow height
+      var divHeight = divPos.height + arrowHeight;
 
       var st = document.body.scrollTop;
       var sl = document.body.scrollLeft;
@@ -178,7 +188,7 @@
         a1.style.borderTopColor = '#d6d6d6';
         a2.style.borderTopColor = '#fafafa';
       } else {
-        div.style.top = (iframeTop + iframePos.height + 9) + 'px';
+        div.style.top = (iframeTop + iframePos.height + arrowHeight) + 'px';
         a1.style.bottom = a2.style.bottom = '100%';
 
         a1.style.borderTopColor = 'rgba(214, 214, 214, 0)';

lib/index.js

@@ -149,10 +149,11 @@ export default function slackin({
   });
 
   app.get('/iframe/dialog', (req, res) => {
+    let large = 'large' in req.query;
     let { name } = slack.org;
     let { active, total } = slack.users;
     if (!name) return res.send(404);
-    let dom = splash({ coc, path, name, channels, active, total, iframe: true });
+    let dom = splash({ coc, path, name, channels, active, total, large, iframe: true });
     res.type('html');
     res.send(dom.toHTML());
   });

lib/splash.js

@@ -1,7 +1,7 @@
 
 import dom from 'vd';
 
-export default function splash({ path, name, org, coc, logo, active, total, channels, iframe }){
+export default function splash({ path, name, org, coc, logo, active, total, channels, large, iframe }){
   let div = dom('.splash',
     !iframe && dom('.logos',
       logo && dom('.logo.org'),
@@ -49,7 +49,7 @@ export default function splash({ path, name, org, coc, logo, active, total, chan
       'powered by ',
       dom('a href=http://rauchg.com/slackin target=_blank', 'slackin')
     ),
-    style({ logo, active, iframe }),
+    style({ logo, active, large, iframe }),
     // xxx: single build
     dom('script', `
       data = {};
@@ -64,9 +64,9 @@ export default function splash({ path, name, org, coc, logo, active, total, chan
 
 const pink = '#E01563';
 
-function style({ logo, active, iframe } = {}){
+function style({ logo, active, large, iframe } = {}){
   var css = dom.style();
-  css.add('html', { 'font-size': '10px' });
+  css.add('html', { 'font-size': large ? '14px' : '10px' });
 
   css.add('.splash', {
     'width': iframe ? '25rem' : '30rem',