WME Chat Resizer and Auto Scroll

WME Chat Resize

Adds resize buttons to the chat window
目前為 2014-11-03 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name 			WME Chat Resize
// @description 	Adds resize buttons to the chat window
// @namespace		[email protected]
// @grant			none
// @grant			GM_info
// @version			0.0.51
// @match			https://editor-beta.waze.com/*editor/*
// @match			https://www.waze.com/*editor/*
// @author			Rick Zabel '2014
// @license			MIT/BSD/X11
// ==/UserScript==


/* Changelog
 * 0.0.51 - more tweaks applied css for chat jumper buttons
 * 0.0.44 - More css tweaks 
 * 0.0.43 - Working with SeekingSerenity we found out that the tall chat on some resolutions the top of the chat would be unreachable so I switched from px to %
 * 0.0.42 - very minor 4 pixel changes to the normal chat height
 * 0.0.4 - removed the open space on the right of the chat
 * 0.0.3 - few div size corrections
 * 0.0.2 - made the buttons not Interfere with each other
 * 0.0.1 - initial version
 */

var WMEChatResizeVersion = "0.0.51";

var WMEChatResizeVersionUpdateNotes = "WME Chat Resize has been updated to " + WMEChatResizeVersion;
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "This script adds buttons to the chat title bar and removes the space on the right of the chat.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "The buttons will let you hide or show the users list";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + " " + "and will let you make the chat tall or normal heights.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "this version brings more css tweaks to chat jumper's buttons.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "There still something going on with waze resetting the message space to the default height once and a while. for now i only seen it on the tall chat and will look into it more later!";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\n" + "As usual let me know if there are any issues -RickZabel";

//alert the user in  WMEChatResize version updates
if (localStorage.getItem('WMEChatResizeVersion') == WMEChatResizeVersion) {
    console.log("UR Comments Version " + WMEChatResizeVersion);
} else {
    alert(WMEChatResizeVersionUpdateNotes);
    localStorage.setItem('WMEChatResizeVersion', WMEChatResizeVersion);
}



//setup some global vars to be used in the functions 
//currently i plan on lettings the chat default to normal on page load
window.WMEChatResizeHeight = "short"; //short or tall
window.WMEChatResizeUsers  = "shown";  //shown  or hidden





function WMEChatResize_bootstrap() {
    var bGreasemonkeyServiceDefined = false;
    
    try {
        var ver = window.navigator.appVersion.match(/Chrome\/(.*?) /)[1];
    } catch(err) {
        var ver = null;
    }
    if (null !== ver) {
        var itschrome = true;
        ///ver = "27.0.1438.7"; // last old working version
        // example: 32.0.1700.107
        // [0] - major versin
        // [2] - minor version
        ver = ver.split(".");
        ver[0] = parseInt(ver[0]);
        ver[2] = parseInt(ver[2]);
        if (ver[0] > 27) {
            var newmethod = true;
        } else if (ver[0] == 27) {
            if (ver[2] <= 1438) {
                var newmethod = false;
            } else {
                var newmethod = true;
            }
        } else {
            var newmethod = false;	
        }
    } else {
        var itschrome = false;
        var newmethod = false;
    }
    
    try
    {
        if ("object" === typeof Components.interfaces.gmIGreasemonkeyService)  // Firefox tells that "Components" is deprecated
        {
            bGreasemonkeyServiceDefined = true;
        }
    }	catch (err) { };
    
    try
    {
        if  ("object" === typeof GM_info) 
        {
            bGreasemonkeyServiceDefined = true;
        }
    }	catch (err) { };   
    
    
    if ( "undefined" === typeof unsafeWindow  ||  ! bGreasemonkeyServiceDefined)
    {
        try {
            unsafeWindow    = ( function ()
                               {
                                   var dummyElem   = document.createElement('p');
                                   dummyElem.setAttribute ('onclick', 'return window;');
                                   return dummyElem.onclick ();
                               } ) ();
        } 
        catch (err)
        {
            //Ignore.
        }
    }
    
    /* FIX IT !!!! */
    var itschrome = true;
    var newmethod = true;
    var bGreasemonkeyServiceDefined = false;
    
    //And check again for new chrome, and no tamper(grease)monkey
    if ( itschrome && newmethod &&  !bGreasemonkeyServiceDefined)
    {
        //use "dirty" but effective method with injection to document
        var DLscript = document.createElement("script");
        DLscript.textContent ='unsafeWindow=window; \n'+ // need this for compatibility
            WMEChatResize_init.toString()+' \n'+
            'WMEChatResize_init();';
        DLscript.setAttribute("type", "application/javascript");
        document.body.appendChild(DLscript);    
        document.body.removeChild(DLscript); 
    } else {
        /* begin running the code! */
        WMEChatResize_init();
        ///setTimeout(WMEChatResize_init,200);
    }  
}

