36 new control change orientation

docs/examples/index.html

@@ -155,7 +155,7 @@ <h2 class="border-bottom border-1 mb-4">Example 5 - Customizing visuals</h2>
                     <div id="diagram-5"></div>
                 </div>
                 <div class="col-6">
-                    <p>This example, while _intentionally_ not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:</p>
+                    <p>This example, while <em>intentionally</em> not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:</p>
                     <ul class="list-group mb-3">
                         <li class="list-group-item">String names are enabled</li>
                         <li class="list-group-item">Starting on the 2nd fret</li>
@@ -212,14 +212,18 @@ <h2 class="border-bottom border-1 mb-4">Example 6 - Controls</h2>
                     <p>This example demonstrates some configuration options for controls as shown below:</p>
                     <ul class="list-group mb-3">
                         <li class="list-group-item">String names are enabled</li>
+                        <li class="list-group-item">Controls are enabled<br /><em>Controls must be enabled, then each individual control must be enabled to ensure that all controls are intentionally added. Alternatively, call <code class="language-javascript">gdj6.config.enableAllControls();</code> to enable controls and all individual controls.</em></li>
                         <li class="list-group-item">Image download button is enabled</li>
+                        <li class="list-group-item">Change orientation button is enabled</li>
                         <li class="list-group-item">Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)</li>
                     </ul>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">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);

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);

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();

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

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
 
     /**