☰

Chat Control Panel

Adds a small panel to the top of the chat window with a list of macros, allowing you to fire chat macros with mouse actions.

// ==UserScript==
// @name           Chat Control Panel
// @namespace      kol.interface.unfinished
// @description    Adds a small panel to the top of the chat window with a list of macros, allowing you to fire chat macros with mouse actions.
// @include        https://*kingdomofloathing.com/lchat.php*
// @include        https://*kingdomofloathing.com/mchat.php*
// @grant          GM_getValue
// @grant          GM_setValue
// @version        2.021
// ==/UserScript==

//Version 2.021
// - trying to correct some spacing issues
//Version 2.02
// - change to https
//Version 2.01
// - add @grant, convert GM_log to console.log
//Version 2.0
// - modified heavily to work with the new tabbed chat.  This 
//   changes the way the docking works, and there is now an
//   icon on the top right corner that toggles the appearance
//   of the panel instead of the bar on the right.
//Version 1.0.3
// - more minor interface changes
//   - resizing is now granular, always shrinking or growing by 
//     a full entry.
//   - the toggle bar now stays on the right of the chat control
//     panel so you can quickly toggle on/off without moving
//     the mouse.
//   - the control panel sticks to the top when moved very close
//     to the top of the chat pane.
//Version 1.0.2
// - a minor aesthetic change, using partial transparency to 
//   hide slightly less of the underlying chap panel text.
//Version 1.0.1
// - fix mouse-over message for resize dragging
//Version 1.0
// - changed the docking method, so you now click on a bar 
//   on the right to dock it on the right
// - added a pull bar next to the docking bar so you can 
//   slide it anywhere in the chat pane
// - the former docking tab (line) at the bottom is now a 
//   pull tab so you can resize it to as many entries as 
//   you want (or can fit).
//Version 0.9

var height=unitHeight(5);
var ccmds;
var playername;

var dims;

function rollHandler() {
    var cp = document.getElementById('chatcp');
    var cph = document.getElementById('chatcp_handle');
    if (cp && cph) {
        var v = cp.getAttribute('style');
        var w = cph.getAttribute('style');
        if (v.match(/display\s*:\s*none/)) {
            cp.setAttribute('style',removeStyle(v,'display'));
            cph.setAttribute('style',removeStyle(w,'display'));
            saveDock(false);
        } else {
            cp.setAttribute('style','display:none;'+v);
            cph.setAttribute('style','display:none;'+w);
            saveDock(true);
        }

    }
}


function replaceOrAddStyle(s,a,v) {
    var r = new RegExp(a+'\\s*:','i');
    var sa = s.split(';');
    for (var i=0;i<sa.length;i++) {
        var x = sa[i].match(r);
        if (x) {
            sa[i] = a+':'+v;
            return sa.join(';');
        }
    }
    return a+':'+v+';'+s;
}

function removeStyle(s,a) {
    var r = new RegExp(a+'\\s*:','i');
    var sa = s.split(';');
    for (var i=0;i<sa.length;i++) {
        var x = sa[i].match(r);
        if (x) {
            sa[i] = '';
            return sa.join(';').replace(';;',';');
        }
    }
    return s;
}

function getStyleAttr(s,a) {
    var r = new RegExp('(^|;\\s*)'+a+'\\s*:\\s*([0-9]+)','i');
    var x = s.match(r);
    if (x)
        return Number(x[2]);
    //console.log('could not find style: "' +a+'" in "'+s+'"');
    return -1;
}

function setTopBorder(s) {
    return replaceOrAddStyle(s,'border-top','1px solid black');
}

function removeTopBorder(s) {
    return removeStyle(s,'border-top');
}

