glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Update Manga viewer popup to use popup-window elements

Browse Source
This commit is contained in:
db-2001 2024-05-18 18:38:55 -04:00
parent b3b7b31f7d
commit 59bfb0e0c4
4 changed files with 188 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Website/apiConnector.js
View File

@ -152,6 +152,12 @@ async function GetRateLimits() {
return json; return json;
} }
async function GetMangaChapters(connector, id) {
var uri = `${apiUri}/Manga/Chapters?connector=${connector}&internalId=${id}`
let json = await GetData(uri);
return json;
}
function CreateMonitorJob(connector, internalId, language, interval, folder = null, chapterNo){ function CreateMonitorJob(connector, internalId, language, interval, folder = null, chapterNo){
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}`; var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}`;
if (folder != '') { if (folder != '') {
@ -181,6 +187,11 @@ function RefreshLibraryMetadata() {
PostData(uri); PostData(uri);
} }
function RefreshMangaMetadata(id) {
var uri = `${apiUri}/Jobs/UpdateMetadata?internalId=${id}`;
PostData(uri);
}
async function DownloadLogs() { async function DownloadLogs() {
var uri = `${apiUri}/LogFile`; var uri = `${apiUri}/LogFile`;

47
Website/index.html
View File

@ -7,6 +7,9 @@
<link id='librarystyle' rel="stylesheet" href="styles/style_default.css"> <link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<wrapper> <wrapper>
@ -254,24 +257,32 @@
<popup id="publicationViewerPopup"> <popup id="publicationViewerPopup">
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background> <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
<publication-viewer> <popup-window>
<img id="pubviewcover" src="media/cover.jpg" alt="cover"> <border-bar>
<publication-details> <popup-title><a class="mangaTitle" id="publicationViewerName"></a></popup-title><status-filter id="publicationViewerStatus"></status-filter>
<publication-name id="publicationViewerName">Best Manga there is</publication-name> <popup-close onclick="publicationViewerPopup.style.display = 'none'">&times</popup-close>
<publication-tags id="publicationViewerTags">A Manga</publication-tags> </border-bar>
<publication-author id="publicationViewerAuthor">Glax</publication-author> <manga-details>
<publication-description id="publicationViewerDescription">
An interesting description. The description is very intriguing, yet wholesome. <img-container>
</publication-description> <img id="pubviewcover">
<publication-interactions> <manga-connector id="publicationViewerConnector"></manga-connector>
<publication-starttask id="startJobButton">Start Job ▶️</publication-starttask> <span class="latest-chapter-no" id="publicationViewerChapterNo"></span>
<publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask> </img-container>
<publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete> <div style="height: 100%;">
<publication-add id="createMonitorJobButton">Monitor ➕</publication-add> <tag-cloud id="publicationViewerTags"></tag-cloud>
<publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add> <div class="mangaDescription" id="publicationViewerDescription"></div>
</publication-interactions> </div>
</publication-details> </manga-details>
</publication-viewer> <!-- <manga-chapter id="publicationViewerChapters"></manga-chapter> -->
<border-bar>
<div class="button-container">
<border-bar-button onclick="RefreshMangaMetadata(selectedManga.internalId)">Refresh Metadata</border-bar-button>
<border-bar-button id="reset" onclick="RemoveJob(selectedJob.id); UpdateJobs(); mangaViewerPopup.style.display = 'none'">Remove Manga</border-bar-button>
<border-bar-button class="primary" onclick="StartJob(selectedJob.id); mangaViewerPopup.style.display = 'none'">Start Job</border-bar-button>
</div>
</border-bar>
</popup-window>
</popup> </popup>
<popup id="jobStatusView"> <popup id="jobStatusView">

138
Website/interaction.js
View File

@ -19,11 +19,6 @@ const filterContent = document.querySelector("#filterContent");
const settingsCog = document.querySelector("#settingscog"); const settingsCog = document.querySelector("#settingscog");
const filterFunnel = document.querySelector("#filterFunnel"); const filterFunnel = document.querySelector("#filterFunnel");
const tasksContent = document.querySelector("content"); const tasksContent = document.querySelector("content");
const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
const startJobButton = document.querySelector("#startJobButton");
const cancelJobButton = document.querySelector("#cancelJobButton");
const deleteJobButton = document.querySelector("#deleteJobButton");
//Manga viewer popup //Manga viewer popup
const mangaViewerPopup = document.querySelector("#publicationViewerPopup"); const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
@ -31,8 +26,10 @@ const mangaViewerWindow = document.querySelector("publication-viewer");
const mangaViewerDescription = document.querySelector("#publicationViewerDescription"); const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
const mangaViewerName = document.querySelector("#publicationViewerName"); const mangaViewerName = document.querySelector("#publicationViewerName");
const mangaViewerTags = document.querySelector("#publicationViewerTags"); const mangaViewerTags = document.querySelector("#publicationViewerTags");
const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
const mangaViewCover = document.querySelector("#pubviewcover"); const mangaViewCover = document.querySelector("#pubviewcover");
const mangaViewConn = document.querySelector('#publicationViewerConnector');
const mangaViewStatus = document.querySelector('#publicationViewerStatus');
const mangaViewChapterNo = document.querySelector('#publicationViewerChapterNo');
//General Rate Limits //General Rate Limits
const defaultRL = document.querySelector("#defaultRL"); const defaultRL = document.querySelector("#defaultRL");
@ -475,7 +472,7 @@ function CreateSearchResult(manga, connector) {
//Description //Description
var description = document.createElement('div'); var description = document.createElement('div');
description.className = 'mangaDescription'; description.className = 'mangaDescription abbreviated';
description.innerText = manga.description; description.innerText = manga.description;
mangaDetails.appendChild(description); mangaDetails.appendChild(description);
@ -578,60 +575,93 @@ function AddManga(id, connector) {
CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter); CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
} }
startJobButton.addEventListener("click", () => {
StartJob(selectedJob.id);
mangaViewerPopup.style.display = "none";
});
cancelJobButton.addEventListener("click", () => {
CancelJob(selectedJob.id);
mangaViewerPopup.style.display = "none";
});
deleteJobButton.addEventListener("click", () => {
RemoveJob(selectedJob.id);
UpdateJobs();
mangaViewerPopup.style.display = "none";
});
function ShowMangaWindow(job, manga, event, add){ function ShowMangaWindow(job, manga, event, add){
selectedManga = manga; selectedManga = manga;
selectedJob = job; selectedJob = job;
//Show popup
mangaViewerPopup.style.display = "block";
//Set position to mouse-position //Title
if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
mangaViewerWindow.style.top = `${event.clientY}px`;
else
mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
mangaViewerWindow.style.left = `${event.clientX}px`;
else
mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
//Edit information inside the window
mangaViewerName.innerText = manga.sortName; mangaViewerName.innerText = manga.sortName;
mangaViewerTags.innerText = manga.tags.join(", "); mangaViewerName.href = manga.websiteUrl;
mangaViewerDescription.innerText = manga.description;
mangaViewerAuthor.innerText = manga.authors.join(',');
mangaViewCover.src = GetCoverUrl(manga.internalId);
toEditId = manga.internalId;
//Check what action should be listed //Author and Genre Tag Cloud
if(add){ mangaViewerTags.replaceChildren();
createMonitorJobButton.style.display = "initial"; manga.authors.forEach(author => {
createDownloadChapterJobButton.style.display = "none"; var authorCard = document.createElement('author-tag');
cancelJobButton.style.display = "none";
startJobButton.style.display = "none"; var personImg = document.createElement('img');
deleteJobButton.style.display = "none"; personImg.src = 'media/person.svg';
} authorCard.appendChild(personImg);
else{
createMonitorJobButton.style.display = "none"; var authorName = document.createElement('span');
createDownloadChapterJobButton.style.display = "none"; authorName.innerText = author;
cancelJobButton.style.display = "initial"; authorCard.appendChild(authorName);
startJobButton.style.display = "initial";
deleteJobButton.style.display = "initial"; mangaViewerTags.appendChild(authorCard);
});
manga.tags.forEach(tag => {
var tagElement = document.createElement('manga-tag');
tagElement.innerText = tag;
mangaViewerTags.appendChild(tagElement);
});
//Description
mangaViewerDescription.innerText = manga.description;
//Image and Connector
mangaViewCover.src = GetCoverUrl(manga.internalId);
mangaViewConn.innerText = job.mangaConnector.name.toUpperCase();
mangaViewConn.style.backgroundColor = stringToColour(job.mangaConnector.name);
mangaViewChapterNo.innerText = manga.latestChapterAvailable.toString();
//Release Status
switch(manga.releaseStatus){
case 0:
mangaViewStatus.setAttribute("release-status", "Ongoing");
mangaViewStatus.innerText = "Ongoing";
break;
case 1:
mangaViewStatus.setAttribute("release-status", "Completed");
mangaViewStatus.innerText = "Completed";
break;
case 2:
mangaViewStatus.setAttribute("release-status", "On Hiatus");
mangaViewStatus.innerText = "On Hiatus";
break;
case 3:
mangaViewStatus.setAttribute("release-status", "Cancelled");
mangaViewStatus.innerText = "Cancelled";
break;
case 4:
mangaViewStatus.setAttribute("release-status", "Upcoming");
mangaViewStatus.innerText = "Upcoming";
break;
default:
mangaViewStatus.setAttribute("release-status", "Status Unavailable");
mangaViewStatus.innerText = "Status Unavailable";
break;
} }
// //Individual Manga Chapters
// chapters = document.querySelector('#publicationViewerChapters');
// chapters.replaceChildren();
// var mangaChapters = GetMangaChapters(job.mangaConnector.name, manga.internalId);
// mangaChapters.then(value => {
// sortedChapters = value.sort((a, b) => b.chapterNumber - a.chapterNumber);
// sortedChapters.forEach(chapter => {
// chapterNo = chapter.chapterNumber;
// var chapterElement = document.createElement('chapter-row');
// chapterElement.innerText = chapter.fileName;
// chapters.appendChild(chapterElement);
// })
// }).then(() => {
// //Show popup
// mangaViewerPopup.style.display = "block";
// });
mangaViewerPopup.style.display = "block"
} }
function HidePublicationPopup(){ function HidePublicationPopup(){

180
Website/styles/base.css
View File

@ -20,6 +20,7 @@ body{
background-color: var(--background-color); background-color: var(--background-color);
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
overflow-x: hidden; overflow-x: hidden;
font-weight: 400;
} }
wrapper { wrapper {
@ -420,11 +421,14 @@ popup popup-window {
overflow: hidden; overflow: hidden;
} }
popup#jobStatusView popup-window { /*Remove below when individual chapter download is implemented*/
left: 10%; #publicationViewerPopup > popup-window {
top: 10%; height: fit-content;
height: 80%; width: auto;
width: 80%; max-width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
popup-content{ popup-content{
@ -642,9 +646,9 @@ a:active {
user-select: none; /* Standard syntax */ user-select: none; /* Standard syntax */
} }
.section-button#reset:hover { #reset:hover {
color: red; color: rgb(255, 44, 29);
border-color: red; border-color: rgb(255, 44, 29);
} }
.section-buttons-container > .section-button:hover { .section-buttons-container > .section-button:hover {
border-color: var(--secondary-color); border-color: var(--secondary-color);
@ -711,111 +715,6 @@ blur-background {
z-index: 5; z-index: 5;
} }
publication-viewer{
display: block;
width: 460px;
position: absolute;
top: 200px;
left: 400px;
background-color: var(--accent-color);
border-radius: 5px;
overflow: hidden;
padding: 15px;
}
publication-viewer::after{
content: '';
position: absolute;
left: 0; top: 0;
border-radius: 5px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(3px);
}
publication-viewer img {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 5px;
z-index: 0;
}
publication-viewer publication-details > * {
margin: 5px 0;
}
publication-viewer publication-details publication-name {
width: initial;
overflow-x: scroll;
white-space: nowrap;
scrollbar-width: none;
}
publication-viewer publication-details publication-tags::before {
content: "Tags";
display: block;
font-weight: bolder;
}
publication-viewer publication-details publication-tags {
overflow-x: scroll;
white-space: nowrap;
scrollbar-width: none;
}
publication-viewer publication-details publication-author::before {
content: "Author: ";
font-weight: bolder;
}
publication-viewer publication-details publication-description::before {
content: "Description";
display: block;
font-weight: bolder;
}
publication-viewer publication-details publication-description {
font-size: 12pt;
margin: 5px 0;
height: 145px;
overflow-x: scroll;
}
publication-viewer publication-details publication-interactions {
display: flex;
flex-direction: row;
justify-content: end;
align-items: start;
width: 100%;
}
publication-viewer publication-details publication-interactions > * {
margin: 0 10px;
font-size: 16pt;
cursor: pointer;
}
publication-viewer publication-details publication-interactions publication-starttask {
color: var(--secondary-color);
}
publication-viewer publication-details publication-interactions publication-delete {
color: red;
}
publication-view publication-details publication-interactions publication-canceltask {
color: yellow;
}
publication-viewer publication-details publication-interactions publication-add {
color: limegreen;
}
footer-tag-popup { footer-tag-popup {
display: none; display: none;
padding: 2px 4px; padding: 2px 4px;
@ -920,12 +819,14 @@ popup-content #loaderdiv {
img-container { img-container {
height: 300px; height: 300px;
width: 200px; width: 180px;
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
flex-shrink: 0;
flex-grow: 0;
} }
img-container > img { img-container > img {
@ -954,6 +855,43 @@ manga-connector {
text-align: center; text-align: center;
} }
manga-details {
display: flex;
flex-direction: row;
width: 100%;
margin: 2px;
}
manga-details > .mangaDescription {
width: 100%;
}
manga-chapter {
display: flex;
height: 100%;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
border-style: solid;
border-width: 2px;
margin: 5px;
border-radius: 10px;
border-color: #bbb;
scrollbar-width: thin;
scrollbar-color: var(--secondary-color) var(--second-background-color);
}
chapter-row {
font-size: 12pt;
width: 100%;
border-style: solid;
border-color: #ccc;
border-width: 1px;
padding-left: 50px;
padding-top: 7px;
padding-bottom: 7px;
}
span.latest-chapter-no { span.latest-chapter-no {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -1008,11 +946,11 @@ div.new-manga-download-settings {
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
/* For mobile phones: */ /* For mobile phones: */
.section-item > img-container { img-container {
display: none; display: none;
} }
tag-cloud { .section-item > tag-cloud {
display: none !important; display: none !important;
} }
.new-manga-download-settings > row, .downloadManga, border-bar-button.in-library { .new-manga-download-settings > row, .downloadManga, border-bar-button.in-library {
@ -1158,6 +1096,16 @@ author-tag > img {
margin: 2px; margin: 2px;
} }
.abbreviated {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 10;
line-clamp: 10;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-wrap: break-word;
}
.downloadManga { .downloadManga {
position: relative; position: relative;
float: right; float: right;