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

Set up search modal

Browse source
This commit is contained in:
Robbie Antenesse 2019-05-03 13:59:52 -06:00
parent f3fd01f143
commit 88c522ea1b
6 changed files with 133 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
index.html
View file

@ -10,7 +10,41 @@
<body>
<header id="top">
<h1 id="title">Lexiconga</h1>
<input id="searchButton" placeholder="🔍&#xFE0E; Search">
<input id="openSearchModal" placeholder="🔍&#xFE0E; Search">
<section id="searchModal" 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>
<label><strong>Search Term</strong>
<input id="searchBox" placeholder="Search term">
</label>
<a id="searchButton" class="small button">Search</a>
<a id="clearSearchButton" class="small red button">Clear</a>
<a class="small button" onclick="var options=document.getElementById('searchOptions').style;options.display=options.display=='block'?'none':'block';">
Toggle Options
</a>
</section>
<footer id="searchOptions" style="display:none;">
<div class="split">
<div class="quarter category">
<h3>Include in Search</h3>
</div>
<div class="three-quarter options">
<label><strong>Word Name</strong>
<input type="checkbox" checked id="searchIncludeName">
</label>
<label><strong>Definition</strong>
<input type="checkbox" checked id="searchIncludeDefinition">
</label>
<label><strong>Details</strong>
<input type="checkbox" checked id="searchIncludeDetails">
</label>
</div>
</div>
</footer>
</div>
</section>
</header>
<main>

2
src/js/search.js
View file

@ -1,7 +1,7 @@
import { cloneObject } from "../helpers";
export function getSearchTerm() {
return document.getElementById('searchButton').value;
return document.getElementById('searchBox').value;
}
export function getMatchingSearchWords() {

26
src/js/setupListeners.js
View file

@ -1,11 +1,13 @@
import {showSection} from './displayToggles';
import { renderWords } from './render';
export default function setupListeners() {
setupDetailsTabs();
setupSearchBar();
}
function setupDetailsTabs () {
let tabs = document.querySelectorAll('#detailsSection nav li');
function setupDetailsTabs() {
const tabs = document.querySelectorAll('#detailsSection nav li');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const section = tab.innerText.toLowerCase();
@ -19,4 +21,24 @@ function setupDetailsTabs () {
}
});
})
}
function setupSearchBar() {
const searchBox = document.getElementById('searchBox'),
clearSearchButton = document.getElementById('clearSearchButton'),
openSearchModal = document.getElementById('openSearchModal');
searchBox.addEventListener('change', () => {
renderWords();
});
searchBox.addEventListener('input', event => {
openSearchModal.value = event.target.value;
});
clearSearchButton.addEventListener('click', event => {
searchBox.value = '';
openSearchModal.value = '';
renderWords();
});
openSearchModal.addEventListener('click', () => {
document.getElementById('searchModal').style.display = 'block';
});
}

40
src/styles/_elements.scss
View file

@ -4,6 +4,16 @@
border-radius: 3px;
background-color: $light;
line-height: 30px;
&.small {
font-size: 80%;
line-height: 25px;
}
&.red {
background-color: $red;
color: $white;
}
}
span .tag {
@ -24,8 +34,14 @@ span .tag {
}
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
.modal-background {
position: fixed;
position: absolute;
top: 0;
left: 0;
bottom: 0;
@ -35,7 +51,7 @@ span .tag {
}
.modal-content {
position: fixed;
position: absolute;
top: 10%;
left: 20%;
bottom: 10%;
@ -45,9 +61,10 @@ span .tag {
border-radius: 5px;
.close-button {
position: absolute;
top: 0;
right: 10px;
font-size: 200%;
float: right;
margin: 10px 20px;
cursor: pointer;
}
}
@ -95,7 +112,20 @@ span .tag {
width: 46%;
}
&.three div {
&.three div,
div.third {
width: 30%;
}
div.two-third {
width: 66%;
}
div.quarter {
width: 22%;
}
div.three-quarter {
width: 72%;
}
}

38
src/styles/_structure.scss
View file

@ -4,14 +4,48 @@
margin: 3px 20px 3px 0;
}
#searchButton {
#openSearchModal {
cursor: pointer;
}
#searchModal {
min-height: $header-height;
bottom: unset;
z-index: 10;
.modal-content {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
width: 90%;
padding: 20px;
}
#searchBox {
width: 60%;
}
.category {
text-align: right;
* {
margin: 0;
}
}
.options {
* {
margin-right: 5px;
}
}
}
}
#wordForm {
position: fixed;
top: $header-height;
top: auto;
width: 24%;
padding: 10px;
background-color: $light;

2
src/styles/_variables.scss
View file

@ -7,4 +7,6 @@ $mid: #dedede;
$light: #efefef;
$white: #ffffff;
$red: #d42932;
$border: 1px solid $dark;