Compare commits
No commits in common. "57ea079eafeb231e254265366653436d4a43461a" and "a4f1a04c721ece964c6e79d6f3dbacd60facac0e" have entirely different histories.
57ea079eaf
...
a4f1a04c72
3
.gitmodules
vendored
3
.gitmodules
vendored
@ -1,3 +0,0 @@
|
|||||||
[submodule "heonian-ime"]
|
|
||||||
path = heonian-ime
|
|
||||||
url = https://git.succubi.services/heonian.org/heonian-ime
|
|
@ -1 +0,0 @@
|
|||||||
Subproject commit 76bc6baf11f2b21f365e6f2ef36c05b00ea04c84
|
|
@ -37,7 +37,6 @@
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="./heonian-ime/ime.js"></script>
|
|
||||||
<script src="./main.js"></script>
|
<script src="./main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
31
main.css
31
main.css
@ -32,33 +32,19 @@
|
|||||||
:root {
|
:root {
|
||||||
--font: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
--font: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
--font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
|
--font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
|
||||||
--fg: rgb(0,0,0);
|
--nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
--bg: rgb(255,255,255);
|
|
||||||
--grey: rgb(152, 152, 152);
|
|
||||||
--darkgrey: rgb(100, 100, 100);
|
|
||||||
--link: rgb(27 120 151);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--fg: rgb(255,255,255);
|
|
||||||
--bg: rgb(0,0,0);
|
|
||||||
--grey: rgb(226, 226, 226);
|
--grey: rgb(226, 226, 226);
|
||||||
--darkgrey: rgb(215, 215, 215);
|
--darkgrey: rgb(150, 150, 150);
|
||||||
--link: rgb(27 120 151);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: var(--font);
|
font-family: var(--font);
|
||||||
color: var(--fg);
|
|
||||||
background-color: var(--bg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--link);
|
color: rgb(27 120 151);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,9 +87,6 @@ header #search button {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
border-left: 1px solid var(--grey);
|
border-left: 1px solid var(--grey);
|
||||||
color: var(--grey);
|
|
||||||
transition: 0.3s color ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header input {
|
header input {
|
||||||
@ -117,8 +100,6 @@ header input {
|
|||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
transition: border-color 0.3s;
|
transition: border-color 0.3s;
|
||||||
width: calc(100% - 52px - 24px);
|
width: calc(100% - 52px - 24px);
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header input:focus {
|
header input:focus {
|
||||||
@ -164,7 +145,7 @@ main {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: calc(1rem + 24px);
|
margin-top: 1rem;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
@ -187,10 +168,6 @@ main {
|
|||||||
border-bottom: 1px solid var(--darkgrey);
|
border-bottom: 1px solid var(--darkgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.result:first-child {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-meaning {
|
.result-meaning {
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
20
main.js
20
main.js
@ -5,19 +5,6 @@ let searchDictionary = {};
|
|||||||
let header = null;
|
let header = null;
|
||||||
let main = null;
|
let main = null;
|
||||||
|
|
||||||
let ime = null;
|
|
||||||
|
|
||||||
function toggleIME() {
|
|
||||||
if (ime == null) {
|
|
||||||
ime = new HeonianIME(header.querySelector("input"));
|
|
||||||
header.querySelector("#search button").style.color = "var(--fg)";
|
|
||||||
} else {
|
|
||||||
ime.imeDetach();
|
|
||||||
ime = null;
|
|
||||||
header.querySelector("#search button").style.color = "var(--grey)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function animateHeader(inout = false) {
|
function animateHeader(inout = false) {
|
||||||
//todo: debounce this
|
//todo: debounce this
|
||||||
if (inout) {
|
if (inout) {
|
||||||
@ -60,14 +47,10 @@ document.addEventListener("keydown", (e) => {
|
|||||||
if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
|
if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
animateHeader(true);
|
animateHeader(true);
|
||||||
} else if (header.querySelector("input").matches(":focus") && ime != null) {
|
|
||||||
toggleIME();
|
|
||||||
} else if (header.querySelector("input").matches(":focus")) {
|
|
||||||
header.querySelector("input").value = "";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (e.keyCode === 13) {
|
if (e.keyCode === 13) {
|
||||||
if (header.querySelector("input").matches(":focus") && ime == null) {
|
if (header.querySelector("input").matches(":focus")) {
|
||||||
//search
|
//search
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (header.classList.contains("fullscreen")) {
|
if (header.classList.contains("fullscreen")) {
|
||||||
@ -279,6 +262,5 @@ function doSearch() {
|
|||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
header = document.querySelector("header");
|
header = document.querySelector("header");
|
||||||
main = document.querySelector("main");
|
main = document.querySelector("main");
|
||||||
header.querySelector("#search button").onclick = () => {toggleIME();};
|
|
||||||
loadDictionary();
|
loadDictionary();
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user