75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
import { setupIPAFields } from '../setupListeners';
|
|
import {
|
|
setupMaximizeModal,
|
|
setupInfoModal,
|
|
setupIPATable,
|
|
} from '../setupListeners/modals';
|
|
import ipaTableFile from '../KeyboardFire/phondue/ipa-table.html';
|
|
|
|
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();
|
|
const textBox = ipaTableButton.parentElement.querySelector('input');
|
|
const modalElement = document.createElement('section');
|
|
modalElement.classList.add('modal', 'ipa-table-modal');
|
|
modalElement.innerHTML = `<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<a class="close-button">×︎</a>
|
|
<header><label>${label} <input value="${textBox.value}" class="ipa-field"></label></header>
|
|
<section>
|
|
${ipaTableFile}
|
|
</section>
|
|
<footer><a class="button done-button">Done</a></footer>
|
|
</div>`;
|
|
|
|
document.body.appendChild(modalElement);
|
|
|
|
setupIPAFields();
|
|
setupIPATable(modalElement, textBox);
|
|
}
|
|
|
|
export function renderMaximizedTextbox(maximizeButton) {
|
|
maximizeButton = typeof maximizeButton.target === 'undefined' || maximizeButton.target === '' ? maximizeButton : maximizeButton.target;
|
|
const label = maximizeButton.parentElement.innerText.replace(/(\*|Maximize)/g, '').trim();
|
|
const textBox = maximizeButton.parentElement.querySelector('textarea');
|
|
const modalElement = document.createElement('section');
|
|
modalElement.classList.add('modal', 'maximize-modal');
|
|
modalElement.innerHTML = `<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<a class="close-button">×︎</a>
|
|
<header><h3>${label}</h3></header>
|
|
<section>
|
|
<textarea>${textBox.value}</textarea>
|
|
</section>
|
|
<footer><a class="button done-button">Done</a></footer>
|
|
</div>`;
|
|
|
|
document.body.appendChild(modalElement);
|
|
|
|
setupMaximizeModal(modalElement, textBox);
|
|
}
|
|
|
|
export function renderInfoModal(content) {
|
|
const modalElement = document.createElement('section');
|
|
modalElement.classList.add('modal', 'info-modal');
|
|
modalElement.innerHTML = `<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<a class="close-button">×︎</a>
|
|
<section class="info-modal">
|
|
<div class="content">
|
|
${content}
|
|
</div>
|
|
</section>
|
|
</div>`;
|
|
|
|
document.body.appendChild(modalElement);
|
|
|
|
setupInfoModal(modalElement);
|
|
}
|