mirror of https://github.com/kurisufriend/frontend
zhetic
4 years ago
commit
92b2d6d09e
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2021 Mangaloid |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Mangaloid</title> |
||||||
|
|
||||||
|
<meta charset="UTF-8"/> |
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> |
||||||
|
<input id="search_bar" type="text" placeholder="Search"> |
||||||
|
<button id="search_button" onclick="search_bar()">Search</button> |
||||||
|
<img id="logo" src="img/logo.png"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="content"> |
||||||
|
<div id="footer"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javacript" src="js/search_bar.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Mangaloid</title> |
||||||
|
|
||||||
|
<meta charset="UTF-8"/> |
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/stylesheet.css"/> |
||||||
|
<link rel="stylesheet" href="css/title_list.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> |
||||||
|
<input id="search_bar" type="text" placeholder="Search"> |
||||||
|
<button id="search_button" onclick="search_bar()">Search</button> |
||||||
|
<img id="logo" src="img/logo.png"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="content"> |
||||||
|
<h2 id="label">Recently updated</h2> |
||||||
|
<div id="title_list"> |
||||||
|
<center> |
||||||
|
<table id="table"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<th></th> |
||||||
|
<th><p>Title</p></th> |
||||||
|
<th><p>Artist/Author</p></th> |
||||||
|
<th><p>Status</p></th> |
||||||
|
<th><p>Chapters</p></th> |
||||||
|
<th><p>Updated</p></th> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</center> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="footer"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="js/title_list.js"></script> |
||||||
|
<script type="text/javascript" src="js/search_bar.js"></script> |
||||||
|
<script> |
||||||
|
document.onreadystatechange = load_titles("https://test.cynic.moe/manga/search?title=a"); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
#info { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 25em; |
||||||
|
border-top: 1em solid var(--light-grey); |
||||||
|
border-bottom: 1em solid var(--light-grey); |
||||||
|
border-left: 3em solid var(--light-grey); |
||||||
|
border-right: 3em solid var(--light-grey); |
||||||
|
background-color: var(--medium-grey); |
||||||
|
} |
||||||
|
|
||||||
|
#info #cover { |
||||||
|
height: 23em; |
||||||
|
width: 16em; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
#info .subtitle { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
#info #text { |
||||||
|
position: absolute; |
||||||
|
box-sizing: border-box; |
||||||
|
left: 19em; |
||||||
|
border-left: 2em solid var(--medium-grey); |
||||||
|
border-right: 2em solid var(--medium-grey); |
||||||
|
width: calc(100% - 16em - 6em); |
||||||
|
word-wrap: break-word; |
||||||
|
} |
||||||
|
|
||||||
|
#chapters #table { |
||||||
|
width: 90%; |
||||||
|
border-collapse: collapse; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
#chapters #table .stretch { |
||||||
|
width: 99%; |
||||||
|
} |
||||||
|
|
||||||
|
table, th, td { |
||||||
|
border-collapse: collapse; |
||||||
|
text-align: left; |
||||||
|
white-space: nowrap; |
||||||
|
padding-left: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
th { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
tr { |
||||||
|
border-bottom: 1px solid black; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -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%); |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
#search { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 25em; |
||||||
|
top: 2em; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
#search input, p { |
||||||
|
position: relative; |
||||||
|
display: table-cell; |
||||||
|
margin: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
#search div { |
||||||
|
display: table; |
||||||
|
width: 100%; |
||||||
|
height: 4em; |
||||||
|
} |
||||||
|
|
||||||
|
#search p { |
||||||
|
width: 3em; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
#search .one input { |
||||||
|
width: 99%; |
||||||
|
} |
||||||
|
|
||||||
|
#search .two input { |
||||||
|
width: 98%; |
||||||
|
} |
||||||
|
|
||||||
|
#search .three input { |
||||||
|
width: 99%; |
||||||
|
} |
||||||
|
|
||||||
|
#search button { |
||||||
|
padding: 1em; |
||||||
|
top: 17em; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,121 @@ |
|||||||
|
body { |
||||||
|
font-family: arial, helvetica, sans-serif; |
||||||
|
--dark-grey: rgba(80, 80, 80, 1); |
||||||
|
--medium-grey: rgba(120, 120, 120, 1); |
||||||
|
--light-accent: rgba(150, 150, 150, 1); |
||||||
|
--light-grey: rgba(180, 180, 180, 1); |
||||||
|
--red-accent: rgba(167, 7, 7, 1); |
||||||
|
--transparent: rgba(0, 0, 0, 0); |
||||||
|
background-color: var(--light-grey); |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
background-color: var(--light-accent); |
||||||
|
border: none; |
||||||
|
padding-left: 1em; |
||||||
|
padding-right: 1em; |
||||||
|
border-radius: 1em; |
||||||
|
vertical-align: center; |
||||||
|
outline: none; |
||||||
|
cursor: pointer; |
||||||
|
box-shadow: 0 2px var(--dark-grey); |
||||||
|
} |
||||||
|
|
||||||
|
button:active { |
||||||
|
transform: translateY(2px); |
||||||
|
box-shadow: 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
input { |
||||||
|
background-color: white; |
||||||
|
border: none; |
||||||
|
padding: 1em; |
||||||
|
border-radius: 1em; |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
hr { |
||||||
|
border: 1px solid var(--light-grey); |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
#header { |
||||||
|
position: fixed; |
||||||
|
top: 0%; |
||||||
|
left: 0%; |
||||||
|
width: 100%; |
||||||
|
height: 5em; |
||||||
|
background-color: var(--medium-grey); |
||||||
|
z-index: 100; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#header #home { |
||||||
|
position: relative; |
||||||
|
top: 30%; |
||||||
|
height: 40%; |
||||||
|
left: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
#header #search_bar { |
||||||
|
position: absolute; |
||||||
|
transform: translateY(50%); |
||||||
|
background-color: white; |
||||||
|
border: none; |
||||||
|
padding: 1em; |
||||||
|
border-radius: 1em; |
||||||
|
left: 10em; |
||||||
|
width: 50%; |
||||||
|
height: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
#header #search_button { |
||||||
|
position: absolute; |
||||||
|
height: 50%; |
||||||
|
left: calc(10em + 50% + 1em); |
||||||
|
transform: translateY(50%); |
||||||
|
} |
||||||
|
|
||||||
|
#header #logo { |
||||||
|
position: absolute; |
||||||
|
height: 180%; |
||||||
|
right: 5%; |
||||||
|
} |
||||||
|
|
||||||
|
#content { |
||||||
|
position: absolute; |
||||||
|
width: 80%; |
||||||
|
left: 10%; |
||||||
|
top: 5em; |
||||||
|
bottom: 0em; |
||||||
|
} |
||||||
|
|
||||||
|
.tag { |
||||||
|
border: 1px solid black; |
||||||
|
background-color: var(--light-accent); |
||||||
|
padding: 4px; |
||||||
|
margin: 1px; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
@media only screen and (max-width: 800px){ |
||||||
|
#content { |
||||||
|
width: 800px; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
#logo { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#content #footer { |
||||||
|
position: relative; |
||||||
|
height: 10em; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,55 @@ |
|||||||
|
#title_list { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
left: 0; |
||||||
|
top: 0em; |
||||||
|
} |
||||||
|
|
||||||
|
#label { |
||||||
|
position: relative; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
td { |
||||||
|
white-space: nowrap; |
||||||
|
padding-left: 2em; |
||||||
|
padding-right: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
table, th, td { |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
table, th { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
th { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.first_row { |
||||||
|
border-top: 1px solid black; |
||||||
|
padding-top: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.second_row { |
||||||
|
border-bottom: 1px solid black; |
||||||
|
padding-bottom 2em; |
||||||
|
} |
||||||
|
|
||||||
|
#title_list img.thumbnail { |
||||||
|
height: 100px; |
||||||
|
padding-left: 0; |
||||||
|
padding-right: 0; |
||||||
|
padding-top: 2px; |
||||||
|
padding-bottom: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
#title_list .tag { |
||||||
|
border: 1px solid black; |
||||||
|
background-color: var(--light-accent); |
||||||
|
padding: 4px; |
||||||
|
margin: 1px; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,114 @@ |
|||||||
|
// ----------------------------------------------------
|
||||||
|
// Fetch metadata for one title and fill out a page
|
||||||
|
// ----------------------------------------------------
|
||||||
|
|
||||||
|
function load_info(remote, id) { |
||||||
|
remote += "/manga/from_id?id=" + id; |
||||||
|
fetch(remote) |
||||||
|
.then(manga => manga.json()) |
||||||
|
.then(function (manga) { |
||||||
|
var text = document.querySelector("#info #text"); |
||||||
|
document.getElementById("cover").src = remote+"/manga/thumbnail?id="+id; |
||||||
|
|
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("h2"), |
||||||
|
{textContent: manga["titles"][0]} |
||||||
|
)); |
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("span"), |
||||||
|
{textContent: get_utf_kanji(manga["titles"].slice(1).join(" | ")), className: "subtitle"} |
||||||
|
)); |
||||||
|
|
||||||
|
text.appendChild(document.createElement("hr")); |
||||||
|
|
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("p"), |
||||||
|
{textContent: "Artist(s): " + manga["artists"].join(", ")} |
||||||
|
)); |
||||||
|
|
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("p"), |
||||||
|
{textContent: "Author(s): " + manga["authors"].join(", ")} |
||||||
|
)); |
||||||
|
|
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("p"), |
||||||
|
{textContent: "Status: " + manga["publication_status"]} |
||||||
|
)); |
||||||
|
|
||||||
|
text.appendChild(Object.assign( |
||||||
|
document.createElement("p"), |
||||||
|
{textContent: "Last Updated: "} |
||||||
|
)); |
||||||
|
|
||||||
|
var tags = document.createElement("p"); |
||||||
|
text.appendChild(tags); |
||||||
|
manga["genres"].forEach(tag => { |
||||||
|
tags.appendChild(Object.assign( |
||||||
|
document.createElement("span"), |
||||||
|
{className: "tag", textContent: tag} |
||||||
|
)); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function load_chapters(remote, id) { |
||||||
|
remote += "/manga/get_chapters?id=" + id; |
||||||
|
fetch(remote) |
||||||
|
.then(res => res.json()) |
||||||
|
.then(function (res) { |
||||||
|
var table = document.querySelector("#chapters #table tbody"); |
||||||
|
|
||||||
|
res.forEach(function (chapter, index) { |
||||||
|
var row = table.appendChild(document.createElement("tr")); |
||||||
|
|
||||||
|
//number
|
||||||
|
row.appendChild(document.createElement("td")) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("p"), |
||||||
|
{textContent: chapter["chapter_no"]+"."+chapter["chapter_postfix"]} |
||||||
|
)); |
||||||
|
|
||||||
|
//title
|
||||||
|
row.appendChild(document.createElement("td")) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("a"), |
||||||
|
{textContent: chapter["title"], href: "./reader.html?cid="+chapter["ipfs_link"]+"&pages="+chapter["page_count"]+"&title="+chapter["title"].replaceAll(" ", "+")} |
||||||
|
)); |
||||||
|
|
||||||
|
//group
|
||||||
|
row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: chapter["group_id"]} |
||||||
|
)); |
||||||
|
|
||||||
|
//page count
|
||||||
|
row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: chapter["page_count"]} |
||||||
|
)); |
||||||
|
|
||||||
|
//date
|
||||||
|
row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: new Date(chapter["date_added"]).toLocaleString()} |
||||||
|
)); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function get_utf_kanji(str) { |
||||||
|
return str.replace( |
||||||
|
/[\uff01-\uff5e]/g, |
||||||
|
function(ch) { return String.fromCharCode(ch.charCodeAt(0) - 0xfee0); } |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function load(remote){ |
||||||
|
var url = new URL(window.location.href); |
||||||
|
if(url.searchParams.has("id")){ |
||||||
|
var id = url.searchParams.get("id"); |
||||||
|
load_info(remote, id); |
||||||
|
load_chapters(remote, id); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,223 @@ |
|||||||
|
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"; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,52 @@ |
|||||||
|
// ----------------------------------------------------
|
||||||
|
// Search function
|
||||||
|
// ----------------------------------------------------
|
||||||
|
|
||||||
|
function search_full() { |
||||||
|
var parameter = []; |
||||||
|
//get search string
|
||||||
|
var title = document.querySelector("#search input.title").value; |
||||||
|
if(title != ""){ |
||||||
|
title = title.toLowerCase().replaceAll(" ", "+"); |
||||||
|
parameter.push("title="+title); |
||||||
|
} |
||||||
|
//get author
|
||||||
|
var author = document.querySelector("#search input.author").value; |
||||||
|
if(author != ""){ |
||||||
|
author = author.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+")); |
||||||
|
parameter.push("authors="+author.join(",")); |
||||||
|
} |
||||||
|
//get artist
|
||||||
|
var artist = document.querySelector("#search input.artist").value; |
||||||
|
if(artist != ""){ |
||||||
|
artist = artist.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+")); |
||||||
|
parameter.push("artists="+artist.join(",")); |
||||||
|
} |
||||||
|
//get tags
|
||||||
|
var tag = document.querySelector("#search input.tags").value; |
||||||
|
if(tag != ""){ |
||||||
|
tag = tag.toLowerCase().split(/(?=\+|\-)/).map(s => s.trim()).map(s => s.replaceAll(" ", "+")); |
||||||
|
parameter.push("tags="+tag.join(",")); |
||||||
|
} |
||||||
|
//sort
|
||||||
|
var sort = document.querySelector("#content select.sort").value; |
||||||
|
if(sort != ""){ |
||||||
|
parameter.push("sortby="+sort); |
||||||
|
} |
||||||
|
var query = parameter.join("&"); |
||||||
|
return query; |
||||||
|
} |
||||||
|
|
||||||
|
// ----------------------------------------------------
|
||||||
|
// Event handlers
|
||||||
|
// ----------------------------------------------------
|
||||||
|
|
||||||
|
var fields = document.getElementsByTagName("input"); |
||||||
|
Array.from(fields).map(field => field.addEventListener("keydown", function (e) { |
||||||
|
e = e || window.event; |
||||||
|
if(e.keyCode == 13){ |
||||||
|
e.preventDefault(); |
||||||
|
search_full(); |
||||||
|
} |
||||||
|
})); |
||||||
|
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
// -------------------------------------------------------------
|
||||||
|
// Search bar function
|
||||||
|
// -------------------------------------------------------------
|
||||||
|
|
||||||
|
function search_bar() { |
||||||
|
var query = document.querySelector("#header #search_bar").value; |
||||||
|
if(query != ""){ |
||||||
|
query = query.toLowerCase().replaceAll(" ", "+"); |
||||||
|
var url = "https://amangathing.ddns.net/search.html?title=" + query; |
||||||
|
console.log(query); |
||||||
|
window.location.href = url; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
document.querySelector("#header #search_bar").addEventListener("keydown", function (e) { |
||||||
|
e = e || window.event; |
||||||
|
if(e.keyCode == 13){ |
||||||
|
search_bar(); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
@ -0,0 +1,116 @@ |
|||||||
|
// ----------------------------------------------------------------
|
||||||
|
// Fetch metadata and create a table
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
function load_titles(remote) { |
||||||
|
if(remote == ""){ |
||||||
|
return; |
||||||
|
} |
||||||
|
fetch(remote) |
||||||
|
.then(res => res.json()) |
||||||
|
.then(function (res) { |
||||||
|
var table = document.querySelector("#title_list #table tbody"); |
||||||
|
res.forEach(manga => { |
||||||
|
//row 1
|
||||||
|
var first_row = document.createElement("tr"); |
||||||
|
first_row.className = "first_row"; |
||||||
|
table.appendChild(first_row); |
||||||
|
|
||||||
|
//thumbnail
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{rowSpan: "2"} |
||||||
|
)) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("a"), |
||||||
|
{href: "./title.html?id="+manga["id"]} |
||||||
|
)) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("img"), |
||||||
|
{className: "thumbnail", src: "img/covers/"+manga["id"]+".jpg"} |
||||||
|
)); |
||||||
|
|
||||||
|
//title
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{} |
||||||
|
)) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("b"), |
||||||
|
{textContent: manga["titles"][0]} |
||||||
|
)); |
||||||
|
|
||||||
|
//artist
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: manga["artists"][0]} |
||||||
|
)); |
||||||
|
|
||||||
|
//status
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: manga["publication_status"]} |
||||||
|
)); |
||||||
|
|
||||||
|
//chapters
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: ""} |
||||||
|
)); |
||||||
|
|
||||||
|
//timestamp
|
||||||
|
first_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: ""} |
||||||
|
)); |
||||||
|
|
||||||
|
//row 2
|
||||||
|
var second_row = document.createElement("tr"); |
||||||
|
second_row.className = "second_row"; |
||||||
|
table.appendChild(second_row); |
||||||
|
|
||||||
|
//tags
|
||||||
|
var tag_cell = document.createElement("td"); |
||||||
|
second_row.appendChild(tag_cell); |
||||||
|
manga["genres"].forEach(tag => { |
||||||
|
tag_cell.appendChild(Object.assign( |
||||||
|
document.createElement("span"), |
||||||
|
{className: "tag", textContent: tag} |
||||||
|
)); |
||||||
|
}); |
||||||
|
|
||||||
|
//author
|
||||||
|
second_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: manga["authors"][0]} |
||||||
|
)); |
||||||
|
|
||||||
|
//filler
|
||||||
|
second_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{colSpan: "2"} |
||||||
|
)) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("a"), |
||||||
|
{href: "https://mangaupdates.com/series.html?id=" + manga["mangaupdates_id"]} |
||||||
|
)) |
||||||
|
.appendChild(Object.assign( |
||||||
|
document.createElement("img"), |
||||||
|
{src: "img/mangaupdates.ico"} |
||||||
|
)); |
||||||
|
|
||||||
|
//time since last update
|
||||||
|
second_row.appendChild(Object.assign( |
||||||
|
document.createElement("td"), |
||||||
|
{textContent: "(" + "ago)"} |
||||||
|
)); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function rm_titles() { |
||||||
|
var par = document.querySelector("#title_list #table tbody"); |
||||||
|
while(par.firstChild()){ |
||||||
|
par.removeChild(par.firstChild()); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Mangaloid</title> |
||||||
|
|
||||||
|
<meta charset="UTF-8"/> |
||||||
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/> |
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/> |
||||||
|
<link rel="stylesheet" type="text/css" href="css/reader.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div id="titlebar_container"> |
||||||
|
<div id="titlebar"> |
||||||
|
<button class="back" onclick="history.back()"> |
||||||
|
<img class="back" src="img/back.png"/> |
||||||
|
</button> |
||||||
|
|
||||||
|
<span class="text"></span> |
||||||
|
|
||||||
|
<button class="download"> |
||||||
|
<img class="download" src="img/download.png"/> |
||||||
|
</button> |
||||||
|
<button class="layout"> |
||||||
|
<img class="layout" src="img/single.png"/> |
||||||
|
</button> |
||||||
|
<button class="fit"> |
||||||
|
<img class="fit" src="img/height.png"/> |
||||||
|
</button> |
||||||
|
<button class="invert"> |
||||||
|
<img class="invert" src="img/invert.png"/> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="page_left"></div> |
||||||
|
<div id="page_right"></div> |
||||||
|
<div id="page_view"></div> |
||||||
|
|
||||||
|
<div id="footer"> |
||||||
|
<span id="counter">0/?</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="js/reader.js"></script> |
||||||
|
<script> |
||||||
|
document.onreadystatechange = function () { |
||||||
|
if(document.readyState == "interactive"){ |
||||||
|
load_pages(); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Mangaloid</title> |
||||||
|
|
||||||
|
<meta charset="UTF-8"/> |
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/> |
||||||
|
<link rel="stylesheet" type="text/css" href="css/search.css"/> |
||||||
|
<link rel="stylesheet" type="text/css" href="css/title_list.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> |
||||||
|
<img id="logo" src="img/logo.png"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="content"> |
||||||
|
<div id="search"> |
||||||
|
<div class="one"> |
||||||
|
<p class="title">Title:</p> |
||||||
|
<input class="title" type="text" placeholder="Title"></input> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="two"> |
||||||
|
<p class="artist">Artist:</p> |
||||||
|
<input class="artist" type="text" placeholder="Artist"></input> |
||||||
|
|
||||||
|
<p class="author">Author:</p> |
||||||
|
<input class="author" type="text" placeholder="Author"> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="three"> |
||||||
|
<p class="tags">Tags:</p> |
||||||
|
<input class="tags" type="text" placeholder="Tags"></input> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="four"> |
||||||
|
<p class="sort">Sort:</p> |
||||||
|
<select class="sort"> |
||||||
|
<option value="name">name</option> |
||||||
|
<option value="date">date</option> |
||||||
|
<option value="status">status</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<button onclick="load_results();">Search</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<h2 id="label"></h2> |
||||||
|
|
||||||
|
<div id="title_list" style="visibility: hidden"> |
||||||
|
<center> |
||||||
|
<table id="table"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<th></th> |
||||||
|
<th><p>Title</p></th> |
||||||
|
<th><p>Artist/Author</p></th> |
||||||
|
<th><p>Status</p></th> |
||||||
|
<th><p>Chapters</p></th> |
||||||
|
<th><p>Updated</p></th> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</center> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="footer"> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/search.js"></script> |
||||||
|
<script type="text/javascript" src="js/title_list.js"></script> |
||||||
|
<script> |
||||||
|
var prefix = "https://test.cynic.moe/manga/search?"; |
||||||
|
|
||||||
|
function load_results() { |
||||||
|
var query = search_full() |
||||||
|
if(query != ""){ |
||||||
|
console.log("on search", query); |
||||||
|
load_titles(prefix+query); |
||||||
|
document.querySelector("#title_list").style.visibility = "visible"; |
||||||
|
document.querySelector("#label").textContent = "Result"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
document.onreadystatechange = function () { |
||||||
|
if(document.readyState == "interactive"){ |
||||||
|
var url = window.location.href; |
||||||
|
if(url.includes("?")){ |
||||||
|
var query = url.split("?")[1]; |
||||||
|
console.log("on load", query); |
||||||
|
load_titles(prefix+query); |
||||||
|
document.querySelector("#title_list").style.visibility = "visible"; |
||||||
|
document.querySelector("#label").textContent = "Result"; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>Mangaloid</title> |
||||||
|
|
||||||
|
<meta charset="UTF-8"/> |
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/stylesheet.css"/> |
||||||
|
<link rel="stylesheet" href="css/chapter_list.css"/> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<div id="header"> |
||||||
|
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> |
||||||
|
<input id="search_bar" type="text" placeholder="Search"> |
||||||
|
<button id="search_button" onclick="search_bar()">Search</button> |
||||||
|
<img id="logo" src="img/logo.png"/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="content"> |
||||||
|
|
||||||
|
<div id="info"> |
||||||
|
<img id="cover" src=""/> |
||||||
|
<div id="text"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="chapters"> |
||||||
|
<center> |
||||||
|
<table id="table"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<th>No.</th> |
||||||
|
<th class="stretch"><p>Chapter</p></th> |
||||||
|
<th><p>TL Group</p></th> |
||||||
|
<th><p>Pages</p></th> |
||||||
|
<th><p>Date</p></th> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</center> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div id="footer"> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script type="text/javascript" src="js/chapter_list.js"></script> |
||||||
|
<script type="text/javascript" src="js/search_bar.js"></script> |
||||||
|
<script> |
||||||
|
document.onreadystatechange = load("https://test.cynic.moe"); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue