try to take over the world!
当前为
// ==UserScript==
// @name WK Overlay
// @namespace http://tampermonkey.net/
// @version 0.2.0
// @description try to take over the world!
// @author You
// @match https://www.wanikani.com/review/session
// @grant none
// ==/UserScript==
// TODO if kanji or radical follows vocab, overlay is not removed
var isKanji = function(ch){
return /^[\u4e00-\u9faf]+$/.test(ch);
};
/** Gets the Kanji characters in a given string.
* @param {string} vocabString -
* @return {Array.<string>} An array of the kanji components in the given string
*/
var getComponents = function(vocabString){
return Array.prototype.filter.call(vocabString, function(ch){
return isKanji(ch);
}, this);
};
(function() {
'use strict';
var parentElement = $("#question");
var overlay = document.createElement('div');
overlay.style.display = 'none';
var descOverlay = document.createElement('div');
var respComps = {};
var prompt;
parentElement[0].appendChild(overlay);
parentElement[0].appendChild(descOverlay);
$.jStorage.listenKeyChange('currentItem', function(){
while (overlay.firstChild){
overlay.removeChild(overlay.firstChild);
}
// Runs after span is changed, but is this guaranteed?
prompt = $.jStorage.get('currentItem');
if (prompt.voc){
for (var ch in prompt.voc){
var chSpan = document.createElement('span');
chSpan.innerText = prompt.voc[ch];
console.info(respComps, prompt.voc[ch], respComps[prompt.voc[ch]]);
if (respComps[prompt.voc[ch]]){
// console.info(respComps[prompt[ch]]);
}
chSpan.style.fontSize = document.defaultView.getComputedStyle($("#character")[0], "").fontSize; // and lineHeight
//overlay.appendChild(chSpan);
//$("#character").append(chSpan);
if (!isKanji(prompt.voc[ch])){
chSpan.style.visibility = 'hidden';
}
else{
chSpan.style.backgroundColor = "cyan";
}
}
}
// Show overlay when info is being shown.
});
$("#item-info").on('show', function(){
// Array of nodelists
while (overlay.firstChild){
overlay.removeChild(overlay.firstChild);
}
$("#related-items .kanji a").each(function(i, comp){
console.log(comp);
respComps[comp.childNodes[0].textContent] = comp.childNodes[1].textContent;
});
overlay.style.display = 'block';
while (descOverlay.firstChild){
descOverlay.removeChild(descOverlay.firstChild);
}
if (prompt.voc){
var flipTopBottom = false; //true: top, false: bottom
// Position absolute needs negative margins to react to number of characters
var marginLeftPercentage = (-100/prompt.voc.length) + "%";
for (var ch in prompt.voc){
flipTopBottom = !flipTopBottom;
var chSpan = document.createElement('span');
chSpan.className = "wkOverlayChar";
var comp = document.createElement('span');
comp.innerText = prompt.voc[ch];
comp.style.opacity = 0;
chSpan.appendChild(comp);
console.info(respComps, prompt.voc[ch], respComps[prompt.voc[ch]]);
chSpan.style.fontSize = document.defaultView.getComputedStyle($("#character")[0], "").fontSize; // and lineHeight
overlay.style.height = $("#character span").height() + 'px';
overlay.style.top = $("#character span").position().top + 'px';
overlay.style.left = $("#character span").position().left + 'px';
overlay.setAttribute('lang', "ja");
overlay.style.position = "absolute";
//overlay.style.display = 'none';
overlay.style.height = $("#character span").height() + 'px';
descOverlay.style.top = $("#character span").position().top + 'px';
descOverlay.style.left = $("#character span").position().left + 'px';
//descOverlay.setAttribute('lang', "ja");
descOverlay.style.position = "absolute";
descOverlay.style.color = "black";
overlay.appendChild(chSpan);
//$("#character").append(chSpan);
if (!isKanji(prompt.voc[ch])){
chSpan.style.visibility = 'hidden';
}
else{
// chSpan.style.backgroundColor = "cyan";
}
var t = chSpan.offsetTop; //document.defaultView.getComputedStyle(chSpan, "").top;
var l = chSpan.offsetLeft; //document.defaultView.getComputedStyle(chSpan, "").left;
if (respComps[prompt.voc[ch]]){
var spInf = document.createElement('span');
console.info("t and l", t, spInf.style.top, l, spInf.style.left);
spInf.innerText = respComps[prompt.voc[ch]];
// descOverlay.appendChild(spInf);
chSpan.appendChild(spInf);
spInf.style.marginLeft = marginLeftPercentage;
spInf.style.position ="absolute";
if(flipTopBottom){
spInf.style.bottom = "100%";
}
else{
spInf.style.top = "100%";
}
spInf.style.backgroundColor = "black";
spInf.style.color = "#fff";
spInf.style.textAlign = "center";
spInf.style.padding = "5px 10px";
spInf.style.borderRadius = "6px";
spInf.style.display = "inline-block";
spInf.style.fontSize = "10pt";
// spInf.style.top = t;
}
}
}
descOverlay.style.display = 'block';
//console.log($("#character span"));
});
$("#item-info").on('hide', function(){
overlay.style.display = 'none';
descOverlay.style.display = 'none';
});
})();