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

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

@@ -1,7 +1,7 @@
import { GuitarDiagramsJSConfig } from "./guitar-diagrams-config.mjs"; import { GuitarDiagramsJSConfig } from "./guitar-diagrams-config.mjs";
import { GuitarDiagramsJSMarker } from "./guitar-diagrams-marker.mjs"; import { GuitarDiagramsJSMarker } from "./guitar-diagrams-marker.mjs";
import "./tone.js"; import "./tone.js";
import { SampleLibrary } from "./tonejs-instruments/Tonejs-Instruments.js"; import { SampleLibrary } from "./Tonejs-Instruments.js";
class GuitarDiagramsWebComponent extends HTMLElement { class GuitarDiagramsWebComponent extends HTMLElement {
// ========== BEGIN private members // ========== BEGIN private members
@@ -97,6 +97,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
} }
connectedCallback() { 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(); this.drawNeck();
let markerList = Array.from(this.getElementsByTagName("marker")); let markerList = Array.from(this.getElementsByTagName("marker"));
@@ -111,6 +131,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
); );
}); });
if (markerList.length > 0 && this.getAttribute("show-chord") == "true") {
let chordsButton = document.createElement("button"); let chordsButton = document.createElement("button");
const canvas = this.shadowRoot.getElementById(this.#config.canvasID); const canvas = this.shadowRoot.getElementById(this.#config.canvasID);
chordsButton.setAttribute( chordsButton.setAttribute(
@@ -120,12 +141,19 @@ class GuitarDiagramsWebComponent extends HTMLElement {
chordsButton.innerHTML = "Play chord"; chordsButton.innerHTML = "Play chord";
this.#docRoot.appendChild(chordsButton); this.#docRoot.appendChild(chordsButton);
}
this.drawAllMarkers(); this.drawAllMarkers();
} }
static get observedAttributes() { 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) { attributeChangedCallback(name, oldValue, newValue) {
@@ -142,6 +170,26 @@ class GuitarDiagramsWebComponent extends HTMLElement {
case "scale-factor": case "scale-factor":
this.#config.scaleFactor = parseFloat(newValue); this.#config.scaleFactor = parseFloat(newValue);
break; 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.drawNeck();
this.drawAllMarkers(); this.drawAllMarkers();
@@ -173,7 +221,14 @@ class GuitarDiagramsWebComponent extends HTMLElement {
[canvasHeight, canvasWidth] = [canvasWidth, canvasHeight]; [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); canvas.setAttribute("width", canvasWidth);
if (this.getAttribute("center-align") == "true") {
canvas.style["width"] = canvasWidth + "px";
}
canvas.setAttribute("height", canvasHeight); canvas.setAttribute("height", canvasHeight);
let colorDiagramBackground = this.#config.colorDiagramBackground; let colorDiagramBackground = this.#config.colorDiagramBackground;
@@ -323,6 +378,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#drawFretMarker(2); this.#drawFretMarker(2);
this.#drawFretMarker(4); this.#drawFretMarker(4);
this.#drawFretMarker(6);
} }
} }
} }