function setWidths(e) {
    getMaxDimensions();
    var cp = document.getElementById('chatcp');
    var cph = document.getElementById('chatcp_handle');
    var cpd = document.getElementById('chatcp_dock');
    if (cp && cph && cpd) {
        var w = (dims.headerw) ? dims.headerw : dims.width; //document.body.clientWidth-19;
        //console.log("Setting width to "+w);
        cph.setAttribute('style',cph.getAttribute('style').replace(/width\s*:\s*[0-9;px]*/,'width:'+(w+1)+'px;'));
        cp.setAttribute('style',cp.getAttribute('style').replace(/width\s*:\s*[0-9;px]*/,'width:'+(w+1)+'px;'));
        if (dims.headerw) 
            cpd.setAttribute('style',cpd.getAttribute('style').replace(/left\s*:\s*[0-9;px]*/,'left:'+(dims.headerw-15)+'px;'));
        else
            cpd.setAttribute('style',cpd.getAttribute('style').replace(/left\s*:\s*[0-9;px]*/,'left:'+(w-15)+'px;'));
        var texts = document.getElementsByClassName('chatcp_text');
        for (var i=0;i<texts.length;i++) {
            texts[i].setAttribute('style',texts[i].getAttribute('style').replace(/width\s*:\s*[0-9;px]*/,'width:'+(w-56)+'px;'));
        }
    }
}

function tHandler(e) {
    var ci = this.getAttribute('cmdidx');
    ccmds[ci] = this.value;
    saveTable(ccmds);
    if (e.keyCode==13)
        insertCmd(ccmds[ci]);
}


function insertCmd(c) {
    if (c)
        unsafeWindow.submitchat(c);
}

function bHandler() {
    insertCmd(ccmds[this.getAttribute('cmdidx')]);
}


function addPanel() {
    height = restoreHeight();
    ccmds = restoreTable();
    var f = document.getElementById('ChatWindow');
    var cp = document.getElementById('chatcp');
    if (f && !cp) {
        placeDockIcon(f);
        cp = document.createElement('div');
        var w = (dims.headerw) ? dims.headerw : dims.width;//document.body.clientWidth-19;
        var p = restorePos();
        cp.setAttribute('style','height:'+height+'px;width:'+w+'px;'+((p>0)?'border-top:1px solid black;':'')+'background-image:-moz-linear-gradient(center top , white 50%, transparent 100%);z-index:7;font-size:12px;position:absolute;font-family:arial;left:2px;top:'+p+'px;');
        cp.setAttribute('id','chatcp');

        var t = document.createElement('table');
        t.setAttribute('cellspacing','0');
        for(var i=0;unitHeight(i)<height;i++) {
            newEntry(i,w-40,t);
        }

        var tt = document.createElement('table');
        tt.setAttribute('style','vertical-align:top;');
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        tt.setAttribute('cellspacing','0');
        tt.setAttribute('cellpadding','0');
        td.setAttribute('style','vertical-align:top;');
        td.appendChild(t);
        tr.appendChild(td);
        td = document.createElement('td');
        var span = document.createElement('div');
        span.setAttribute('style','background:lightgray;height:'+(height-4)+'px;width:15px;position:relative;top:2px;');
        span.setAttribute('title','Click and drag to position the chat control panel.');
        span.setAttribute('class','chatcpbar');
        td.appendChild(span);
        tr.appendChild(td);
        tt.appendChild(tr);

        cp.appendChild(tt);

        var handle = document.createElement('div');
        handle.setAttribute('style','height:7px;width:'+(w+1)+'px;text-align:center;vertical-align:middle;border-bottom:1px solid black;background-color:transparent;z-index:8;font-size:12px;position:absolute;font-family:arial;left:2px;top:'+(p+height-3)+'px;');
        handle.setAttribute('id','chatcp_handle');
        handle.setAttribute('title','Click and drag to resize the chat control panel.');
        var a = document.createElement('img');
        a.setAttribute('src',"data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%1E%00%00%00%05%08%02%00%00%00%DDC%CB%AD%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DA%0C%17%002%18%89S%DB%E9%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%16IDAT%18%D3c%60%A0%19%60%FC%FF%FF%3F%C3%90%03C%D3%D5%00W%E9%05%FD%13%F9%A0%92%00%00%00%00IEND%AEB%60%82");
        handle.appendChild(a);

        //handle.addEventListener('click',rollHandler,false);
        handle.addEventListener('mousedown',dragStartSize,false);
        cp.addEventListener('mousedown',dragStart,true);
        
        f.parentNode.insertBefore(cp,f);
        f.parentNode.insertBefore(handle,f);

        //cp.appendChild(handle);
        window.addEventListener('resize',setWidths,false);

        if (restoreDock())
            rollHandler();
        setWidths();
    }
}

function unitHeight(u) {
    return u*27+5;
}

