Greasy Fork is available in English.

Wanikani Lesson Tab Transmutation

Change the order of lesson tabs

// ==UserScript==
// @name        Wanikani Lesson Tab Transmutation
// @namespace   mempo
// @description Change the order of lesson tabs
// @include     https://www.wanikani.com/lesson/session
// @version     1.2
// @grant       none
// @run-at      document-end
// ==/UserScript==

var settingsKanji = "";
var settingsVocab = "";

var vocReorderReadingOption = false;

//ATTENTION: It's only possible to choose one of the options below.
//If you select multiple, only the last one will work
var kanReorderExamplesOption = true;
var kanReorderReadingOption  = false;
var kanReorderExamplesReadingOption  = false;

console.log('START OF WLTT');


var intervalFunction  = setInterval(function(){
  if($('#loading-screen').css('display') !== 'none'){
    console.log('WLTT loading...');
  }else{
    console.log("WLTT LOADED");
    clearInterval(intervalFunction);
  
    WLTTreorder();
    $.jStorage.listenKeyChange('l/currentLesson', WLTTreorder);
    
    addSettings();    
    addButtons();
    addStyle(cssModalWindow);
    fetchSettings();

  } 
},250);

var WLTTreorder = function(){
  
    if($.jStorage.get('l/currentLesson').kan){ //kanji
      //console.log('/// the current lesson is kanji');

      //radical examples meaning reading
      if(kanReorderExamplesOption){
         kanReorderExamples();
      }
      
      //radical reading meaning examples
      if(kanReorderReadingOption){
         kanReorderReading();
      }
      
      //radical examples reading meaning
      if(kanReorderExamplesReadingOption){
         kanReorderExamplesReading();
      }

    }else{//vocab
      //console.log('/// the current lesson is vocab');
      
      //breakdown reading meaning
      if(vocReorderReadingOption){
         vocReorderReading();
      }

    }
}



var kanReorderExamples = function(){
        $('#supplement-nav li:nth-child(2)')[0].innerHTML = "Examples";
        $('#supplement-nav li:nth-child(3)')[0].innerHTML = "Meaning";
        $('#supplement-nav li:nth-child(4)')[0].innerHTML = "Reading";
        $('#supplement-kan-meaning').appendTo('#supplement-kan');
        $('#supplement-kan-reading').appendTo('#supplement-kan');
}

var kanReorderReading = function(){
        $('#supplement-nav li:nth-child(2)')[0].innerHTML = "Reading";
        $('#supplement-nav li:nth-child(3)')[0].innerHTML = "Meaning";
        $('#supplement-kan-meaning').appendTo('#supplement-kan');
        $('#supplement-kan-related-vocabulary').appendTo('#supplement-kan');
}

var kanReorderExamplesReading = function(){
        $('#supplement-nav li:nth-child(2)')[0].innerHTML = "Examples";
        $('#supplement-nav li:nth-child(3)')[0].innerHTML = "Reading";
        $('#supplement-nav li:nth-child(4)')[0].innerHTML = "Meaning";
        $('#supplement-kan-reading').appendTo('#supplement-kan');
        $('#supplement-kan-meaning').appendTo('#supplement-kan');
}

var vocReorderReading = function(){
        $('#supplement-nav li:nth-child(2)')[0].innerHTML = "Reading";
        $('#supplement-nav li:nth-child(3)')[0].innerHTML = "Meaning";
        $('#supplement-voc-meaning').appendTo('#supplement-voc');
}

var cssModalWindow = ".white_content {" +
	                    "display: none;"+
                          "position: absolute; "+
                          "top: 25%;"+
                          "left: 25%;"+
                          "width: 50%;"+
                          "height: 75%;"+
                          "padding: 16px;"+
                          "background-color: white;"+
                          "z-index:9002;"+
                          "letter-spacing: 0;" +
                          "overflow: auto;";

var htmlModalWindow = '' +
  '<h1>Settings</h1>' +
  '<form action="#" method="get"> ' +
  '  <h2>Kanji</h2>' +
   ' <input id="k_option1" name="kanji_option" value="0" type="radio">' +
    '<label for="k_option1">None</label> <br>' +
    '<input id="k_option2" name="kanji_option" value="1" type="radio">' +
    '<label for="k_option2">Radical examples meaning reading (default) </label>  <br>' +
    '<input id="k_option3" name="kanji_option" value="2" type="radio">' +
    '<label for="k_option3">Radical reading meaning examples </label>  <br>' +
    '<input id="k_option4" name="kanji_option" value="3" type="radio">' +
    '<label for="k_option4">Radical examples reading meaning</label>  <br>' +
    '<h2>Vocab</h2>' +
    '<input id="v_option1" name="vocab_option" value="0" type="radio">' +
    '<label for="v_option1">None</label> <br>' +
    '<input id="v_option2" name="vocab_option" value="1" type="radio">' +
    '<label for="v_option2">Breakdown reading meaning</label> <br /> <br />' +
  '</form>'+
   ' <div id="btn_submit">Save Settings</div>'+
    '<div id="settings_saved" style="display: none; padding: 5px;">Settings saved!</div>';
    

var addButtons = function () {
    $("<div />", {
        id : "WLTT_button",
        title : "Settings: Wanikani Lesson Tab Transmutation",
    })  .text("WLTT Settings")
        .css({"background-color":"#738994"})
        .css({"opacity":"1"})
        .css({"display":"inline-block"})
        .css({"font-size":"0.8125em"})
        .css({"color":"#FFF"})
        .css({"cursor":"pointer"})
        .css({"padding":"10px"})
        .css({"vertical-align":"bottom"})
        .on("click", showSettings)
        .prependTo("footer");
};

