☰

WME Chat Resize

Adds resize buttons to the chat window

当前为 2014-11-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name 			WME Chat Resize
// @description 	Adds resize buttons to the chat window
// @namespace		[email protected]
// @grant			none
// @grant			GM_info
// @version			0.1.2
// @match			https://editor-beta.waze.com/*editor/*
// @match			https://www.waze.com/*editor/*
// @author			Rick Zabel '2014
// @license			MIT/BSD/X11
// ==/UserScript==

var WMEChatResizeVersion = "0.1.2";

/* Changelog
 * 0.1.2 - i somehow forgot to fix when the chat is tall with the user list shown with street view open.
 * 0.1.1 - I forgot the text input area and new messages alert. I also found an issue when streetview was open and the users list was shown
 * 0.1.0 - Waze kept sending css updates to the chat so i had to completlty rewrite the scrip to handle the CSS differently. Now there is 8 buttons for show hide and 4 functions, one for each of the chatroom sizes. 
 * 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 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" + "Waze kept sending css updates to the chat so i had to completlty rewrite the scrip to handle the CSS differently.";
WMEChatResizeVersionUpdateNotes = WMEChatResizeVersionUpdateNotes + "\r\n" + "I forgot the text input area and new messages alert. I also found an issue when streetview was open and the users list was shown.";
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 to hide/show user list and max and min
        
        //Short Chat Hide Users
        var b = $('<button id="WMEChatResizeShortChatHideUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Short Chat Hide Users" type="button">></button>');
        b.click (WMEChatResize.ShortChatHideUsers);
        $("#chat .header").append(b); 
        
        //Tall Chat Hide Users
        var b = $('<button id="WMEChatResizeTallHideUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Tall Chat Hide Users" type="button">></button>');
        b.click (WMEChatResize.TallHideUsers);
        $("#chat .header").append(b); 
        
        //Short Chat Show Users
        b = $('<button id="WMEChatResizeShortChatShowUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Short Chat Show Users" type="button"><</button>');
        b.click (WMEChatResize.ShortChatShowUsers);
        $("#chat .header").append(b);
        
        //Tall Chat Show Users
        b = $('<button id="WMEChatResizeTallShowUsers" class="WMEChatResize" style="position:absolute;Right:50px;color:#CC0000" title="Tall Chat Show Users" type="button"><</button>');
        b.click (WMEChatResize.TallShowUsers);
        $("#chat .header").append(b);		
        
        //Tall Chat Go Short with Hidden Users
        b = $('<button id="WMEChatResizeShortChatHideUsers2" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Tall Chat Go Short with Hidden Users" 	type="button">v</button>');
        b.click (WMEChatResize.ShortChatHideUsers);
        $("#chat .header").append(b);
        
        //Tall Chat Go Short and Show Users
        b = $('<button id="WMEChatResizeShortChatShowUsers2" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Tall Chat Go Short With Shown Users" 	type="button">v</button>');
        b.click (WMEChatResize.ShortChatShowUsers);
        $("#chat .header").append(b);
        
        //Short Chat Go Tall and Hide Users	   
        b = $('<button id="WMEChatResizeTallHideUsers2" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Short Chat Go Tall and Hide Users	" type="button">^</button>');
        b.click (WMEChatResize.TallHideUsers);
        $("#chat .header").append(b); 
        
        //Short Chat Go Tall and Show Users	 
        b = $('<button id="WMEChatResizeTallShowUsers2" class="WMEChatResize" style="position:absolute;Right:70px;color:#CC0000" title="Short Chat Go Tall and Show Users	" type="button">^</button>');
        b.click (WMEChatResize.TallShowUsers);
        $("#chat .header").append(b); 
        
        //hide my short chat button since the chat loads short
        
        //document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        //document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
        
        //chat size buttons			
        /*
		short hide users btn 	
		>	V
		WMEChatResize.ShortChatHideUsers	

		short show users btn	
		<	V
		WMEChatResize.ShortChatShowUsers	


		tall hide users btn	
		>	^
		WMEChatResize.TallHideUsers	

		tall shown users btn	
		<	^
		WMEChatResize.TallShowUsers	

		//button IDs
		WMEChatResizeShortChatHideUsers	
		WMEChatResizeTallHideUsers	
		WMEChatResizeShortChatShowUsers	
		WMEChatResizeTallShowUsers	
		WMEChatResizeShortChatHideUsers2	
		WMEChatResizeShortChatShowUsers2	
		WMEChatResizeTallHideUsers2	
		WMEChatResizeTallShowUsers2	
		*/	
        
        
        // since the chat jumper link isn't always 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);  
        
        // since sometime waze takes back over i am going to make a custom ccs that i edit the innerhtml
        var h = $('<style type="text/css" id="WMEChatResizeCSS">1234</style>');
        $("head").append(h);
        
        //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";
        }   
        
    }
    
    WMEChatResize.ShortChatHideUsers = function() {
        //alert("ShortChatHideUsers");
        
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="visible";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="visible";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
        
        var WMEChatResizeStringer = "";
        
        //hide users list
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: hidden !important;}"
        
        //document.getElementById('chat').style.width="275px";  //497
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 275px !important; }"
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 275px !important;}"
        
        //messages
        WMEChatResizeStringer = WMEChatResizeStringer + ".messages {width: 348px !important;}"
        
        //message-list
        //WMEChatResizeStringer = WMEChatResizeStringer + ".message-list {width: 275px; max-height: 246px;}"
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 275px !important; top: 43px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 275px !important;}"
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages .new-message {width: 100% !important;}"
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}"
        
        //unread-messages-notification width
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 275px !important;}"
        
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
        
    }
    
    
    WMEChatResize.ShortChatShowUsers = function() {
        //alert("ShortChatShowUsers");
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="visible";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="visible";			// ^ tall show users
        
        var WMEChatResizeStringer = "";
        
        //WMEChatResizeStringer = WMEChatResizeStringer + "#chat {height: 357px;}"
        
        //show users
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: visible !important;}"
        
        //document.getElementById('chat').style.width="497px";  //497
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 497px !important;}"
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 497px !important;}"
        
        //messages
        WMEChatResizeStringer = WMEChatResizeStringer + ".messages {width: 350px !important;}"
        
        //message-list
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-list {width: 348px !important; max-height: 246px !important;}"
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + ".new-message {width: 350px !important;}"
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}"
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 332px !important;}"
        
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
        
    }
    
    
    WMEChatResize.TallHideUsers = function() {
        //alert("TallHideUsers");
        //WMEChatResizeHeight = "tall";
        
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="hidden";			// > tall hide users 
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="visible";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="visible";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="hidden";		// V short show users 
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
        
        var WMEChatResizeStringer = "";
        
        //chat 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {height: 100% !important; width: 275px !important;}";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {height: 96% !important; width: 275px !important;}";
        
        //messages 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages {height: 95% !important; width: 348px !important;}";
        
        //message-list
        //width: 350 px
        //top: 43px
        //bottom: 0px
        //position: absolute
        //no height
        //max-height:90%
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 275px !important; top: 43px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
        
        //hide users list
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {visibility: hidden !important;}"
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 275px !important;}"
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages .new-message {width: 100% !important;}"
        
        //chat-overlay
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay {bottom: 24px !important; height: 95% !important;}";
        
        // lets build up a string and set that as the innerhtml
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
    }
    
    
    WMEChatResize.TallShowUsers = function() {
        //alert("TallShowUsers");
        //WMEChatResizeHeight = "tall";
        
        // adjust my buttons
        document.getElementById('WMEChatResizeShortChatHideUsers').style.visibility="hidden";		// > short hide users
        document.getElementById('WMEChatResizeTallHideUsers').style.visibility="visible";			// > tall hide users
        document.getElementById('WMEChatResizeShortChatShowUsers').style.visibility="hidden";		// < short show users
        document.getElementById('WMEChatResizeTallShowUsers').style.visibility="hidden";			// < tall show users 
        document.getElementById('WMEChatResizeShortChatHideUsers2').style.visibility="hidden";		// V short hide users
        document.getElementById('WMEChatResizeShortChatShowUsers2').style.visibility="visible";		// V short show users
        document.getElementById('WMEChatResizeTallHideUsers2').style.visibility="hidden";			// ^ tall hide users
        document.getElementById('WMEChatResizeTallShowUsers2').style.visibility="hidden";			// ^ tall show users
        
        var WMEChatResizeStringer = "";
        
        //chat 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat {width: 497px !important; height: 100% !important;}";
        
        //chat-body
        WMEChatResizeStringer = WMEChatResizeStringer + ".chat-body {width: 497px !important; height: 96% !important;}";
        
        //messages 
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat .messages {width: 350px !important; height: 95% !important;}";
        
        //message-list
        //width: 350 px
        //top: 43px
        //bottom: 0px
        //position: absolute
        //no height
        //max-height:90%
        
        //message-list
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay #chat .messages .message-list {width: 350px !important; top: 43px !important; bottom: 0px !important; position: absolute !important; max-height: 90% !important;}";
        
        //users
        WMEChatResizeStringer = WMEChatResizeStringer + ".users {height: 99% !important; max-height: 100% !important;}";
        
        //chat-overlay
        WMEChatResizeStringer = WMEChatResizeStringer + "#chat-overlay {bottom: 24px !important; height: 95% !important;}";
        
        //new-message
        WMEChatResizeStringer = WMEChatResizeStringer + ".new-message {width: 350px !important;}"
        
        //message-input
        WMEChatResizeStringer = WMEChatResizeStringer + ".message-input {width: 100% !important;}"
        
        //unread-messages-notification
        WMEChatResizeStringer = WMEChatResizeStringer + ".unread-messages-notification {width: 332px !important;}"
        
        // lets build up a string and set that as the innerhtml
        document.getElementById("WMEChatResizeCSS").innerHTML = WMEChatResizeStringer;
        
    }
    
    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();