Compare commits

...

3 Commits

8 changed files with 195 additions and 38 deletions

View File

@ -122,7 +122,7 @@
<li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li> <li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
</ul> </ul>
</nav> </nav>
<section id="editDescriptionTab" style="display:none;"> <section id="editDescriptionTab">
<label>Name<br> <label>Name<br>
<input id="editName"> <input id="editName">
</label> </label>
@ -134,7 +134,7 @@
</label> </label>
</section> </section>
<section id="editDetailsTab"> <section id="editDetailsTab" style="display:none;">
<label>Parts of Speech <small>(Comma Separated List)</small><br> <label>Parts of Speech <small>(Comma Separated List)</small><br>
<input id="editPartsOfSpeech"> <input id="editPartsOfSpeech">
</label> </label>
@ -177,6 +177,9 @@
</label> </label>
</div> </div>
</div> </div>
<label>Exceptions<br>
<textarea id="editExceptions"></textarea>
</label>
<h3>Orthography</h3> <h3>Orthography</h3>
<label>Notes<a class="label-button">Maximize</a><br> <label>Notes<a class="label-button">Maximize</a><br>
<textarea id="editOrthography"></textarea> <textarea id="editOrthography"></textarea>
@ -187,6 +190,55 @@
</label> </label>
</section> </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> <footer>
<a class="button" id="editSave">Save</a> <a class="button" id="editSave">Save</a>
<a class="button" id="editSaveAndClose">Save &amp; Close</a> <a class="button" id="editSaveAndClose">Save &amp; Close</a>

View File

