Seems to be an issue with the current framework I guess (or I’m doing something wrong).
Here’s what I did:
- Opened the WaniKani home page (and saw the stuck popup).
- Ran
wkof.file_cache.clear();
in the console. - Refreshed and saw the popup with the progress bar moving. After it finished, the popup closed and my script worked as expected (continued to work as expected since it was previously working as well).
- Refreshed and saw the popup get stuck again.
There are no errors in the console. As mentioned in step 3, my script works, it’s just the popup that’s acting strangely.
Here’s the relevant code. It’s mostly the code you sent me a few weeks ago and boiler plate UI stuff.
// ==UserScript==
// @name WaniKani Lesson Hover Details
// @namespace https://www.wanikani.com
// @description Show lesson breakdown by type on hover
// @author seanblue
// @version 1.0.0
// @include *://www.wanikani.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var style =
'<style>' +
'.table { display: table; margin: 0; padding: 0; }' +
'.row { display: table-row; margin: 0; padding: 0; }' +
'.cell { display: table-cell; margin: 0; }' +
'.cell-title { font-weight: bold; padding: 0 10px 0 0; text-align: right; }' +
'.cell-value { text-align: left; }' +
'</style>';
$('head').append(style);
wkof.include('Apiv2, ItemData');
wkof.ready('Apiv2, ItemData').then(fetchData);
function fetchData() {
var promises = [];
promises.push(wkof.Apiv2.get_endpoint('summary'));
promises.push(wkof.Apiv2.get_endpoint('subjects'));
Promise.all(promises).then(processData);
}
function processData(results) {
var lessonCounts = getLessonCount(results);
setupPopover(lessonCounts);
}
function getLessonCount(results) {
// Grab the fetched results (same order as the promises array above).
var summary = results[0];
var subjects = results[1];
var lessonCounts = {
radical: 0,
kanji: 0,
vocabulary: 0
};
// Pull the list of subject_ids from the lesson list in 'summary'.
var lessonSubjectIds = summary.lessons[0].subject_ids;
lessonSubjectIds.forEach(function(subjectId) {
var item = subjects[subjectId];
lessonCounts[item.object]++;
});
return lessonCounts;
}
function setupPopover(lessonCounts) {
var lessonMenuItem = $('.navbar .lessons a');
if (lessonMenuItem.length === 0)
return;
lessonMenuItem.attr('data-content', getPopoverHtml(lessonCounts)).popover({
html: true,
animation: false,
placement: 'bottom',
trigger: 'hover',
template: '<div class="popover review-time"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
});
}
function getPopoverHtml(lessonCounts) {
return `<div class="table">
<div class="row">
<div class="cell cell-title">Radicals</div>
<div class="cell cell-value">${lessonCounts.radical}</div>
</div>
<div class="row">
<div class="cell cell-title">Kanji</div>
<div class="cell cell-value">${lessonCounts.kanji}</div>
</div>
<div class="row">
<div class="cell cell-title">Vocab</div>
<div class="cell cell-value">${lessonCounts.vocabulary}</div>
</div>
</div>`;
}
})();