it displays the length of the selected character string to the calculated screen.
// ==UserScript==
// @name calculation of selection length
// @namespace http://www.sharkpp.net/
// @version 0.1
// @description it displays the length of the selected character string to the calculated screen.
// @author sharkpp
// @copyright 2015, sharkpp
// @license MIT License
// @include http://*/*
// @include https://*/*
// ==/UserScript==
(function () {
// simply i18n load string
var _ = function(res, key) {
var browserLang = (window.navigator.userLanguage || window.navigator.language ||
window.navigator.browserLanguage).substr(0,2);
var s = '', l = null, k;
for (k in res) {
if (browserLang == k || !l)
l = k;
}
if (undefined != res[l][key]) {
s = res[l][key];
for (var i = 2; i < arguments.length; ++i) {
s = s.replace('%' + (i - 1), '' + arguments[i]);
}
}
return s;
};
// get selection string rect
var getSelectionRect = function() {
var rect = { left: 0, top: 0, right: 0, bottom: 0 };
var selAll = document.getSelection();
var selLen = String(selAll).length;
if (selLen) {
var rect_ = selAll.getRangeAt(selAll.rangeCount - 1).getBoundingClientRect();
rect = { left: rect_.left, top: rect_.top,
right: rect_.right, bottom: rect_.bottom,
width: rect_.width, height: rect_.height };
}
rect.left += window.pageXOffset;
rect.top += window.pageYOffset;
rect.right += window.pageXOffset;
rect.bottom+= window.pageYOffset;
return selLen ? rect : null;
};
// translation string resource
var t = {
en: {
characters: '%1 characters',
},
ja: {
characters: '%1 文字',
},
};
var timerId = null, elmInfo = null;
// trigger for select change event
document.addEventListener("selectionchange", function(e){
if (elmInfo) {
document.body.removeChild(elmInfo);
elmInfo = null;
}
if (timerId)
clearTimeout(timerId);
// 250ms delay for display info
timerId = setTimeout(function(){
var rect = getSelectionRect();
if (rect) {
var selCount = String(document.getSelection()).length;
elmInfo = document.createElement('div');
elmInfo.style.cssText = [
'position: absolute',
'left: ' + (rect.right - 16) + 'px',
'top: ' + rect.bottom + 'px',
'background-color: #fff',
'border: 1px solid #666',
'border-radius: 5px',
'white-space: nowrap',
'padding: 0 3px'
].join(';');
elmInfo.appendChild(document.createTextNode(_(t, 'characters', selCount)));
document.body.appendChild(elmInfo);
}
}, 250);
}, false);
})();