From a6bc74138c219db0f3a0869d3472de199fa7b30e Mon Sep 17 00:00:00 2001 From: BuildTools Date: Thu, 29 Apr 2021 16:18:18 -0400 Subject: [PATCH] links, reader --- css/reader.css | 102 +++++++++++++++++++ index.html | 12 +-- main.js => js/main.js | 139 +++++++++++++------------- js/reader.js | 221 ++++++++++++++++++++++++++++++++++++++++++ reader.html | 52 ++++++++++ 5 files changed, 451 insertions(+), 75 deletions(-) create mode 100644 css/reader.css rename main.js => js/main.js (67%) create mode 100644 js/reader.js create mode 100644 reader.html diff --git a/css/reader.css b/css/reader.css new file mode 100644 index 0000000..7412b0f --- /dev/null +++ b/css/reader.css @@ -0,0 +1,102 @@ +#titlebar_container { + z-index: 99; + position: absolute; + width: 100%; + height: 200px; +} + +#titlebar { + z-index: 98; + text-align: center; + border-radius: 4px; + position: relative; + border: 1px solid var(--dark-grey); + transform: translate(-50%, -50%); + background-color: var(--medium-grey); + left: 50%; + width: 80%; + height: 40px; + margin-top: 30px; +} + +#titlebar .text { + margin: 10px; + float: left; + color: black; +} + +#titlebar button { + background-color: var(--transparent); + float: right; + border: none; + border-radius: 0; + box-shadow: none; + height: 40px; + width: 40px; +} + +#titlebar .back { + float: left; +} + +#titlebar img.back { + width: 15px; + height: 15px; +} + +#titlebar img { + width: 20px; + height: 20px; +} + +.image_fill { + position: absolute; + margin: auto; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: 95; +} + +.image_left { + position: absolute; + width: 50%; + height: auto; + top : 0; + right: 50%; + z-index: 96; +} + +.image_right { + position: absolute; + width: 50%; + height: auto; + top: 0; + left: 50%; + z-index: 96; +} + +#page_left { + position: absolute; + height: 100%; + width: 50%; + left: 0%; + z-index: 97; +} + +#page_right { + position: absolute; + height: 100%; + width: 50%; + left:50%; + z-index: 97; +} + +#footer { + z-index: 98; + position: fixed; + bottom: 0; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/index.html b/index.html index 438821f..b576142 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,6 @@ tr:nth-child(odd) { background-color: rgb(240, 240, 240); } -tr -{ - border: 1px; -} html { text-align: center; @@ -20,7 +16,7 @@ html margin-right: auto; } - + @@ -30,9 +26,9 @@ load();

loading...

- - - + + +
titleauthorlast updatetitleauthorlast update
diff --git a/main.js b/js/main.js similarity index 67% rename from main.js rename to js/main.js index b9b86ed..dafa1d4 100644 --- a/main.js +++ b/js/main.js @@ -1,68 +1,73 @@ -function setheader(header) -{ - document.getElementById("title").innerHTML = header; -} -function loadmangos(info) -{ - let listing = document.getElementById("listing"); - info.forEach(manga => - { - let row = listing.insertRow(-1); - let title = row.insertCell(-1).appendChild(); - let link = document.createElement("a"); - link.setAttribute("href", "http://www.microsoft.com") - title.innerHTML = manga["titles"][0]; - title.link = window.location+"?id="+manga["id"] - let author = row.insertCell(-1); - author.innerHTML = manga["authors"][0]; - let time = row.insertCell(-1); - time.innerHTML = new Date(manga["last_updated"]).toLocaleDateString("en-US"); - }); - console.log(info); -} -function loadchapters(manga, chapters) -{ - if (manga) - { - setheader(manga["titles"][0]); - } - if (chapters) - { - console.log(chapters); - let listing = document.getElementById("listing"); - chapters.forEach(chapter => - { - let row = listing.insertRow(-1); - let title = row.insertCell(-1); - title.innerHTML = chapter["title"]; - let author = row.insertCell(-1); - author.innerHTML = "abcd"; - let time = row.insertCell(-1); - time.innerHTML = chapter["page_count"]; - }); - } -} -function load(url = "https://test.cynic.moe") -{ - let qs = new URLSearchParams(window.location.search); - let id = qs.get("id"); - if (id) - { - let manga, chapters; - fetch(url+"/manga/from_id?id="+id) - .then(response => response.json()) - .then(data => loadchapters(data, null)); - fetch(url+"/manga/get_chapters?id="+id) - .then(response => response.json()) - .then(data => loadchapters(null, data)); - } - else - { - fetch(url+"/info") - .then(response => response.json()) - .then(data => setheader(data["name"]+" v"+data["version"])); - fetch(url+"/manga/search?sort") - .then(response => response.json()) - .then(data => loadmangos(data)); - } +function setheader(header) +{ + document.getElementById("title").innerHTML = header; +} +function loadmangos(info) +{ + let listing = document.getElementById("listing"); + info.forEach(manga => + { + let row = listing.insertRow(-1); + let title = row.insertCell(-1); + let link = document.createElement("a"); + link.setAttribute("href", window.location+"?id="+manga["id"]); + link.textContent = manga["titles"][0]; + title.appendChild(link); + let author = row.insertCell(-1); + author.innerHTML = manga["authors"][0]; + let time = row.insertCell(-1); + time.innerHTML = new Date(manga["last_updated"]).toLocaleDateString("en-US"); + }); + console.log(info); +} +function loadchapters(manga, chapters) +{ + if (manga) + { + setheader(manga["titles"][0]); + } + if (chapters) + { + document.getElementById("c2").innerHTML = "pages"; + document.getElementById("c3").innerHTML = "date"; + console.log(chapters); + let listing = document.getElementById("listing"); + chapters.forEach(chapter => + { + let row = listing.insertRow(-1); + let title = row.insertCell(-1); + let link = document.createElement("a"); + link.setAttribute("href", window.location.hostname+"reader.html?cid="+chapter["ipfs_link"]+"&pages="+chapter["page_count"]+"&title="+chapter["title"]); + link.textContent = chapter["title"]; + title.appendChild(link); + let date = row.insertCell(-1); + date.innerHTML = chapter["page_count"]; + let time = row.insertCell(-1); + time.innerHTML = new Date(chapter["date_added"]).toLocaleDateString("en-US"); + }); + } +} +function load(url = "https://test.cynic.moe") +{ + let qs = new URLSearchParams(window.location.search); + let id = qs.get("id"); + if (id) + { + let manga, chapters; + fetch(url+"/manga/from_id?id="+id) + .then(response => response.json()) + .then(data => loadchapters(data, null)); + fetch(url+"/manga/get_chapters?id="+id) + .then(response => response.json()) + .then(data => loadchapters(null, data)); + } + else + { + fetch(url+"/info") + .then(response => response.json()) + .then(data => setheader(data["name"]+" v"+data["version"])); + fetch(url+"/manga/search?sort") + .then(response => response.json()) + .then(data => loadmangos(data)); + } } \ No newline at end of file diff --git a/js/reader.js b/js/reader.js new file mode 100644 index 0000000..50368f1 --- /dev/null +++ b/js/reader.js @@ -0,0 +1,221 @@ +// zhetic +var layoutCurrent; +var pageNo = 0; +var pageCurrent = 1; +var title; +var cid; +var fitCurrent; +var url = new URL(window.location.href); +var manga = 0; +var chapter = 0; + +// --------------------------------------------------------- +// Functions +// --------------------------------------------------------- + +//set page to pageCurrent and changer the counter +function loadPage() { + if(pageCurrent <= pageNo && pageCurrent > 0){ + for(var i = 1; i <= pageNo; i++){ + document.getElementById(`image${i}`).style.visibility = "hidden"; + } + if(layoutCurrent == "double"){ + if(pageCurrent%2==0){ + pageCurrent--; + } + var pagePair = pageCurrent+1; + document.getElementById(`image${pagePair}`).style.visibility = "visible"; + } + document.querySelector("#footer #counter").textContent = `${pageCurrent}/${pageNo}`; + document.getElementById(`image${pageCurrent}`).style.visibility = "visible"; + } +} + +// Goto next page or previous page. Left is next page by default. +var rightPage = function () { + if(layoutCurrent == "double"){ + if(pageCurrent+2 <= pageNo){ + pageCurrent += 2; + } + } + else{ + if(pageCurrent+1 <= pageNo){ + pageCurrent++; + } + } + loadPage(); +} + +var leftPage = function () { + if(layoutCurrent == "double"){ + if(pageCurrent-2 >= 1){ + pageCurrent -= 2; + } + } + else{ + if(pageCurrent-1 >= 1){ + pageCurrent--; + } + } + loadPage(); +} + +// Inversion between left-to-right and right-to-left +function invertPage() { + [leftPage, rightPage] = [rightPage, leftPage]; +} + +function layoutSingle(){ + layoutCurrent = "single"; + fitHeight(); + for (let i = 1; i <= pageNo; i++) { + document.getElementById(`image${i}`).className = "image_fill"; + } + document.querySelector("#titlebar img.layout").src = "img/single.png"; +} + +function layoutDouble(){ + fitHeight(); + layoutCurrent = "double"; + for (let i = 1; i <= pageNo; i++) { + let side = "right"; + if(i%2==0){ + side = "left"; + } + document.getElementById(`image${i}`).className = `image_${side}`; + } + document.querySelector("#titlebar img.layout").src = "img/double.png"; +} + +function fitWidth(){ + if(layoutCurrent == "single"){ + fitCurrent = "width"; + var items = document.getElementsByClassName("image_fill"); + for(var i = 0; i < items.length; i++){ + items.item(i).style.width = "100%"; + items.item(i).style.height = "auto"; + } + document.querySelector("#titlebar img.fit").src = "img/width.png"; + } +} + +function fitHeight(){ + if(layoutCurrent == "single"){ + fitCurrent = "height"; + var items = document.getElementsByClassName("image_fill"); + for(var i = 0; i < items.length; i++){ + items.item(i).style.width = "auto"; + items.item(i).style.height = "100%"; + } + document.querySelector("#titlebar img.fit").src = "img/height.png"; + } +} + +// --------------------------------------------------------- +// Event handlers +// --------------------------------------------------------- + +document.addEventListener("keydown", function (e) { + e = e || window.event; + switch (e.keyCode) { + case 39: + case 76: + rightPage(); + break; + case 37: + case 72: + leftPage(); + break; + case 73: + invertPage(); + default: return; + } + e.preventDefault(); +}); + +document.querySelector("#page_left").addEventListener("click", function (e) { + leftPage(); +}); + +document.querySelector("#page_right").addEventListener("click", function (e) { + rightPage(); +}); + +document.querySelector("#titlebar button.download").addEventListener("click", function (e) { + //document.getElementById("downloadButton").style.background-color = "rgb(0, 0, 0, 0.2)"; +}); + +document.querySelector("#titlebar button.layout").addEventListener("click", function (e) { + if(layoutCurrent == "single"){ + layoutDouble(); + } + else{ + layoutSingle(); + } + loadPage(); +}); + +document.querySelector("#titlebar button.fit").addEventListener("click", function (e) { + if(fitCurrent == "height"){ + fitWidth(); + } + else{ + fitHeight(); + + } + loadPage(); +}); + +document.querySelector("#titlebar button.invert").addEventListener("click", function (e) { + invertPage(); +}); + +document.querySelector("#titlebar_container").addEventListener("mouseenter", function () { + document.querySelector("#titlebar").style.visibility = "visible"; +}); + +document.querySelector("#titlebar_container").addEventListener("mouseleave", function () { + document.querySelector("#titlebar").style.visibility = "hidden"; +}); + +// --------------------------------------------------------- +// parse metadata +// --------------------------------------------------------- + +function load_pages() { + if(url.searchParams.has("cid")){ + cid = url.searchParams.get("cid"); + if(cid == ""){ + return; + } + pageNo = url.searchParams.get("pages"); + title = url.searchParams.get("title"); + + // "https://ipfs.io/api/v0/ls/"+res[manga][chapter]["cid"]; + + // -------------------------------------------------------- + // Initialize + // -------------------------------------------------------- + + document.querySelector("#titlebar").style.visibility = "hidden"; + document.querySelector("#footer #counter").textContent = `${pageCurrent}/${pageNo}`; + document.querySelector("#titlebar .text").textContent = `${title}`; + + var pageView = document.querySelector("#page_view"); + for (var i = 1; i <= pageNo; i++) { + pageView.appendChild(Object.assign( + document.createElement("img"), + {draggable: "false", src: `https://ipfs.cynic.moe/ipfs/${cid}/${i}.jpg`, id: `image${i}`, visibility: "hidden"} + )); + } + + if(pageNo > 0){ + layoutSingle(); + fitHeight(); + loadPage(); + } + else{ + document.querySelector("#titlebar #text").textContent = "Nothing to load"; + } + } +} \ No newline at end of file diff --git a/reader.html b/reader.html new file mode 100644 index 0000000..b243e15 --- /dev/null +++ b/reader.html @@ -0,0 +1,52 @@ + + + Mangaloid + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+ + + + + + + \ No newline at end of file