2 files changed, 25 insertions, 43 deletions
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index df494a8..0000000
--- a/public/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="fr">
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>Music</title>
-<link rel="stylesheet" href="/main.css">
-<link rel="icon" href="/icon.png">
-
-<h1 class="g-Title">Music</h1>
-
-<ul class="g-Songs">
-  <li>
-    <a href="songs/ben-e-king/stand-by-me.html">Ben E. King – Stand by Me</a>
-  <li>
-    <a href="songs/graeme-allwright/petit-garcon.html">Graeme Allwright – Petit Garçon</a>
-  <li>
-    <a href="songs/tri-yann/pelot-d-hennebont.html">Tri Yann – Pelot d’Hennebont</a>
diff --git a/public/main.js b/public/main.js
index 97f11f4..3b9e6fc 100644
--- a/public/main.js
+++ b/public/main.js
@@ -12,6 +12,8 @@ function appendText(parentElement, text) {
   return element
 }
 
+// Select tonality
+
 tonalities_b = ['C', 'D♭', 'D', 'E♭', 'E', 'F', 'G♭', 'G', 'A♭', 'A', 'B♭', 'B']
 tonalities_s = ['C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯', 'A', 'A♯', 'B']
 
@@ -35,33 +37,30 @@ function applyShift(tonalities, t1, s) {
   return `${root}${mode}`
 }
 
+const node = document.getElementById('g-Tonality')
+if (node !== null) {
+  let tonality = node.innerText
+  mode = tonality[tonality.length - 1] == 'm' ? 'm' : ''
 
-const node = document.querySelector('[data-tonality]')
-let tonality = node.dataset.tonality
-mode = tonality[tonality.length - 1] == 'm' ? 'm' : ''
-
-label = appendElement(node, 'label')
-label['className'] = 'g-Chords__Tonality'
-label.onchange = (e) => {
-  const shift = getShift(tonality, e.target.value)
-  tonality = e.target.value
-  tonalities = tonality === 'F' || tonality.indexOf('♭') > -1 ? tonalities_b : tonalities_s
-  document.querySelectorAll('.g-Chords__Chord').forEach(chord => {
-    if (chord.innerText !== '%') {
-      chord.innerText = applyShift(tonalities, chord.innerText, shift)
+  select = document.createElement('select')
+  select['name'] = 'tonality'
+  tonalities_b.forEach(t => {
+    option = appendElement(select, 'option')
+    option['value'] = t
+    if (tonality == `${t}${mode}`) {
+      option['selected'] = true
     }
+    appendText(option, `${t}${mode}`)
   })
-}
-
-appendText(label, 'Tonalité :')
-
-select = appendElement(label, 'select')
-select['name'] = 'tonality'
-tonalities_b.forEach(t => {
-  option = appendElement(select, 'option')
-  option['value'] = t
-  if (tonality == `${t}${mode}`) {
-    option['selected'] = true
+  select.onchange = (e) => {
+    const shift = getShift(tonality, e.target.value)
+    tonality = e.target.value
+    tonalities = tonality === 'F' || tonality.indexOf('♭') > -1 ? tonalities_b : tonalities_s
+    document.querySelectorAll('.g-Chords__Chord').forEach(chord => {
+      if (chord.innerText !== '%') {
+        chord.innerText = applyShift(tonalities, chord.innerText, shift)
+      }
+    })
   }
-  appendText(option, `${t}${mode}`)
-})
+  node.parentNode.replaceChild(select, node)
+}