Add information button (infoButton=true|false, default true)

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 (🛈) 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.
 

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) => {

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>

modules/state.js

@@ -11,6 +11,7 @@ let state = {
   fadeIn: 0.5,
   fontWeight: '400',
   height: '100%',
+  infoButton: true,
   interval: 0,
   lineHeight: 16,
   margin: null,

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;
 }