var addSettings = function(){
      //<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
      //<div id="fade" class="black_overlay"></div>
      
      $("<div />", {
        id : "light",
        class : "white_content",
      }).appendTo("#lessons");
      
      $("#light").html(htmlModalWindow);
      $("#btn_submit")
            .on("click", saveSettings)
            .css({"background-color":"#738994"})
            .css({"display":"inline"})
            .css({"color":"white"})
            .css({"padding":"5px"})
            .css({"border-radius":"5px"});
      
      $("<div />", {
        id : "fade",
        class : "black_overlay",
      })
        .css({"display":"none"})
        .css({"position":"fixed"})
        .css({"top":"0%"})
        .css({"left":"0%"})
        .css({"width":"100%"})
        .css({"height":"100%"})
        .css({"background-color":"black"})
        .css({"z-index":"9001"})
        .css({"opacity":"0.8"})
        .css({"-moz-opacity":"0.8"})
        .css({"filter":"alpha(opacity=80)"})
        .on("click", hideSettings)
        .appendTo("#lessons");
}

var showSettings = function () {
      document.getElementById('light').style.display='block';
      document.getElementById('fade').style.display='block';
}

var hideSettings = function () {
      document.getElementById('light').style.display='none';
      document.getElementById('fade').style.display='none';
      document.getElementById('settings_saved').style.display='none';

}

var fetchSettings = function() {
      settingsKanji = $.jStorage.get('WLTT_Settings_Kanji');
      settingsVocab = $.jStorage.get('WLTT_Settings_Vocab');
      
      refreshOrdering();
      
      if(settingsKanji){
            switch(settingsKanji){
                  case "0": $("#k_option1").prop("checked", true); break;
                  case "1": $("#k_option2").prop("checked", true); break;
                  case "2": $("#k_option3").prop("checked", true); break;
                  case "3": $("#k_option4").prop("checked", true); break;
            }
            switch(settingsVocab){
                  case "0": $("#v_option1").prop("checked", true); break;
                  case "1": $("#v_option2").prop("checked", true); break;
            }
            
      }else{ // init
           
           //Default option: KanjiOption1 && VocabOption0
           $.jStorage.set('WLTT_Settings_Kanji',"1");
           $.jStorage.set('WLTT_Settings_Vocab',"0");
           settingsKanji = "1";
           settingsVocab = "0";
           $("#k_option2").prop("checked", true); 
           $("#v_option1").prop("checked", true); 
           
      }
}

var saveSettings = function() {
      console.log('WLTT: Settings saved!');
      settingsKanji = $('input[name=kanji_option]:checked').val();
      settingsVocab = $('input[name=vocab_option]:checked').val();
      
      $.jStorage.set('WLTT_Settings_Kanji',settingsKanji);
      $.jStorage.set('WLTT_Settings_Vocab',settingsVocab);
      
      refreshOrdering();
      
      $("#settings_saved").css('display', "block");
}

var refreshOrdering = function() {
      switch(settingsKanji){
                  case "0":
                       kanReorderExamplesOption = false;
                       kanReorderReadingOption  = false;
                       kanReorderExamplesReadingOption  = false; break;
                  case "1": 
                       kanReorderExamplesOption = true;
                       kanReorderReadingOption  = false;
                       kanReorderExamplesReadingOption  = false; break;
                  case "2": 
                       kanReorderExamplesOption = false;
                       kanReorderReadingOption  = true;
                       kanReorderExamplesReadingOption  = false; break;
                  case "3": 
                       kanReorderExamplesOption = false;
                       kanReorderReadingOption  = false;
                       kanReorderExamplesReadingOption  = true; break;
            }
            switch(settingsVocab){
                  case "0": vocReorderReadingOption = false; break;
                  case "1": vocReorderReadingOption = true; break;
            }
      
      WLTTreorder();
}

function addStyle(aCss) {
  var head, style;
  head = document.getElementsByTagName('head')[0];
  if (head) {
    style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.textContent = aCss;
    head.appendChild(style);
    return style;
  }
  return null;
}



// RESEARCH CODE - for educational purposes

//////////////// ATTEMPT #1
      //Moves content, but internal counter li.active.data(index) jumps to 2
      //Therefore, meaning is skipped altogether dispite index===1
      //Manually selecting tabs really fucks shit up.
      //$('#supplement-nav li:nth-child(3)').data("index",1);
      //$('#supplement-nav li:nth-child(2)').data("index",2);
//////////////// ATTEMPT #2
      /*
      //moves needle out of order
      //completes cycle
      //shows meaning -> reading
      $('#supplement-nav li:nth-child(3)').attr('data-index', 1); 
      $('#supplement-nav li:nth-child(2)').attr('data-index', 2);
      */
//////////////// ATTEMPT #3
      /* 
      //Works, but fucks up page content every other item
      //Cause unknown
      var meaning = $('#supplement-voc-meaning').html();
      var reading = $('#supplement-voc-reading').html();

      $('#supplement-voc-reading').html(meaning);
      $('#supplement-voc-meaning').html(reading);

      $('#supplement-nav li:nth-child(2)')[0].innerHTML = "Reading";
      $('#supplement-nav li:nth-child(3)')[0].innerHTML = "Meaning";
      */