Add option to add link to chapter.

dist/js/getBible.js

@@ -1,7 +1,7 @@
 /**
- * getBible Loader v3.0.3
+ * getBible Loader v3.1.0
  * https://getbible.net
- * (c) 2014 - 2023 Llewellyn van der Merwe
+ * (c) 2014 - 2024 Llewellyn van der Merwe
  * MIT License
  **/
 
@@ -190,6 +190,15 @@
       this.#data = data;
     }
 
+    /**
+     * Retrieves the url values.
+     *
+     * @returns {string} The chapter number.
+     */
+    get bibleUrl() {
+      return `${this.abbreviation}/${this.bookName}/${this.chapter}/${this.verseReference}`;
+    }
+
     /**
      * Retrieves the translation name.
      *
@@ -322,13 +331,21 @@
     }
 
     /**
-     * Generates a reference string for the verses.
+     * Generates a reference string for the (book chapter:verses).
      *
      * @returns {string} The reference string.
      */
     get reference() {
+      return `${this.#data.name}:${this.verseReference}`;
+    }
+
+    /**
+     * Generates a reference string for the (verses).
+     *
+     * @returns {string} The reference verses string.
+     */
+    get verseReference() {
       const verseNumbers = this.#data.verses.map(verse => verse.verse).sort((a, b) => a - b);
-      let refString = `${this.#data.name}:`;
       let ranges = {};
       let rangeStart = null;
       let rangeEnd = null;
@@ -353,7 +370,7 @@
       }
 
       // Join the range strings with commas
-      return refString + Object.values(ranges).join(',');
+      return Object.values(ranges).join(',');
     }
   }
 
@@ -396,6 +413,8 @@
     #showAbbreviation;
     #showLanguage;
     #showLanguageCode;
