added pianokeys to demo

[jutunen]

This works at least with basic chords. Assuming that semitones can not be negative. Importing custom-piano-keys will cause NotSupportedError because customElements.define() is called twice --> second call causes the error. I will try to fix that and publish a new version of custom-piano-keys soon.

[no-chris]

Hello Jussi,

Thanks a lot for your contribution 👍

I wanted to check it but the build is failing on eslint warnings:

/perso/chord-charts/chord-symbol/docs-src/src/index.js
   2:9   error  'Pianokeys' is defined but never used                         no-unused-vars
   2:44  error  Missing semicolon                                             semi
  28:1   error  Expected indentation of 1 tab but found 4 spaces              indent
  28:20  error  Strings must use singlequote                                  quotes
  31:38  error  Arrow function has a complexity of 12. Maximum allowed is 10  complexity
  33:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  34:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  34:37  error  Missing semicolon                                             semi
  35:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  37:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  38:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  39:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  40:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  40:65  error  Missing semicolon                                             semi
  41:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  42:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  42:79  error  Missing semicolon                                             semi
  43:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  43:22  error  Missing semicolon                                             semi
  44:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  45:1   error  Expected indentation of 4 tabs but found 8 spaces             indent
  45:24  error  Missing semicolon                                             semi
  46:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  47:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  47:49  error  Strings must use singlequote                                  quotes
  47:59  error  Missing semicolon                                             semi
  48:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  48:42  error  Strings must use singlequote                                  quotes
  48:62  error  Missing semicolon                                             semi
  49:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  49:30  error  Strings must use singlequote                                  quotes
  49:56  error  Missing semicolon                                             semi
  50:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  50:30  error  Strings must use singlequote                                  quotes
  50:55  error  Missing semicolon                                             semi
  51:1   error  Expected indentation of 3 tabs but found 6 spaces             indent
  51:42  error  Missing semicolon                                             semi
  52:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  53:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  55:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  56:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  58:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  59:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  60:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  61:1   error  Expected indentation of 2 tabs but found 4 spaces             indent
  62:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  64:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  65:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  66:1   error  Expected indentation of 1 tab but found 2 spaces              indent
  67:1   error  Expected indentation of 1 tab but found 2 spaces              indent

✖ 50 problems (50 errors, 0 warnings)
  48 errors and 0 warnings potentially fixable with the `--fix` option.

Could you please fix those?

Thanks again

[no-chris]

Thanks, what are the minimum compatibility requirements for web components?

[jutunen]

https://caniuse.com/#feat=custom-elementsv1
Custom-piano-keys is an 'autonomous custom element' so it should work on Safari and Opera also. I could add polyfill importing to this PR in order to make the keys visible in older versions of Edge and IE also.

[no-chris]

I made a commit on your branch you have a PR ;)

[jutunen]

Thanks!