From 596efff70d221a9f80a17c636813854b6a12f0f8 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Thu, 30 May 2019 14:11:06 -0600 Subject: [PATCH] Fix IPA field help rendering; Use arrows in usage.html --- src/js/KeyboardFire/phondue/usage.html | 78 +++++++++++++------------- src/js/render.js | 6 ++ src/js/setupListeners.js | 7 +-- 3 files changed, 46 insertions(+), 45 deletions(-) diff --git a/src/js/KeyboardFire/phondue/usage.html b/src/js/KeyboardFire/phondue/usage.html index 7bae75e..59c4588 100644 --- a/src/js/KeyboardFire/phondue/usage.html +++ b/src/js/KeyboardFire/phondue/usage.html @@ -9,17 +9,17 @@ that allow you to type any IPA symbol with only a standard keyboard.

  • Many symbols that look similar to letters of the English alphabet (such as small caps) can be produced by doubling the capital letter:

    -
      GG -> ɢ   ?? -> ʔ   NN -> ɴ   BB -> ʙ   RR -> ʀ   XX -> χ
-  LL -> ʟ   II -> ɪ   YY -> ʏ   UU -> ʊ   EE -> ɛ   OO -> ɞ
-  AA -> ɑ   '' -> ˈ   ,, -> ˌ   :: -> ː
+
      GG → ɢ   ?? → ʔ   NN → ɴ   BB → ʙ   RR → ʀ   XX → χ
+  LL → ʟ   II → ɪ   YY → ʏ   UU → ʊ   EE → ɛ   OO → ɞ
+  AA → ɑ   '' → ˈ   ,, → ˌ   :: → ː

  • The slash is used to "reflect," "rotate," or otherwise flip around a given symbol:

    -
      ʀ/ -> ʁ   ʔ/ -> ʕ   ?/ -> ʕ   r/ -> ɹ   y/ -> ʎ   m/ -> ɯ
-  o/ -> ø   e/ -> ə   ɛ/ -> ɜ   c/ -> ɔ   a/ -> ɐ   ɑ/ -> ɒ
-  w/ -> ʍ   h/ -> ɥ   k/ -> ʞ   !/ -> ¡   v/ -> ʌ
+
      ʀ/ → ʁ   ʔ/ → ʕ   ?/ → ʕ   r/ → ɹ   y/ → ʎ   m/ → ɯ
+  o/ → ø   e/ → ə   ɛ/ → ɜ   c/ → ɔ   a/ → ɐ   ɑ/ → ɒ
+  w/ → ʍ   h/ → ɥ   k/ → ʞ   !/ → ¡   v/ → ʌ
 
    
 
    Also note that for any digraph, if either of the two characters that
 compose it are not "standard" letters you can find on your keyboard, the
@@ -35,26 +35,26 @@ visual o| and |o.
    
 characters, or two characters next to each other. This includes "hooked"
 letters (such as ŋ), produced with the original letter and a comma, and
 "stroked" letters (such as ɟ), produced with the original letter and a dash:
    
-
      m, -> ɱ   n, -> ŋ   ŋ, -> ɲ   v, -> ⱱ   c, -> ç   j, -> ʝ
-  x, -> ɣ   ɣ, -> χ   h, -> ɦ   w, -> ɰ
+
      m, → ɱ   n, → ŋ   ŋ, → ɲ   v, → ⱱ   c, → ç   j, → ʝ
+  x, → ɣ   ɣ, → χ   h, → ɦ   w, → ɰ
 
-  j- -> ɟ   h- -> ħ   l- -> ɬ   i- -> ɨ   u- -> ʉ   e- -> ɘ
-  o- -> ɵ   ʕ- -> ʢ   ?- -> ʡ   ʔ- -> ʡ
+  j- → ɟ   h- → ħ   l- → ɬ   i- → ɨ   u- → ʉ   e- → ɘ
+  o- → ɵ   ʕ- → ʢ   ?- → ʡ   ʔ- → ʡ
 
-  LZ -> ɮ   OX -> ɤ   XO -> ɤ   OE -> œ   EB -> ɞ   AE -> æ
-  CE -> ɶ   RL -> ɺ   LR -> ɺ   ɾl -> ɺ   lɾ -> ɺ
+  LZ → ɮ   OX → ɤ   XO → ɤ   OE → œ   EB → ɞ   AE → æ
+  CE → ɶ   RL → ɺ   LR → ɺ   ɾl → ɺ   lɾ → ɺ
 
