This example, while _intentionally_ not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:
+This example, while intentionally not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:
This example demonstrates some configuration options for controls as shown below:
gdj6.config.enableAllControls(); to enable controls and all individual controls.let gdj6 = new GuitarDiagramsJS();
gdj6.config.canvasID = 'diagram-6-canvas';
gdj6.config.stringNamesEnabled = true;
+gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
+gdj6.config.changeOrientationEnabled = true;
gdj6.addCanvas('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
diff --git a/docs/examples/js/main.js b/docs/examples/js/main.js
index ce86af4..2693476 100644
--- a/docs/examples/js/main.js
+++ b/docs/examples/js/main.js
@@ -100,7 +100,9 @@ gdj5.drawAllMarkers();
let gdj6 = new GuitarDiagramsJS();
gdj6.config.canvasID = 'diagram-6-canvas';
gdj6.config.stringNamesEnabled = true;
+gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
+gdj6.config.changeOrientationEnabled = true;
gdj6.addCanvas('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
diff --git a/docs/examples/js/testing.js b/docs/examples/js/testing.js
index 93a3dae..699765e 100644
--- a/docs/examples/js/testing.js
+++ b/docs/examples/js/testing.js
@@ -16,7 +16,11 @@ gdjTesting.config.canvasID = 'diagram-testing-canvas';
gdjTesting.config.stringNamesEnabled = true;
gdjTesting.config.orientHorizontally = true;
//gdj4.config.fretStartingNumber = 3;
-gdjTesting.config.downloadImageEnabled = true;
+gdjTesting.config.enableAllControls();
+//gdjTesting.config.controlsEnabled = true;
+//gdjTesting.config.downloadImageEnabled = true;
+//gdjTesting.config.changeOrientationEnabled = true;
+
//gdj4.config.scaleFactor = .5;
gdjTesting.addCanvas('diagram-testing');
gdjTesting.drawNeck();
diff --git a/guitar-diagrams-config.js b/guitar-diagrams-config.js
index 288a827..73a46ca 100644
--- a/guitar-diagrams-config.js
+++ b/guitar-diagrams-config.js
@@ -40,7 +40,9 @@ export class GuitarDiagramsJSConfig {
#fretStartingNumber = 0;
#stringNamesEnabled = false;
#stringNames = ['E','A','D','G','B','e'];
+ #controlsEnabled = false;
#downloadImageEnabled = false;
+ #changeOrientationEnabled = false;
// ========== END private members
@@ -356,6 +358,22 @@ export class GuitarDiagramsJSConfig {
this.#stringNames = paramStringNames;
} // end get stringNames property
+ /**
+ * Gets the enabled status of the controls.
+ * @return {boolean} The enabled status of the controls.
+ */
+ get controlsEnabled() {
+ return this.#controlsEnabled;
+ } // end get controlsEnabled property
+
+ /**
+ * Sets the enabled status of the controls.
+ * @param {boolean} paramControlsEnabled - The enabled status of the controls.
+ */
+ set controlsEnabled(paramControlsEnabled) {
+ this.#controlsEnabled = paramControlsEnabled;
+ } // end get controlsEnabled property
+
/**
* Gets the enabled status of the download image button.
* @return {boolean} The enabled status of the download image button.
@@ -372,12 +390,35 @@ export class GuitarDiagramsJSConfig {
this.#downloadImageEnabled = paramDownloadImageEnabled;
} // end get downloadImageEnabled property
+ /**
+ * Gets the enabled status of the change orientation button.
+ * @return {boolean} The enabled status of the change orientation button.
+ */
+ get changeOrientationEnabled() {
+ return this.#changeOrientationEnabled;
+ } // end get changeOrientationEnabled property
+
+ /**
+ * Sets the enabled status of the change orientation button.
+ * @param {boolean} paramChangeOrientationEnabled - The enabled status of the change orientation button.
+ */
+ set changeOrientationEnabled(paramChangeOrientationEnabled) {
+ this.#changeOrientationEnabled = paramChangeOrientationEnabled;
+ } // end get changeOrientationEnabled property
// ========== END properties
// ========== BEGIN private methods
// ========== END private methods
// ========== BEGIN public methods
+ /**
+ * Enables control functionality and all available individual controls by setting their enabled status to true.
+ */
+ enableAllControls() {
+ this.controlsEnabled = true;
+ this.downloadImageEnabled = true;
+ this.changeOrientationEnabled = true;
+ } // end enableAllControls method
// ========== END public methods
// ========== BEGIN static methods
diff --git a/guitar-diagrams.js b/guitar-diagrams.js
index 235ca1c..3ef6bf6 100644
--- a/guitar-diagrams.js
+++ b/guitar-diagrams.js
@@ -556,35 +556,73 @@ export class GuitarDiagramsJS {
* Adds any configured controls adjacent to the diagram.
*/
#addControls() {
- // image download button
- if (this.#config.downloadImageEnabled) {
+ if (this.#config.controlsEnabled) {
+ const controlMargins = '.5em .5em 0 0';
+ const controlClass = 'guitar-diagrams-control';
+ const controlClassPrefix = 'guitar-diagrams-';
+
let canvasElement = document.getElementById(this.#config.canvasID);
- let downloadButton = document.createElement('input');
-
- downloadButton.type = 'button';
- downloadButton.id = this.#config.canvasID + '-download-button';
- downloadButton.style = 'display: block;';
- downloadButton.classList.add('guitar-diagrams-button-download');
- downloadButton.value = String.fromCodePoint(0x1F4BE);
-
- downloadButton.addEventListener('click', () => {
- const canvas = document.getElementById(this.#config.canvasID);
- const dataURL = canvas.toDataURL('image/png');
- let a = document.createElement('a');
- a.href = dataURL;
- a.download = this.#config.canvasID + '.png';
- a.click();
- });
-
- canvasElement.insertAdjacentElement('afterend', downloadButton);
- } // end if test
- // other controls go here
- /*
- if (this.#config.someFeatureEnabled) {
- // ...
+ let controlsDiv = document.createElement('div');
+ controlsDiv.style = 'display: block; margin-top: .5em';
+ canvasElement.insertAdjacentElement('afterend', controlsDiv);
+
+ // add the controls in reverse order of display order
+ // other controls go here
+ /*
+ if (this.#config.someFeatureEnabled) {
+ // ...
+ } // end if test
+ */
+
+ // change orientation button
+ const changeOrientationButtonExists = document.getElementById(this.#config.canvasID + '-change-orientation-button');
+
+ if (this.#config.changeOrientationEnabled && (!changeOrientationButtonExists)) {
+ let changeOrientationButton = document.createElement('input');
+
+ changeOrientationButton.type = 'button';
+ changeOrientationButton.id = this.#config.canvasID + '-change-orientation-button';
+ changeOrientationButton.style = 'margin: ' + controlMargins + ';';
+ changeOrientationButton.classList.add(controlClassPrefix + 'change-orientation-button');
+ changeOrientationButton.classList.add(controlClass);
+ changeOrientationButton.value = String.fromCodePoint(0x1F500);
+
+ changeOrientationButton.addEventListener('click', () => {
+ // toggle/flip the value, then redraw
+ this.#config.orientHorizontally = !this.#config.orientHorizontally;
+ this.drawNeck();
+ this.drawAllMarkers();
+ });
+
+ controlsDiv.insertAdjacentElement('afterend', changeOrientationButton);
+ } // end if test
+
+ // image download button
+ const downloadImageButtonExists = document.getElementById(this.#config.canvasID + '-download-image-button');
+
+ if (this.#config.downloadImageEnabled && (!downloadImageButtonExists)) {
+ let downloadButton = document.createElement('input');
+
+ downloadButton.type = 'button';
+ downloadButton.id = this.#config.canvasID + '-download-image-button';
+ downloadButton.style = 'margin: ' + controlMargins + ';';
+ downloadButton.classList.add(controlClassPrefix + 'download-image-button');
+ downloadButton.classList.add(controlClass);
+ downloadButton.value = String.fromCodePoint(0x1F4BE);
+
+ downloadButton.addEventListener('click', () => {
+ const canvas = document.getElementById(this.#config.canvasID);
+ const dataURL = canvas.toDataURL('image/png');
+ let a = document.createElement('a');
+ a.href = dataURL;
+ a.download = this.#config.canvasID + '.png';
+ a.click();
+ });
+
+ controlsDiv.insertAdjacentElement('afterend', downloadButton);
+ } // end if test
} // end if test
- */
} // end addControls method
/**