Editorification

src/App.ts

@@ -1,7 +1,8 @@
-import { get_chord_sheet_html } from "./Editor";
+import { Editor } from "./Editor";
+import {Chord} from "chord-symbol";
 
 window.onload = () => {
-    const chord_sheet_html = get_chord_sheet_html(`
+    const text_content = `
 Intro : CM7 
 
 CM7           Em7 Dm7           FM7 CM7 
@@ -86,9 +87,7 @@ Et je donne à la java mes mains pour le bas de son dos
 G7/b9              Cm                       G7     Cm CmM7 
 Et je donne à la java mes mains pour le bas de son dos
 
-`);
+`;
-    document.getElementById("chord_sheet").innerHTML = chord_sheet_html;
+    const editor = new Editor("#chord_sheet");
-    document.getElementsByClassName("chord")
+    editor.open_string(text_content);
-    console.log(chord_sheet_html);
 };
-

src/Editor.ts

@@ -1,6 +1,4 @@
-
+import {Chord, ChordParseFailure, chordParserFactory, chordRendererFactory} from "chord-symbol";
-import { chordParserFactory, chordRendererFactory } from "../node_modules/chord-symbol/lib/chord-symbol.js"
-import { Chord } from "../node_modules/chord-symbol/types"
 
 class ChordNotation {
     chord: Chord;
@@ -25,73 +23,115 @@ class Sheet {
     lines: Line[] = [];
 }
 
-function render_sheet_html(sheet: Sheet, renderChord:any): string {
+export class Editor {
-    let result = "<div><p>";
+    selector: string;
-    for (let line of sheet.lines) {
+    html_element: Element;
-        let rendered_line = ''
+
-        if (line.is_empty()) {
+    constructor(selector: string) {
-            rendered_line = "</p><p>"
+        this.selector = selector
+        const html_element = document.querySelector(selector)
+        if (html_element instanceof Element) {
+            this.html_element = html_element;
         } else {
-            if (line.lyrics != "") {
+            throw Error("Could not find html element");
-                rendered_line = line.lyrics.replace(" ", "&nbsp;");
-            } else if (line.chords.length > 0) {
-                for (let chord of line.chords) {
-                    rendered_line += "&nbsp;".repeat(chord.spaces_before) + render_chord(chord.chord, renderChord)
-                }
-            }
-            rendered_line += "<br/>"
         }
-        result += rendered_line
     }
-    result += "</p></div>";
-    return result
-}
 
-function render_chord(chord: Chord, renderer:any): string {
+    public open_string(source: string): void {
-    return "<span class='chord'>" + renderer(chord) + "</span>"
+        const sheet = this.create_sheet_from_string(source);
-}
+        this.load_sheet(sheet);
+    }
 
-export function get_chord_sheet_html(normalized_txt: string): string {
+    protected create_sheet_from_string(source: string): Sheet {
-    const parseChord = chordParserFactory( { customFilters : []} );
+        const normalized_string = source;
-    const renderChord = chordRendererFactory({ useShortNamings: true });
+        const parseChord = chordParserFactory( { customFilters : []} );
 
-    const lines = normalized_txt.split("\n")
+        const lines = normalized_string.split("\n")
-    let sheet = new Sheet();
+        let sheet = new Sheet();
-    for (const line of lines) {
+        for (const line of lines) {
-        const words = line.split(' ');
+            const words = line.split(' ');
 
-        let sheet_line = new Line();
+            let sheet_line = new Line();
-        if (words.length > 1 || words[0] == '') {
+            if (words.length > 1 || words[0] == '') {
-            let space_before_chord = 0;
+                let space_before_chord = 0;
-            for (let word of words) {
+                for (let word of words) {
-                if (word != '') {
+                    if (word != '') {
-                    if (space_before_chord > 0 || sheet_line.chords.length > 0) {
+                        if (space_before_chord > 0 || sheet_line.chords.length > 0) {
+                            space_before_chord++;
+                        }
+                        //preprocessing for special slash notation
+                        if (word.indexOf('/') > -1) {
+                            const parts = word.split('/')
+                            if (/^(b|#)\d+$/.test(parts[1])) {
+                                word = parts[0] + "(" + parts[1] + ")"
+                            }
+                        }
+                        const chord = parseChord(word);
+                        if (chord.error) {
+                            sheet_line.lyrics = line;
+                            break;
+                        } else {
+                            sheet_line.chords.push(new ChordNotation(chord, space_before_chord));
+                            space_before_chord = 0;
+                        }
+                    } else {
                         space_before_chord++;
                     }
-                    //preprocessing for special slash notation
-                    if (word.indexOf('/') > -1) {
-                        const parts = word.split('/')
-                        if (/^(b|#)\d+$/.test(parts[1])) {
-                            word = parts[0] + "(" + parts[1] + ")"
-                        }
-                    }
-                    const chord = parseChord(word);
-                    if (chord.error) {
-                        sheet_line.lyrics = line;
-                        break;
-                    } else {
-                        sheet_line.chords.push(new ChordNotation(chord, space_before_chord));
-                        space_before_chord = 0;
-                    }
-                } else {
-                    space_before_chord++;
                 }
             }
+            if (sheet_line.is_empty() && (sheet.lines.length == 0 || sheet.lines[sheet.lines.length - 1].is_empty())) {
+                continue
+            }
+            sheet.lines.push(sheet_line)
         }
-        if (sheet_line.is_empty() && (sheet.lines.length == 0 || sheet.lines[sheet.lines.length - 1].is_empty())) {
+
-            continue
+        return sheet
-        }
+    }
-        sheet.lines.push(sheet_line)
+
+    protected load_sheet(sheet: Sheet) {
+        const renderChord = chordRendererFactory({ useShortNamings: true });
+        this.render_sheet_html(sheet, renderChord)
+    }
+
+    protected render_sheet_html(sheet: Sheet, renderChord: any) {
+        const root_element = document.createElement('div');
+        let current_paragraph = document.createElement('p')
+        for (let line of sheet.lines) {
+            if (line.is_empty()) {
+                root_element.appendChild(current_paragraph);
+                current_paragraph = document.createElement('p')
+            } else {
+                if (line.lyrics != "") {
+                    current_paragraph.appendChild(
+                        document.createTextNode(line.lyrics.replace(" ", "&nbsp;"))
+                    );
+                } else if (line.chords.length > 0) {
+                    for (let chord of line.chords) {
+                        current_paragraph.appendChild(document.createTextNode("\u00A0".repeat(chord.spaces_before)))
+                        current_paragraph.appendChild(render_chord(chord.chord, renderChord));
+                    }
+                }
+                current_paragraph.appendChild(document.createElement('br'))
+            }
+        }
+        root_element.appendChild(current_paragraph);
+        this.html_element.appendChild(root_element);
     }
-    return render_sheet_html(sheet, renderChord)
+}
+
+function render_chord(chord: Chord, renderer:any): HTMLElement {
+    const html = document.createElement('a')
+    html.innerHTML = renderer(chord);
+    html.classList.add('chord')
+    html.href = "javascript:;"
+    html.addEventListener('click', (evt) => {
+        open_chord_editor(html, chord);
+    })
+    return html
+}
+
+function open_chord_editor(html_element: HTMLElement, chord: Chord) {
+    const span = document.createElement('span')
+    span.innerHTML = "coucou";
+    html_element.after(span)
 }