Rockingcool/interactive-fretboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Two new attributes: center-align will align the fretboard horizontally to the center (it'll try, atleast); show-chord will show (or hide) the 'play chord' button

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-07-02 16:09:23 -04:00
parent 812a08c051
commit dc6acbe385
1 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
js/src/guitar-diagrams-web-component.mjs
View File

@@ -1,7 +1,7 @@
import { GuitarDiagramsJSConfig } from "./guitar-diagrams-config.mjs";
import { GuitarDiagramsJSMarker } from "./guitar-diagrams-marker.mjs";
import "./tone.js";
import { SampleLibrary } from "./tonejs-instruments/Tonejs-Instruments.js";
import { SampleLibrary } from "./Tonejs-Instruments.js";
class GuitarDiagramsWebComponent extends HTMLElement {
// ========== BEGIN private members
@@ -97,6 +97,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
}
connectedCallback() {
if (this.getAttribute("center-align") == "true") {
let canvas = this.#docRoot.getElementById(this.#config.canvasID);
// canvas.style["position"] = "absolute";
// canvas.style["left"] = "50vw";
// canvas.style["transform"] = "translate(-50%, -50%)";
//
// canvas.style["padding-left"] = 0;
// canvas.style["padding-right"] = 0;
// canvas.style["margin-left"] = "auto";
// canvas.style["margin-right"] = "auto";
// canvas.style["display"] = "block";
// canvas.style["width"] = "1000px";
// canvas.style.width = "50vw";
canvas.style.display = "block";
canvas.style.margin = "0 auto";
canvas.style.position = "relative";
canvas.style.left = "50%";
canvas.style["padding-bottom"] = "1em";
canvas.style.transform = "translateX(-50%)";
}
this.drawNeck();
let markerList = Array.from(this.getElementsByTagName("marker"));
@@ -111,21 +131,29 @@ class GuitarDiagramsWebComponent extends HTMLElement {
);
});
let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
chordsButton.setAttribute(
"onclick",
"this.getRootNode().host.playAllMarkers()",
);
chordsButton.innerHTML = "Play chord";
if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
chordsButton.setAttribute(
"onclick",
"this.getRootNode().host.playAllMarkers()",
);
chordsButton.innerHTML = "Play chord";
this.#docRoot.appendChild(chordsButton);
this.#docRoot.appendChild(chordsButton);
}
this.drawAllMarkers();
}
static get observedAttributes() {
return ["canvas-id", "orient-horizontally", "fret-count", "scale-factor"];
return [
"canvas-id",
"orient-horizontally",
"fret-count",
"scale-factor",
"center-align",
];
}
attributeChangedCallback(name, oldValue, newValue) {
@@ -142,6 +170,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
case "scale-factor":
this.#config.scaleFactor = parseFloat(newValue);
break;
case "center-align":
if (newValue == "true") {
let canvas = this.#docRoot.getElementById(this.#config.canvasID);
// canvas.style["position"] = "absolute";
// canvas.style["left"] = "50vw";
// canvas.style["transform"] = "translate(-50%, -50%)";
//
// canvas.style["padding-left"] = 0;
// canvas.style["padding-right"] = 0;
// canvas.style["margin-left"] = "auto";
// canvas.style["margin-right"] = "auto";
// canvas.style["display"] = "block";
// canvas.style["width"] = "1000px";
// canvas.style.width = "50vw";
canvas.style.display = "block";
canvas.style.margin = "0 auto";
canvas.style.position = "relative";
canvas.style.left = "50%";
canvas.style.transform = "translateX(-50%)";
}
}
this.drawNeck();
this.drawAllMarkers();
@@ -173,7 +221,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
[canvasHeight, canvasWidth] = [canvasWidth, canvasHeight];
}
// if (this.#docRoot.getElementById(this.#config.canvasID).style.width) {
// canvasWidth = this.#docRoot.getElementById(this.#config.canvasID).style
// .width;
// }
canvas.setAttribute("width", canvasWidth);
if (this.getAttribute("center-align") == "true") {
canvas.style["width"] = canvasWidth + "px";
}
canvas.setAttribute("height", canvasHeight);
let colorDiagramBackground = this.#config.colorDiagramBackground;
@@ -323,6 +378,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#drawFretMarker(2);
this.#drawFretMarker(4);
this.#drawFretMarker(6);
}
}
}