+    #showBibleLink;
+    #bibleUrl;
 
     /**
      * Initializes the Actions object with a DOM element and its data attributes.
@@ -418,10 +437,33 @@
       this.#showAbbreviation = element.dataset.showAbbreviation ? parseInt(element.dataset.showAbbreviation, 10) : 0;
       this.#showLanguage = element.dataset.showLanguage ? parseInt(element.dataset.showLanguage, 10) : 0;
       this.#showLanguageCode = element.dataset.showLanguageCode ? parseInt(element.dataset.showLanguageCode, 10) : 0;
+      this.#showBibleLink = element.dataset.showBibleLink ? parseInt(element.dataset.showBibleLink, 10) : 0;
+      this.#bibleUrl = element.dataset.bibleUrl ? element.dataset.bibleUrl : 'https://getBible.net/';
 
       if (this.#showLocalReference){
         this.#showReference = 0;
       }
+      if (this.#bibleUrl !== 'https://getBible.net/'){
+        this.#showBibleLink = 1;
+      }
+    }
+
+    /**
+     * Retrieves the bible url.
+     *
+     * @returns {string} The bible url as strings.
+     */
+    get bibleUrl() {
+      return this.#bibleUrl;
+    }
+
+    /**
+     * Retrieves the show bible link flag.
+     *
+     * @returns {number} The show  bible link flag (0 or 1).
+     */
+    get bibleLink() {
+      return this.#showBibleLink;
     }
 
     /**
@@ -546,6 +588,30 @@
     get(scripture) {
       throw new Error("The 'get' method must be implemented in BaseFormat subclass.");
     }
+
+    /**
+     * Get external link svg image.
+     *
+     * @param {string} title - The external link title.
+     *
+     * @returns {string} The external link svg image.
+     */
+    getExternalLinkImage(title) {
+      // just to be safe
+      title.replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+      <title>${title}</title>
+      <path
+        fill="#36c"
+        d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
+      />
+    </svg>`;
+    }
   }
 
   class BlockFormat extends BaseFormat {
@@ -589,6 +655,13 @@
         if (header.length > 0) {
           display.push(`<b class="getbible-header">${header.join(' - ')}</b>`);
         }
+        // Add link to chapter
+        if (this.action.bibleLink) {
+          display.push(`&nbsp;<a class="getbible-link"
+            href="${this.action.bibleUrl}${reference.bibleUrl}"
+            target="_blank" style="text-decoration: unset;"
+            title="${reference.reference}">${this.getExternalLinkImage(reference.reference)}</a>`);
+        }
         const verses = reference.verses
           .map(verse => `<div class="getbible-verse">${verse.verse}. ${verse.text}</div>`)
           .join("\n");
@@ -645,6 +718,13 @@
         if (footer.length > 0) {
           display.push(`<b class="getbible-footer">${footer.join(' - ')}</b>`);
         }
+        // Add link to chapter
+        if (this.action.bibleLink) {
+          display.push(`<a class="getbible-link"
+            href="${this.action.bibleUrl}${reference.bibleUrl}"
+            target="_blank" style="text-decoration: unset;"
+            title="${reference.reference}">${this.getExternalLinkImage(reference.reference)}</a>`);
+        }
         display.push(`</div>`);
       });
 
@@ -1147,7 +1227,7 @@
         super.load(content);
         this.element.classList.add('has-tip');
 
-        new Foundation.Tooltip(this.getElement(), {
+        new Foundation.Tooltip(this.element, {
           // Default options
           disableHover: false, // Allows tooltip to be hoverable
           fadeOutDuration: 150, // Duration of fade out animation in milliseconds

package.json

@@ -2,7 +2,7 @@
   "name": "getbible.loader",
   "title": "getBible",
   "description": "GetBible is an intuitive and lightweight JavaScript solution for embedding Bible scripture into your website.",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "main": "dist/js/getBible.min.js",
   "scripts": {
     "build": "rollup -c"

src/js/core/Action.js

@@ -12,6 +12,8 @@ export class Action {
   #showAbbreviation;
   #showLanguage;
   #showLanguageCode;
+  #showBibleLink;
+  #bibleUrl;
 
   /**
    * Initializes the Actions object with a DOM element and its data attributes.
@@ -34,10 +36,33 @@ export class Action {
     this.#showAbbreviation = element.dataset.showAbbreviation ? parseInt(element.dataset.showAbbreviation, 10) : 0;
     this.#showLanguage = element.dataset.showLanguage ? parseInt(element.dataset.showLanguage, 10) : 0;
     this.#showLanguageCode = element.dataset.showLanguageCode ? parseInt(element.dataset.showLanguageCode, 10) : 0;
+    this.#showBibleLink = element.dataset.showBibleLink ? parseInt(element.dataset.showBibleLink, 10) : 0;
+    this.#bibleUrl = element.dataset.bibleUrl ? element.dataset.bibleUrl : 'https://getBible.net/';
 
     if (this.#showLocalReference){
       this.#showReference = 0;
     }
+    if (this.#bibleUrl !== 'https://getBible.net/'){
+      this.#showBibleLink = 1;
+    }
+  }
+
+  /**
+   * Retrieves the bible url.
+   *
+   * @returns {string} The bible url as strings.
+   */
+  get bibleUrl() {
+    return this.#bibleUrl;
+  }
+
+  /**
+   * Retrieves the show bible link flag.
+   *
+   * @returns {number} The show  bible link flag (0 or 1).
+   */
+  get bibleLink() {
+    return this.#showBibleLink;
   }
 
   /**

src/js/core/Reference.js

@@ -43,6 +43,15 @@ export class Reference {
     this.#data = data;
   }
 
+  /**
+   * Retrieves the url values.
+   *
+   * @returns {string} The chapter number.
+   */
+  get bibleUrl() {
+    return `${this.abbreviation}/${this.bookName}/${this.chapter}/${this.verseReference}`;
+  }
+
   /**
    * Retrieves the translation name.
    *
@@ -175,13 +184,21 @@ export class Reference {
   }
 
   /**
-   * Generates a reference string for the verses.
+   * Generates a reference string for the (book chapter:verses).
    *
    * @returns {string} The reference string.
    */
   get reference() {
+    return `${this.#data.name}:${this.verseReference}`;
+  }
+
+  /**
+   * Generates a reference string for the (verses).
+   *
+   * @returns {string} The reference verses string.
+   */
+  get verseReference() {
     const verseNumbers = this.#data.verses.map(verse => verse.verse).sort((a, b) => a - b);
-    let refString = `${this.#data.name}:`;
     let ranges = {};
     let rangeStart = null;
     let rangeEnd = null;
@@ -206,6 +223,6 @@ export class Reference {
     }
 
     // Join the range strings with commas
-    return refString + Object.values(ranges).join(',');
+    return Object.values(ranges).join(',');
   }
 }

src/js/elements/tooltip/FoundationTooltip.js

