Provides jump buttons to the next lesson for leveling up (based on minirock / oltodosel autoScroller).
Version au
// ==UserScript==
// @name Duolingo LevelJumper
// @description Provides jump buttons to the next lesson for leveling up (based on minirock / oltodosel autoScroller).
// @version 2.12.2
// @namespace esh
// @match https://*.duolingo.com/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
// 2.3: find a better solution to move to the first lesson of this level
// 2.4: take into concern if there are different levels in one row
// 2.4: better jumpMark more satisfying
// 2.5: set jumpMark to the crown-div, so it moves the old lessons out of view
// 2.5: jumpMark for Crown 3 does not work????
// 2.6: fix if jumpMark is the very first lesson
// 2.7: should work now without plus button
// 2.8: auto-scroll if you want, set it below at const AUTO_SCROLL
// 2.8.1: what happens, if some crowns do not exist, E.g. lessons level 4 and lessons level 2, but no lessons level 3 available
// I suppose it's just set to the lower level, in this example level 2.
// yeah, of course it broke the script ... but not any longer
// 2.9: changed from selecting the last element from the previous level to the first element from the first level and got rid of having maxed out lessons in view
// 2.10: added broken levels
// 2.11: added auto scroll feature
// 2.11.1: autoScroll = false fixed
// 2.11.2: works with different base languages than english
// 2.12: autoscroll is different for different learning languages
// 2.12.1: display disabled lessons at autoscroll selection
// 2.12.2: removed bug with checkpoints
// TODO: autoscroll every time you change language or come back from a lesson
// probably tackle checkJumpMark()
// TODO: clean up the code, move selectors to constants
// TODO: parse over url
// Tampermonkey access variables
// TODO: fix bug with anchors in URL ...
// TODO: fix bug with target's in URL
// not worth the time
// great, it happens, when you reload a page with a target in the url, so it's mostly a developer problem nothing more
// can fix it with location.url or something
let autoScroll = false;
let lang;
const CROWN = 'level-crown';
const CROWN_QS = '[data-test="' + CROWN + '"]';
const CROWN_IMG_CLASS = '_18sNN';
const CROWN_IMG_CLASS_QS = '[class~="' + CROWN_IMG_CLASS + '"]';
const SKILL_ICON = 'skill-icon';
const SKILL_ICON_QS = '[data-test="' + SKILL_ICON +'"]';
new MutationObserver(checkJumpMark).observe(document.body, {
childList: true,
subtree: true
});
function getConfig() {
lang = JSON.parse(localStorage.getItem('duo.state')).user.learningLanguage;
autoScroll = GM_getValue('autoScroll-'+lang, false);
// console.debug('Duolingo LevelJumper: get autoScroll = ' + autoScroll);
autoScroll === 'undefined' ? autoScroll = false : '';
autoScroll === 'false' ? autoScroll = false : '';
}
function setConfig(value) {
GM_setValue('autoScroll-'+lang, value);
// console.debug('Duolingo LevelJumper: set autoScroll to ' + value);
}
function checkJumpMark() {
//setConfig();
if (document.querySelectorAll('.GkDDe').length!=0) {
if (document.querySelector('#jumpMark')===null) {
if (document.querySelector('._3yqw1')!=null) addJumpMarks();
}
}
}
function getAnchorElement(elem) {
// if the element is the first in the tree
if (elem[0] === document.querySelector('[data-test="skill-tree"]').querySelector(CROWN_IMG_CLASS_QS)) {
return elem[0];
} else if (elem[0] === undefined) {
return null;
} else {
// first lesson element
let lesson = elem[0].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
let row = lesson.parentNode.previousSibling;
// sometimes the row is a checkpoint and so it turns out null
if (row === null) {
// totally understandable ;) go up, go to last tree section and to the last row there
row = lesson.parentNode.parentNode.parentNode.previousSibling.previousSibling.firstChild.lastChild;
}
// sometimes the previous row is a divider
// has to be CROWN_IMG_CLASS_QS to select possible lessons lvl 0
if (!row.querySelector(CROWN_IMG_CLASS_QS)) {
row = row.previousSibling;
}
// select the crown image as anchor element
// has to be CROWN_IMG_CLASS_QS to select possible lessons lvl 0
return row.querySelector(CROWN_IMG_CLASS_QS);
}
}
// toggles visibility
function togglePopout(id) {
let popout = document.getElementById(id);
popout.style.display === "none" ? popout.style.display = "block" : popout.style.display = "none";
}
function addJumpMarks() {
let level0 = document.querySelectorAll('img[src="//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg"]');
// has to be CROWN_IMG_CLASS_QS to select possible lessons lvl 0
let firstLesson = document.querySelector('[data-test="skill-tree"]').querySelector(CROWN_IMG_CLASS_QS);
let level = document.querySelectorAll(CROWN_QS);
let level1 = [];
let level2 = [];
let level3 = [];
let level4 = [];
let level5 = [];
let levelMissing = [];
for (let i=0;i<level.length;i++) {
switch(level[i].innerHTML) {
case '1':
isMaxedOut(level[i]) ? isBroken(level[i]) ? level5.push(level[i].previousSibling) : '' : level1.push(level[i].previousSibling);
break;
case '2':
isMaxedOut(level[i]) ? isBroken(level[i]) ? level5.push(level[i].previousSibling) : '' : level2.push(level[i].previousSibling);
break;
case '3':
isMaxedOut(level[i]) ? isBroken(level[i]) ? level5.push(level[i].previousSibling) : '' : level3.push(level[i].previousSibling);
break;
case '4':
isMaxedOut(level[i]) ? isBroken(level[i]) ? level5.push(level[i].previousSibling) : '' : level4.push(level[i].previousSibling);
break;
case '5':
isBroken(level[i]) ? level5.push(level[i].previousSibling) : '';
break;
}
}
/* levelMissing = [null, level1.length, level2.length, level3.length, level4.length, level5.length];
// if some level inbetween is missing
// E.g. level 3 is missing and we need it to anchor the first level 2
// so we replace level 3 with level 4
if (level5.length === 0) level5[0] = null;
if (level4.length === 0) level4 = level5;
if (level3.length === 0) level3 = level4;
if (level2.length === 0) level2 = level3;
if (level1.length === 0) level1 = level2;
// the last element of the higher level is used to anchor the level below
// E.g. First level 4 = last level 5
// if it doesn't exist, we have to the first element of the level below
if(level5[0] === null && level4[0] !== null) level5[0] = level4[0];
if(level4[0] === null && level3[0] !== null) level4[0] = level3[0];
if(level3[0] === null && level2[0] !== null) level3[0] = level2[0];
if(level2[0] === null && level1[0] !== null) level2[0] = level1[0];
// freaky selecting the previous row
*/
// level1 is the anchor element for new lessons
let anchor0 = null;
if(level0[0] !== null) anchor0 = getAnchorElement(level0);
// level2 is the anchor element for level 1 lessons
let anchor1 = null;
if(level1[0] !== null) anchor1 = getAnchorElement(level1);
// level3 is the anchor element for level 2 lessons
let anchor2 = null;
if(level2[0] !== null) anchor2 = getAnchorElement(level2);
// level4 is the anchor element for level 3 lessons
let anchor3 = null;
if(level3[0] !== null) anchor3 = getAnchorElement(level3);
// level5 is the anchor element for level 4 lessons
let anchor4 = null;
if(level4[0] !== null) anchor4 = getAnchorElement(level4);
let anchor5 = null;
if(level5[0] !== null) anchor5 = getAnchorElement(level5);
// _3NYLT instead of _3yqw1 (plus button)
let insertElement = document.querySelector('._3NYLT');
let jumpMark = document.createElement('div');
jumpMark.setAttribute('class','_3yqw1 np6Tv');
jumpMark.setAttribute('style','padding-top: 0.6rem; padding-right: 0.6rem; top: 148px;');
jumpMark.innerHTML = '<div id="jumpMark"></div>';
//console.group('Not overriding double id tags');
/* if(anchor0 !== null) {
// last level 1 element get the id = level0 for jumping to new lessons
let id = 'level0';
anchor0.id = id;
anchor0 === firstLesson? id = 'javascript:scroll(0,0);' : id = '#'+id;
jumpMark.innerHTML += // `<a href="#notDone"><img src="//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg"/></a>
`<div class="_2-dXY _1swBH" style="font-size: 14.84px;">
<a href="${id}">
<img alt="crown" class="_18sNN" src="//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg">
</a>
</div>`;
} */
// jumpMarks only if there are corresponding levels
if (anchor5 !== null) jumpMark.innerHTML += prepareJumpMark(anchor5, 5, firstLesson);
if (anchor4 !== null) jumpMark.innerHTML += prepareJumpMark(anchor4, 4, firstLesson);
if (anchor3 !== null) jumpMark.innerHTML += prepareJumpMark(anchor3, 3, firstLesson);
if (anchor2 !== null) jumpMark.innerHTML += prepareJumpMark(anchor2, 2, firstLesson);
if (anchor1 !== null) jumpMark.innerHTML += prepareJumpMark(anchor1, 1, firstLesson);
if (anchor0 !== null) jumpMark.innerHTML += prepareJumpMark(anchor0, 0, firstLesson);
jumpMark.innerHTML += `<div class="_2-dXY _1swBH" style="font-size: 14.84px;">
<a id="ljToggleConfig">
<img alt="crown" class="_18sNN" style="padding-left: 0.2rem; padding-top: 0.1rem;" src="//d35aaqx5ub95lt.cloudfront.net/images/gear.svg">
</a>
</div>`;
//console.groupEnd();
// beforebegin instead of afterend plus button
let config = document.createElement('div');
config.setAttribute('class','_3yqw1 np6Tv');
config.setAttribute('style','width: 300px; display: none;');
config.setAttribute('id','ljConfig');
let options = '<option value="false">--</option>';
options += anchor5 !== null ? '<option value="5">5</option>' : '<option value="5" disabled>5</option>';
options += anchor4 !== null ? '<option value="4">4</option>' : '<option value="4" disabled>4</option>';
options += anchor3 !== null ? '<option value="3">3</option>' : '<option value="3" disabled>3</option>';
options += anchor2 !== null ? '<option value="2">2</option>' : '<option value="2" disabled>2</option>';
options += anchor1 !== null ? '<option value="1">1</option>' : '<option value="1" disabled>1</option>';
options += anchor0 !== null ? '<option value="0">0</option>' : '<option value="0" disabled>0</option>';
config.innerHTML = `
<div class="_3uS_y eIZ_c" data-test="skill-popout" style="--margin:20px;">
<div class="_2O14B _2XlFZ _1v2Gj WCcVn" style="z-index: 1;">
<div class="_1KUxv _1GJUD _3lagd SSzTP"><div class="_1cv-y"></div>
<div class="QowCP">
<div class="_1m77f" style="text-align: center">AutoScroll
<select style="background-color: #ffc800; color: white;"name="levels" id="configLevels">
${options}
</select>
</div>
</div>
</div>
<div class="ite_X" style="left: calc(90% - 15px);">
<div class="_3p5e9 _3lagd SSzTP"></div>
</div>
</div>`;
insertElement.insertAdjacentElement('beforebegin',jumpMark);
insertElement.insertAdjacentElement('beforebegin',config);
let top = jumpMark.offsetHeight + 160;
console.debug('Duolingo LevelJumper: top = ' + top);
config.style.top = top + 'px';
getConfig();
//console.debug('Duolingo LevelJumper: BoundingHeight = ' + jumpMark.offsetHeight);
console.debug('Duolingo LevelJumper: AutoScroll = ' + autoScroll);
let configLevels = document.getElementById('configLevels')
configLevels.querySelector('[value="' + autoScroll + '"]').setAttribute('selected', true);
configLevels.addEventListener('change', function() {
setConfig(configLevels.options[configLevels.selectedIndex].value);
});
document.getElementById('ljToggleConfig').addEventListener('click', function () { togglePopout('ljConfig'); });
if (autoScroll) document.getElementById('myJumpTo' + autoScroll).click();
}
// returns true if element has the highest level
function isMaxedOut(element) {
// TODO move to constant
if (element.parentNode.parentNode.parentNode.querySelector('[href="//d35aaqx5ub95lt.cloudfront.net/images/9dc5f133240809ea530649bca27c7eca.svg"]')) {
//console.debug(element);
return true;
} else { return false; }
}
// returns true if element is broken
function isBroken(element) {
// TODO move to constant
if (element.parentNode.parentNode.previousSibling.querySelector('._1m7gz')) { return true; } else { return false; }
}
function prepareJumpMark(anchor, number, firstLesson) {
let innerHTML = '';
if(anchor !== null) {
// show the first level 'number' lesson
let id = 'level' + number;
// if there have two level the same jump mark, it uses the given one instead of overriding it
if(anchor.id !== '') {
console.debug('Duolingo LevelJumper: Id ' + anchor.id + ' already exists');
id = anchor.id;
} else {
anchor.id = id;
}
anchor === firstLesson? id = 'javascript:scroll(0,0);' : id = '#'+id;
let crownImage;
let crownClass;
let crownNumber = number;
if (number === 0) {
// grey crown
crownImage = '//d35aaqx5ub95lt.cloudfront.net/images/fafe27c9c1efa486f49f87a3d691a66e.svg';
crownNumber = '';
} else {
// golden crown
crownImage = '//d35aaqx5ub95lt.cloudfront.net/images/b3ede3d53c932ee30d981064671c8032.svg';
}
if (number !== 5) {
crownClass = "GkDDe";
} else {
crownClass = "GkDDe _1m7gz";
crownNumber = '';
}
innerHTML =
`<div class="_2-dXY _1swBH" style="font-size: 14.84px;">
<a id="myJumpTo${number}" href="${id}">
<img alt="crown" class="_18sNN" src="${crownImage}">
<div class="${crownClass}" data-test="level-crown">${crownNumber}</div>
</a>
</div>`;
}
return innerHTML;
}