@ -1,4 +1,5 @@
import { renderDictionaryDetails } from "./render"; import { renderDictionaryDetails, renderPartsOfSpeechSelect } from "./render";
import { removeTags } from "../helpers";
export function updateDictionary () { export function updateDictionary () {
@ -6,7 +7,66 @@ export function updateDictionary () {
} }
export function openEditModal() { export function openEditModal() {
document.getElementById('editModal').style.display = 'block'; const { name, specification, description, partsOfSpeech } = window.currentDictionary;
const { consonants, vowels, blends, phonotactics } = window.currentDictionary.details.phonology;
const { orthography, grammar } = window.currentDictionary.details;
const { allowDuplicates, caseSensitive, sortByDefinition, isComplete, isPublic } = window.currentDictionary.settings;
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('editAllowDuplicates').checked = allowDuplicates;
document.getElementById('editCaseSensitive').checked = caseSensitive;
document.getElementById('editSortByDefinition').checked = sortByDefinition;
document.getElementById('editIsComplete').checked = isComplete;
document.getElementById('editIsPublic').checked = isPublic;
document.getElementById('editModal').style.display = '';
}
export function save() {
window.currentDictionary.name = removeTags(document.getElementById('editName').value.trim());
window.currentDictionary.specification = removeTags(document.getElementById('editSpecification').value.trim());
window.currentDictionary.description = removeTags(document.getElementById('editDescription').value.trim());
window.currentDictionary.partsOfSpeech = document.getElementById('editPartsOfSpeech').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.consonants = document.getElementById('editConsonants').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.vowels = document.getElementById('editVowels').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.blends = document.getElementById('editBlends').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.phonotactics.onset = document.getElementById('editOnset').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.phonotactics.nucleus = document.getElementById('editNucleus').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.phonotactics.coda = document.getElementById('editCoda').value.split(',').map(val => val.trim());
window.currentDictionary.details.phonology.phonotactics.exceptions = removeTags(document.getElementById('editExceptions').value.trim());
window.currentDictionary.details.orthography.notes = removeTags(document.getElementById('editOrthography').value.trim());
window.currentDictionary.details.grammar.notes = removeTags(document.getElementById('editGrammar').value.trim());
window.currentDictionary.settings.allowDuplicates = document.getElementById('editAllowDuplicates').checked;
window.currentDictionary.settings.caseSensitive = document.getElementById('editCaseSensitive').checked;
window.currentDictionary.settings.sortByDefinition = document.getElementById('editSortByDefinition').checked;
window.currentDictionary.settings.isComplete = document.getElementById('editIsComplete').checked;
window.currentDictionary.settings.isPublic = document.getElementById('editIsPublic').checked;
renderDictionaryDetails();
renderPartsOfSpeechSelect();
}
export function saveAndClose() {
save();
document.getElementById('editModal').style.display = 'none';
} }
export function updateGeneralDetails() { export function updateGeneralDetails() {

View File

@ -89,7 +89,11 @@ export function renderPartsOfSpeechSelect() {
partOfSpeech = removeTags(partOfSpeech); partOfSpeech = removeTags(partOfSpeech);
optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`; optionsHTML += `<option value="${partOfSpeech}">${partOfSpeech}</option>`;
}); });
Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => select.innerHTML = optionsHTML); Array.from(document.getElementsByClassName('part-of-speech-select')).forEach(select => {
const selectedValue = select.value;
select.innerHTML = optionsHTML;
select.value = selectedValue;
});
} }
export function renderWords() { export function renderWords() {

View File

@ -3,7 +3,7 @@ import { renderWords } from './render';
import { validateWord, addWord } from './wordManagement'; import { validateWord, addWord } from './wordManagement';
import { removeTags } from '../helpers'; import { removeTags } from '../helpers';
import { getNextId } from './utilities'; import { getNextId } from './utilities';
import { openEditModal } from './dictionaryManagement'; import { openEditModal, save, saveAndClose } from './dictionaryManagement';
export default function setupListeners() { export default function setupListeners() {
setupDetailsTabs(); setupDetailsTabs();
@ -30,11 +30,27 @@ 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() {
document.getElementById('editSave').addEventListener('click', () => save());
document.getElementById('editSaveAndClose').addEventListener('click', () => saveAndClose());
} }
function setupSearchBar() { function setupSearchBar() {

View File

@ -1,6 +1,6 @@
header { header {
display: block; display: block;
padding: 5px 20px; padding: 5px $general-padding;
border-bottom: 1px solid $mid; border-bottom: 1px solid $mid;
margin: 0 0 5px; margin: 0 0 5px;
@ -37,14 +37,14 @@ main {
border: $border; border: $border;
dl { dl {
padding: 0 20px; padding: 0 $general-padding;
} }
} }
} }
footer { footer {
display: block; display: block;
padding: 20px; padding: $general-padding;
border-top: 1px solid $mid; border-top: 1px solid $mid;
margin: 5px 0 0; margin: 5px 0 0;
} }

View File

@ -13,7 +13,7 @@ label {
font-weight: bold; font-weight: bold;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 20px; margin-bottom: $general-padding;
} }
small { small {
@ -87,10 +87,17 @@ span .tag {
.modal-content { .modal-content {
position: absolute; position: absolute;
top: 10%; // top: 10%;
left: 20%; // left: 20%;
bottom: 10%; // bottom: 10%;
right: 20%; // right: 20%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
max-width: 100%;
height: 600px;
max-height: 100%;
background-color: $white; background-color: $white;
border: $border; border: $border;
border-radius: 5px; border-radius: 5px;
@ -102,25 +109,6 @@ span .tag {
font-size: 200%; font-size: 200%;
cursor: pointer; cursor: pointer;
} }
nav ul {
margin-bottom: 0;
}
section {
padding: 20px;
margin-bottom: 80px;
overflow-y: auto;
height: 78%;
}
section~footer {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: $white;
}
} }
} }
@ -132,7 +120,7 @@ span .tag {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin: 0 2px -1px; margin: 0 2px -1px;
padding: 10px 20px; padding: 10px $general-padding;
border-top: $border; border-top: $border;
border-left: $border; border-left: $border;
border-right: $border; border-right: $border;

View File

@ -19,6 +19,10 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
transform: unset;
max-width: unset;
height: unset;
max-height: unset;
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
padding: 20px; padding: 20px;
@ -132,6 +136,38 @@
} }
#editModal { #editModal {
$nav-font-height: 16px;
nav {
padding-top: $general-padding;
ul {
margin: 0;
padding: 0;
li {
font-size: $nav-font-height;
line-height: $nav-font-height;
}
}
}
section, footer {
position: absolute;
width: 100%;
}
section {
top: ($general-padding * 2) + $nav-font-height + 10px;;
bottom: ($general-padding * 2) + $nav-font-height + 16px;
padding: $general-padding;
overflow-y: auto;
}
footer {
bottom: 0;
.button {
font-size: $nav-font-height;
line-height: $nav-font-height;
}
}
#editDescription { #editDescription {
width: 100%; width: 100%;
height: 350px; height: 350px;

View File

@ -9,4 +9,5 @@ $white: #ffffff;
$red: #d42932; $red: #d42932;
$border: 1px solid $dark; $border: 1px solid $dark;
$general-padding: 20px;