function WMEChatResize_init() {
    
    WMEChatResize =  { 
        last: new Array(),
        isLast: false,
        isLSsupported: false,
        zoom: false
    };
    
    WMEChatResize.init = function() {
        //add the buttons to the chat title bar
        //hide/show user list
        var b = $('<button id="WMEChatResize-HideUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Hide Users" type="button">></button>');
        b.click (WMEChatResize.Hide);
        var c = $('<button id="WMEChatResize-ShowUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Show Users" type="button"><</button>');
        c.click (WMEChatResize.Show);
        
        $("#chat .header").append(b);
        $("#chat .header").append(c);
        
        document.getElementById('WMEChatResize-ShowUsers').style.visibility="hidden";
        
        //tall / short chat
        var d = $('<button id="WMEChatResize-ShortChat" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Short Chat" type="button">v</button>');
        d.click (WMEChatResize.ShortChat);
        var e = $('<button id="WMEChatResize-TallChat" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Tall Chat" type="button">^</button>');
        e.click (WMEChatResize.TallChat);
        // var f = $('/r<button id="WMEChatResize-TallChat" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000;" title="Very short Chat" type="button">vv</button>');
        //f.click (WMEChatResize.TallChat);
        
        $("#chat .header").append(d);
        $("#chat .header").append(e); 
        //$("#chat .header").append(f); 
        
        
        
        // since the chat jumper link isnt alway present I had to apply the style to the head  
        var g = $('<style type="text/css">#ChatJumper-JUMP.ChatJumper, #ChatJumper-JUMP-clear { font-size: 11px !important; padding-left: 1px !important; padding-right: 1px !important; }</style>');
        $("head").append(g);  
        
        
        
        
        document.getElementById('WMEChatResize-ShortChat').style.visibility="hidden";
        
        //move the chat all the way to the right 
        document.getElementById('chat-overlay').style.right="0px";
        
        
        //shrink down the chat title bar stuff to work with chat jumper
        
        //single-room-label
        var divsToModify = document.getElementsByClassName("single-room-label");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.fontSize="11px";
            divsToModify[i].style.paddingLeft="8px";
        }
        
        //dropdown-toggle
        var divsToModify = document.getElementsByClassName("dropdown-toggle");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.paddingLeft="5px";
            divsToModify[i].style.paddingRight="0px";
        }
        
        //status
        var divsToModify = document.getElementsByClassName("status");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.fontSize="11px";
        }   
        
        /* only works on the one present on load
        // class  ChatJumper
        var x = document.getElementsByClassName("ChatJumper");
        //go trough all of the eletemnts that match the requested class
        for(var i = 0, j=x.length; i<j; i++){
            //var btnHtml = (i + " - " + x[i].innerHTML);
            // alert (btnHtml);
            x[i].style.fontSize="11px";
            x[i].style.paddingLeft="1px";
            x[i].style.paddingRight="1px";
        }
        */
        
        
    }
    
    WMEChatResize.Hide = function() {
        //hide users list
        var divsToHide = document.getElementsByClassName("users");
        for(var i = 0; i < divsToHide.length; i++) {        
            divsToHide[i].style.visibility="hidden";
        }
        
        //document.getElementById('chat-overlay').style.width="455px";  //497
        document.getElementById('chat').style.width="275px";  //497
        
        var divsToModify = document.getElementsByClassName("chat-body");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="275px";  //497
        } 
        
        //messages width
        var divsToModify = document.getElementsByClassName("messages");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="348px"; //348
        }
        
        //message-list width
        var divsToModify = document.getElementsByClassName("message-list");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="275px"; //318
            divsToModify[i].style.maxHeight="246px"; //318
        }
        
        //new-message width
        var divsToModify = document.getElementsByClassName("new-message");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="275px"; // 305
        }
        
        //message-inpuit width
        var divsToModify = document.getElementsByClassName("message-input");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="100%"; // 273
        }
        
        //unread-messages-notification width
        var divsToModify = document.getElementsByClassName("unread-messages-notification");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="275px"; //332
        }
        
        
        if(WMEChatResizeHeight == "short") { //short or tall
            document.getElementById('chat').style.height="353px";
        } else {
            //tall
            document.getElementById('chat').style.height="100%"; //600px
        }
        
        document.getElementById('WMEChatResize-HideUsers').style.visibility="hidden";
        document.getElementById('WMEChatResize-ShowUsers').style.visibility="visible";
        
    }
    
    
    WMEChatResize.Show = function() {
        //show chat
        var divsToHide = document.getElementsByClassName("users");
        for(var i = 0; i < divsToHide.length; i++) {      
            divsToHide[i].style.visibility="visible";
        }
        
        // document.getElementById('chat-overlay').style.width="497px";  //497
        document.getElementById('chat').style.width="497px";  //497
        
        var divsToModify = document.getElementsByClassName("chat-body");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="497px";  //497
        } 
        
        //messages width
        var divsToModify = document.getElementsByClassName("messages");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="350px"; //348
        }
        
        //message-list width
        var divsToModify = document.getElementsByClassName("message-list");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="348px"; //318
            divsToModify[i].style.maxHeight="246px"; //318
        }
        
        //new-message width
        var divsToModify = document.getElementsByClassName("new-message");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="350px"; // 305
        }
        
        //message-input width
        var divsToModify = document.getElementsByClassName("message-input");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="100%"; // 273
        }
        
        //unread-messages-notification width
        var divsToModify = document.getElementsByClassName("unread-messages-notification");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.width="332px"; //332
        }
        
        if(WMEChatResizeHeight == "short") { //short or tall
            document.getElementById('chat').style.height="353px";
        } else {
            //tall
            document.getElementById('chat').style.height="100%"; //600px
        }
        
        document.getElementById('WMEChatResize-HideUsers').style.visibility="visible";
        document.getElementById('WMEChatResize-ShowUsers').style.visibility="hidden";
        
    }
    
    WMEChatResize.ShortChat = function() {
        WMEChatResizeHeight = "short";
        
        document.getElementById('WMEChatResize-ShortChat').style.visibility="hidden";
        document.getElementById('WMEChatResize-TallChat').style.visibility="visible";
        
        //change the chat height
        document.getElementById('chat').style.height="357px"; 
        
        //change chat-body
        var divsToModify = document.getElementsByClassName("chat-body");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="314px";
        }
        //messages height
        var divsToModify = document.getElementsByClassName("messages");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="314px";
        }
        
        //message-list height
        var divsToModify = document.getElementsByClassName("message-list");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="250px";
            divsToModify[i].style.maxHeight="250px";
        }
        
        //change users height
        var divsToModify = document.getElementsByClassName("users");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="310px";
        }
        
        document.getElementById('chat-overlay').style.bottom="24px";
        document.getElementById('chat-overlay').style.height="353px";
        
    }
    
    
    WMEChatResize.TallChat = function() {
        WMEChatResizeHeight = "tall";
        
        document.getElementById('WMEChatResize-ShortChat').style.visibility="visible";
        
        document.getElementById('WMEChatResize-TallChat').style.visibility="hidden";
        
        //change the chat height
        document.getElementById('chat').style.height="100%"; 
        
        //change chat-body
        var divsToModify = document.getElementsByClassName("chat-body");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="95%";
        }
        
        //messages height
        var divsToModify = document.getElementsByClassName("messages");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="90%";
        }
        
        //message-list height
        var divsToModify = document.getElementsByClassName("message-list");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="90%";
            divsToModify[i].style.maxHeight="90%";
        }
        
        //change users height
        var divsToModify = document.getElementsByClassName("users");
        for(var i = 0; i < divsToModify.length; i++) {        
            divsToModify[i].style.height="95%";
            divsToModify[i].style.maxHeight="95%";
            
        } 
        
        document.getElementById('chat-overlay').style.bottom="24px";
        document.getElementById('chat-overlay').style.height="95%";
        
    }
    
    WMEChatResize.startcode = function () {
        // Check if WME is loaded, if not, waiting a moment and checks again. if yes init WMEChatResize
        try {
            if ("undefined" != typeof unsafeWindow.W.model.chat.rooms._events.listeners.add[0].obj.userPresenters[unsafeWindow.Waze.model.loginManager.user.id] ) {
                console.log("WMEChatResize ready to resize");
                WMEChatResize.init()
            } else {
                setTimeout(WMEChatResize.startcode, 200);
            }
        } catch(err) {
            setTimeout(WMEChatResize.startcode, 200);
        }
    }
    //setTimeout(WMEChatResize.startcode, 5000);
     WMEChatResize.startcode();
}

WMEChatResize_bootstrap();