Merge pull request #38 from KCarlile/develop

#36 New control: change orientation

.github/workflows/demo-hosting.yml

@@ -37,11 +37,15 @@ jobs:
         local-dir: ./
         server-dir: guitar-diagrams-js/js/guitar-diagrams-js/
         exclude: |
+          **/.config/**
           **/.git*
           **/.git*/**
+          **/.scripts/**
+          **/docs/**
           **/node_modules/**
-          README.md
+          .gitignore
+          .npmrc
           LICENSE
-          **/docs/**
           package.json
           package-lock.json
+          README.md

.scripts/build.sh

@@ -6,9 +6,16 @@ echo "# Guitar Diagrams JS build script"
 echo "########################################"
 echo ""
 
+LOCAL_PATH=$(dirname "$0")
+
 echo "< Beginning Guitar Diagrams JS build script..."
 echo ""
 
+echo ">> Beginning Super-Linter (local) run..."
+bash -x "$LOCAL_PATH/"super-linter.sh
+echo "<< Ending Super-Linter (local) run."
+echo ""
+
 echo ">> Beginning npm install..."
 npm install ./
 echo "<< Ending npm install."

.scripts/super-linter.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# See this page for more info about running Super Linter locally:
+# https://github.com/super-linter/super-linter/blob/main/docs/run-linter-locally.md
+
+# Change this path to your local codebase path before running
+LOCAL_CODEBASE_PATH="/Users/kennycarlile/Code/guitar-diagrams-js"
+
+docker run \
+    -e LOG_LEVEL=DEBUG \
+    -e RUN_LOCAL=true \
+    -e LINTER_RULES_PATH=.config/linters/ \
+    -e CSS_FILE_NAME=stylelint.config.json \
+    -e VALIDATE_JAVASCRIPT_ES=true \
+    -e VALIDATE_HTML=true \
+    -e VALIDATE_CSS=true \
+    -e VALIDATE_MARKDOWN=true \
+    -e IGNORE_GITIGNORED_FILES=true \
+    -e DEFAULT_BRANCH=main \
+    -v $LOCAL_CODEBASE_PATH:/tmp/lint \
+    --rm \
+    ghcr.io/super-linter/super-linter:latest

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