Copy/paste query string to/from Clipboard by pressing C/V key; comple…

…te Dolch word list

README.md

@@ -47,6 +47,14 @@ The query strings shown here are links to complete URLs. To show the example, cl
 
 For more examples, see the [examples](./examples) folder.
 
+### Sight words
+
+Dolch pre-primary word list.
+
+[text=a//and//away//big//blue//can//come//down//find//for//funny//go//help//here//I//in//is//it//jump//little//look//make//me//my//not//one//play//red//run//said//see//the//three//to//two//up//we//where//yellow//you](https://grahamhannington.github.io/bigas?text=a//and//away//big//blue//can//come//down//find//for//funny//go//help//here//I//in//is//it//jump//little//look//make//me//my//not//one//play//red//run//said//see//the//three//to//two//up//we//where//yellow//you)
+
+Want [more Dolch](./examples/#dolch)?
+
 ### DON'T PANIC
 
 [googleFont=Bungee+Inline&background=%23336633&text=DON%27T/PANIC](https://grahamhannington.github.io/bigas?googleFont=Bungee+Inline&background=%23336633&text=DON%27T/PANIC)
@@ -81,24 +89,12 @@ Excerpt of "All the World's a Stage" by William Shakespeare.
 
 ### Hello, world!
 
-[&textStroke=%23000000&textStrokeWidth=0.3&height=70%&background=center/contain+no-repeat+url(https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_west_2048.jpg)&text=Hello,/world!&title=Hello,+world!](https://grahamhannington.github.io/bigas?textStroke=%23000000&textStrokeWidth=0.3&height=70%&background=center/contain+no-repeat+url(https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_west_2048.jpg)&text=Hello,/world!&title=Hello,+world!)
+[textStroke=%23000000&textStrokeWidth=0.3&height=70%&background=center/contain+no-repeat+url(https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_west_2048.jpg)&text=Hello,/world!&title=Hello,+world!](https://grahamhannington.github.io/bigas?textStroke=%23000000&textStrokeWidth=0.3&height=70%&background=center/contain+no-repeat+url(https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_west_2048.jpg)&text=Hello,/world!&title=Hello,+world!)
 
 ### Do your best
 
 [background=%23262661&googleFont=Nunito+Sans&lineHeight=10&text=%26%23x269C%3B/dyb](https://grahamhannington.github.io/bigas?background=%23262661&googleFont=Nunito+Sans&lineHeight=10&text=%26%23x269C%3B/dyb)
 
-### ace
-
-This example demonstrates trimming the calculated text bounding box, which might be too big, especially if the text contains no ascenders and/or no descenders.
-
-[trimTop=4&trimBottom=3&text=ace](https://grahamhannington.github.io/bigas?trimTop=4&trimBottom=3&text=ace)
-
-### Sight words
-
-For learning to read.
-
-[background=darkgreen&text=apple//baby//back//ball//bear//bed//bell//bird//birthday//boat//box//boy//bread//brother//cake//car//cat//chair//chicken//children//Christmas//coat//corn//cow//day//dog//doll//door//duck//egg//eye//farm//farmer//father//feet//fire//fish//floor//flower//game//garden//girl//goat//grass//ground//hand//head//hill//home//horse//house//kitty//leg//letter//man//men//milk//money//morning//mother//name//nest//night//paper//party//picture//pig//rabbit//rain//ring//robin//Santa%20Claus//school//seed//sheep//shoe//sister//snow//song//squirrel//stick//street//sun//table//thing//time//top//toy//tree//watch//water//way//wind//window//woman//women//wood](https://grahamhannington.github.io/bigas?background=darkgreen&text=apple//baby//back//ball//bear//bed//bell//bird//birthday//boat//box//boy//bread//brother//cake//car//cat//chair//chicken//children//Christmas//coat//corn//cow//day//dog//doll//door//duck//egg//eye//farm//farmer//father//feet//fire//fish//floor//flower//game//garden//girl//goat//grass//ground//hand//head//hill//home//horse//house//kitty//leg//letter//man//men//milk//money//morning//mother//name//nest//night//paper//party//picture//pig//rabbit//rain//ring//robin//Santa%20Claus//school//seed//sheep//shoe//sister//snow//song//squirrel//stick//street//sun//table//thing//time//top//toy//tree//watch//water//way//wind//window//woman//women//wood)
-
 ### What's for lunch?
 
 Who said Soylent Green was only on Tuesdays?
@@ -115,6 +111,12 @@ Automated page flips, one per second, in reverse order.
 
 [interval=1&reverse&text=1//2//3//4//5//6//7//8//9//10](https://grahamhannington.github.io/bigas?interval=1&reverse&text=1//2//3//4//5//6//7//8//9//10)
 
+### ace
+
+This example demonstrates trimming the calculated text bounding box, which might be too big, especially if the text contains no ascenders and/or no descenders.
+
+[trimTop=4&trimBottom=3&text=ace](https://grahamhannington.github.io/bigas?trimTop=4&trimBottom=3&text=ace)
+
 ## Encoding characters in URL parameters
 
 Some characters have a special meaning in URLs and must be encoded when used in the value of a parameter. For example:
@@ -362,6 +364,19 @@ Example: `50%`
 
 See also: [`height`](#height)
 
+## Editing the query string
+
+Editing a long query string in the address bar of a web browser can be awkward.
+
+Big As enables you to easily copy/paste the query string to/from the text editor of your choice:
+
+- To copy the query string to the Clipboard, press `C` (just the `C` key by itself; the key combination `Ctrl`+`C` retains its original function). Before copying the query string to the Clipboard, Big As adds newline characters to make it easier to edit.
+
+- To paste a query string from the Clipboard, press `V` (just the `V` key). Big As removes any newlines from the pasted text, and then sets the query string to the pasted text, triggering a page load.
+
+**Tip:** The query string doesn't contain a leading question mark (`?`). The question mark is used as a separator in the URL. The question mark is not part of the query string.
+However, if you paste a query string with a leading question mark into Big As, it will work.
+
 ## Developer notes
 
 Big As is tiny.
@@ -403,6 +418,12 @@ Perhaps, if I have time:
 
 -   Dynamically generated Open Graph preview images. This would involve moving Big As to a website hosting environment that supports server-side scripting.
 
+## Won't do
+
+Unless I change my mind:
+
+- An integrated query string editor. Instead, see [Editing the query string](#editing-the-query-string)
+
 ## History
 
 | Date       | Description               |

bigas.js

@@ -75,6 +75,17 @@ function formatSVGElementById (svgElementId) {
       ' ': togglePause
     }[event.key]
     keyHandler?.(svgElement)
+    // If unmodified (no Alt or Ctrl) key pressed
+    if (!event.ctrlKey && !event.altKey) {
+      switch (event.key) {
+        case 'c':
+          copyPrettifiedQueryStringToClipboard()
+          break
+        case 'v':
+          pastePrettifiedQueryStringToURL()
+          break
+      }
+    }
   })
 
   let touchstartX = 0
@@ -357,4 +368,30 @@ function getStatePages () {
   return getStateProperty('text').split(pageSeparator).length // Number of pages
 }
 
+async function copyPrettifiedQueryStringToClipboard () {
+  const text = getPrettifiedQueryString()
+  await navigator.clipboard.writeText(text)
+}
+
+function getPrettifiedQueryString () {
+  // Trim leading ? from search property (it's not part of the query string)
+  const queryString = window.location.search.substring(1)
+  // Insert newline after each page break, line break, and parameter separator (&)
+  const prettifiedQueryString = queryString.replace(/\/(\/)?|\&/g, '$&\n')
+  return prettifiedQueryString
+}
+
+// Use contents of Clipboard to set the query string; triggers a page load
+function pastePrettifiedQueryStringToURL () {
+  navigator.clipboard
+    .readText()
+    .then((clipText) => {
+      // The pasted text shouldn't start with a question mark, but if it does, remove it
+      if (clipText[0] === '?') {
+        clipText = clipText.substring(1)
+      }
+      window.location.search = '?' + clipText.replace(/(?:\r\n|\r|\n)/g, '')
+    })
+}
+
 export { formatSVGElementById, formatSVGElementsByClassName, setStateFromURLParams }

examples/README.md

@@ -2,6 +2,22 @@
 
 ## Word lists
 
+### Dolch
+
+Copied from the Wikipedia article "[Dolch word list](https://en.wikipedia.org/wiki/Dolch_word_list)".
+
+Non-nouns:
+
+- [Pre-primer](https://grahamhannington.github.io/bigas?text=a//and//away//big//blue//can//come//down//find//for//funny//go//help//here//I//in//is//it//jump//little//look//make//me//my//not//one//play//red//run//said//see//the//three//to//two//up//we//where//yellow//you) (40 words)
+- [Primer](https://grahamhannington.github.io/bigas?text=all//am//are//at//ate//be//black//brown//but//came//did//do//eat//four//get//good//have//he//into//like//must//new//no//now//on//our//out//please//pretty//ran//ride//saw//say//she//so//soon//that//there//they//this//too//under//want//was//well//went//what//white//who//will//with//yes) (52 words)
+- [1st Grade](https://grahamhannington.github.io/bigas?text=after//again//an//any//as//ask//by//could//every//fly//from//give//going//had//has//her//him//his//how//just//know//let//live//may//of//old//once//open//over//put//round//some//stop//take//thank//them//then//think//walk//were//when) (41 words)
+- [2nd Grade](https://grahamhannington.github.io/bigas?text=always//around//because//been//before//best//both//buy//call//cold//does//don't//fast//first//five//found//gave//goes//green//its//made//many//off//or//pull//read//right//sing//sit//sleep//tell//their//these//those//upon//us//use//very//wash//which//why//wish//work//would//write//your) (46 words)
+- [3rd Grade](https://grahamhannington.github.io/bigas?text=about//better//bring//carry//clean//cut//done//draw//drink//eight//fall//far//full//got//grow//hold//hot//hurt//if//keep//kind//laugh//light//long//much//myself//never//only//own//pick//seven//shall//show//six//small//start//ten//today//together//try//warm) (41 words)
+
+[Nouns](https://grahamhannington.github.io/bigas?text=apple//baby//back//ball//bear//bed//bell//bird//birthday//boat//box//boy//bread//brother//cake//car//cat//chair//chicken//children//Christmas//coat//corn//cow//day//dog//doll//door//duck//egg//eye//farm//farmer//father//feet//fire//fish//floor//flower//game//garden//girl//goat//grass//ground//hand//head//hill//home//horse//house//kitty//leg//letter//man//men//milk//money//morning//mother//name//nest//night//paper//party//picture//pig//rabbit//rain//ring//robin//Santa+Claus//school//seed//sheep//shoe//sister//snow//song//squirrel//stick//street//sun//table//thing//time//top//toy//tree//watch//water//way//wind//window//woman//women//wood) (97 words)
+
+### Miscellaneous
+
 [Days of the week](https://grahamhannington.github.io/bigas?text=Monday//Tuesday//Wednesday//Thursday//Friday//Saturday//Sunday)
 
 ## [Burger](https://grahamhannington.github.io/bigas/examples/burger.html)

style.css

@@ -32,7 +32,7 @@ body {
 }
 #svg.dim {
   visibility: visible;
-  opacity: 0.7;
+  opacity: 0.6;
 }
 text {
   fill: #FFFFFF;