I'm working on a project building on ShortcutMapper by Waldo Bronchart

In short the ShortcutMapper maps out application keyboard shortcuts onto a virtual keyboard. In his files he references .html files for different keyboard layouts. This means that it's quite easy to modify them and view shortcuts for different language layouts. However I've got an issue when modifiers are being pressed (shift/control/option).

In the project every key has a data-key value assigned to it which is being used to display the assigned shortcuts, but for my layout I need to set some keys to have multiple values. I need this in order to be able to use keys like "!", """, and "#" that are placed on the same key as 1, 2 and 3 (modified with shift)

My shortcuts are saved as "Shift + EXCLAMATION", "Shift + DOUBLE_QUOTE" and "Shift + HASH", but for now my code on the number keys only reference data-key="ONE", data-key="TWO", and data-key="THREE". Therefore they are never displayed to me.

Is there a way to add multiple values to one element or change the data-key depending on modifiers pressed?

The code for my number row layout currently looks like this:

<div class="row">
    <button data-key="DOLLAR">$</button>
    <button data-key="ONE">1</button>
    <button data-key="TWO">2</button>
    <button data-key="THREE">3</button>
    <button data-key="FOUR">4</button>
    <button data-key="FIVE">5</button>
    <button data-key="SIX">6</button>
    <button data-key="SEVEN">7</button>
    <button data-key="EIGHT">8</button>
    <button data-key="NINE">9</button>
    <button data-key="ZERO">0</button>
    <button data-key="PLUS">+</button>
    <button data-key="ACCENT_ACUTE">´</button>
</div>

Full examples of layouts can be found in the repository here: https://github.com/waldobronchart/ShortcutMapper/tree/master/content/keyboards

I've tried to implement some JavaScript, but without success, (I admittedly don't know a lot about JavaScript) so I'm not sure how to handle the issue. I've googled my way to people referencing the KeyboardEvent.getModifierState() method, but I've not found a way to make it work. A worst case would be to add an extra row of .html keys with the modified keys, but seems like a very bad solution.