cynic
/
mlFE
mirror of https://github.com/kurisufriend/mlFE
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

links, reader

Browse Source
main
BuildTools 4 years ago
parent 1717272afc
commit a6bc74138c
5 changed files with 451 additions and 75 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 102
      css/reader.css
  2. 12
      index.html
  3. 139
      js/main.js
  4. 221
      js/reader.js
  5. 52
      reader.html

102
css/reader.css
Unescape View File

@ -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%);
}

12
index.html
Unescape View File

@ -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;
}
</style>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
load();
</script>
@ -30,9 +26,9 @@ load();
<h1 id="title">loading...</h1>
<table id="listing">
<tr>
<td><b>title</b></td>
<td><b>author</b></td>
<td><b>last update</b></td>
<td><b id="c1">title</b></td>
<td><b id="c2">author</b></td>
<td><b id="c3">last update</b></td>
</tr>
</table>
</body>

139
main.js → js/main.js
Unescape View File

@ -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));
}
}

221
js/reader.js
Unescape View File

@ -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";
}
}
}

52
reader.html
Unescape View File

@ -0,0 +1,52 @@
<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/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>
Write Preview
Loading…
Cancel
Save