Some Tweaks and English Translation for Lolipop Webmail UI

LolipopWebmail.user.js

// ==UserScript==
// @name         LolipopWebmail
// @namespace    github.com/Kudratullah
// @version      1.1.9
// @description  Some Tweaks and English Translation for Lolipop Webmail UI
// @author       Kudratullah <mhamudul.hk@gmail.com>
// @updateURL    https://gist.githubusercontent.com/Kudratullah/83c57ea87c1c0aaf81968c7db83bba1a/raw/LolipopWebmail.user.js
// @downloadURL  https://gist.githubusercontent.com/Kudratullah/83c57ea87c1c0aaf81968c7db83bba1a/raw/LolipopWebmail.user.js
// @match        https://tools.lolipop.jp/mail/mail*
// @icon         https://tools.lolipop.jp/mail/mail/img/title.png
// @grant        unsafeWindow
// @run-at       document-end
// @copyright    © Kudratullah
// ==/UserScript==
// helper functions
/**
 * get value of url parameter by parameter name
 * @param string name
 * @param string url
 * @return strings
 */
function getParameterByName(name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
		results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
}
/**
 * add, update or remove query paremeter or value and return query string
 * @param {String} name
 * @param {String} value
 * @return {String}
 */
function updateQueryString(name, value, uri) {
	if (!uri) uri = window.location.href;
	// uri = location.href;
	var column = uri.split('?'),
        url = column[0],
        query = (column[1]) ? column[1] : '',
        re = new RegExp('[&]?' + name + '[=][^&]*');
	query = query.replace(re, '');
	if (value !== null) {
		query += '&' + name + '=' + value;
		query = query.replace(/^&/, '');
	}
	return query;
}
/**
 * Pad number with 0
 * @param string|number	num
 * @param number		pad size
 * @return string
 */
if (!Number.pad) {
	Number.pad = function(num, size) {
		var s = "000000000" + num;
		return s.substr(s.length - size);
	};
}

/**
 * formate string similar to sprintf
 * @param string format
 * @return string
 * @link http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format
 * example: String.format('{0} is dead, but {1} is alive! {0} {2}', 'ASP', 'ASP.NET');
 * output: ASP is dead, but ASP.NET is alive! ASP {2}
 */

if (!String.format) {
	String.format = function(format) {
		var args = Array.prototype.slice.call(arguments, 1);
		return format.replace(/{(\d+)}/g, function(match, number) {
			return typeof args[number] != 'undefined' ? args[number] : match;
		});
	};
}
(function() {
	'use strict';
	// variables, settings, translation elements and translation arrays
	var mode = getParameterByName('mode'),
		webFont = "https://fonts.googleapis.com/css?family=Roboto",
		mailChackInterval = (5*60*1000), // 1000ms => 1s >> 5mins > 5*60secs > 5*60*1000ms
		unreadColor = "#b5e4f0",
			eMailAddressElem = document.querySelector('#header_mail_address'),
		eMailAddress = eMailAddressElem.innerText,
		word_break = document.querySelectorAll(".word_break"),
		toolTips = {
			"HELP_JYUSHIN" : "Incoming Mail", "HELP_MKMAIL" : "Create New Mail", "HELP_MOVEDIR" : "Move To Folder",
			"HELP_ADDRESS" : "Address Book", "HELP_GOMI" : "Trash", "HELP_REPLY" : "Reply",
			"HELP_REPLYALL" : "Reply To All", "HELP_SEND" : "Send E-mail", "HELP_TRANSFER" : "Forward",
			"HELP_ADDRESS_INS" : "Add address book", "HELP_ADDRESS_INS2" : "Add sender to address book",
			"HELP_USER_SET" : "Environmental setting", "HELP_USER_SET2" : "Add sender to Rejected list",
		},
		header_links = document.querySelectorAll("#header_links ul li a"),
		headerLinksTranslation = ["Manual","User exclusive page","Logout"],
		mainTbody = document.querySelectorAll("#main_body table tbody"),
		side_menu = document.querySelectorAll("#side_menu a img"),
		side_menuTranslation = ["Create Folder","Delete Folder","Change Folder Name"],
		side_list = document.querySelectorAll("#side_list div a:first-child"),
		side_listTranslation = [
            '<img src="img/side_folder.png" align="absmiddle" class="png side_icon"> Inbox',
            '<img src="img/side_folder.png" align="absmiddle" class="png side_icon"> Sent Mail',
			'<img src="img/side_folder.png" align="absmiddle" class="png side_icon"> Draft',
			'<img src="img/side_trash.png" align="absmiddle" class="png side_icon"> Recycle Bin',
			'<img src="img/side_address.png" align="absmiddle" class="png side_icon"> Address book',
        ],
        unread = document.querySelectorAll(".mail_1"),
		unreadText = ( function(){
            var counter = 0;
            counter = side_list[0].innerHTML.match( /\(([0-9]+)\)/g );
            if( counter && counter.length ) return ' ' + counter[0];
            return false;
        })(),
		footer_icon_left = document.querySelectorAll("#footer_icon_left a img"),
		footer_icon_leftTranslation = ["Select All", "Make Selected As Unread", "Move Selected To Trash"],
		mail_details_headerTable = document.querySelector(".mail_header_bg > table"),
		mail_details_header = document.querySelectorAll('.mail_header_bg table tbody tr td.mail_header_td_1'),
		mail_details_headerTranslation = {"あて先 *":"Address *","差出人":"From","返信先":"Reply To","受信日時":"Received DateTime","あて先":"To","CC":"CC","件　名":"Subject"};
	// helper functions
	var elemTranslate = function( elemsArray, translationArray, callback ) {
			elemsArray.forEach(function( elem, index ){
				callback(elem,translationArray[index],index);
			});
		},
		translateInnerText = function( elem, translation ){ elem.innerText = translation; return elem; },
		convertToCurrentTimeZone = function( elem ){
			if( elem.innerText.length <= 2 ) {
				elem.innerHTML = '';
			} else {
                // default format is yy/mm/dd eg. 17/12/18. so concat 20 before date.
				var newDateTime = new Date( "20"+elem.innerText+" GMT+0300 (Japan Standard Time)" );
				var japanDateTime = new Date(newDateTime);
				japanDateTime.setHours( japanDateTime.getHours()-3 );
				japanDateTime = japanDateTime.toString().replace(/\sGMT.+\)$/g, '')+" GMT+0300 (Japan Standard Time)";
				elem.innerHTML = `<time title="${japanDateTime}">${newDateTime.toString().replace(/\:\d{2}\sGMT.+$/g,"")}</time>`;
			}
		},
		translateInnerHtml = function( elem, translation ){ elem.innerHTML = translation; return elem; },
        translatesideMenu = function( elem, translation ){
            var counter = elem.innerHTML.match( /\(([0-9]+)\)/g );
            elem.innerHTML = ( counter && counter.length )? translation + ' ' + counter: translation;
            return elem;
        },
		translateAltTitle = function( elem, translation ){ elem.title = translation; elem.alt = translation; return elem; },
		applyWebFont = (function(){
			var linkEl = document.createElement('link');
			linkEl.href = webFont;
			linkEl.rel = "stylesheet";
			linkEl.media = "all";
			document.head.appendChild(linkEl);
		})(),
		/**
		 * @link https://davidwalsh.name/add-rules-stylesheets
		 */
		addStyleSheet = (function() {
			// Create the <style> tag
			var css = `
			body * { font-family: 'helvetica', 'Roboto', 'Lucida Grande',geneva,verdana sans-serif !important; }
			#side_list a:not([href*='Trash']) { display: block; }
			input#header_email_address { background: #f0f0f0; width: 100%; border: none; font-weight: bold; color: #2292bb; }
			input#header_email_address:focus { outline: none; }
			.tr_5 { background-color: #b6e4ef; }
			#main_body table td:last-child { text-align: center;`;
			var style = document.createElement("style");
			style.setAttribute("media", "all");
			style.appendChild(document.createTextNode( css ));
			// Add the <style> element to the page
			document.head.appendChild(style);
			return style.sheet;
		})();
	var update_eMailAddress = (function(eMail,eMailEl){
		var el = document.createElement('input');
		el.id = "header_email_address";
		el.type = "email";
		el.readOnly = true;
		el.value = eMail;
		el.addEventListener("click", function(e){
			this.select();
		}, false);
		eMailEl.innerHTML = "";
		eMailEl.append(el);
		return el;
	})(eMailAddress,eMailAddressElem);
    var listTableHeaders, listTableHeaderTranslation, mailListDateCols;
	if( mode == "address_ins" ) {
		translateInnerText( document.querySelector('#ad_ins_title'), "Add New Contact" );
		var addNewContactHeaders = Array.prototype.slice.call( mainTbody[0].querySelectorAll("tr td:first-child") );
		addNewContactHeaders.push( Array.prototype.slice.call( mainTbody[0].querySelectorAll("tr:first-child td:nth-child(3)") )[0] );
		var addNewContactHeaderTranslation = [ "Name", "Email", "Remarks", "Icon" ];
		elemTranslate( addNewContactHeaders, addNewContactHeaderTranslation, translateInnerText );
		listTableHeaders = mainTbody[1].querySelectorAll("tr:first-child > td > a");
		listTableHeaderTranslation = ["Name", "Email", "Remarks"];
	} else if( mode == "address" ) {
		listTableHeaders = mainTbody[0].querySelectorAll("tr:first-child > td > a");
		listTableHeaderTranslation = ["Name", "Email", "Remarks"];
	} else {
		listTableHeaders = mainTbody[0].querySelectorAll("tr:first-child > td > a");
		listTableHeaderTranslation = ["Subject", "Sender", "Date", "Size"];
		mailListDateCols = document.querySelectorAll("td.list_3");
	}
	// Recycle Bin Empty Button
	var kara = document.getElementById("kara").innerText = "Empty";
	// Remove word_break class
	word_break.forEach(function(elem,index){
		elem.className = elem.className.replace(" word_break", "" );
	});
	// Translate page title
	var title = (function(){
		var titleTrans = '['+eMailAddress+'] - Lollipop! WEB Mailer',
			title = document.querySelector('title');
		switch( mode ) {
			case "mail_make":
				titleTrans = 'Create Mail ' + titleTrans;
				break;
			case "user_set":
				titleTrans = 'Settings ' + titleTrans;
				break;
            case "mail_read":
				let subject = document.querySelector('.mail_header_bg table tbody tr:last-child td:last-child').innerText;
				if( subject && subject.length > 0 ) {
					titleTrans = subject + ' ' + titleTrans;
				}
				var textHtml = $('.mail_text').text().trim();
				if( textHtml.match( /<html>(.+)<\/html>/gs ) ) {
					$('.mail_text').html( textHtml );
				}
				break;
			case "mail_list":
				if( getParameterByName('mailbox') === 'Trash' ) {
					titleTrans = 'Trash ' + titleTrans;
				}
				if( getParameterByName('type') === '0' ) {
					titleTrans = 'Draft ' + titleTrans;
				}
				if( getParameterByName('type') === '1' ) {
					titleTrans = 'Sent Mail ' + titleTrans;
				}
				break;
			case "address":
				titleTrans = 'Address Book ' + titleTrans;
				break;
			case "address_ins":
				titleTrans = 'Add New Contact ' + titleTrans;
				break;
			default:
				titleTrans = 'Inbox'+unreadText + titleTrans;
				break;
		}
		title.innerText = titleTrans;
		return title;
	})();
	// add dark color background for unread emails
	if( mode == "address_ins" || mode == "address" ) {

	} else {
		unread.forEach(function( elem, index ){ elem.parentElement.parentElement.style.background = unreadColor; });
		elemTranslate( mailListDateCols, [], convertToCurrentTimeZone );
	}
	elemTranslate( header_links, headerLinksTranslation, translateInnerText );
	elemTranslate( listTableHeaders, listTableHeaderTranslation, translateInnerText );
	elemTranslate( side_menu, side_menuTranslation, translateAltTitle );
	elemTranslate( side_list, side_listTranslation, translatesideMenu );
	elemTranslate( footer_icon_left, footer_icon_leftTranslation, translateAltTitle );
	// elemTranslate( mail_details_header, mail_details_headerTranslation, translateInnerText );
	elemTranslate( mail_details_header, mail_details_headerTranslation, function( elem, translation) {
		if( mail_details_headerTranslation[elem.innerText] ) {
			elem.innerText = mail_details_headerTranslation[elem.innerText];
		}
	} );
	for( var id in toolTips ) {
		var elem = document.getElementById(id);
		elem.innerText = toolTips[id];
	}
	setInterval( function(){
		var cLoc = window.location.href;
		if( cLoc == "https://tools.lolipop.jp/mail/mail/?mode=mail_list" || cLoc == "https://tools.lolipop.jp/mail/mail/?mode=mail_list&mailbox=" ) {
			window.location.reload();
		}
	}, mailChackInterval);
})();
// title icon
(function(){
	"use strict";
	var unread = ( function(){
        var side_list = document.querySelectorAll("#side_list div a:first-child"),
            counter = side_list[0].innerHTML.match( /\(([0-9]+)\)/g );
        if( counter && counter.length ) {
            counter = parseInt( counter[0].replace('(','').replace(')','') );
            if( counter > 9 ) {
                counter = '9+';
            } else {
                counter = '0'+counter;
            }
            return counter;
        }
        return '00';
    })();
	// if( ! unread ) return;
	function drawImageScaled(img, ctx) {
		var canvas = ctx.canvas,
			hRatio = canvas.width / img.width,
			vRatio = canvas.height / img.height,
			ratio = Math.min ( hRatio, vRatio ),
			centerShift_x = ( canvas.width - img.width*ratio ) / 2,
			centerShift_y = ( canvas.height - img.height*ratio ) / 2;
		ctx.clearRect(0,0,canvas.width, canvas.height);
		ctx.drawImage(img, 0,0, img.width, img.height,
					  centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);
	}
	var canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d'),
		img = document.createElement('img');
	//img.src='https://tools.lolipop.jp/favicon.ico';
	//img.style.visibility= 'hidden';
	canvas.style.visibility= 'hidden';
	//document.querySelector('body').append(img);
	canvas.height = "32";
	canvas.width = "32";
	//ctx.drawImage(img, 0, 0);
	ctx.font = "16pt Tahoma";
	//ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.rect(0,0,canvas.width,canvas.height);
    var gradient = ctx.createLinearGradient(0,0,canvas.width,canvas.height);
    // gradient.addColorStop(0,"#b5e4f1");
    // gradient.addColorStop(1,"#08b9e5");
    // ctx.fillStyle = '#5fd5f7';
    ctx.fillStyle = '#08b9e5';
    // ctx.fillStyle = gradient;
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#aaedfe';
    ctx.lineTo(canvas.width/2,canvas.height/2);
    ctx.lineTo(canvas.width,0);
    ctx.moveTo(0,0);
    ctx.lineTo(0,canvas.height);
    ctx.lineTo(canvas.width,canvas.height);
    ctx.lineTo(canvas.width,0);
    ctx.stroke();
	// ctx.drawImage(img, 0, 0);
	// drawImageScaled( img, ctx );
	ctx.fillStyle = "black";
	ctx.fillText(unread,4,23);
	document.querySelector('body').append(canvas);
	var link = document.querySelector('link[rel="shortcut icon"]');
	if( link ) link.remove();
	var iconElem = document.createElement('link');
	iconElem.rel="shortcut icon";
	iconElem.type="image/png";
	iconElem.href=canvas.toDataURL();
	document.querySelector('head').append(iconElem);
})();