Set up edit modal tabs
This commit is contained in:
parent
a9de9e0fc9
commit
0ff0afcd52
56
index.html
56
index.html
|
@ -122,7 +122,7 @@
|
|||
<li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section id="editDescriptionTab" style="display:none;">
|
||||
<section id="editDescriptionTab">
|
||||
<label>Name<br>
|
||||
<input id="editName">
|
||||
</label>
|
||||
|
@ -134,7 +134,7 @@
|
|||
</label>
|
||||
</section>
|
||||
|
||||
<section id="editDetailsTab">
|
||||
<section id="editDetailsTab" style="display:none;">
|
||||
<label>Parts of Speech <small>(Comma Separated List)</small><br>
|
||||
<input id="editPartsOfSpeech">
|
||||
</label>
|
||||
|
@ -177,6 +177,9 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<label>Exceptions<br>
|
||||
<textarea id="editExceptions"></textarea>
|
||||
</label>
|
||||
<h3>Orthography</h3>
|
||||
<label>Notes<a class="label-button">Maximize</a><br>
|
||||
<textarea id="editOrthography"></textarea>
|
||||
|
@ -187,6 +190,55 @@
|
|||
</label>
|
||||
</section>
|
||||
|
||||
<section id="editSettingsTab" style="display:none;">
|
||||
<label>Allow Duplicate Words
|
||||
<input type="checkbox" id="editAllowDuplicates"><br>
|
||||
<small>Checking this box will allow any number of the exact same spelling of a word to be added</small>
|
||||
</label>
|
||||
<label>Words are Case-Sensitive
|
||||
<input type="checkbox" id="editCaseSensitive"><br>
|
||||
<small>Checking this box will allow any words spelled the same but with different capitalization to be added.</small>
|
||||
</label>
|
||||
<label>Sort by Definition
|
||||
<input type="checkbox" id="editSortByDefinition"><br>
|
||||
<small>Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.</small>
|
||||
</label>
|
||||
<label>Mark Complete
|
||||
<input type="checkbox" id="editIsComplete"><br>
|
||||
<small>Checking this box will mark this as "complete" and prevent any changes from being made.</small>
|
||||
</label>
|
||||
<label>Make Public
|
||||
<input type="checkbox" id="editIsPublic"><br>
|
||||
<small>Checking this box will make this public via a link you can share with others.</small>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section id="editActionsTab" style="display:none;">
|
||||
<h3>Import / Export</h3>
|
||||
<div class="split two">
|
||||
<div>
|
||||
<p>
|
||||
<a class="button">Import JSON</a><br>
|
||||
<small>Import a previously-exported <code>JSON</code> file.</small>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button">Import Words</a><br>
|
||||
<small>Import a CSV file of words. (Download an <a>example file with the correct formatting</a>.)</small>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<a class="button">Export JSON</a><br>
|
||||
<small>Export your work as a <code>JSON</code> file to re-import later.</small>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button">Export Words</a><br>
|
||||
<small>Export a CSV file of your words.</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<a class="button" id="editSave">Save</a>
|
||||
<a class="button" id="editSaveAndClose">Save & Close</a>
|
||||
|
|
|
@ -6,6 +6,26 @@ export function updateDictionary () {
|
|||
}
|
||||
|
||||
export function openEditModal() {
|
||||
const { name, specification, description, partsOfSpeech } = window.currentDictionary;
|
||||
const { consonants, vowels, blends, phonotactics } = window.currentDictionary.details.phonology;
|
||||
const { orthography, grammar } = window.currentDictionary.details;
|
||||
|
||||
document.getElementById('editName').value = name;
|
||||
document.getElementById('editSpecification').value = specification;
|
||||
document.getElementById('editDescription').value = description;
|
||||
document.getElementById('editPartsOfSpeech').value = partsOfSpeech.join(',');
|
||||
|
||||
document.getElementById('editConsonants').value = consonants.join(',');
|
||||
document.getElementById('editVowels').value = vowels.join(',');
|
||||
document.getElementById('editBlends').value = blends.join(',');
|
||||
document.getElementById('editOnset').value = phonotactics.onset.join(',');
|
||||
document.getElementById('editNucleus').value = phonotactics.nucleus.join(',');
|
||||
document.getElementById('editCoda').value = phonotactics.coda.join(',');
|
||||
document.getElementById('editExceptions').value = phonotactics.exceptions;
|
||||
|
||||
document.getElementById('editOrthography').value = orthography.notes;
|
||||
document.getElementById('editGrammar').value = grammar.notes;
|
||||
|
||||
document.getElementById('editModal').style.display = 'block';
|
||||
}
|
||||
|
||||
|
|
|
@ -30,10 +30,25 @@ function setupDetailsTabs() {
|
|||
}
|
||||
});
|
||||
});
|
||||
setupEditForm();
|
||||
setupEditFormTabs();
|
||||
setupEditFormButtons();
|
||||
}
|
||||
|
||||
function setupEditForm() {
|
||||
function setupEditFormTabs() {
|
||||
const tabs = document.querySelectorAll('#editModal nav li');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('active');
|
||||
document.getElementById('edit' + t.innerText + 'Tab').style.display = 'none';
|
||||
});
|
||||
tab.classList.add('active');
|
||||
document.getElementById('edit' + tab.innerText + 'Tab').style.display = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupEditFormButtons() {
|
||||
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue