felipenmoura/HTML List Item Decorator Proposal.md

HTML List Item Decorators

I always wanted to be able to access and customize the bullets or numbers in HTML lists.

For example...in the following list:

<ol type="1" start="42" reversed>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
  <li>DDD</li>
  <li>EEE</li>
  <li>FFF</li>
</ol>

The problem

Accessing the number

The user can see the number in the list, but if I want to know the number of the item the user has clicked, for example, I have to count their previous siblings. And have to think about reverse and start as well. And all that ignoring other things like "list-style-position", "list-style-type" and "list-style-image", which would apply different rules using css, instead of HTML attributes.

Decorating bullets/numbers

If I want a specific bullet or number to be in a different color or type, I can't.

The proposed solution

Decorators

I believe we could have access to something like decorators in in HTML_LIST_ELEMENT. By accessing someListElement.decorator we would have access to a HTML_LISTITEM_DECORATOR_ELEMENT instance.

This could contain:

{
    type: '' // the list type, like number, circle, etc
    toString: '' // the value, like "C" or "34", or the utf8 symbol for Unordered lists
    value: '' // the value itself, like "C" or 34 (of type integer), or the utf8 symbol for Unordered lists
    separator: "." // the separator between the decorator and the list item content
    style: {} // a CSS style for that prticular bullet/number
}

This way, developers would be able to customize that particular bullet or number, as well as read the current number, for example.

    console.log(someOLItem.decorator) // 33, for example
    console.log(someULItem.decorator) // utf8 code for circle, for example

Enters the HTML_LISTITEM_DECORATOR class

We could have a HTML_LISTITEM_DECORATOR class that could be extended and implemented like so:

class myListIteDecorator extends HTML_LISTITEM_DECORATOR {
  get () {
    return this.value
  }
}

And then (that's the part I'm really not comfortable with, yet)

<ol type="1" start="42" reversed implements="myListDecorator">
    ...
</ol>

That shall allow us to do something like this, for an useful example:

class qAndA extends HTML_LISTITEM_DECORATOR {
  get () {
    if (this.value % 2 === 0) {
      // even
      this.value = "A"
      this.separator = ': '
    } else {
      // odd
      this.value = "Q" + this.value
      this.separator = ') '
      this.style.fontWeight = 'bold'
    }
    return this
  }
}

Then, we could use it like this:

<ol type="1" implements="qAndA">
    <li>Is the Earth flat?</li>
    <li>Nope, it isn't!</li>
    <li>Why is six affraid of seven?</li>
    <li>Because seven eight nine</li>
    <li>Why did the chicken cross the street?</li>
    <li>Because it was bored</li>
</ol>

And see as the result:

Q1) Is the Earth flat?
A: Nope, it isn't!
Q2) Why is six affraid of seven?
A: Because seven eight nine
Q3) Why did the chicken cross the street?
A: Because it was bored

And in that example, the questions should be bold