☰

WaniKani Markdown Notes

Allows you to write Markdown in the notes, which will be rendered as HTML when the page loads.

  1. // ==UserScript==
  2. // @name         WaniKani Markdown Notes
  3. // @namespace    rfindley
  4. // @description  Allows you to write Markdown in the notes, which will be rendered as HTML when the page loads.
  5. // @version      1.4
  6. // @require      https://cdnjs.cloudflare.com/ajax/libs/showdown/1.3.0/showdown.min.js
  7. // @include      https://www.wanikani.com/level*
  8. // @include      https://www.wanikani.com/radical*
  9. // @include      https://www.wanikani.com/kanji*
  10. // @include      https://www.wanikani.com/vocabulary*
  11. // @include      https://www.wanikani.com/review/session*
  12. // @copyright    2013, Jeshua
  13. // @run-at       document-end
  14. // @grant        none
  15. // ==/UserScript==
  16.  
  17. wkmdnotes = {};
  18.  
  19. (function() {
  20.     
  21.     /**
  22.     * Render the given markdown text.
  23.     */
  24.     function render(text) {
  25.         // Do some custom replacements.
  26.         text = text.replace(/#kan#/g, '<span class="kanji-highlight highlight-kanji" rel="tooltip" data-original-title="Kanji">');
  27.         text = text.replace(/#\/kan#/g, '</span>');
  28.  
  29.         text = text.replace(/#rad#/g, '<span class="radical-highlight highlight-radical" rel="tooltip" data-original-title="Radical">');
  30.         text = text.replace(/#\/rad#/g, '</span>');
  31.  
  32.         text = text.replace(/#read#/g, '<span class="reading-highlight highlight-reading" rel="tooltip" data-original-title="Reading">');
  33.         text = text.replace(/#\/read#/g, '</span>');
  34.  
  35.         text = text.replace(/#voc#/g, '<span class="vocabulary-highlight highlight-vocabulary" rel="tooltip" data-original-title="Vocabulary">');
  36.         text = text.replace(/#\/voc#/g, '</span>');
  37.  
  38.         // Render the rest as markdown.
  39.         return (new showdown.Converter()).makeHtml(text);
  40.     }
  41.  
  42.     /**
  43.     * Find all of the tooltips in the given container and tooltipify them.
  44.     */
  45.     function activateTooltips(container) {
  46.         if (container.tooltip) {
  47.             container.find('span[rel="tooltip"]').tooltip();
  48.         }
  49.     }
  50.  
  51.     /**
  52.     * Setup the given note field with the required callbacks.
  53.     */
  54.     function setupNoteField(note) {
  55.         // Save the markdown and render the content.
  56.         var html = note.html();
  57.         if (typeof html === 'undefined') html = '';
  58.         note.data('noteContent', html.replace(/<br>/g,'\n'));
  59.         note.html(render(html));
  60.         activateTooltips(note);
  61.  
  62.         note.click(function(e) {
  63.             if (e.target.tagName.toLowerCase() === 'textarea') {
  64.                 return;
  65.             }
  66.  
  67.             // If the target is the div, they are going from display --> edit.
  68.             if (e.target.tagName.toLowerCase() !== 'button') {
  69.                 var interval = setInterval(function() {
  70.                     // If we can find a textarea, they must have clicked to edit the text field.
  71.                     // So, we want to display the markdown content.
  72.                     if (note.find('textarea')) {
  73.                         clearInterval(interval);
  74.                         if (note.data('noteContent') === 'Click to add note') {
  75.                             note.find('textarea').val('');
  76.                         } else {
  77.                             note.find('textarea').val(note.data('noteContent'));
  78.                         }
  79.                     }
  80.                 }, 50);
  81.             } 
  82.  
  83.             // Otherwise, they are going from edit --> display.
  84.             else {
  85.                 var textarea = note.find('textarea');
  86.                 var str = textarea.val().replace(/\n/g,'\n');
  87.                 textarea.html(str);
  88.                 var interval = setInterval(function() {
  89.                     // Keep waiting until there is no text area. Then, save the changed markdown
  90.                     // value to the data. Also re-render the note.
  91.                     if (note.find('textarea').length === 0) {
  92.                         clearInterval(interval);
  93.                         note.data('noteContent', note.html().replace(/<br>/g,'\n'));
  94.                         note.html(render(note.html()));
  95.                         activateTooltips(note);
  96.                     }
  97.                 }, 50);
  98.             }        
  99.         });
  100.     }
  101.     
  102.     function main() {
  103.         // Convert the text in the meaning note.
  104.         var noteFields = ['.note-meaning', '.note-reading'];
  105.         $.each(noteFields, function(i, noteSelector) {
  106.             // During reviews, we have to wait for the field to be added to the dom first.
  107.             // Then, we can add a listener to the note selector.
  108.             $('#option-item-info').click(function() {
  109.                 var interval = setInterval(function() {
  110.                     if ($(noteSelector).length !== 0) {
  111.                         clearInterval(interval);
  112.                         setupNoteField($(noteSelector));
  113.                     }
  114.                 }, 50);
  115.             });
  116.  
  117.             // Setup the note field if it is on the page already.
  118.             setupNoteField($(noteSelector));
  119.         });
  120.     }
  121.     
  122.     // Run startup() after window.onload event.
  123.     if (document.readyState === 'complete')
  124.         main();
  125.     else
  126.         window.addEventListener("load", main, false);
  127. })(wkmdnotes);