diff --git a/src/js/KeyboardFire/phondue/ipaField.js b/src/js/KeyboardFire/phondue/ipaField.js
new file mode 100644
index 0000000..f13c8e0
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/src/js/StackOverflow/inputCursorManagement.js b/src/js/StackOverflow/inputCursorManagement.js
index 90f69f7..50e5615 100644
--- a/src/js/StackOverflow/inputCursorManagement.js
+++ b/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);
diff --git a/src/js/render.js b/src/js/render.js
index 6e099d1..6319340 100644
--- a/src/js/render.js
+++ b/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 = `
×︎
-
+
@@ -278,6 +279,7 @@ export function renderIPATable(ipaTableButton) {
document.body.appendChild(modalElement);
+ setupIPAFields();
setupIPATable(modalElement, textBox);
});
}
@@ -305,17 +307,16 @@ export function renderMaximizedTextbox(maximizeButton) {
export function renderInfoModal(content) {
const modalElement = document.createElement('section');
- modalElement.classList.add('modal');
- modalElement.innerHTML = `
`;
+ modalElement.classList.add('modal', 'info-modal');
+ modalElement.innerHTML = `
+
`;
document.body.appendChild(modalElement);
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index b614d2e..de9c62f 100644
--- a/src/js/setupListeners.js
+++ b/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');
diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss
index 2f8f0fa..8e4e71c 100644
--- a/src/scss/_elements.scss
+++ b/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;