From 14326b4960f12d9d60cbd246a3836dcb9079daa2 Mon Sep 17 00:00:00 2001
From: grahamhannington <graham.hannington@gmail.com>
Date: Tue, 5 Nov 2024 14:50:07 +0800
Subject: [PATCH] Add information button (infoButton=true|false, default true)

---
 README.md        | 23 ++++++++++++++++++++++-
 bigas.js         | 10 +++++++++-
 index.html       |  3 +++
 modules/state.js |  1 +
 style.css        | 12 ++++++++++++
 5 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c069188..69dc767 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Web developers: you can use Big As in your own web pages to display text as big
 
 - You're in an airport arrivals hall waiting to meet someone you've never met, and you forgot to tell them to look for the person wearing a blue carnation in their lapel.
 
-- Learning to read sight words.
+- Flash cards for learning to read sight words.
 
 - Undecided what to have for lunch? Use the [`random`](#random) parameter!
 
@@ -212,6 +212,20 @@ Example: `50%`
 
 See also: [`width`](#width)
 
+### `infoButton`
+
+Show an information button (&#x1F6C8;) at the bottom left corner of the screen.
+
+The information button is a link to this page.
+
+If you want a "kiosk" mode with no external links, set `infoButton=false`.
+
+The information button is rendered in the same color as the text ([`textFill`](#textFill)).
+
+Allowed values: `true` or `false`
+
+Default: `true`
+
 ### `interval`
 
 Automates page flipping, specifying the interval in seconds between flips.
@@ -421,6 +435,13 @@ Perhaps, if I have time:
 
 -   Named presets. Introduce a new `preset` parameter that supports a limited number of values that represent some combination of parameter values, as a shortcut to specifying all of those parameters.
     For example, `preset=earth` might display a background image of Earth without all that tedious messing around with the `background` parameter.
+    
+-   Move user documentation content from this readme to more user-friendly static HTML pages, away from the potentially off-putting developer-centric context of this GitHub readme. Change the destination of the information button to those pages.
+
+-   Revisit support for multiple instances of "Big As"-formatted SVG element in a single page. This might involve maintaining a separate "state" object to manage each SVG element.
+    I acknowledge that I've focussed on the functionality of the `index.html` page, which uses a single call to `formatSVGElementsByID()`, at the expense of, say, the `formatSVGElementsByClassName()` function.
+    
+-   Replace (or augment) the information button with a menu button. I have mixed feelings about this. I want a minimal user interface. It took me a while to come around to the idea of showing an information button.
 
 -   Dynamically generated Open Graph preview images. This would involve moving Big As to a website hosting environment that supports server-side scripting.
 
diff --git a/bigas.js b/bigas.js
index 1a9f27c..1a1b8bb 100644
--- a/bigas.js
+++ b/bigas.js
@@ -52,14 +52,22 @@ function setStateFromURLParams () {
 }
 
 function formatSVGElementById (svgElementId) {
-  const svgElement = document.getElementById(svgElementId)
   const state = getState()
+  const svgElement = document.getElementById(svgElementId)
   // If a Google Font is specified, synchronously load the Web Font Loader script
   if (state.googleFont) {
  	  loadExternalScript(urlWebFontLoader)
 	}
   window.addEventListener('load', () => {
     insertText(svgElement)
+    if (getStateProperty('infoButton') === true) {
+      // Show the info button
+      document.getElementById('info').style.visibility = 'visible'
+      // Apply the text fill color to the info button.
+      // Known issue: text fill can use SVG color names
+      // that aren't necessarily supported in CSS outside of SVG.
+      document.querySelector('#info a').style.color = getStateProperty('textFill')
+    }
   })
   
   window.addEventListener('keyup', (event) => {
diff --git a/index.html b/index.html
index b54c6b3..9559109 100644
--- a/index.html
+++ b/index.html
@@ -19,5 +19,8 @@
 <svg id="svg">
 </svg>
 </div>
+<div id="info">
+<a href="https://github.com/GrahamHannington/bigas" title="Powered by Big As">&#x1F6C8;</a>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/modules/state.js b/modules/state.js
index f1f1ae8..5b9efdb 100644
--- a/modules/state.js
+++ b/modules/state.js
@@ -11,6 +11,7 @@ let state = {
   fadeIn: 0.5,
   fontWeight: '400',
   height: '100%',
+  infoButton: true,
   interval: 0,
   lineHeight: 16,
   margin: null,
diff --git a/style.css b/style.css
index d3ee12d..566f23c 100644
--- a/style.css
+++ b/style.css
@@ -37,4 +37,16 @@ body {
 text {
   fill: #FFFFFF;
   paint-order: stroke;
+}
+#info {
+  visibility: hidden;
+  position: absolute;
+  bottom: 0.5em;
+  left: 0.5em;
+}
+#info a {
+  opacity: 0.5;
+  font-size: 1.5em;
+  color: #FFFFFF;
+  text-decoration: none;
 }
\ No newline at end of file