@@ -11,7 +11,7 @@ export class FoundationTooltip extends BaseTooltip {
       super.load(content);
       this.element.classList.add('has-tip');
 
-      new Foundation.Tooltip(this.getElement(), {
+      new Foundation.Tooltip(this.element, {
         // Default options
         disableHover: false, // Allows tooltip to be hoverable
         fadeOutDuration: 150, // Duration of fade out animation in milliseconds

src/js/formats/BaseFormat.js

@@ -32,4 +32,28 @@ export class BaseFormat {
   get(scripture) {
     throw new Error("The 'get' method must be implemented in BaseFormat subclass.");
   }
+
+  /**
+   * Get external link svg image.
+   *
+   * @param {string} title - The external link title.
+   *
+   * @returns {string} The external link svg image.
+   */
+  getExternalLinkImage(title) {
+    // just to be safe
+    title.replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+      <title>${title}</title>
+      <path
+        fill="#36c"
+        d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"
+      />
+    </svg>`;
+  }
 }

src/js/formats/BlockFormat.js

@@ -42,6 +42,13 @@ export class BlockFormat extends BaseFormat {
       if (header.length > 0) {
         display.push(`<b class="getbible-header">${header.join(' - ')}</b>`);
       }
+      // Add link to chapter
+      if (this.action.bibleLink) {
+        display.push(`&nbsp;<a class="getbible-link"
+            href="${this.action.bibleUrl}${reference.bibleUrl}"
+            target="_blank" style="text-decoration: unset;"
+            title="${reference.reference}">${this.getExternalLinkImage(reference.reference)}</a>`);
+      }
       const verses = reference.verses
         .map(verse => `<div class="getbible-verse">${verse.verse}. ${verse.text}</div>`)
         .join("\n");

src/js/formats/InlineFormat.js

@@ -46,6 +46,13 @@ export class InlineFormat extends BaseFormat {
       if (footer.length > 0) {
         display.push(`<b class="getbible-footer">${footer.join(' - ')}</b>`);
       }
+      // Add link to chapter
+      if (this.action.bibleLink) {
+        display.push(`<a class="getbible-link"
+            href="${this.action.bibleUrl}${reference.bibleUrl}"
+            target="_blank" style="text-decoration: unset;"
+            title="${reference.reference}">${this.getExternalLinkImage(reference.reference)}</a>`);
+      }
       display.push(`</div>`);
     });
 

tests/basic.html

@@ -19,10 +19,11 @@
     <li class="getBible" data-translation="kjv;aov" data-show-translation="1" data-show-language="1"
         data-format="tooltip">John 3:16,19
     </li>
-    <li class="getBible" data-show-abbreviation="1" data-format="modal">John 3:16-17; 1 John 3:16-19,22</li>
+    <li class="getBible" data-show-abbreviation="1" data-format="modal" data-bible-url="https://trueChristian.church/scriptures/">John 3:16-17; 1 John 3:16-19,22</li>
-    <li class="getBible" data-translation="kjv;codex;aov" data-show-reference="1" data-format="modal">Genesis 1:1</li>
+    <li class="getBible" data-translation="kjv;codex;aov" data-show-reference="1" data-format="modal" data-show-bible-link="1">Genesis 1:1</li>
-    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="inline">Psalms 23:1-4</li>
+    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="tooltip">Psalms 23:1-4</li>
-    <li class="getBible">Romans 8:28,31-39</li>
+    <li class="getBible" data-bible-url="https://trueChristian.church/scriptures/">Romans 8:28,31-39</li>
+    <li class="getBible" data-bible-url="https://trueChristian.church/scriptures/">John 3:15-21</li>
 </ul>
 
 </body>

tests/bootstrap.html

@@ -28,8 +28,8 @@
     <li class="getBible" data-translation="kjv;aov" data-show-translation="1" data-show-language="1"
         data-format="tooltip">John 3:16,19
     </li>
-    <li class="getBible" data-show-abbreviation="1" data-format="modal">John 3:16-17; 1 John 3:16-19,22</li>
+    <li class="getBible" data-show-abbreviation="1" data-format="modal" data-show-bible-link="1">John 3:16-17; 1 John 3:16-19,22</li>
-    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal">Genesis 1:1</li>
+    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal" data-show-bible-link="1">Genesis 1:1</li>
     <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="tooltip">Psalms 23:1-4</li>
     <li class="getBible">Romans 8:28,31-39</li>
 </ul>

tests/tailwind.html

@@ -25,8 +25,8 @@
     <li class="getBible" data-translation="kjv;aov" data-show-translation="1" data-show-language="1"
         data-format="tooltip">John 3:16,19
     </li>
-    <li class="getBible" data-show-abbreviation="1" data-format="modal">John 3:16-17; 1 John 3:16-19,22</li>
+    <li class="getBible" data-show-abbreviation="1" data-format="modal" data-show-bible-link="1">John 3:16-17; 1 John 3:16-19,22</li>
-    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal">Genesis 1:1</li>
+    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal" data-show-bible-link="1">Genesis 1:1</li>
     <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="tooltip">Psalms 23:1-4</li>
     <li class="getBible">Romans 8:28,31-39</li>
 </ul>

tests/uikit.html

@@ -26,8 +26,8 @@
     <li class="getBible" data-translation="kjv;aov" data-show-translation="1" data-show-language="1"
         data-format="tooltip">John 3:16,19
     </li>
-    <li class="getBible" data-translation="kjv;aov" data-show-abbreviation="1"  data-show-language-code="1" data-format="modal">John 3:16-17; 1 John 3:16-19,22</li>
+    <li class="getBible" data-translation="kjv;aov" data-show-abbreviation="1"  data-show-language-code="1" data-format="modal" data-show-bible-link="1">John 3:16-17; 1 John 3:16-19,22</li>
-    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal">Genesis 1:1</li>
+    <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="modal" data-show-bible-link="1">Genesis 1:1</li>
     <li class="getBible" data-translation="kjv;codex" data-show-language="1" data-format="tooltip">Psalms 23:1-4</li>
     <li class="getBible">Rom 8:28,31-39</li>
 </ul>