function heightUnit(h) {
    return Math.floor((h-5)/27);
}

function saveTable(t) {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        GM_setValue(pn+'_cmds',t.join('#####'));
    }
}

function saveHeight(h) {
    height = h;
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        GM_setValue(pn+'_cpheight',h);
    }
}

function restoreHeight() {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        return Math.ceil(Number(GM_getValue(pn+'_cpheight',unitHeight(5))));
    }
    return Math.ceil(unitHeight(5));
}

function saveDock(b) {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        GM_setValue(pn+'_docked',b);
    }
}

function restoreDock() {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        return Boolean(GM_getValue(pn+'_docked',false));
    }
}

function restoreTable() {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        var t = GM_getValue(pn+'_cmds','');
        if (t) {
            t = t.split('#####');
            return t;
        }
    }
    return ['Good morning clan-mates!', '/unequip all', '', '', ''];
}


function savePos(y) {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        GM_setValue(pn+'_pos',y);
    }
}

function restorePos() {
    var pn = getPlayerNameFromCharpane();
    if (pn) {
        var t = Number(GM_getValue(pn+'_pos',2));
        return t;
    }
    return 2;
}


// utility to get player name; hacked/stolen from Antimarty's fortune cookie script
function getPlayerNameFromCharpane() {
    var somef=window.parent.frames;
    var goo;
    for(var j=0;j<somef.length;j++) {
        if (somef[j].name=="charpane") {
            goo=somef[j];
            var username = goo.document.getElementsByTagName("b");
            if (!username || username.length < 1) return playername;
            username = username[0];
            if (!username) return playername;
            username = username.firstChild;
            if (!username) return playername;
            // in full mode the link is <a><b>Name</b></a>
            // in compact mode it's <b><a>Name</a></b>
            // so have to handle this, and also can use it to tell
            // whether it's in compact mode or not.
            var fullmode = true;
            while (username && username.nodeType == 1)
                {
                    username = username.firstChild;
                    fullmode = false;
                }
            if (!username) return playername;
            username = username.nodeValue;
            if (!username) return playername;
            username = username.toLowerCase();
            playername = username;
            return username;
        }
    }
}


// code to drag the panel around
var d;
function dragStart(event, id) {
    var cp = document.getElementById('chatcp');
    var cph = document.getElementById('chatcp_handle');
    if (cp && cph) {
        var v = getStyleAttr(cp.getAttribute('style'),'width');
        if (v>=0) {
            if (event.clientX<v-50)
                return;
        }

        d = new Object();
        d.cp = cp;
        d.cph = cph;
        var x = event.clientX + window.scrollX;
        var y = event.clientY + window.scrollY;

        // Save starting positions of cursor and element.
        d.cursorStartX = x;
        d.cursorStartY = y;
        d.elStartLeft = parseInt(cp.style.left, 10);
        d.elStartTop = parseInt(cp.style.top, 10);

        d.baseH = getStyleAttr(cp.getAttribute('style'),'height');

        if (isNaN(d.elStartLeft)) d.elStartLeft = 2;
        if (isNaN(d.elStartTop)) d.elStartTop = 2;

        document.addEventListener("mousemove", dragGo, true);
        document.addEventListener("mouseup", dragStop, true);
        event.preventDefault();
    }
}

// drag handler for positioning the panel
function dragGo(event)  {
    var x, y;
    // Get cursor position with respect to the page.
    y = event.clientY + window.scrollY;

    //d.elNode.style.left = (d.elStartLeft + x - d.cursorStartX) + "px";
    if ((d.elStartTop + y - d.cursorStartY)>=(dims.headerw? (dims.headert+16) : (dims.top+16)) && (d.elStartTop + y - d.cursorStartY)<(dims.height+(dims.headerw? (dims.headert+16) : (dims.top+16)))-height) {
        if ((d.elStartTop + y - d.cursorStartY)<=3)
            y = d.cursorStartY - d.elStartTop;
        d.cp.style.top = (d.elStartTop + y - d.cursorStartY) + "px";
        if ((d.elStartTop + y - d.cursorStartY)>0)
            d.cp.setAttribute('style',setTopBorder(d.cp.getAttribute('style')));
        else
            d.cp.setAttribute('style',removeTopBorder(d.cp.getAttribute('style')));
        d.cph.style.top = (d.elStartTop + y - d.cursorStartY + d.baseH - 3) + "px";
        savePos(d.elStartTop + y - d.cursorStartY);
    }
    event.preventDefault();
}

