Merge pull request #52 from KCarlile/develop

Update 10-productize-documentation branch with change from #50, #42

docs/examples/index.html

@@ -27,7 +27,7 @@ <h2 class="border-bottom border-1 mb-4">Preface - Setup</h2>
                     <pre><code class="language-html">&lt;div id="diagram-1"&gt;&lt;/div&gt;</code></pre>
                     <p>That div's ID doesn't need to be <em>diagram-1</em> as shown, but it needs to be a unique name that
                         you will reference later on in your code, like this:</p>
-                    <pre><code class="language-javascript">gdj1.addCanvas('diagram-1');</code></pre>
+                    <pre><code class="language-javascript">gdj1.addCanvasToElement('diagram-1');</code></pre>
                 </div>
             </div>
             <!-- BEGIN: example 1 -->
@@ -41,7 +41,7 @@ <h2 class="border-bottom border-1 mb-4">Example 1 - Basic fretboard</h2>
                     <h5>Code</h5>
                     <pre><code class="language-javascript">let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard</code></pre>
                 </div>
             </div>
@@ -62,7 +62,7 @@ <h5>Code</h5>
                     <pre><code class="language-javascript">let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -99,7 +99,7 @@ <h5>Code</h5>
 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -135,7 +135,7 @@ <h5>Code</h5>
                     <pre><code class="language-javascript">let gdj4 = new GuitarDiagramsJS();
 gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -189,7 +189,7 @@ <h5>Code</h5>
 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -224,7 +224,7 @@ <h5>Code</h5>
 gdj6.config.controlsEnabled = true;
 gdj6.config.downloadImageEnabled = true;
 gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
 gdj6.drawNeck();
 gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);

docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs

@@ -154,7 +154,7 @@ export class GuitarDiagramsJS {
             let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
             let posX;
             let posY;
-            let stringNames = this.#config.stringNames;
+            let stringNames = [...this.#config.stringNames]; // deep copy array
 
             // vertical draws string names left to right, but horizontal needs to draw them bottom to top
             if (this.#config.orientHorizontally == true) {
@@ -561,13 +561,13 @@ export class GuitarDiagramsJS {
             const controlClass = 'guitar-diagrams-control';
             const controlClassPrefix = 'guitar-diagrams-';
 
-            let canvasElement = document.getElementById(this.#config.canvasID);
+            const canvasElement = document.getElementById(this.#config.canvasID);
 
-            let controlsDiv = document.createElement('div');
+            const controlsDiv = document.createElement('div');
             controlsDiv.style = 'display: block; margin-top: .5em';
             canvasElement.insertAdjacentElement('afterend', controlsDiv);
 
-            // add the controls in reverse order of display order
+            // add the controls in reverse order of desired display order (last to first)
             // other controls go here
             /*
             if (this.#config.someFeatureEnabled) {
@@ -667,9 +667,9 @@ export class GuitarDiagramsJS {
      * Adds the canvas element to the parent element with the specified ID.
      * @param {string} paramParentElementID - The parent element's ID to which the canvas element will be added.
      */
-    addCanvas(paramParentElementID) {
+    addCanvasToElement(paramParentElementID) {
         document.getElementById(paramParentElementID).appendChild(this.getCanvasElement());
-    } // end addCanvas method
+    } // end addCanvasToElement method
 
     /**
      * Sets the canvas element's ID for an existing canvas.

docs/examples/js/main.js

@@ -13,15 +13,15 @@ import { GuitarDiagramsJS } from './guitar-diagrams-js/guitar-diagrams.mjs';
 // ========== BEGIN example 1
 let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
 gdj1.drawNeck(); // draw the fretboard
 // ========== END example 1
 
 // ========== BEGIN example 2
 let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
@@ -41,7 +41,7 @@ gdj3.config.orientHorizontally = true; // set horizontal orientation
 gdj3.config.fretStartingNumber = 3; // set starting fret
 gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
 gdj3.config.fretCount = 3; // set starting fret
-gdj3.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
 gdj3.drawNeck();
 gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -57,7 +57,7 @@ gdj3.drawAllMarkers();
 let gdj4 = new GuitarDiagramsJS();
 gdj4.config.canvasID = 'diagram-4-canvas';
 gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
 gdj4.drawNeck();
 gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -84,7 +84,7 @@ gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram backgroun
 gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
 gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
 gdj5.config.markerFontSize = 10; // specify the marker text's font size
-gdj5.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
 gdj5.drawNeck();
 gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -103,7 +103,7 @@ gdj6.config.stringNamesEnabled = true;
 gdj6.config.controlsEnabled = true;
 gdj6.config.downloadImageEnabled = true;
 gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
 gdj6.drawNeck();
 gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);

docs/examples/js/testing.js

@@ -22,7 +22,7 @@ gdjTesting.config.enableAllControls();
 //gdjTesting.config.changeOrientationEnabled = true;
 
 //gdj4.config.scaleFactor = .5;
-gdjTesting.addCanvas('diagram-testing');
+gdjTesting.addCanvasToElement('diagram-testing');
 gdjTesting.drawNeck();
 gdjTesting.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdjTesting.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);

docs/index.md

@@ -37,7 +37,7 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at
 </script>
 ```
 
-Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
 ```html
 <div id="diagram-1"></div>
@@ -62,7 +62,7 @@ You can also install this package manually by downloading it, placing the files
    </script>
    ```
 
-1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
 
    ```html
    <div id="diagram-1"></div>
@@ -89,7 +89,7 @@ After your import statement, add the JavaScript to associate your block-level el
 ```javascript
 let gdj1 = new GuitarDiagramsJS();
 gdj1.config.canvasID = 'diagram-1-canvas';
-gdj1.addCanvas('diagram-1');
+gdj1.addCanvasToElement('diagram-1');
 gdj1.drawNeck();
 ```
 
@@ -99,7 +99,7 @@ This will result in the most basic guitar diagram of a blank fretboard. The foll
 | ---- | ---- | ----------- | ----- |
 | 1 | `let gdj1 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
 | 2 | `gdj1.config.canvasID = 'diagram-1-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-1-canvas'` | `'diagram-1-canvas'` is a unique ID for the `<canvas>` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
-| 3 | `gdj1.addCanvas('diagram-1');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above: ```<div id="diagram-1"></div>``` |
+| 3 | `gdj1.addCanvasToElement('diagram-1');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above: ```<div id="diagram-1"></div>``` |
 | 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
 
 See _Example 1_ on the [Examples page](examples/index.html).
@@ -112,7 +112,7 @@ To add markers to a diagram, after calling `gdj1.drawNeck();`, you'll need to sp
 let gdj2 = new GuitarDiagramsJS();
 gdj2.config.canvasID = 'diagram-2-canvas';
 gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+gdj2.addCanvasToElement('diagram-2');
 gdj2.drawNeck();
 gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
 gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -130,7 +130,7 @@ This will result in a basic guitar fretboard diagram with 7 different markers ad
 | ---- | ---- | ----------- | ----- |
 | 1 | `let gdj2 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable|  |
 | 2 | `gdj2.config.canvasID = 'diagram-2-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-2-canvas'` | `'diagram-2-canvas'` is a unique ID for the `<canvas>` HTML element that will be added to your HTML within the block-level element. This ID is important so you can reference it later if you want to style the canvas itself. |
-| 3 | `gdj1.addCanvas('diagram-2');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above, but with a different ID for diagram 2: ```<div id="diagram-2"></div>``` |
+| 3 | `gdj1.addCanvasToElement('diagram-2');` | Add the Guitar Diagrams JS HTML `<canvas>` element to the parent block-level HTML element as specified by the element's unique ID | The ID string being passed here is the one specified in your HTML, like the example above, but with a different ID for diagram 2: ```<div id="diagram-2"></div>``` |
 | 4 | `gdj1.drawNeck();` | Draw the neck of the diagram with the previously specified parameters |  |
 | 5 | `gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);` | Adds a marker on the string 1, fret 1, with text "1", and square shape |  |
 | 6 | `gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);` | Adds a marker on the string 2, fret 2, with text "2", and triangle shape |  |

src/guitar-diagrams.mjs

@@ -667,9 +667,9 @@ export class GuitarDiagramsJS {
      * Adds the canvas element to the parent element with the specified ID.
      * @param {string} paramParentElementID - The parent element's ID to which the canvas element will be added.
      */
-    addCanvas(paramParentElementID) {
+    addCanvasToElement(paramParentElementID) {
         document.getElementById(paramParentElementID).appendChild(this.getCanvasElement());
-    } // end addCanvas method
+    } // end addCanvasToElement method
 
     /**
      * Sets the canvas element's ID for an existing canvas.