started styling
This commit is contained in:
Lauchmelder
parent
dc0be911b2
commit
250d462da2
56
popup.html
56
popup.html
|
|
@ -1,24 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="src/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" id="token" />
|
||||
<button id="submit-token">
|
||||
Submit
|
||||
</button>
|
||||
<button id="download">
|
||||
Download Data
|
||||
</button>
|
||||
<header>
|
||||
<h1>FuriKani</h1>
|
||||
<h2>v0.4</h2>
|
||||
</header>
|
||||
|
||||
<p id="loading">
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Using WaniKani Level <span id="level"></span>
|
||||
</p>
|
||||
<div id="token-area">
|
||||
<div id="input-area">
|
||||
<span id="token-status"></span>
|
||||
<input type="text" id="token" placeholder="Wanikani Token"/>
|
||||
<button id="submit-token">OK</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
27
popup.js
27
popup.js
|
|
@ -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
63
src/popup.js
Normal 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
53
src/styles.css
Normal 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);
|
||||
}
|
||||
Loading…
Reference in a new issue