// terminate dragging to position the panel
function dragStop(event)  {
    // Stop capturing mousemove and mouseup events.
    document.removeEventListener("mousemove", dragGo, true);
    document.removeEventListener("mouseup", dragStop, true);
    d = null;
}


// code to resize the panel
function dragStartSize(event, id) {
    var cp = document.getElementById('chatcp');
    var cph = document.getElementById('chatcp_handle');
    if (cp && cph) {
        d = new Object();
        d.cp = cp;
        d.cph = cph;
        var y = event.clientY + window.scrollY;
        d.baseH = getStyleAttr(cp.getAttribute('style'),'height');
        d.baseO = getStyleAttr(cph.getAttribute('style'),'top');

        // Save starting positions of cursor and element.
        d.cursorStartY = y;
        d.elStartLeft = parseInt(cp.style.left, 10);
        d.elStartTop = parseInt(cp.style.top, 10);

        if (isNaN(d.elStartLeft)) d.elStartLeft = 2;
        if (isNaN(d.elStartTop)) d.elStartTop = 2;

        document.addEventListener("mousemove", dragGoSize, true);
        document.addEventListener("mouseup", dragStopSize, true);
        event.preventDefault();
    }
}

// create cp index i in table t with width w
function newEntry(i,w,t) {
    var tr = document.createElement('tr');
    tr.setAttribute('id','chatcp_index'+i);
    var td = document.createElement('td');
    var i1 = document.createElement('input');
    i1.setAttribute('type','button');
    //i1.setAttribute('value','>');
    //var arrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAMCAYAAACEJVa/AAAAmklEQVQokaXSPQ5BURCG4YcNiGhUGpah0CpFQyOswUpElCLR24VFiJ8FqCQ6Ea7CkdwILseXvN3Mm5nJkJ0mFih8UftRcsIO9XdFuQyghBUSDJB/lky+YIwZrkE0RTEt2fzAOqyVYItyjCTNMcga/0guWKIm2GKYpW/SyaCLNkbhsAf0RaSFM/aoxAiG7uPPY5ofqaLnxYM9cgOSr1GycHbzaQAAAABJRU5ErkJggg==';
    //i1.setAttribute('style','font-size:9px;width:22px;');
    i1.setAttribute('style','background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAMCAYAAACEJVa/AAAAmklEQVQokaXSPQ5BURCG4YcNiGhUGpah0CpFQyOswUpElCLR24VFiJ8FqCQ6Ea7CkdwILseXvN3Mm5nJkJ0mFih8UftRcsIO9XdFuQyghBUSDJB/lky+YIwZrkE0RTEt2fzAOqyVYItyjCTNMcga/0guWKIm2GKYpW/SyaCLNkbhsAf0RaSFM/aoxAiG7uPPY5ofqaLnxYM9cgOSr1GycHbzaQAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: center;');
    i1.setAttribute('cmdidx',i);
    i1.addEventListener('mouseup',bHandler,false);
    var i2 = document.createElement('input');
    i2.setAttribute('type','text');
    i2.setAttribute('width','128');
    i2.setAttribute('value',((i>=ccmds.length)?'':ccmds[i]));
    i2.setAttribute('class','chatcp_text');
    i2.setAttribute('style','font-size:9px;width:'+(w-22)+'px;height:13px;');
    i2.setAttribute('cmdidx',i);
    i2.addEventListener('keyup',tHandler,true);
    i2.addEventListener('change',tHandler,true);
    td.appendChild(i1);
    td.appendChild(i2);
    tr.appendChild(td);
    t.appendChild(tr);
}

