reader rewritten in plain js

reader/css/reader.css

@@ -0,0 +1,100 @@
+body {
+     font-family: 'Courier New', monospace;
+}
+
+#titlebarContainer {
+    z-index: 99;
+    position: absolute;
+    width: 100%;
+    height: 200px;
+}
+
+#titlebar {
+    z-index: 98;
+    text-align: center;
+    border-radius: 4px;
+    position: relative;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    transform: translate(-50%, -50%);
+    background-color: rgba(256, 256, 256, 1);
+    left: 50%;
+    width: 80%;
+    height: 40px;
+    margin-top: 30px;
+}
+
+#titlebarText {
+    margin: 10px;
+    float: left;
+    color: black;
+}
+
+.titlebarButton {
+    background-color: rgba(0, 0, 0, 0);
+    float: right;
+    border: none;
+    height: 40px;
+    width: 40px;
+}
+
+#backButton {
+    float: left;
+}
+
+.titlebarIcon {
+    width: 20px;
+    height: 20px;
+}
+
+.imageView {
+    position: absolute;
+    margin: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 95;
+}
+
+.imageLeft {
+    position: absolute;
+    width: 50%;
+    height: auto;
+    top : 0;
+    right: 50%;
+    z-index: 96;
+}
+
+.imageRight {
+    position: absolute;
+    width: 50%;
+    height: auto;
+    margin-top: 20px;
+    top: 0;
+    left: 50%;
+    z-index: 96;
+}
+
+#pageLeft {
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    left: 0%;
+    z-index: 97;
+}
+
+#pageRight {
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    left:50%;
+    z-index: 97;
+}
+
+#pageFooter {
+    z-index: 98;
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

reader/db.json

@@ -0,0 +1,21 @@
+[
+    {
+	"id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta",
+	"chapters" : [
+		{ "pages" : "18" }
+	]
+    },
+    {
+	"id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4",
+	"chapters" : [
+		{ "pages" : "39" }
+	]
+    },
+    {
+	"id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4",
+	"chapters" : [
+		{ "pages" : "71" }
+	]
+    }
+]
+

reader/js/reader.js

