diff --git a/icons/intro.svg b/icons/intro.svg new file mode 100644 index 0000000..3fc24d0 --- /dev/null +++ b/icons/intro.svg @@ -0,0 +1,80 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/icons/start.svg b/icons/start.svg new file mode 100644 index 0000000..364e25a --- /dev/null +++ b/icons/start.svg @@ -0,0 +1,66 @@ + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/icons/tung.svg b/icons/tung.svg index a9a60e5..49bb82a 100644 --- a/icons/tung.svg +++ b/icons/tung.svg @@ -8,7 +8,7 @@ version="1.1" id="svg8" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" - sodipodi:docname="tongue.svg" + sodipodi:docname="tung.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -26,8 +26,8 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom="11.2" - inkscape:cx="10.044643" - inkscape:cy="14.553571" + inkscape:cx="24.508929" + inkscape:cy="12.857143" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" diff --git a/index.html b/index.html index ab8c224..8d679dc 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,13 @@ + - + tung-tap @@ -18,23 +19,28 @@ - - +

+ tungtap.app +

- Unicode key-swatch webapp for any cultures tongue! + easily augment your
+ system's keyboard

- --> + + + +
edit keys   ↗
+ +
↙   tap keys   ↘
+ +
- -
+
- +
+ + +
-
+ + -
+
- diff --git a/script.js b/script.js index e0a611c..cb3f340 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,6 @@ +doc = document +elbyid = (id) => doc.getElementById(id) + var tung = "" var topToggle = false @@ -18,11 +21,13 @@ $(document).ready(() => { if (localStorage.getItem('tung') === null || localStorage.getItem('tung') == "") { tung = "201C 2014 00D7 00B0 00B7 2022 221E 00B1 2023 201D" localStorage.setItem('tung', tung) + + intro.showModal() } else { tung = localStorage.getItem('tung') } - $('#tung').html(tung) + elbyid('tung').value = tung layout() // persistent text @@ -30,7 +35,7 @@ $(document).ready(() => { localStorage.setItem('text', "") } else { - $('#text').html(localStorage.getItem('text')) + elbyid('text').value = localStorage.getItem('text') } @@ -152,11 +157,9 @@ function nav() { background-color: #ff79a1; color: #79394f; "> - Find more character codes in - unicode.org - reference charts - or sketching in shapecatcher.com - drawbox search! + Find more character codes + in the unicode.org reference charts + or by sketching in a drawbox search at shapecatcher.com!
` $('#nav').html(links + back + html) @@ -175,7 +178,7 @@ var selected = null function select(index, pick) { let line = lines[index] if (pick) { - $('#tung').html(line.split(':')[1].trim()) + elbyid('tung').value = line.split(':')[1].trim() layout() selected = index } else { @@ -204,7 +207,7 @@ function getLines(divId) { function layout() { // keymap (tung is the proprietary name) - let tungText = $('#tung').html() //.replace('\r\n', '\n') + let tungText = elbyid('tung').value //.replace('\r\n', '\n') tungText = tungText.replace(/
/g, '\n').replace(/<\/div>/g, '') if (tung != tungText) { tung = tungText @@ -246,21 +249,21 @@ function layout() { // override default behavior key.preventDefault() - // if text is not focused then set the cursor to the end of $('#text') - let textEl = $('#text') - if (document.activeElement != textEl[0] && window.getSelection().rangeCount == 0) { - let selection = window.getSelection() - let range = document.createRange() - range.selectNodeContents(textEl[0]) - range.collapse(false) - selection.removeAllRanges() - selection.addRange(range) - } - textEl.focus() + // if text is not focused then set the cursor to the end of #text + // let textEl = elbyid('text') + // if (document.activeElement != textEl && window.getSelection().rangeCount == 0) { + // let selection = window.getSelection() + // let range = document.createRange() + // range.selectNodeContents(textEl) + // range.collapse(false) + // selection.removeAllRanges() + // selection.addRange(range) + // } + // textEl.focus() - // insert key character into contenteditable div $('#text') at cursor position + // insert key character at cursor position in textarea let char = String.fromCharCode("0x" + $(key.target).attr('charcode')) - insertTextAtCursor(char) + insertAtCursor(char) @@ -269,36 +272,31 @@ function layout() { }) } - - - -function insertTextAtCursor(text) { - let selection = window.getSelection() - let range = selection.getRangeAt(0) - range.deleteContents() - let node = document.createTextNode(text) - range.insertNode(node) - range.setStartAfter(node) - range.setEndAfter(node) - selection.removeAllRanges() - selection.addRange(range) +function insertAtCursor(text) { + const textarea = elbyid('text'); + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + textarea.selectionStart = caretPos + text.length; + textarea.selectionEnd = caretPos + text.length; + textarea.scrollTop = scrollPos; + textarea.focus(); } function copyToClipboard(id) { - var textEl = $(id) + var textarea = elbyid(id) - // select all the text on the contenteditable div textEl to show it was copied - let selection = window.getSelection() - let range = document.createRange() - range.selectNodeContents(textEl[0]) - selection.removeAllRanges() - selection.addRange(range) + // select all the text in the textarea to show it was copied + // textarea.focus() + textarea.select() if (!navigator.clipboard) { console.error('Clipboard API not supported'); return; } - navigator.clipboard.writeText(textEl.html()) + navigator.clipboard.writeText(textarea.value) .then(() => { console.log('Text copied to clipboard') }) @@ -358,8 +356,9 @@ function loop(timestamp) { // check if need to backup the text - let text = $('#text').html() + let text = elbyid('text').value if (text != lastText) { + console.log(text) localStorage.setItem('text', text) lastText = text } diff --git a/style.css b/style.css index e85206c..cc22fee 100644 --- a/style.css +++ b/style.css @@ -12,6 +12,8 @@ /* all: unset; */ outline: none; /* box-sizing: border-box; */ + font-family: 'Atkinson Hyperlegible', sans-serif; + text-rendering: optimizeLegibility; } @@ -35,6 +37,8 @@ html { box-sizing: border-box; height: 100%; + + height: 100dvh; } body { @@ -53,6 +57,8 @@ body { overflow: hidden; touch-action: none; + + height: 100dvh; } /* hide scrollbar */ @@ -118,8 +124,7 @@ a { align-items: baseline; } -/* textarea { - font-family: sans-serif; +textarea { font-size: 16px; line-height: 1.5; padding: 1.5rem 1rem; @@ -134,11 +139,9 @@ a { overflow: auto; -webkit-overflow-scrolling: touch; - height: -webkit-fill-available; - background-color: rgb(var(--field)); color: rgb(var(--txt)); -} */ +} #keyboard { display: block; diff --git a/test/index.html b/test/index.html index 027a11a..f144f5c 100644 --- a/test/index.html +++ b/test/index.html @@ -3,56 +3,118 @@ + test - -
+ + +
This stays stuck to the visual viewport
+
+
+ + - - - - - \ No newline at end of file + \ No newline at end of file