Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Set up search modal

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> <body>
<header id="top"> <header id="top">
<h1 id="title">Lexiconga</h1> <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> </header>
<main> <main>

2
src/js/search.js
View File

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

26
src/js/setupListeners.js
View File

@ -1,11 +1,13 @@
import {showSection} from './displayToggles'; import {showSection} from './displayToggles';
import { renderWords } from './render';
export default function setupListeners() { export default function setupListeners() {
setupDetailsTabs(); setupDetailsTabs();
setupSearchBar();
} }
function setupDetailsTabs () { function setupDetailsTabs() {
let tabs = document.querySelectorAll('#detailsSection nav li'); const tabs = document.querySelectorAll('#detailsSection nav li');
tabs.forEach(tab => { tabs.forEach(tab => {
tab.addEventListener('click', () => { tab.addEventListener('click', () => {
const section = tab.innerText.toLowerCase(); 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; border-radius: 3px;
background-color: $light; background-color: $light;
line-height: 30px; line-height: 30px;
&.small {
font-size: 80%;
line-height: 25px;
}
&.red {
background-color: $red;
color: $white;
}
} }
span .tag { span .tag {
@ -24,8 +34,14 @@ span .tag {
} }
.modal { .modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
.modal-background { .modal-background {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -35,7 +51,7 @@ span .tag {
} }
.modal-content { .modal-content {
position: fixed; position: absolute;
top: 10%; top: 10%;
left: 20%; left: 20%;
bottom: 10%; bottom: 10%;
@ -45,9 +61,10 @@ span .tag {
border-radius: 5px; border-radius: 5px;
.close-button { .close-button {
position: absolute;
top: 0;
right: 10px;
font-size: 200%; font-size: 200%;
float: right;
margin: 10px 20px;
cursor: pointer; cursor: pointer;
} }
} }
@ -95,7 +112,20 @@ span .tag {
width: 46%; width: 46%;
} }
&.three div { &.three div,
div.third {
width: 30%; 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; margin: 3px 20px 3px 0;
} }
#searchButton { #openSearchModal {
cursor: pointer; 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 { #wordForm {
position: fixed; position: fixed;
top: $header-height; top: auto;
width: 24%; width: 24%;
padding: 10px; padding: 10px;
background-color: $light; background-color: $light;

2
src/styles/_variables.scss
View File

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