Compare commits
3 Commits
c5e3544570
...
97677244f5
Author | SHA1 | Date |
---|---|---|
Robbie Antenesse | 97677244f5 | |
Robbie Antenesse | 0ff0afcd52 | |
Robbie Antenesse | a9de9e0fc9 |
56
index.html
56
index.html
|
@ -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 / 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 & Close</a>
|
<a class="button" id="editSaveAndClose">Save & Close</a>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -9,4 +9,5 @@ $white: #ffffff;
|
||||||
|
|
||||||
$red: #d42932;
|
$red: #d42932;
|
||||||
|
|
||||||
$border: 1px solid $dark;
|
$border: 1px solid $dark;
|
||||||
|
$general-padding: 20px;
|
Loading…
Reference in New Issue