Make IPA fields use KeyboardFire/phondue

index.html

@@ -80,7 +80,7 @@
           <input id="wordName">
         </label>
         <label>Pronunciation<a class="label-button ipa-table-button">IPA Chart</a><br>
-          <input id="wordPronunciation"><br>
+          <input id="wordPronunciation" class="ipa-field"><br>
           <a class="label-help-button ipa-field-help-button">Field Help</a>
         </label>
         <label>Part of Speech<br>
@@ -203,21 +203,21 @@
         <div class="split three">
           <div>
             <label>Consonants<br>
-              <input id="editConsonants"><br>
+              <input id="editConsonants" class="ipa-field"><br>
               <a class="label-help-button ipa-field-help-button">Field Help</a>
               <a class="label-button ipa-table-button">IPA Chart</a>
             </label>
           </div>
           <div>
             <label>Vowels<br>
-              <input id="editVowels"><br>
+              <input id="editVowels" class="ipa-field"><br>
               <a class="label-help-button ipa-field-help-button">Field Help</a>
               <a class="label-button ipa-table-button">IPA Chart</a>
             </label>
           </div>
           <div>
             <label>Polyphthongs&nbsp;/ Blends<br>
-              <input id="editBlends"><br>
+              <input id="editBlends" class="ipa-field"><br>
               <a class="label-help-button ipa-field-help-button">Field Help</a>
               <a class="label-button ipa-table-button">IPA Chart</a>
             </label>

src/js/KeyboardFire/phondue/ipaField.js

@@ -0,0 +1,15 @@
+import digraphs from './digraphs.json';
+import { setSelectionRange, insertAtCursor } from '../../StackOverflow/inputCursorManagement.js';
+
+export function usePhondueDigraphs(event) {
+  let val = event.target.value;
+  let pos = event.target.selectionStart || val.length;
+
+  const key = typeof event.which !== "undefined" ? event.which : event.keyCode,
+    digraph = digraphs[val.substr(pos - 1, 1) + String.fromCharCode(key)];
+
+  if (digraph) {
+    event.preventDefault();
+    insertAtCursor(event.target, digraph, -1);
+  }
+}

src/js/StackOverflow/inputCursorManagement.js

@@ -1,4 +1,4 @@
-export function insertAtCursor(myField, myValue) {
+export function insertAtCursor(myField, myValue, adjustStart = 0) {
   // http://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript
   // IE support
   if (document.selection) {
@@ -9,6 +9,7 @@ export function insertAtCursor(myField, myValue) {
   // MOZILLA and others
   else if (myField.selectionStart || myField.selectionStart == '0') {
     const selection = getInputSelection(myField);
+    selection.start += adjustStart;
     myField.value = myField.value.substring(0, selection.start)
       + myValue
       + myField.value.substring(selection.end, myField.value.length);

src/js/render.js

@@ -11,7 +11,8 @@ import {
   setupWordEditFormButtons,
   setupMaximizeModal,
   setupInfoModal,
-  setupIPATable
+  setupIPATable,
+  setupIPAFields
 } from './setupListeners';
 import { getPaginationData } from './pagination';
 import { getOpenEditForms } from './wordManagement';
@@ -269,7 +270,7 @@ export function renderIPATable(ipaTableButton) {
     modalElement.innerHTML = `<div class="modal-background"></div>
     <div class="modal-content">
       <a class="close-button">&times;&#xFE0E;</a>
-      <header><label>Pronunciation <input value="${textBox.value}"></label></header>
+      <header><label>Pronunciation <input value="${textBox.value}" class="ipa-field"></label></header>
       <section>
         ${html}
       </section>
@@ -278,6 +279,7 @@ export function renderIPATable(ipaTableButton) {
   
     document.body.appendChild(modalElement);
     
+    setupIPAFields();
     setupIPATable(modalElement, textBox);
   });
 }
@@ -305,8 +307,8 @@ export function renderMaximizedTextbox(maximizeButton) {
 
 export function renderInfoModal(content) {
   const modalElement = document.createElement('section');
-  modalElement.classList.add('modal');
-  modalElement.innerHTML = `<section class="modal maximize-modal"><div class="modal-background"></div>
+  modalElement.classList.add('modal', 'info-modal');
+  modalElement.innerHTML = `<div class="modal-background"></div>
   <div class="modal-content">
     <a class="close-button">&times;&#xFE0E;</a>
     <section class="info-modal">
@@ -314,8 +316,7 @@ export function renderInfoModal(content) {
         ${content}
       </div>
     </section>
-    </div>
-  </section>`;
+  </div>`;
 
   document.body.appendChild(modalElement);
 

src/js/setupListeners.js

@@ -6,6 +6,7 @@ import { getNextId } from './utilities';
 import { openEditModal, saveEditModal, saveAndCloseEditModal } from './dictionaryManagement';
 import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
 import { insertAtCursor } from './StackOverflow/inputCursorManagement';
+import { usePhondueDigraphs } from './KeyboardFire/phondue/ipaField';
 
 export default function setupListeners() {
   setupDetailsTabs();
@@ -164,7 +165,7 @@ function setupWordForm() {
     }
   });
 
-  setupIPAButtons();
+  setupIPAFields();
   setupMaximizeButtons();
 }
 
@@ -228,7 +229,7 @@ export function setupWordEditFormButtons() {
     button.addEventListener('click', cancelEditWord);
   });
 
-  setupIPAButtons();
+  setupIPAFields();
   setupMaximizeButtons();
 }
 
@@ -267,6 +268,16 @@ export function setupPagination() {
   });
 }
 
+export function setupIPAFields() {
+  const ipaFields = document.getElementsByClassName('ipa-field');
+  Array.from(ipaFields).forEach(field => {
+    field.removeEventListener('keypress', usePhondueDigraphs);
+    field.addEventListener('keypress', usePhondueDigraphs);
+  });
+
+  setupIPAButtons();
+}
+
 export function setupIPAButtons() {
   const ipaTableButtons = document.getElementsByClassName('ipa-table-button'),
     ipaFieldHelpButtons = document.getElementsByClassName('ipa-field-help-button');

src/scss/_elements.scss

@@ -22,6 +22,11 @@ label {
     font-weight: normal;
   }
 
+  input:not([type="checkbox"]):not([type="radio"]) {
+    padding-bottom: 2px;
+    line-height: 130%;
+  }
+
   input:not([type="checkbox"]):not([type="radio"]),
   select, textarea {
     font-weight: normal;