lauchmelder/FuriKani
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

started styling

Browse source
This commit is contained in:
Lauchmelder 2022-03-20 15:54:48 +01:00
parent dc0be911b2
commit 250d462da2
No known key found for this signature in database
GPG key ID: C2403C69D78F011D
4 changed files with 157 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
popup.html
View file

@ -1,24 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="src/styles.css">
</head> </head>
<body> <body>
<input type="text" id="token" /> <header>
<button id="submit-token"> <h1>FuriKani</h1>
Submit <h2>v0.4</h2>
</button> </header>
<button id="download">
Download Data
</button>
<p id="loading"> <div id="token-area">
<div id="input-area">
</p> <span id="token-status"></span>
<input type="text" id="token" placeholder="Wanikani Token"/>
<p> <button id="submit-token">OK</button>
Using WaniKani Level <span id="level"></span> </div>
</p>
<span id="error-text">
</span>
</div>
<script src="popup.js"></script> <div id="settings-area">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
test 1
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
test 2
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
test 3
</label>
</div>
<footer>
Using WaniKani Level <span id="level"></span>
</footer>
<script src="src/popup.js"></script>
</body> </body>
</html> </html>

27
popup.js
View file

@ -1,27 +0,0 @@
const submitButton = document.getElementById("submit-token")
const inputField = document.getElementById("token");
// Set the wanikani token
submitButton.addEventListener( "click", () => {
chrome.storage.local.set({"token": inputField.value})
})
// Sync local data with wanikani
const downloadButton = document.getElementById("download")
downloadButton.addEventListener("click", async () => {
var loadingText = document.getElementById("loading")
loadingText.innerHTML = "Loading..."
chrome.runtime.sendMessage("", {type: "sync"}, response => {
if(response.success)
loadingText.innerHTML = "Done!"
else
loadingText.innerHTML = response.error
})
})
// Display currently used wanikani level
chrome.storage.local.get("level", (data) => {
const levelSpan = document.getElementById("level")
levelSpan.innerHTML = data.level
})

63
src/popup.js Normal file
View file

@ -0,0 +1,63 @@
const submitButton = document.getElementById("submit-token")
const inputField = document.getElementById("token")
const statusField = document.getElementById("token-status")
const errorField = document.getElementById("error-text")
// Set popup content
chrome.storage.local.get(["level", "token"], (data) => {
if(data.token === undefined)
{
statusField.innerHTML = String.fromCodePoint(0x2757)
submitButton.innerHTML = String.fromCodePoint(0x2705)
submitButton.classList.add("no-token")
}
else
{
statusField.innerHTML = String.fromCodePoint(0x2705)
submitButton.innerHTML = String.fromCodePoint(0x1F501)
}
const levelSpan = document.getElementById("level")
levelSpan.innerHTML = data.level
inputField.addEventListener("input", () => {
if(inputField.value !== "" && inputField.value !== data.token)
{
submitButton.innerHTML = String.fromCodePoint(0x2705)
submitButton.classList.add("new-token")
}
else
{
submitButton.innerHTML = String.fromCodePoint(0x1F501)
submitButton.classList.remove("new-token")
}
})
})
// Set the wanikani token
submitButton.addEventListener( "click", () => {
if(submitButton.classList.contains("new-token"))
{
chrome.storage.local.set({"token": inputField.value})
submitButton.classList.remove("new-token", "no-token")
inputField.value = ""
}
if(submitButton.classList.contains("no-token"))
return
statusField.innerHTML = String.fromCodePoint(0x23F1)
chrome.runtime.sendMessage("", {type: "sync"}, response => {
if(response.success)
{
statusField.innerHTML = String.fromCodePoint(0x2705)
errorField.innerHTML = ""
}
else
{
statusField.innerHTML = String.fromCodePoint(0x2757)
errorField.innerHTML = response.error
}
})
})

53
src/styles.css Normal file
View file

@ -0,0 +1,53 @@
*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body
{
display: grid;
grid-template-rows: 1.5fr 1fr 3fr 2fr;
width: 250px;
}
header
{
display: grid;
grid-template-columns: 8fr 1fr;
align-items: baseline;
}
h1
{
text-transform: uppercase;
}
h2
{
font-size: 10pt;
}
#token-area
{
display: grid;
grid-template-rows: 1fr 1fr;
}
#input-area
{
display: grid;
grid-template-columns: 1fr 8fr 1fr;
}
#token-status
{
font-size: 1rem;
}
#settings-area
{
display: grid;
grid-template-rows: repeat(3, 1fr);
}