Alamantus
/
lexiconga-lite
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create settings modal structure

This commit is contained in:
Robbie Antenesse 2019-05-08 13:01:39 -06:00
parent aecac1668e
commit a6727bd0e4
4 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -10,6 +10,7 @@
<body>
<header id="top">
<h1 id="title">Lexiconga</h1>
<input id="openSearchModal" placeholder="🔍&#xFE0E; Search"> <span id="searchResults"></span>
<section id="searchModal" class="modal" style="display:none;">
<div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
@ -64,6 +65,8 @@
</footer>
</div>
</section>
<a id="settingsButton" class="button">Settings</a>
</header>
<main>
@ -109,8 +112,6 @@
<article class="entry">
<header>
<h4 class="word">Loading Words</h4>
<span class="pronunciation"></span>
<span class="part-of-speech"></span>
</header>
<dl>
<dt class="definition">Please Wait...</dt>
@ -133,6 +134,39 @@
<a class="button" id="privacyInfoButton">Privacy</a>
</footer>
<section id="settingsModal" class="modal" style="display:none;">
<div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
<div class="modal-content">
<a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">&times;&#xFE0E;</a>
<section>
<form>
<label>Use IPA Auto-Fill
<input type="checkbox" checked><br />
<small>Check this to use character combinations to input International Phonetic Alphabet characters into
Pronunciation fields.</small>
</label>
<label>Theme
<select disabled>
<option selected value="default">Default</option>
<option selected value="dark">Dark</option>
<option selected value="light">Light</option>
<option selected value="blue">Blue</option>
<option selected value="green">Green</option>
<option selected value="royal">Royal</option>
</select>
</label>
</form>
</section>
<footer>
<a class="button" id="settingsSave">Save</a>
<a class="button" id="settingsSaveAndClose">Save &amp; Close</a>
<a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without
Saving</a>
</footer>
</div>
</section>
<section id="editModal" class="modal" style="display:none;">
<div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
<div class="modal-content">

4
src/index.js
View File

@ -9,10 +9,10 @@ import { generateRandomWords } from './js/utilities';
function initialize() {
console.log('initializing');
window.currentDictionary = cloneObject(DEFAULT_DICTIONARY);
generateRandomWords(100);
// generateRandomWords(100);
setupListeners();
renderAll();
console.log('Rendered!');
// console.log('Rendered!');
}
window.onload = (function (oldLoad) {

7
src/js/setupListeners.js
View File

@ -9,6 +9,7 @@ import { goToNextPage, goToPreviousPage, goToPage } from './pagination';
export default function setupListeners() {
setupDetailsTabs();
setupSearchBar();
setupSettingsModal();
setupWordForm();
setupMobileWordFormButton();
setupInfoButtons();
@ -194,6 +195,12 @@ export function setupWordOptionSelections() {
});
}
export function setupSettingsModal() {
document.getElementById('settingsButton').addEventListener('click', () => {
document.getElementById('settingsModal').style.display = '';
});
}
export function setupWordEditFormButtons() {
const saveChangesButtons = document.getElementsByClassName('edit-save-changes');
const cancelChangesButtons = document.getElementsByClassName('edit-cancel');

4
src/scss/_structure.scss
View File

@ -76,6 +76,10 @@
}
}
}
#settingsButton {
float: right;
}
}
#mobileWordFormShow {