yuanqing/charming

Letter name/callback for class prefix

strarsis opened this issue · 4 comments

strarsis commented

For styling individual/particular letters, it would be great if the wrapper elements have
a class for each letter, e.g. letter-W for all capital Ws.

brendansparrow commented

Hi @yuanqing ! I'm not sure if this issue is still open? This is a great idea and could be done fairly simply using node.textContent to add a class based on the content of each node.

E.g. If we add an injectContentClass key to options:

charming(element, {
  injectContentClass: true
})

We can then do the following inside the inject function's while loop:

if (injectContentClass) {
  node.className += ' ' + classPrefix + '-' + node.textContent
}

Assuming the classPrefix is char, this would output:

<span class="char1 char-f" aria-hidden="true">f</span>

I've created this pen on Codepen to show how it works.

I'd be happy to submit a pull request if you think this looks good?

Thanks,
Brendan

yuanqing commented

Thanks @brendansparrow for this. However, this doesn’t feel like the right change to the API, in my opinion

The solution I’ve landed on is to allow passing in a callback to set the class name, which seems to be the most flexible approach here. Will be cutting a 3.0.0 (it will be a breaking change) soon

brendansparrow commented

Ah, no problem. I did wonder if that particular solution would be too limited. It works if you want to style based on the content itself, though I can think of many instances where it wouldn't be useful. Looking forward to seeing version 3!

yuanqing commented

Just released 3.0.0 which supports the following:

charming(element, {
  setClassName: function (index, letter) {
    return `index-${index} letter-${letter}`
  }
})
  • 👍1