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> </main>
<script src="main.js"></script>
</body> </body>
</html> </html>

View File

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

28
main.js
View File

@ -5,13 +5,17 @@
let words = {} let words = {}
let currentFont = "r";
function init() { function init() {
createWordList(); // createWordList();
injectWords(); // injectWords();
document.querySelector("#popup-container").addEventListener("click", () => { // document.querySelector("#popup-container").addEventListener("click", () => {
document.querySelector("#popup-container").style.opacity = 0; // document.querySelector("#popup-container").style.opacity = 0;
document.querySelector("#popup-container").style.pointerEvents = "none"; // 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) { 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 = () => { window.onload = () => {
init(); init();
} }

View File

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

View File

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