fixed bugs on subjects list from profile page

digas99 · Sep 16, 2024 · b466d16 · b466d16
1 parent 9fa5229
commit b466d16
Show file tree

Hide file tree

Showing 23 changed files with 412 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# [Changelog v1.4.3](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.4.3)
+
+## Popup
+- Added page with information on certain features to the About page
+- Added possibility to hide disabled subjects from subjects list in the Profile Page
+
+## Bug Fixes
+- Fixed some issues with customization of the subjects list in the Profile Page
+
 # [Changelog v1.4.2](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.4.2)
 Released on 14/09/2024
 

diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@ It works with any website, and provides detailed information about any kanji tha
 
 ## Table of contents:
 
-1. [Latest Features](#changelog-v142)
+1. [Latest Features](#changelog-v143)
 2. [Usage Guide](#usage-guide)
    - 2.1. [WaniKani API Token](#wanikani-api-token)
    - 2.2. [Kanji Details](#kanji-details)
@@ -31,6 +31,15 @@ It works with any website, and provides detailed information about any kanji tha
    - 2.7. [Settings](#settings)
 3. [Pictures](#pictures)
 
+## [Changelog v1.4.3](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.4.3)
+
+### Popup
+- Added page with information on certain features to the About page
+- Added possibility to hide disabled subjects from subjects list in the Profile Page
+
+### Bug Fixes
+- Fixed some issues with customization of the subjects list in the Profile Page
+
 ## [Changelog v1.4.2](https://github.com/digas99/wanikani-kanji-highlighter/releases/tag/v1.4.2)
 
 ### Content

diff --git a/images/features.png b/images/features.png
diff --git a/images/keyboard-key.png b/images/keyboard-key.png
diff --git a/images/left-click.png b/images/left-click.png
diff --git a/images/right-click.png b/images/right-click.png
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "WaniKani Kanji Highlighter",
     "description": "Unofficial kanji highlighter, matching kanji learned with WaniKani.",
-    "version": "1.4.2",
+    "version": "1.4.3",
     "manifest_version": 3,
     "icons": {
         "16":  "logo/logo_bb_16x16.png",

diff --git a/popup/about.html b/popup/about.html
@@ -39,6 +39,17 @@ <h3>API Key</h3>
 				<a href="https://www.wanikani.com/settings/personal_access_tokens" target="_blank"><img src="/images/edit.png" alt="edit" class="clickable icon"></a>
 			</div>	
 		</div>
+
+		<!-- FEATURES INFO -->
+		<div class="section">
+			<h3>Features Information</h3>
+			<div>
+				<a class="features-info" href="/popup/features.html">
+					<img src="/images/features.png" alt="features" class="icon">
+					<p>Click here to see usage recommendations and tips.</p>
+				</a>
+			</div>	
+		</div>
 
 		<!-- EXTENSION RATE -->
 		<div class="section">

diff --git a/popup/features.html b/popup/features.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">	
+<head>
+	<meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+
+	<title>Features</title>
+
+	<script src="/popup/templates/head.js"></script>
+
+	<link rel="stylesheet" href="styles/tiles-list.css">
+	<link rel="stylesheet" href="styles/features.css">
+	<link rel="stylesheet" href="styles/profile.css">
+</head>
+<body>
+	<!-- TOP NAVBAR -->
+	<script src="templates/navbar.js"></script>
+
+	<!-- PAGE CONTENT -->
+	<div id="sec-page">
+		<div class="features">
+			<div class="section">
+				<h2>Subject Details</h2>
+				<p>Throughout the Extension Popup, you will find <b>Subject Tiles</b> that can open a <b>Subject Details Popup</b>. Depending on which mouse button you use when clicking on it, you will open the details popup on different places. Feel free to try it on the Subject Tile bellow.</p>
+				<div class="subject-details-info">
+					<div class="subject-tile kanjiDetails clickable" data-item-id="602" style="background-color: var(--kanji-tag-color);">金</div>
+					<div class="subject-details-info-mouse-click">
+						<img class="icon" src="/images/left-click.png" alt="">
+						<div><b>Left click</b> - popup opens on the current web page you are browsing.</div>
+					</div>
+					<div class="subject-details-info-mouse-click">
+						<img class="icon" src="/images/right-click.png" alt="">
+						<div><b>Right click</b> - popup opens inside this extension popup.</div>
+					</div>
+				</div>
+			</div>
+			<div class="section">
+				<h2>Shortcut Keys</h2>
+				<p>Shortcut keys available to use on the Subject Details Popup. These will collide with any existing shortcut within the web page you are visiting.</p>
+				<div class="keys-list">
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>X</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Close the popup.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>O</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Expand the popup when it is opened on the bottom right corner.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>L</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Lock current subject. Hovering over other kanji will not change the subject.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>F</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Pin popup, fixing it to the page. It will not close, even if you click outside of it.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>B</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Show details from the previous subject.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>Y</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Copy characters from current subject to clipboard.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>U</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll back to the top of the popup.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>I</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll to the Info section.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>C</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll to the Cards section.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>S</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll to the Stats section.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>T</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll to the Timestamps section.</div>
+					</div>
+					<div class="keys-list-entry">
+						<div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>⬅</span>
+							</div>
+							<div class="keys-list-key">
+								<img class="icon" src="/images/keyboard-key.png" alt="">
+								<span>➡</span>
+							</div>
+						</div>
+						<div class="keys-list-description">Scroll back and forth between the sections.</div>
+					</div>
+				</div>
+			</div>
+			<div class="section">
+				<h2>Subjects Data Error</h2>
+				<p>During the process of fetching data from Wanikani servers or updating the extension, it is possible for some data from the subjects to get lost. If this ever becomes noticeable - maybe wrong highlighting, or the subject details popup doesn't load - you can <b>Clear Subjects Data</b> at the bottom of the <a href="/popup/settings.html">Settings Page</a>. This will trigger a fresh fetch of all data from Wanikani and hopefully fix any unwanted error.</p>
+			</div>
+		</div>
+	</div>
+
+	<!-- COMMON SCRIPTS -->
+	<script src="/popup/templates/scripts.js"></script>
+</body>
diff --git a/popup/home.html b/popup/home.html
@@ -190,6 +190,8 @@
         </div>
 	</div>
 
+    <a class="help-button icon" title="Features Information" href="/popup/features.html"><img src="/images/help.png" alt="help"></a>
+
     <div class="footer-cover"><div style="background-image: url(/images/footer-bg-21809151492d1118011c2e2f1087791c50e4ec2185129a9a17abe17d537de34d.gif);"></div></div>
 
     <!-- COMMON SCRIPTS -->

diff --git a/popup/scripts/home.js b/popup/scripts/home.js
@@ -173,11 +173,22 @@ const updateHomeInterface = async (result) => {
 		document.querySelector("#progress_legend")?.remove();
 }
 
-chrome.storage.local.get(["apiKey", "rating", ...HOME_FETCH_KEYS], result => {
+chrome.storage.local.get(["apiKey", "rating", "help_button", ...HOME_FETCH_KEYS], result => {
 	const settings = result["settings"] ? result["settings"] : defaultSettings;
 
 	if (popupLoading) popupLoading.remove();
 
+	// help button visibility
+	const helpButton = document.querySelector(".help-button");
+	const help = result["help_button"];
+	console.log(result, helpButton, help);
+	if (helpButton && help == false)
+		helpButton.remove();
+	helpButton.addEventListener("click", () => {
+		chrome.storage.local.set({"help_button": false});
+	});
+
+	// rating section visibility
 	const rateStars = document.querySelector(".rate-stars");
 	const rating = result["rating"] || {};
 	if (rateStars && rating) {
@@ -202,7 +213,7 @@ const kanjiListUpdate = (learned, notLearned, kanjiAssoc) => {
 		highlightList.create();
 
 	const itemCallback = (elem, value) => {
-		elem.classList.add("kanjiDetails");
+		elem.classList.add("subject-tile", "kanjiDetails");
 		if (kanjiAssoc && kanjiAssoc[value])
 			elem.setAttribute("data-item-id", kanjiAssoc[value]);
 	}