// update the interior of the panel during resizing
function updateCPSize(h) {
    var bars = document.getElementsByClassName('chatcpbar');
    for (var i=0;i<bars.length;i++) {
        var s = bars[i].getAttribute('style');
        bars[i].setAttribute('style',replaceOrAddStyle(s,'height',(h-4)+'px'));
    }
    var last = heightUnit(h);
    var ins = document.getElementById('chatcp_index'+last);
    if (!ins) {
        // we must have an entry 0
        var w = document.getElementById('chatcp_index0');
        if (w) {
            var t = w.parentNode;
            w = getStyleAttr(w.firstChild.firstChild.nextSibling.getAttribute('style'),'width');
            for (var i=1;i<last;i++) {
                ins = document.getElementById('chatcp_index'+i);
                if (!ins) {
                    newEntry(i,(w+16),t);
                }
            }
        }
    } else {
        var del = document.getElementById('chatcp_index'+last);
        while (del) {
            del.parentNode.removeChild(del);
            last++;
            del = document.getElementById('chatcp_index'+last);
        }
    }
    saveHeight(h);
}

// drag handler for resizing the panel
function dragGoSize(event)  {
    var y;
    // Get cursor position with respect to the page.
    y = event.clientY + window.scrollY;

    var delta = y - d.cursorStartY;
    if (delta!=0) {
        var newh = d.baseH + delta;
        if (newh>unitHeight(1) && newh<(dims.height+(dims.headerw? (dims.headert+16) : (dims.top+16)))) {
            newh = unitHeight(heightUnit(newh));
            delta = newh - d.baseH;
            d.cp.setAttribute('style',replaceOrAddStyle(d.cp.getAttribute('style'),'height',newh+'px'));
            d.cph.setAttribute('style',replaceOrAddStyle(d.cph.getAttribute('style'),'top',(d.baseO+delta)+'px'));
            updateCPSize(newh);
        }
    }
    event.preventDefault();
}

// terminate dragging to resize the panel
function dragStopSize(event)  {
    // Stop capturing mousemove and mouseup events.
    document.removeEventListener("mousemove", dragGoSize, true);
    document.removeEventListener("mouseup", dragStopSize, true);
    d = null;
}

function getMaxDimensions() {
    var chats = document.getElementsByClassName('chatdisplay');
    for (var i=0;i<chats.length;i++) {
        if (chats[i].style.display!='none') {
            var header = document.evaluate('.//div[@class="header"]',chats[i],null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
            dims = {top:Number(chats[i].style.top.replace(/[^0-9]+/,'')),width:Number(chats[i].clientWidth),height:Number(chats[i].style.height.replace(/[^0-9]+/,''))};
            if (header.singleNodeValue) {
                dims.headert = Number(header.singleNodeValue.style.top.replace(/[^0-9]+/,''));
                dims.headerw = Number(header.singleNodeValue.style.width.replace(/[^0-9]+/,''));
            }
            //console.log('dimensions: top='+dims.top+', width='+dims.width+', height='+dims.height+', offw='+chats[i].offsetWidth+', cw='+chats[i].clientWidth);
			chats[i].addEventListener('scroll',setWidths,false);
            return;
        }
    }
}

function placeDockIcon(f) {
    var img=document.createElement('img');
    img.setAttribute('src',"data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%00%0C%08%06%00%00%00R%80%8C%DA%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%06bKGD%00%00%00%00%00%00%F9C%BB%7F%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DC%03%1E%14)%06%E8D%1D%FA%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%5BIDAT(%CF%ED%8F%A1%11%C0%20%10%04%97L%8Ay%85%A0%8F%EF%80b%9E%8EPt%81%A7%10%FC%23%A228TD%D6%9C%DA%99%DB%E0%EE%CE%017%40%CE%99Z%2BsNJ)%00%98%19%00)%A5M%EA%BD%3Fb%8C%91%D6%1A%00%AA%FA%DA1%06%22%B2%C9%E1%F4%EA%C5!%7F%E3%A7%1A%17%CC%8BJ%7F%13%D8%1D%F7%00%00%00%00IEND%AEB%60%82");
    if (dims.headerw) 
        img.setAttribute('style','position:absolute;top:'+(dims.headert+1)+'px;left:'+(dims.headerw-15)+'px;z-index:7;');
    else
        img.setAttribute('style','position:absolute;top:'+(dims.top+2)+'px;left:'+(dims.width-15)+'px;z-index:7;');
    img.setAttribute('title','Click to toggle display of chat control panel.');
    img.setAttribute('id','chatcp_dock');
    img.addEventListener('click',rollHandler,false);
    f.parentNode.insertBefore(img,f);
}


function initialize() {
    getMaxDimensions();
    if (dims) {
        addPanel();
    }
}

setTimeout(initialize,50);