☰

learnwitholiver

Flashcards

// ==UserScript==
// @name         learnwitholiver
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  Flashcards
// @author       Feng Ya
// @match        https://www.learnwitholiver.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
  'use strict';

  // Your code here...

  GM_addStyle(`
  #dashboard {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding-top: 100px;
    background: white;
  }
  #dashboard > div {
    padding: 20px;
    margin: 0 auto;
    max-width: 600px;
    font-size: 36px;
    text-align: center;
  }
  #dashboard > div.index {
    font-size: 12px;
  }
  .cloze {
    background: rgba(255, 242, 51, 0.298);
  }
  .mask {
    color: black;
    background: black;
  }
  `);

  console.log(window.location);

  const storage = window.localStorage;
  const pathname = window.location.pathname;

  let current = parseInt(storage.getItem(pathname), 10) || 0;
  console.log(current);

  const dashboard = document.createElement('div');
  dashboard.id = 'dashboard';
  dashboard.style.display = 'none';
  document.body.appendChild(dashboard);

  if (pathname === '/german/show-sentences-print.php') {
    const trs = document.querySelectorAll('table table tr');

    trs.forEach((tr, index) =>
      tr.addEventListener('click', event => {
        current = index;
        show();
      })
    );

    let display = false;

    document.body.addEventListener('keydown', event => {
      // console.log(event.key);
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
        return;

      event.preventDefault();

      switch (event.key) {
        case 'x':
          display = !display;
          if (display) show();
          else hide();
          break;
        case 'n':
        case 'j':
          next();
          break;
        case 'p':
        case 'k':
          prev();
          break;
        case ' ':
          toggle();
          break;
      }
    });

    function show() {
      current = normalize(current, trs.length);
      storage.setItem(pathname, current);
      const tr = trs[current];

      const [front, back] = Array.from(tr.children).map(node => node.innerText);

      dashboard.style.display = '';
      dashboard.innerHTML = `
      <div class='cloze mask'>${front}</div>
      <div>${back}</div>
      <div class='index'>${current + 1}/${trs.length}</div>
      `;
    }

    function hide() {
      dashboard.style.display = 'none';
      dashboard.innerHTML = '';
    }

    function prev() {
      current = current - 1;
      show();
    }

    function next() {
      current = current + 1;
      show();
    }

    function toggle() {
      document.querySelectorAll('.cloze').forEach(cloze => {
        cloze.classList.toggle('mask');
      });
    }
  }

  function normalize(index, len) {
    if (index >= len) return index % len;
    if (index < 0) return index % len + len;
    return index;
  }
})();