From cf98ed4207d5142ebfd25e05051048a3ae03caef Mon Sep 17 00:00:00 2001 From: grahamhannington Date: Sun, 3 Nov 2024 20:46:04 +0800 Subject: [PATCH] Copy/paste query string to/from Clipboard by pressing C/V key; complete Dolch word list --- README.md | 47 +++++++++++++++++++++++++++++++++------------- bigas.js | 37 ++++++++++++++++++++++++++++++++++++ examples/README.md | 16 ++++++++++++++++ style.css | 2 +- 4 files changed, 88 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e12ae45..4d24f6c 100644 --- a/README.md +++ b/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 | diff --git a/bigas.js b/bigas.js index 5cc5bcb..1a9f27c 100644 --- a/bigas.js +++ b/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 } \ No newline at end of file diff --git a/examples/README.md b/examples/README.md index 50cc480..3dd21be 100644 --- a/examples/README.md +++ b/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) diff --git a/style.css b/style.css index 1a0a794..d3ee12d 100644 --- a/style.css +++ b/style.css @@ -32,7 +32,7 @@ body { } #svg.dim { visibility: visible; - opacity: 0.7; + opacity: 0.6; } text { fill: #FFFFFF;