pranavdeshai / anki-prettify

Collection of customizable Anki flashcard templates with modern and clean themes.
MIT License
345 stars 16 forks source link

Breadcrumbs do not work as intended. #9

Open ziova opened 2 years ago

ziova commented 2 years ago

Love the theme, however came across a bug. Testing on Version ⁨2.1.54 (b6a7760c)⁩ and Python 3.9.7 Qt 6.3.1, the breadcrumbs are not working. See screenshot:

image

I have only changed the color variables and font, so it looks a bit different.

ghost commented 2 years ago

I've also come across this, but the breadcrumbs seem to work when the card has a tag.

ziova commented 2 years ago

wow, that's acc a good point, I don't like the look of tags but I can use the styling to hide them and still make sure that the breadcrumbs are visible, will test this and get back

ghost commented 1 year ago

I think there is a bug with the else statement in the 'Split hierarchical tags' part of the Javascript.

  // Split hierarchical tags
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }

So, when the card has no tags, the else statement runs and breaks the entire script. I'm not well versed in JS to find out why, but there's no need to add a tag to every card if the 'Breadcrumbs to current deck' part is placed before the 'Split hierarchical tags'. Like this:

  // Breadcrumbs to current deck
  var deckEl = document.querySelector('.prettify-deck')
  var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
  html = []
  subDecks.forEach((subDeck) => {
    html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
  })
  deckEl.innerHTML = html.join('&nbsp;/&nbsp;')

  // Split hierarchical tags
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }

It's a workaround, but it works.