-  w| -> ɰ   o/ -> ø   ɜ( -> ɞ   /\ -> ʌ   o| -> ɑ   a| -> ɑ
-  |o -> ɒ   |a -> ɒ
+  w| → ɰ   o/ → ø   ɜ( → ɞ   /\ → ʌ   o| → ɑ   a| → ɑ
+  |o → ɒ   |a → ɒ
 
-  o. -> ʘ   |= -> ǂ   || -> ‖   /^ -> ↗   /> -> ↗   \v -> ↘
-  \> -> ↘
+  o. → ʘ   |= → ǂ   || → ‖   /^ → ↗   /> → ↗   \v → ↘
+  \> → ↘

  • Others are based on pronunciation:

    -
      PH -> ɸ   BH -> β   TH -> θ   DH -> ð   SH -> ʃ   ZH -> ʒ
-  SJ -> ɕ   ZJ -> ʑ   ʃx -> ɧ   xʃ -> ɧ
+
      PH → ɸ   BH → β   TH → θ   DH → ð   SH → ʃ   ZH → ʒ
+  SJ → ɕ   ZJ → ʑ   ʃx → ɧ   xʃ → ɧ
 
    
 
    It may be worth noting at this point that digraphs of two lowercase letters
 were intentionally avoided to prevent interference with regular typing. If
@@ -66,7 +66,7 @@ to the second character.

  • A few digraphs are based on shape:

    -
      rO -> ɾ   r0 -> ɾ   vO -> ʋ   v0 -> ʋ
+
      rO → ɾ   r0 → ɾ   vO → ʋ   v0 → ʋ
 
    
 
    Another related point: digraphs that contain a lowercase letter can also be
 typed with that letter as uppercase. So, if RO is easier to type than
@@ -75,35 +75,35 @@ typed with that letter as uppercase. So, if RO is easier to type th
 
  • 
 
    Retroflex and nonpulmonic symbols have their own categories:
    
 
      retroflex: ) looks like the shape of the tongue
-  t) -> ʈ   d) -> ɖ   n) -> ɳ   r) -> ɽ   ɾ) -> ɽ   s) -> ʂ
-  z) -> ʐ   ɹ) -> ɻ   l) -> ɭ   ɗ) -> ᶑ
+  t) → ʈ   d) → ɖ   n) → ɳ   r) → ɽ   ɾ) → ɽ   s) → ʂ
+  z) → ʐ   ɹ) → ɻ   l) → ɭ   ɗ) → ᶑ
 
   clicks: clicking noise reminiscent of a *
-  o* -> ʘ   |* -> ǀ   !* -> ǃ   =* -> ǁ
+  o* → ʘ   |* → ǀ   !* → ǃ   =* → ǁ
 
   implosives and ejective marker: direction of airflow
