Adjustable tooltip height

Fix downloadOnline
Avoid a storage request in exportOnline

build.js

@@ -12,7 +12,7 @@ const [,, ...args] = process.argv;
 let manifest = {
     manifest_version: 2,
     name: "MyMangaDex",
-    version: "2.3.3",
+    version: "2.3.4",
     author: "Glagan",
 
     description: "Automatically update your MyAnimeList manga list when reading on MangaDex.",

options.html

@@ -224,6 +224,13 @@ <h1 class="text-container py-2 px-2"><i class="fas fa-bookmark"></i> Chapters li
                         </div>
                     </div>
                 </div>
+                <div class="form-group text-container p-2">
+                    <label class="font-weight-bold">Full Size cover height <a data-default="coverMaxHeight" class="btn btn-sm btn-secondary"><i class="fas fa-trash"></i><span class="d-none d-xl-inline"> Restore default</span></a></label>
+                    <p class="d-none d-xl-block">The full cover of a title can be <b>big</b> but you can adjust the maximum <b>height</b> it will take.<br/>This option is the percentage of your screen height a tooltip can take <b>at best</b>.</p>
+                    <div class="px-0">
+                        <input data-option="coverMaxHeight" data-type="number" type="number" min="1" max="100" class="form-control" />
+                    </div>
+                </div>
             </div>
         </div>
         <!-- Chapter Page -->

scripts/defaultOptions.js

@@ -33,6 +33,7 @@ let defaultOptions = {
     updateMDList: false,
     showTooltips: true,
     showFullCover: false,
+    coverMaxHeight: 80,
     highlightChapters: true,
     showNotifications: true,
     showErrors: true,
@@ -42,5 +43,5 @@ let defaultOptions = {
     isLoggedIn: false,
     token: "",
     version: 2.3,
-    subVersion: 3
+    subVersion: 4
 };

scripts/myMangaDex.js

@@ -332,23 +332,27 @@ class MyMangaDex {
             tooltip: tooltip.getBoundingClientRect(),
             row: row.getBoundingClientRect()
         };
+        if (tooltip.childElementCount == 2) {
+            let chapterRect = tooltip.lastElementChild.getBoundingClientRect();
+            tooltip.firstElementChild.style.maxHeight = [(window.innerHeight - 10) * (this.options.coverMaxHeight / 100) - chapterRect.height, "px"].join("");
+        }
         // Calculate to place on the left of the main column by default
         let left = Math.max(5, rect.row.x - rect.tooltip.width - 5);
         let maxWidth = rect.row.left - 10;
         // Boundaries
-        if (rect.row.left < 200) {
+        if ((this.options.showFullCover && rect.row.left < 400) || rect.row.left < 100) {
             if (rightColumn) {
-                rect.lastChild = row.lastElementChild.getBoundingClientRect()
-                maxWidth = (rect.lastChild.left - 10) * 0.6;
+                rect.lastChild = row.lastElementChild.getBoundingClientRect();
+                maxWidth = (rect.lastChild.left - 10);
             } else {
                 rect.firstChild = row.firstElementChild.getBoundingClientRect();
-                maxWidth = (document.body.clientWidth - 10) * 0.25;
+                maxWidth = (document.body.clientWidth - 10);
             }
         }
         tooltip.style.maxWidth = [maxWidth, "px"].join("");
         // X axis
         setTimeout(() => {
-            if (rect.row.left < 200) {
+            if ((this.options.showFullCover && rect.row.left < 400) || rect.row.left < 100) {
                 if (rightColumn) {
                     left = (rect.lastChild.left - 5) - Math.min(maxWidth, rect.tooltip.width);
                 } else {
@@ -373,14 +377,15 @@ class MyMangaDex {
         let tooltip = document.createElement("div");
         tooltip.className = "mmd-tooltip loading";
         tooltip.style.left = "-5000px";
-        tooltip.style.maxHeight = [(window.innerHeight - 10) * 0.8, "px"].join("");
+        tooltip.style.maxHeight = [(window.innerHeight - 10) * (this.options.coverMaxHeight / 100), "px"].join("");
         let spinner = document.createElement("i");
         spinner.className = "fas fa-circle-notch fa-spin";
         tooltip.appendChild(spinner);
         this.tooltipContainer.appendChild(tooltip);
         // Thumbnail
         let tooltipThumb = document.createElement("img");
         tooltipThumb.className = "mmd-thumbnail loading";
+        tooltipThumb.style.maxHeight = [(window.innerHeight - 10) * (this.options.coverMaxHeight / 100), "px"].join("");
         tooltip.appendChild(tooltipThumb);
 
         // Append the chapters if there is

scripts/optionsManager.js

@@ -346,7 +346,19 @@ class OptionsManager {
                 if ("type" in element.dataset && element.dataset.type == "checkbox") {
                     this.options[element.dataset.option] = (element.dataset.value == "true");
                 } else {
-                    this.options[element.dataset.option] = element.value;
+                    if (element.dataset.type == "number") {
+                        let value = Math.floor(element.value);
+                        if (element.min != "" && Math.floor(element.min) > value) {
+                            value = Math.floor(element.min);
+                            element.value = value;
+                        } else if (element.max != "" && Math.floor(element.max) < value) {
+                            value = Math.floor(element.max);
+                            element.value = value;
+                        }
+                        this.options[element.dataset.option] = value;
+                    } else {
+                        this.options[element.dataset.option] = element.value;
+                    }
                 }
             });
             // Save
@@ -1123,14 +1135,14 @@ class OptionsManager {
         };
 
         // Build titles list
-        let titles = await storageGet(null);
-        Object.keys(titles).forEach(key => {
+        let _local = await storageGet(null);
+        Object.keys(_local).forEach(key => {
             if (key == "options" || key == "history") return;
-            body.titles[key] = titles[key];
+            body.titles[key] = _local[key];
         });
         // History
         if (this.options.updateHistoryPage) {
-            let history = await storageGet("history");
+            let history = _local.history;
             if (history) {
                 body.history.list = history.list;
                 Object.keys(history).forEach(id => {
@@ -1386,7 +1398,7 @@ class OptionsManager {
                     body.history[title.md_id] = {
                         name: title.name,
                         id: title.md_id,
-                        progress: parseFloat(title.progress),
+                        progress: title.progress,
                         chapter: Math.floor(title.chapter)
                     };
                 });