toggle font button

This commit is contained in:
remi 2022-05-04 21:54:05 +02:00
parent c5bbdd194c
commit e52ea0c3e6
5 changed files with 84 additions and 6 deletions

View File

@ -1,4 +1,5 @@
</main>
<script src="main.js"></script>
</body>
</html>

View File

@ -6,7 +6,33 @@
<title>avg convo</title>
<link href="text_analysis.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="style-heonian" disabled>
.convo-heonian {
display: block;
}
.convo-roman {
display: none;
}
</style>
<style id="style-roman">
.convo-heonian {
display: none;
}
.convo-roman {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
#font-button {
display: none;
}
</style>
</noscript>
<p class="button" id="font-button">toggle font</p>
<main>

28
main.js
View File

@ -5,13 +5,17 @@
let words = {}
let currentFont = "r";
function init() {
createWordList();
injectWords();
document.querySelector("#popup-container").addEventListener("click", () => {
document.querySelector("#popup-container").style.opacity = 0;
document.querySelector("#popup-container").style.pointerEvents = "none";
})
// createWordList();
// injectWords();
// document.querySelector("#popup-container").addEventListener("click", () => {
// document.querySelector("#popup-container").style.opacity = 0;
// document.querySelector("#popup-container").style.pointerEvents = "none";
// })
// above are commented out until wordlist is added~
document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
}
function showPopup(word) {
@ -68,6 +72,18 @@ function injectWords() {
});
}
function fontButton() {
if (currentFont == "r") {
document.querySelector("#style-heonian").disabled = false;
document.querySelector("#style-roman").disabled = true;
currentFont = "h";
} else {
document.querySelector("#style-heonian").disabled = true;
document.querySelector("#style-roman").disabled = false;
currentFont = "r";
}
}
window.onload = () => {
init();
}

View File

@ -6,9 +6,35 @@
<title>avg convo</title>
<link href="text_analysis.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style id="style-heonian" disabled>
.convo-heonian {
display: block;
}
.convo-roman {
display: none;
}
</style>
<style id="style-roman">
.convo-heonian {
display: none;
}
.convo-roman {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
#font-button {
display: none;
}
</style>
</noscript>
<p class="button" id="font-button">toggle font</p>
<main>
<div class="convo-container">
<div class="convo">
@ -378,6 +404,7 @@ relfur chu arilaen dedaka'nya.
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>

View File

@ -162,4 +162,12 @@ main {
data-swap {
display: none;
}
.button {
text-decoration: underline;
text-align: center;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}