-  b( -> ɓ   d( -> ɗ   j( -> ʄ   ɟ( -> ʄ   g( -> ɠ   ɢ( -> ʛ
-  ɖ( -> ᶑ   ') -> ʼ
+  b( → ɓ   d( → ɗ   j( → ʄ   ɟ( → ʄ   g( → ɠ   ɢ( → ʛ
+  ɖ( → ᶑ   ') → ʼ
 
    
 
    • 
 
  • 
 
    Superscripts and diacritics that go above the letter use ^, diacritics that
 go below use _, and miscellaneous "moved" symbols
 use < or >:
    
-
      ^h -> ʰ   ^n -> ⁿ   ^m -> ᵐ   ^ŋ -> ᵑ   ^l -> ˡ   ^w -> ʷ
-  ^j -> ʲ   ^ɥ -> ᶣ   ^ʋ -> ᶹ   ^ɣ -> ˠ   ^ʕ -> ˤ
+
      ^h → ʰ   ^n → ⁿ   ^m → ᵐ   ^ŋ → ᵑ   ^l → ˡ   ^w → ʷ
+  ^j → ʲ   ^ɥ → ᶣ   ^ʋ → ᶹ   ^ɣ → ˠ   ^ʕ → ˤ
 
-  _| -> ◌̩   ^| -> ◌̍   _o -> ◌̥   ^o -> ◌̊   _v -> ◌̬   ^v -> ◌̌
+  _| → ◌̩   ^| → ◌̍   _o → ◌̥   ^o → ◌̊   _v → ◌̬   ^v → ◌̌
 
-  _^ -> ◌̯   _: -> ◌̤   _~ -> ◌̰   _[ -> ◌̪   _] -> ◌̺   _{ -> ◌̼
-  _+ -> ◌̟   __ -> ◌̠   _) -> ◌̹   _( -> ◌̜   _# -> ◌̻   [] -> ◌̻
+  _^ → ◌̯   _: → ◌̤   _~ → ◌̰   _[ → ◌̪   _] → ◌̺   _{ → ◌̼
+  _+ → ◌̟   __ → ◌̠   _) → ◌̹   _( → ◌̜   _# → ◌̻   [] → ◌̻
 
-  ^> -> ◌̚   ^: -> ◌̈   ^x -> ◌̽   ^~ -> ◌̃
+  ^> → ◌̚   ^: → ◌̈   ^x → ◌̽   ^~ → ◌̃
 
-  -' -> ˔   _˔ -> ◌̝   -, -> ˕   _˕ -> ◌̞   <| -> ⊣   _⊣ -> ◌̘
-  >| -> ⊢   _⊢ -> ◌̙
+  -' → ˔   _˔ → ◌̝   -, → ˕   _˕ → ◌̞   <| → ⊣   _⊣ → ◌̘
+  >| → ⊢   _⊢ → ◌̙
 
-  ~~ -> ◌̴   >r -> ˞
+  ~~ → ◌̴   >r → ˞
 
    
 
    Note that all of these sequences can be flipped in order—that is, ^h
 produces the same thing as h^. This allows usage such as |<_ to produce
@@ -111,16 +111,16 @@ produces the same thing as h^. This allows usage such as |<
 
    • 
 
  • 
 
    Tonal countours use numbers plus |:
    
-
      5| -> ˥   4| -> ˦   3| -> ˧   2| -> ˨   1| -> ˩
-  +| -> ꜛ   -| -> ꜜ
+
      5| → ˥   4| → ˦   3| → ˧   2| → ˨   1| → ˩
+  +| → ꜛ   -| → ꜜ
 
    
 
    • 
 
  • 
 
    Finally, some digraphs simply have unique mnemonics:
    
-
      ː-  -> ˑ   "chop off" the bottom triangle
-  ((  -> ◌͡◌  two parens for a tie that connects 2 chars
-  ))  -> ◌͜◌
-  ◌͜◌) -> ‿   one more paren to make it a little bit longer
+
      ː-  → ˑ   "chop off" the bottom triangle
+  ((  → ◌͡◌  two parens for a tie that connects 2 chars
+  ))  → ◌͜◌
+  ◌͜◌) → ‿   one more paren to make it a little bit longer
 
    
 
    • 
 
\ No newline at end of file
diff --git a/src/js/render.js b/src/js/render.js
index 8c7f573..ca79c1c 100644
--- a/src/js/render.js
+++ b/src/js/render.js
@@ -292,6 +292,12 @@ export function renderEditForm(wordId = false) {
   }
 }
 
+export function renderIPAHelp() {
+  import('./KeyboardFire/phondue/usage.html').then(html => {
+    renderInfoModal(html);
+  });
+}
+
 export function renderIPATable(ipaTableButton) {
   ipaTableButton = typeof ipaTableButton.target === 'undefined' || ipaTableButton.target === '' ? ipaTableButton : ipaTableButton.target;
   const label = ipaTableButton.parentElement.innerText.replace(/(Field Help|IPA Chart)/g, '').trim();
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index 2acfd86..be6e0bc 100644
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@@ -1,5 +1,5 @@
 import {showSection, hideDetailsPanel} from './displayToggles';
-import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal, renderIPATable } from './render';
+import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal, renderIPATable, renderIPAHelp } from './render';
 import { confirmEditWord, cancelEditWord, confirmDeleteWord, submitWordForm } from './wordManagement';
 import { openEditModal, saveEditModal, saveAndCloseEditModal, exportDictionary, exportWords, importDictionary, importWords, confirmDeleteDictionary } from './dictionaryManagement';
 import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
@@ -287,11 +287,6 @@ export function setupIPAButtons() {
     button.addEventListener('click', renderIPATable);
   });
 
-  const renderIPAHelp = () => {
-    import('./KeyboardFire/phondue/usage.html').then(html => {
-      renderInfoModal(html);
-    });
-  }
   Array.from(ipaFieldHelpButtons).forEach(button => {
     button.removeEventListener('click', renderIPAHelp);
     button.addEventListener('click', renderIPAHelp);