☰

WaniKani Lesson User Synonyms

adds User Synonyms to the lesson page. adds User Synonyms and Notes to unlearned item pages.

  1. // ==UserScript==
  2. // @name          WaniKani Lesson User Synonyms
  3. // @namespace     https://www.wanikani.com
  4. // @description   adds User Synonyms to the lesson page. adds User Synonyms and Notes to unlearned item pages.
  5. // @version       0.1.2
  6. // @include       https://www.wanikani.com/lesson/session
  7. // @include       https://www.wanikani.com/*radicals/*
  8. // @include       https://www.wanikani.com/*kanji/*
  9. // @include       https://www.wanikani.com/*vocabulary/*
  10. // @run-at        document-end
  11. // @grant         none
  12. // ==/UserScript==
  13.  
  14. /*jslint browser: true, plusplus: true*/
  15. /*global $, console, Notes */
  16.  
  17. /*
  18. A large portion of this code has been extracted from the WaniKani Review page.
  19. It has been reformatted for improved readability and slightly edited.
  20. Synonyms and notes cannot be read from the WK server until lesson quiz completion, so they are stored in jStorage.
  21. Entries should be auto-deleted from jStorage after lesson quiz completion as they can then be retrieved from the WK server.
  22. jStorage keys need an expiration TTL so they are auto-deleted if they are lost track of.
  23. For example if you make a User Synonym and then complete the lesson on another browser or computer it would not be deleted on completion.
  24. The TTL is set to renew on viewing as well as changing Notes and User Synonyms.
  25. With the default set below data will be deleted after 180-days of not looking at it.
  26. It will still exist on the WK server, but will be invisible until after lesson quiz completion.
  27. jStorage has a ~5MB size limit for WK on chrome and firefox
  28. If you really want to disable TTL for this UserScript, set keyTTL=0
  29. */
  30.  
  31. (function () {
  32.     'use strict';
  33.  
  34.     var managedNotes = [], UserSynonyms = {},
  35.         keyTTL = 180 * 24 * 60 * 60 * 1000; // expire 180-days after last read
  36.  
  37.     function addManagedNote(key) {
  38.         managedNotes = $.grep(managedNotes, function (item) {
  39.             return item !== key;
  40.         });
  41.         managedNotes.push(key);
  42.     }
  43.     function flushManagedNotes() {
  44.         managedNotes = [];
  45.     }
  46.     function checkManagedNote(key) {
  47.         return managedNotes.indexOf(key) >= 0;
  48.     }
  49.     function getTypeChar(item) {
  50.         var type = 'x';
  51.         if (item.rad) {
  52.             type = 'r';
  53.         } else if (item.kan) {
  54.             type = 'k';
  55.         } else if (item.voc) {
  56.             type = 'v';
  57.         }
  58.         return type;
  59.     }
  60.     function getSynKeyItem(item) {
  61.         return 'l/syn/' + getTypeChar(item) + item.id;
  62.     }
  63.     function getSynKey(type, id) {
  64.         return 'l/syn/' + type.substring(0, 1) + id;
  65.     }
  66.     function getSynList(type, id) {
  67.         var synKey = getSynKey(type, id);
  68.         $.jStorage.setTTL(synKey, keyTTL); // extend TTL on read. setting TTL on non-existant keys seems fine.
  69.         return $.jStorage.get(synKey) || [];
  70.     }
  71.     function getSynListItem(item) {
  72.         var synKey = getSynKeyItem(item);
  73.         $.jStorage.setTTL(synKey, keyTTL); // extend TTL on read. setting TTL on non-existant keys seems fine.
  74.         return $.jStorage.get(synKey) || [];
  75.     }
  76.     function setSynList(type, id, syn, add) {
  77.         var synKey, synList;
  78.         synKey = getSynKey(type, id);
  79.         synList = $.jStorage.get(synKey) || [];
  80.         synList = $.grep(synList, function (item) {
  81.             return item !== syn;
  82.         });
  83.         if (add) {
  84.             synList.push(syn);
  85.         }
  86.         if (synList.length > 0) {
  87.             $.jStorage.set(synKey, synList);
  88.             $.jStorage.setTTL(synKey, keyTTL);
  89.         } else {
  90.             $.jStorage.deleteKey(synKey);
  91.         }
  92.     }
  93.     UserSynonyms.load = function (itemType, userSynStr, itemId, element) {
  94.         UserSynonyms.generateList(element, userSynStr);
  95.         UserSynonyms.addOption(itemType, itemId);
  96.         UserSynonyms.removeOption(itemType, itemId);
  97.     };
  98.     UserSynonyms.addOption = function (itemType, itemId) {
  99.         var btnAdd, wrapper;
  100.         btnAdd = $('.user-synonyms-add-btn');
  101.         wrapper = UserSynonyms.wrapper();
  102.         btnAdd.off('click');
  103.         btnAdd.on('click', function () {
  104.             var inputBtnRemove, inputBtnAdd, inputLi, inputForm, inputInput;
  105.             $(this).hide();
  106.             inputLi = $('<li></li>', {
  107.                 'class': 'user-synonyms-add-form'
  108.             }).appendTo(wrapper);
  109.             inputForm = $('<form></form>').appendTo(inputLi);
  110.             inputInput = $('<input></input>', {
  111.                 type: 'text',
  112.                 autocapitalize: 'off',
  113.                 autocomplete: 'off',
  114.                 autocorrect: 'off'
  115.             }).appendTo(inputForm).focus();
  116.             inputInput.keyup(function (event) { event.stopPropagation(); }); // prevent hotkeys while typing
  117.             inputBtnAdd = $('<button></button>', {
  118.                 type: 'submit',
  119.                 text: 'Add'
  120.             }).appendTo(inputForm);
  121.             inputBtnRemove = $('<button></button>', {
  122.                 type: 'button',
  123.                 html: '<i class="icon-remove"></i>'
  124.             }).appendTo(inputForm);
  125.             inputBtnAdd.off('click');
  126.             inputBtnAdd.on('click', function (event) {
  127.                 var newSynText, synLiElems, newLen;
  128.                 event.preventDefault();
  129.                 event.stopPropagation();
  130.                 newSynText = inputInput.val();
  131.                 // fake accept duplicate, but don't send to server (server doesn't check?)
  132.                 if (getSynList(itemType, itemId).indexOf(newSynText.toLowerCase()) >= 0) {
  133.                     // delay for key events to be caught
  134.                     setTimeout(function () {
  135.                         inputLi.remove();
  136.                         btnAdd.show();
  137.                     }, 100);
  138.                     return;
  139.                 }
  140.                 synLiElems = wrapper.find('li');
  141.                 newLen = newSynText.length + synLiElems.slice(0, synLiElems.size() - 1).text().length;
  142.                 if (newLen > 255) {
  143.                     inputBtnAdd.attr('disabled', 'disabled').text('Exceeded Synonym Limit');
  144.                 } else if (newSynText.trim().length !== 0) {
  145.                     $.ajax({
  146.                         type: 'POST',
  147.                         url: '/user_synonym/create/',
  148.                         contentType: 'application/json',
  149.                         data: JSON.stringify({
  150.                             item_type: itemType,
  151.                             item_id: itemId,
  152.                             synonym: newSynText
  153.                         })
  154.                     }).success(function (data) {
  155.                         var newSynElem;
  156.                         setSynList(itemType, itemId, data.user_synonym, true);
  157.                         newSynElem = $('<li></li>', {
  158.                             text: data.user_synonym
  159.                         });
  160.                         wrapper.find('li:last').prev().before(newSynElem);
  161.                         inputLi.remove();
  162.                         btnAdd.show();
  163.                         UserSynonyms.removeOption(itemType, itemId);
  164.                     });
  165.                 }
  166.             });
  167.             inputBtnRemove.off('click');
  168.             inputBtnRemove.on('click', function (event) {
  169.                 event.preventDefault();
  170.                 inputLi.remove();
  171.                 btnAdd.show();
  172.             });
  173.         });
  174.     };
  175.     UserSynonyms.generateList = function (element, userSynStr) {
  176.         var wrapper, i, userSyn;
  177.         $('.user-synonyms ul').remove();
  178.         element.append($('<ul></ul>'));
  179.         wrapper = UserSynonyms.wrapper();
  180.         if (!userSynStr) {
  181.             userSynStr = '';
  182.         }
  183.         userSyn = UserSynonyms.stringToArray(userSynStr);
  184.         for (i = 0; i < userSyn.length; i++) {
  185.             $('<li></li>', {
  186.                 text: userSyn[i],
  187.                 title: 'Click to remove synonym'
  188.             }).appendTo(wrapper);
  189.         }
  190.         $('<li></li>', {
  191.             html: '&nbsp;',
  192.             title: 'Add your own synonym',
  193.             'class': 'user-synonyms-add-btn'
  194.         }).appendTo(wrapper);
  195.     };
  196.     UserSynonyms.removeOption = function (itemType, itemId) {
  197.         var synElems = UserSynonyms.wrapper().find('li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form)');
  198.         synElems.off('click');
  199.         synElems.on('click', function () {
  200.             var clickedSynElem = $(this);
  201.             $.ajax({
  202.                 type: 'DELETE',
  203.                 url: '/user_synonym/destroy/',
  204.                 contentType: 'application/json',
  205.                 data: JSON.stringify({
  206.                     item_type: itemType,
  207.                     item_id: itemId,
  208.                     synonym: clickedSynElem.text()
  209.                 })
  210.             }).success(function (data) {
  211.                 setSynList(itemType, itemId, data.user_synonym_destroyed, false);
  212.                 clickedSynElem.remove();
  213.             });
  214.         });
  215.     };
  216.     UserSynonyms.stringToArray = function (str) {
  217.         if (str.length === 0) {
  218.             return [];
  219.         }
  220.         return str.split(',');
  221.     };
  222.     UserSynonyms.wrapper = function () {
  223.         return $('.user-synonyms ul');
  224.     };
  225.     // from: https://gist.githubusercontent.com/arantius/3123124/raw/grant-none-shim.js
  226.     function addStyle(aCss) {
  227.         var head, style;
  228.         head = document.getElementsByTagName('head')[0];
  229.         if (head) {
  230.             style = document.createElement('style');
  231.             style.setAttribute('type', 'text/css');
  232.             style.textContent = aCss;
  233.             head.appendChild(style);
  234.             return style;
  235.         }
  236.         return null;
  237.     }
  238.     function loadNoteHooks() {
  239.         var add, keyName;
  240.         if (typeof Notes === 'object' && typeof Notes.add === 'function') {
  241.             add = Notes.add;
  242.             Notes.add = function (type, readMeaning, id, note, container) {
  243.                 keyName = 'l/note/' + type.substring(0, 3) + '/' + readMeaning.substring(0, 1) + '/' + id;
  244.                 addManagedNote(keyName); // add to managed list
  245.                 $.jStorage.setTTL(keyName, keyTTL); // update TTL on read
  246.                 add(type, readMeaning, id, note, container);
  247.             };
  248.         }
  249.         $.jStorage.listenKeyChange('*', function (key, action) {
  250.             // only for keys this page is managing. otherwise it messes with other tabs and extends TTL for learned items.
  251.             if (action === 'updated' && key.substr(0, 7) === 'l/note/' && checkManagedNote(key)) {
  252.                 setTimeout(function () {
  253.                     if ($.jStorage.get(key)) {
  254.                         $.jStorage.setTTL(key, keyTTL); // update TTL on write
  255.                         console.log('set TTL for key ', key);
  256.                     } else {
  257.                         // notes code writes empty keys if you delete a note. cleanup.
  258.                         $.jStorage.deleteKey(key);
  259.                         console.log('deleted empty key ', key);
  260.                     }
  261.                 }, 1000);
  262.             }
  263.         });
  264.     }
  265.     if (document.location.pathname === '/lesson/session') {
  266.         // this is a lesson page
  267.         loadNoteHooks();
  268.  
  269.         // add base display elements
  270.         $('#supplement-rad-name-mne').after('<h2>User Synonyms</h2><section class="user-synonyms user-synonyms-radical"></section>');
  271.         $('#supplement-kan-meaning .col1 div').after('<h2>User Synonyms</h2><section class="user-synonyms user-synonyms-kanji"></section>');
  272.         $('#supplement-voc-synonyms').after('<h2>User Synonyms</h2><section class="user-synonyms user-synonyms-vocabulary"></section>');
  273.  
  274.         // update the data when looking at different lessons
  275.         $.jStorage.listenKeyChange('l/currentLesson', function (key, action) {
  276.             if (action === 'updated') {
  277.                 // this listenKeyChange should always get registered before the main application's
  278.                 // so it should get called first and then Notes.add hook after to register new notes
  279.                 flushManagedNotes();
  280.                 var currentLesson = $.jStorage.get(key);
  281.                 if (currentLesson.rad) {
  282.                     UserSynonyms.load('radical', getSynListItem(currentLesson).join(), currentLesson.id, $('.user-synonyms-radical'));
  283.                 } else if (currentLesson.kan) {
  284.                     UserSynonyms.load('kanji', getSynListItem(currentLesson).join(), currentLesson.id, $('.user-synonyms-kanji'));
  285.                 } else if (currentLesson.voc) {
  286.                     UserSynonyms.load('vocabulary', getSynListItem(currentLesson).join(), currentLesson.id, $('.user-synonyms-vocabulary'));
  287.                 }
  288.             }
  289.         });
  290.         // copy user synonyms into the answers list for quiz
  291.         $.jStorage.listenKeyChange('l/currentQuizItem', function (key, action) {
  292.             if (action === 'updated') {
  293.                 var currentQuizItem = $.jStorage.get(key);
  294.                 if (!currentQuizItem.synAdded) {
  295.                     currentQuizItem.synAdded = true;
  296.                     currentQuizItem.en = currentQuizItem.en.concat(getSynListItem(currentQuizItem));
  297.                     $.jStorage.set(key, currentQuizItem);
  298.                 }
  299.             }
  300.         });
  301.         // watch for completed items. completed items should be safe to delete local storage...
  302.         (function () {
  303.             var lastCompleted = 0;
  304.             $.jStorage.listenKeyChange('l/count/completed', function (key, action) {
  305.                 var completed, currentQuizItem, synKey;
  306.                 if (action === 'updated') {
  307.                     completed = $.jStorage.get(key);
  308.                     if (completed > lastCompleted) {
  309.                         currentQuizItem = $.jStorage.get('l/currentQuizItem');
  310.                         synKey = getSynKeyItem(currentQuizItem);
  311.                         $.jStorage.deleteKey(synKey); // harmless to delete non-existant keys
  312.                         // delete keys for notes
  313.                         if (currentQuizItem.rad) {
  314.                             $.jStorage.deleteKey('l/note/rad/m/' + currentQuizItem.id);
  315.                         } else if (currentQuizItem.kan) {
  316.                             $.jStorage.deleteKey('l/note/kan/m/' + currentQuizItem.id);
  317.                             $.jStorage.deleteKey('l/note/kan/r/' + currentQuizItem.id);
  318.                         } else if (currentQuizItem.voc) {
  319.                             $.jStorage.deleteKey('l/note/voc/m/' + currentQuizItem.id);
  320.                             $.jStorage.deleteKey('l/note/voc/r/' + currentQuizItem.id);
  321.                         }
  322.                     }
  323.                     lastCompleted = completed;
  324.                 }
  325.             });
  326.         }());
  327.         // this is style extracted from the wanikani review page
  328.         addStyle('\n' +
  329.             '.user-synonyms ul {\n' +
  330.             '    margin: 0;\n' +
  331.             '    padding: 0;\n' +
  332.             '}\n' +
  333.             '.user-synonyms ul li {\n' +
  334.             '    display: inline-block;\n' +
  335.             '    line-height: 1.5em;\n' +
  336.             '}\n' +
  337.             '.user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form) {\n' +
  338.             '    cursor: pointer;\n' +
  339.             '    vertical-align: middle;\n' +
  340.             '}\n' +
  341.             '.user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):after {\n' +
  342.             '    background-color: #EEEEEE;\n' +
  343.             '    border-radius: 3px;\n' +
  344.             '    color: #A2A2A2;\n' +
  345.             '    content: "\\f00d";\n' +
  346.             '    font-family: FontAwesome;\n' +
  347.             '    font-size: 0.5em;\n' +
  348.             '    margin-left: 0.5em;\n' +
  349.             '    margin-right: 1.5em;\n' +
  350.             '    padding: 0.15em 0.3em;\n' +
  351.             '    transition: background-color 0.3s linear 0s, color 0.3s linear 0s;\n' +
  352.             '    vertical-align: middle;\n' +
  353.             '}\n' +
  354.             '.user-synonyms ul li:hover:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):after {\n' +
  355.             '    background-color: #FF0033;\n' +
  356.             '    color: #FFFFFF;\n' +
  357.             '}\n' +
  358.             '.user-synonyms ul li.user-synonyms-add-btn {\n' +
  359.             '    cursor: pointer;\n' +
  360.             '    display: block;\n' +
  361.             '    font-size: 0.75em;\n' +
  362.             '    margin-top: 0.25em;\n' +
  363.             '}\n' +
  364.             '.user-synonyms ul li.user-synonyms-add-btn:after {\n' +
  365.             '    content: "";\n' +
  366.             '}\n' +
  367.             '.user-synonyms ul li.user-synonyms-add-btn:before {\n' +
  368.             '    background-color: #EEEEEE;\n' +
  369.             '    border-radius: 3px;\n' +
  370.             '    color: #A2A2A2;\n' +
  371.             '    content: "+ ADD SYNONYM";\n' +
  372.             '    margin-right: 0.5em;\n' +
  373.             '    padding: 0.15em 0.3em;\n' +
  374.             '    transition: background-color 0.3s linear 0s, color 0.3s linear 0s;\n' +
  375.             '}\n' +
  376.             '.user-synonyms ul li.user-synonyms-add-btn:hover:before {\n' +
  377.             '    background-color: #A2A2A2;\n' +
  378.             '    color: #FFFFFF;\n' +
  379.             '}\n' +
  380.             '.user-synonyms ul li.user-synonyms-add-form {\n' +
  381.             '    display: block;\n' +
  382.             '}\n' +
  383.             '.user-synonyms ul li.user-synonyms-add-form form {\n' +
  384.             '    display: block;\n' +
  385.             '    margin: 0;\n' +
  386.             '    padding: 0;\n' +
  387.             '}\n' +
  388.             '.user-synonyms ul li.user-synonyms-add-form form input, .user-synonyms ul li.user-synonyms-add-form form button {\n' +
  389.             '    line-height: 1em;\n' +
  390.             '}\n' +
  391.             '.user-synonyms ul li.user-synonyms-add-form form input {\n' +
  392.             '    -moz-border-bottom-colors: none;\n' +
  393.             '    -moz-border-left-colors: none;\n' +
  394.             '    -moz-border-right-colors: none;\n' +
  395.             '    -moz-border-top-colors: none;\n' +
  396.             '    border-color: -moz-use-text-color -moz-use-text-color #A2A2A2;\n' +
  397.             '    border-image: none;\n' +
  398.             '    border-style: none none solid;\n' +
  399.             '    border-width: 0 0 1px;\n' +
  400.             '    display: block;\n' +
  401.             '    margin: 0;\n' +
  402.             '    outline: medium none;\n' +
  403.             '    padding: 0;\n' +
  404.             '    width: 100%;\n' +
  405.             '}\n' +
  406.             '.user-synonyms ul li.user-synonyms-add-form form button {\n' +
  407.             '    background-color: #EEEEEE;\n' +
  408.             '    border: medium none;\n' +
  409.             '    border-radius: 3px;\n' +
  410.             '    color: #A2A2A2;\n' +
  411.             '    font-size: 0.75em;\n' +
  412.             '    outline: medium none;\n' +
  413.             '    transition: background-color 0.3s linear 0s, color 0.3s linear 0s;\n' +
  414.             '}\n' +
  415.             '.user-synonyms ul li.user-synonyms-add-form form button:hover {\n' +
  416.             '    background-color: #A2A2A2;\n' +
  417.             '    color: #FFFFFF;\n' +
  418.             '}\n' +
  419.             '.user-synonyms ul li.user-synonyms-add-form form button:disabled {\n' +
  420.             '    background-color: #FF0000;\n' +
  421.             '    color: #FFFFFF;\n' +
  422.             '    cursor: default;\n' +
  423.             '}\n' +
  424.             '.user-synonyms ul li.user-synonyms-add-form form button[type="button"] {\n' +
  425.             '    margin-left: 0.25em;\n' +
  426.             '    padding-left: 0.3em;\n' +
  427.             '    padding-right: 0.3em;\n' +
  428.             '}\n' +
  429.             '.user-synonyms ul li.user-synonyms-add-form form button[type="button"]:hover {\n' +
  430.             '    background-color: #FF0000;\n' +
  431.             '    color: #FFFFFF;\n' +
  432.             '}\n');
  433.     } else {
  434.         // this is an item page
  435.         (function () { // add a hide event to jQuery's hide function
  436.             var hide = $.fn.hide;
  437.             $.fn.hide = function () {
  438.                 var ret = hide.apply(this, arguments);
  439.                 this.trigger('hide');
  440.                 return ret;
  441.             };
  442.         }());
  443.         (function () {
  444.             var match, itemInfo = {}, text, script = $('div script:last-of-type');
  445.             if (script) {
  446.                 text = script.html();
  447.                 match = text.match("UserSynonyms.load\\('(.*)', (.*), (.*), (.*)\\);");
  448.                 if (match) {
  449.                     itemInfo.type = match[1];
  450.                     itemInfo.id = match[3];
  451.                     itemInfo.learned = text.match('Stats for item does not exist') ? false : true;
  452.                 }
  453.             }
  454.             if (itemInfo && itemInfo.learned === false) {
  455.                 // this is an unlearned/lesson item
  456.                 loadNoteHooks();
  457.                 $('.user-synonyms').one('hide', function () { // trigger right after elements get hidden
  458.                     $('#note-meaning, #note-reading, .user-synonyms').show();
  459.                     UserSynonyms.load(itemInfo.type, getSynList(itemInfo.type, itemInfo.id).join(), itemInfo.id, $('.user-synonyms'));
  460.                     Notes.add(itemInfo.type, 'meaning', itemInfo.id, $.jStorage.get('l/note/' + itemInfo.type.substring(0, 3) + '/m/' + itemInfo.id), $('#note-meaning'));
  461.                     if (itemInfo.type === 'kanji' || itemInfo.type === 'vocabulary') {
  462.                         Notes.add(itemInfo.type, 'reading', itemInfo.id, $.jStorage.get('l/note/' + itemInfo.type.substring(0, 3) + '/r/' + itemInfo.id), $('#note-reading'));
  463.                     }
  464.                 });
  465.                 // this is a workaround for the hide event not getting triggered on chrome (due to a race condition)
  466.                 setTimeout(function () {
  467.                     if( $('.user-synonyms').is(':hidden') ) {
  468.                         $('.user-synonyms').trigger('hide');
  469.                     }
  470.                 }, 100);
  471.             }
  472.         }());
  473.     }
  474.     console.log('WaniKani Lesson User Synonyms: script load end');
  475. }());