Set up edit modal tabs

This commit is contained in:
Robbie Antenesse 2019-05-03 23:58:49 -06:00
parent a9de9e0fc9
commit 0ff0afcd52
3 changed files with 92 additions and 5 deletions

View File

@ -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&nbsp;/ 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 &amp; Close</a>

View File

@ -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';
}

View File

@ -30,11 +30,26 @@ 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() {
}
function setupSearchBar() {