From 6801c8869f3014ae2ad339e60576fc0a768ab4a5 Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Fri, 31 May 2024 17:10:47 -0700 Subject: [PATCH 1/3] Updating exclusions in demo-hosting.yml --- .github/workflows/demo-hosting.yml | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/demo-hosting.yml b/.github/workflows/demo-hosting.yml index 5b32cd9..5037ec4 100644 --- a/.github/workflows/demo-hosting.yml +++ b/.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 From 208a64f235f89de7a3a1baff40e5f4f1a89049ac Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Mon, 3 Jun 2024 23:55:24 -0700 Subject: [PATCH 2/3] Adding local linting --- .scripts/build.sh | 7 +++++++ .scripts/super-linter.sh | 22 ++++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100755 .scripts/super-linter.sh diff --git a/.scripts/build.sh b/.scripts/build.sh index d1314f0..7fd6709 100755 --- a/.scripts/build.sh +++ b/.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." diff --git a/.scripts/super-linter.sh b/.scripts/super-linter.sh new file mode 100755 index 0000000..1cea516 --- /dev/null +++ b/.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 From edf557250001a2c9ff2b0aa8d209d5c11fa7ac7d Mon Sep 17 00:00:00 2001 From: Kenny Carlile Date: Tue, 4 Jun 2024 17:07:45 -0700 Subject: [PATCH 3/3] Adding capability to flip orientation via control button --- docs/examples/index.html | 6 ++- docs/examples/js/main.js | 2 + docs/examples/js/testing.js | 6 ++- guitar-diagrams-config.js | 41 +++++++++++++++++ guitar-diagrams.js | 90 ++++++++++++++++++++++++++----------- 5 files changed, 117 insertions(+), 28 deletions(-) diff --git a/docs/examples/index.html b/docs/examples/index.html index 48fa031..8d05dff 100644 --- a/docs/examples/index.html +++ b/docs/examples/index.html @@ -155,7 +155,7 @@

Example 5 - Customizing visuals

-

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:

  • String names are enabled
  • Starting on the 2nd fret
    • @@ -212,14 +212,18 @@

    Example 6 - Controls

    This example demonstrates some configuration options for controls as shown below:

    • String names are enabled
      • +
    • Controls are enabled
      Controls must be enabled, then each individual control must be enabled to ensure that all controls are intentionally added. Alternatively, call gdj6.config.enableAllControls(); to enable controls and all individual controls.
    • Image download button is enabled
      • +
    • Change orientation button is enabled
    • Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)
    Code
    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
 
     /**