anki-chinese.html

<div class="hanzi" id="hanzi">{{Hanzi}}</div>

<br>
<div class="pinyin" id="pinyin">{{Pinyin}}</div>

<br>
{{English}}

<br>

{{Audio}}

<div id="kanjiIframeContainer"></div>

<script>
// orig colorizing script is taken from https://www.reddit.com/r/Anki/comments/i6rmp6/chinese_flashcards_automatic_coloring_according/

// I have added links to my other deck (prerendered as html) 
// html files are exported with https://github.com/srghma/anki-addon-glossary/blob/master/anki-addon-glossary/__init__.py  

(function() {
    const containerId = 'kanjiIframeContainer'
    const iframeId = 'kanjiIframe'

    function kanjiIframeOnload() {
        const iframe = document.getElementById(iframeId)

        let iframeDoc = null

        if (iframe.contentDocument) { // FF
            iframeDoc = iframe.contentDocument
        } else if (iframe.contentWindow) { // IE
            iframeDoc = iframe.contentWindow.document
        }

        const iframeBody = iframeDoc.getElementsByTagName('body')[0]

        alert(iframeBody.classList)

        iframeBody.classList.add("nightMode")
    }

console.log(window.location)
console.log(window.location.origin)
    window.showKanjiIframe = function(kanji) {
        const parentElem = document.getElementById(containerId);

        let iframe = document.createElement('iframe')
        iframe.src = `${kanji}.html`
        iframe.id = iframeId
        iframe.width = 0.95 * window.innerWidth
        iframe.height = 0.9 * window.innerHeight
        iframe.onload = kanjiIframeOnload

        parentElem.innerHTML = ''
        parentElem.appendChild(iframe)

        iframe = null
    }
})();











(function() {
  // FROM https://www.reddit.com/r/Anki/comments/i6rmp6/chinese_flashcards_automatic_coloring_according/

  //EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS
  const color_codes = {
      1: "#080",
      2: "#5af",
      3: "#fa0",
      4: "#f00",
      5: "#ddd"
  }
  //EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS//EDIT THIS


  decode_pinyin = function(pinyin) {
      const core = ["a", "e", "i", "o", "u", "ü"]
      let arr = pinyin.replace(/<b>|<\/b>|<div>|<\/div>/g, "").split("")

      is_core = function(c, c_previous_two = "", c_next = "") {
          //pre conditions
          if (c == "r" && (c_next == " " || c_next == "") && (c_previous_two != " " && c_previous_two != "")) {
              return [true, true]
          }
          //pre conditions

          c = c.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()
          for (let i = 0; i < core.length; i++) {
              if (c === core[i]) {
                  return [true, false]
              }
          }
          return [false, false]
      }

      get_tone = function(str) {
          let pure = str.replace(/a|e|i|o|u|ü|r/g, '')
          if (pure == "") {
              return 5
          } else if (['ā', 'ē', 'ī', 'ō', 'ū', 'ǖ'].includes(pure)) {
              return 1
          } else if (['á', 'é', 'í', 'ó', 'ú', 'ǘ'].includes(pure)) {
              return 2
          } else if (['ǎ', 'ě', 'ǐ', 'ǒ', 'ǔ', 'ǚ'].includes(pure)) {
              return 3
          } else if (['à', 'è', 'ì', 'ò', 'ù', 'ǜ'].includes(pure)) {
              return 4
          }

          return pure
      }

      let tones_arr = []
      let buff = []

      flush = function() {
          if (buff.length > 0) {
              tones_arr.push(get_tone(buff.join("")))
              buff = []
          }
      }
      for (let i = 0; i < arr.length; i++) {
          let res = is_core(arr[i], arr[i - 2], arr[i + 1])
          if (res[1]) {
              flush()
          }
          if (res[0]) {
              buff.push(arr[i])
          } else {
              flush()
          }
      }
      if (buff.length > 0) {
          tones_arr.push(get_tone(buff.join("")))
          buff = []
      }
      return tones_arr
  }

  recolor_pinyin = function(pinyin_element, hanzi_element) {
      let hanzi_sentence = hanzi_element.innerHTML
      let decoded = decode_pinyin(pinyin_element.innerHTML)
      let hanzi_sentence_strip = hanzi_sentence.replace(/ |-|<b>|<\/b>|\.|。|\?|？|!|！|<div>|<\/div>|，|，/g, '')
      if (hanzi_sentence_strip.length == decoded.length) {
          let start = 0
          for (i in hanzi_sentence_strip) {
              let index = hanzi_sentence.indexOf(hanzi_sentence_strip[i], start)
              let insertion = "<span onclick=\"window.showKanjiIframe('" + hanzi_sentence_strip[i] + "')\" style=\"color:" + color_codes[decoded[i]] + ";\">" + hanzi_sentence_strip[i] + "</span>"
              hanzi_sentence = hanzi_sentence.substring(0, index) + insertion + hanzi_sentence.substring(index + 1)
              start = index + insertion.length
          }
          hanzi_element.innerHTML = hanzi_sentence
      }
  }

  let pinyin_element = document.getElementById("pinyin")
  let hanzi_element = document.getElementById("hanzi")
  let pinyin_sentence_element = document.getElementById("pinyin_sentence")
  let hanzi_sentence_element = document.getElementById("hanzi_sentence")

  //just check if you did everything correctly :)
  if ((pinyin_element == null && hanzi_element != null) || (pinyin_element == null && hanzi_element == null && pinyin_sentence_element == null && hanzi_sentence_element == null)) {
      throw "<br><br>It looks like you did not put the <span style=\"color: red;\">id=\"pinyin\"</span> into the pinyin element<br>Example:<br>\
  &ltdiv class=\"pinyin\" <span style=\"color: red;\">id=\"pinyin\"</span>&gt{ {Pinyin.1} }&lt/div&gt"
  } else if (pinyin_element != null && hanzi_element == null) {
      throw "<br><br>It looks like you did not put the <span style=\"color: red;\">id=\"hanzi\"</span> into the hanzi element<br>Example:<br>\
  &ltdiv class=\"hanzi\" <span style=\"color: red;\">id=\"hanzi\"</span>&gt{ {Simplified} }&lt/div&gt"
  } else if (pinyin_sentence_element == null && hanzi_sentence_element != null) {
      throw "<br><br>It looks like you did not put the <span style=\"color: red;\">id=\"pinyin_sentence\"</span> into the pinyin sentence element<br>Example:<br>\
  &ltdiv class=\"pinyinSen\" <span style=\"color: red;\">id=\"pinyin_sentence\"</span>&gt{ {SentencePinyin.1} }&lt/div&gt"
  } else if (pinyin_sentence_element != null && hanzi_sentence_element == null) {
      throw "<br><br>It looks like you did not put the <span style=\"color: red;\">id=\"hanzi_sentence\"</span> into the hanzi sentence element<br>Example:<br>\
  &ltdiv class=\"sentence\" <span style=\"color: red;\">id=\"hanzi_sentence\"</span>&gt{ {SentenceSimplified} }&lt/div&gt"
  }
  //just check if you did everything correctly :)

  if (pinyin_element != null && hanzi_element != null) {
      recolor_pinyin(pinyin_element, hanzi_element)
  }
  if (pinyin_sentence_element != null && hanzi_sentence_element != null) {
      recolor_pinyin(pinyin_sentence_element, hanzi_sentence_element)
  }
})();

</script>