@@ -0,0 +1,231 @@
+var layoutCurrent;
+var pageNo = 0;
+var pageCurrent = 1;
+var title;
+var cid;
+var content_url;
+var fitCurrent;
+var url = new URL(window.location.href);
+var manga = 0;
+var chapter = 0;
+
+// ---------------------------------------------------------
+// Functions
+// ---------------------------------------------------------
+
+function loadPage() {
+    console.log("loading page", pageCurrent, "out of", pageNo);
+    if(pageCurrent <= pageNo && pageCurrent > 0){
+        for(let i = 1; i <= pageNo; i++){
+            console.log(i);
+            document.getElementById(`image${i}`).style.visibility = "hidden";
+        }
+        if(layoutCurrent == "double"){
+            if(pageCurrent%2==0){
+                pageCurrent--;
+            }
+            let pagePair = pageCurrent+1;
+            document.getElementById(`image${pagePair}`).style.visibility = "visible";
+        }
+        document.getElementById("pageCounter").textContent = `${pageCurrent}/${pageNo}`;
+        document.getElementById(`image${pageCurrent}`).style.visibility = "visible";
+    }
+}
+
+function nextPage() {
+    if(layoutCurrent == "double"){
+        if(pageCurrent+2 <= pageNo){
+            pageCurrent += 2;
+        }
+    }
+    else{
+        if(pageCurrent+1 <= pageNo){
+            pageCurrent++;
+        }
+    }
+    loadPage();
+}
+
+function previousPage() {
+    if(layoutCurrent == "double"){
+        if(pageCurrent-2 >= 1){
+            pageCurrent -= 2;
+        }
+    }
+    else{
+        if(pageCurrent-1 >= 1){
+            pageCurrent--;
+        }
+    }
+    loadPage();
+}
+
+function layoutSingle(){
+    layoutCurrent = "single";
+    fitHeight();
+    for (let i = 1; i <= pageNo; i++) {
+        console.log(`image${i}`);
+        document.getElementById(`image${i}`).className = "imageView";
+    }
+    document.getElementById("layoutIcon").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.getElementById("layoutIcon").src = "img/double.png";
+}
+
+function fitWidth(){
+    if(layoutCurrent == "single"){
+        fitCurrent = "width";
+        var items = document.getElementsByClassName("imageView");
+        for(var i = 0; i < items.length; i++){
+            items.item(i).style.width = "100%";
+            items.item(i).style.height = "auto";
+        }
+        document.getElementById("fitIcon").src =  "img/width.png";
+    }
+}
+
+function fitHeight(){
+    if(layoutCurrent == "single"){
+        fitCurrent = "height";
+        var items = document.getElementsByClassName("imageView");
+        for(var i = 0; i < items.length; i++){
+            items.item(i).style.width = "auto";
+            items.item(i).style.height = "100%";
+        }
+        document.getElementById("fitIcon").src = "img/height.png";
+    }
+}
+
+// ---------------------------------------------------------
+// Event handlers
+// ---------------------------------------------------------
+
+document.addEventListener("keydown", function (e) {
+    console.log("key press");
+    e = e || window.event;
+    switch (e.keyCode) {
+        case 39:
+        case 76:
+            console.log("right");
+            previousPage();
+            break;
+        case 37:
+        case 72:
+            console.log("left");
+            nextPage();
+            break;
+        default: return;
+    }
+    e.preventDefault();
+});
+
+document.getElementById("pageLeft").addEventListener("click", function (e) {
+    nextPage();
+});
+
+document.getElementById("pageRight").addEventListener("click", function (e) {
+    previousPage();
+});
+
+document.getElementById("downloadButton").addEventListener("click", function (e) {
+    //document.getElementById("downloadButton").style.background-color = "rgb(0, 0, 0, 0.2)";
+});
+
+document.getElementById("layoutButton").addEventListener("click", function (e) {
+    if(layoutCurrent == "single"){
+        layoutDouble();
+    }
+    else{
+        layoutSingle();
+    }
+    loadPage();
+});
+
+document.getElementById("fitButton").addEventListener("click", function (e) {
+    if(fitCurrent == "height"){
+        fitWidth();
+    }
+    else{
+        fitHeight();
+
+    }
+    loadPage();
+});
+
+document.getElementById("titlebarContainer").addEventListener("mouseenter", function () {
+    document.getElementById("titlebar").style.visibility = "visible";
+});
+
+document.getElementById("titlebarContainer").addEventListener("mouseleave", function () {
+    document.getElementById("titlebar").style.visibility = "hidden";
+});
+
+if(url.searchParams.has("manga")){
+    manga = url.searchParams.get("manga");
+}
+if(url.searchParams.has("chapter")){
+    chapter = url.searchParams.get("chapter");
+}
+
+// ---------------------------------------------------------
+// parse json data
+// ---------------------------------------------------------
+
+var xmlhttp = new XMLHttpRequest();
+xmlhttp.onreadystatechange = function () {
+    if(this.readyState == 4 && this.status == 200){
+        var res = JSON.parse(this.responseText);
+        console.log("parsing json", this.responseText);
+        pageNo = res[manga].chapters[chapter].pages;
+        // "https://ipfs.io/api/v0/ls/"+res[manga][chapter]["cid"];
+        title = res[manga].title;
+        cid = res[manga].cid;
+        console.log(pageNo, title, cid);
+
+// ---------------------------------------------------------
+// Initialize
+// ---------------------------------------------------------
+
+        document.getElementById("titlebar").style.visibility = "hidden";
+
+        document.getElementById("pageCounter").innerHtml = `${pageCurrent}/${pageNo}`;
+        document.getElementById("titlebarText").innerHtml = `${title}`;
+        document.title = `${title}`;
+        document.getElementById("pageView").innerHtml = "";
+
+        for (let i = 1; i <= pageNo; i++) {
+            var img = document.createElement("img");
+            img.setAttribute("draggable", "false");
+            img.setAttribute("src", `https://ipfs.io/ipfs/${cid}/${i}.jpg`);
+            img.id = `image${i}`;
+            img.style.visibility = "hidden";
+            document.getElementById("pageView").appendChild(img);
+        }
+
+        console.log(document.getElementById("pageView").innerHtml);
+
+        if(pageNo > 0){
+            layoutSingle();
+            fitHeight();
+            loadPage();
+        }
+        else{
+            console.log("no pages to load");
+        }
+    }
+}
+xmlhttp.open("GET", "https://amangathing.ddns.net/db.json", true);
+xmlhttp.send();
+
+

reader/reader.html

@@ -0,0 +1,43 @@
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title></title>
+
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+
+        <link rel="stylesheet" href="css/reader.css"></link>
+    </head>
+    <body>
+
+        <div id="titlebarContainer">
+        <div id="titlebar">
+            <button class="titlebarButton" id="backButton" onclick="history.back()">
+                <img class="titlebarIcon" style="width:15px;height:15px" src="img/back.png"/>
+            </button>
+
+            <span id="titlebarText"></span>
+
+            <button class="titlebarButton" id="downloadButton">
+                <img class="titlebarIcon" src="img/download.png"/>
+            </button>
+            <button class="titlebarButton" id="layoutButton">
+                <img class="titlebarIcon" id="layoutIcon" src="img/single.png"/>
+            </button>
+            <button class="titlebarButton" id="fitButton">
+                <img class="titlebarIcon" id="fitIcon" src="img/height.png"/>
+            </button>
+        </div>
+        </div>
+
+        <div id="pageLeft"></div>
+        <div id="pageRight"></div>
+
+        <div id="pageView"></div>
+
+        <div id="pageFooter">
+            <span id="pageCounter">0/?</span>
+        </div>
+
+        <script src="js/reader.js"></script>
+    </body>
+</html>

zhetic-poc/db.json

@@ -1,5 +0,0 @@
-[
-    { "id" : "0", "title" : "Boku no Kokoro no Yabai Yatsu", "cid" : "bafybeihnoou2av5w2bzmwkl6hi25scyzz6sjwdfqp4cwq2ikf6dfmev3ta"},
-    { "id" : "1", "title" : "Otoyomegatari", "cid" : "bafybeigfivshobq4h5x5qwmttgqimaufmcjl6hpjcrsedj7wxxduphp7g4"},
-    { "id" : "2", "title" : "Spy X Family", "cid" : "bafybeibgnpbredeofwp364qomqpth55a6ui3oiy2ucm35fo3eimquoeob4"}
-]