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

Craeted Publication Viewer

Browse Source
This commit is contained in:
glax 2023-05-23 17:57:48 +02:00
parent f85e02fb0a
commit 201773af50
3 changed files with 159 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Website/index.html
View File

@ -35,10 +35,10 @@
<publication-name>Tensei Pandemic</publication-name>
</publication-information>
</publication>
</content>
<addtask-popup>
<addtask-background></addtask-background>
</content>
<popup>
<blur-background></blur-background>
<addtask-window>
<window-titlebar>
<p>Add Task</p>
@ -58,7 +58,21 @@
<div id="taskSelectOutput"></div>
</window-content>
</addtask-window>
</addtask-popup>
<publication-viewer>
<img id="pubviewcover" src="media/cover.jpg" alt="cover">
<publication-information>
<publication-name id="publicationViewerName">Tensei Pandemic</publication-name>
<publication-author id="publicationViewerAuthor">Imamura Hinata</publication-author>
<publication-description id="publicationViewerDescription">Imamura Hinata is a high school boy with a cute appearance.
Since his trauma with the first love, he wanted to be more manly than anybody else. But one day he woke up to something different…
The total opposite of his ideal male body!
Pandemic love comedy!
</publication-description>
<publication-delete>Delete Task ❌</publication-delete>
</publication-information>
</publication-viewer>
</popup>
</viewport>
<settingstab id="settingstab">

85
Website/interaction.js
View File

@ -18,6 +18,9 @@ const slideOutRightTiming = {
easing: "ease-in"
}
let publications = [];
let tasks = [];
const taskTypesSelect = document.querySelector("#taskTypes")
const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
const selectPublication = document.querySelector("#taskSelectOutput");
@ -26,12 +29,19 @@ const settingsTab = document.querySelector("#settingstab");
const settingsCog = document.querySelector("#settingscog");
const selectRecurrence = document.querySelector("#selectReccurrence");
const tasksContent = document.querySelector("content");
const addtaskpopup = document.querySelector("addtask-popup");
const generalPopup = document.querySelector("popup");
const addTaskWindow = document.querySelector("addtask-window");
const publicationViewer = document.querySelector("publication-viewer");
const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
const publicationViewerName = document.querySelector("#publicationViewerName");
const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
const pubviewcover = document.querySelector("#pubviewcover");
const publicationDelete = document.querySelector("publication-delete");
const closetaskpopup = document.querySelector("#closePopupImg");
settingsCog.addEventListener("click", () => slide());
closetaskpopup.addEventListener("click", () => HideNewTaskWindow())
document.querySelector("addtask-background").addEventListener("click", () => HideNewTaskWindow());
closetaskpopup.addEventListener("click", () => HidePopup())
document.querySelector("blur-background").addEventListener("click", () => HidePopup());
let availableTaskTypes;
GetTaskTypes()
@ -66,11 +76,8 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
json.forEach(publication => {
var option = CreatePublication(publication, connectorSelect.value);
option.addEventListener("click", () => {
CreateNewMangaDownloadTask(
taskTypesSelect.value,
connectorSelect.value,
publication.internalId
);
CreateTask(taskTypesSelect.value, selectRecurrence.value, connectorSelect.value, publication.internalId, "en");
selectPublication.replaceChildren();
});
selectPublication.appendChild(option);
}
@ -79,11 +86,11 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
});
function CreatePublication(publication, connector){
var option = document.createElement('publication');
option.setAttribute("id", publication.internalId);
var publicationElement = document.createElement('publication');
publicationElement.setAttribute("id", publication.internalId);
var img = document.createElement('img');
img.src = publication.posterUrl;
option.appendChild(img);
publicationElement.appendChild(img);
var info = document.createElement('publication-information');
var connectorName = document.createElement('connector-name');
connectorName.innerText = connector;
@ -92,18 +99,19 @@ function CreatePublication(publication, connector){
var publicationName = document.createElement('publication-name');
publicationName.innerText = publication.sortName;
info.appendChild(publicationName);
option.appendChild(info);
return option;
publicationElement.appendChild(info);
if(publications.filter(pub => pub.internalId === publication.internalId) < 1)
publications.push(publication);
return publicationElement;
}
function CreateNewMangaDownloadTask(taskType, connectorName, publicationId){
CreateTask(taskType, selectRecurrence.value, connectorName, publicationId, "en");
selectPublication.innerHTML = "";
function DeleteTask(taskType, connectorName, publicationId){
}
var slideIn = true;
function slide(){
if(slideIn)
function slide() {
if (slideIn)
settingsTab.animate(slideInRight, slideInRightTiming);
else
settingsTab.animate(slideInRight, slideOutRightTiming);
@ -121,13 +129,36 @@ function ResetContent(){
tasksContent.appendChild(add);
}
function ShowPopup(){
generalPopup.style.display = "block";
generalPopup.animate(fadeIn, fadeInTiming);
}
let toRemoveId;
function ShowPublicationViewerWindow(publicationId, event){
publicationViewer.style.top = `${event.clientY - 60}px`;
publicationViewer.style.left = `${event.clientX}px`;
var publication = publications.filter(pub => pub.internalId === publicationId)[0];
publicationViewerName.innerText = publication.sortName;
publicationViewerDescription.innerText = publication.description;
publicationViewerAuthor.innerText = publication.author;
pubviewcover.src = publication.posterUrl;
toRemoveId = publicationId;
publicationViewer.style.display = "block";
ShowPopup();
}
function ShowNewTaskWindow(){
selectPublication.replaceChildren();
addtaskpopup.style.display = "block";
addtaskpopup.animate(fadeIn, fadeInTiming);
addTaskWindow.style.display = "flex";
ShowPopup();
}
function HideNewTaskWindow(){
addtaskpopup.style.display = "none";
function HidePopup(){
generalPopup.style.display = "none";
addTaskWindow.style.display = "none";
publicationViewer.style.display = "none";
}
const fadeIn = [
@ -136,7 +167,7 @@ const fadeIn = [
];
const fadeInTiming = {
duration: 150,
duration: 50,
iterations: 1,
fill: "forwards"
}
@ -146,7 +177,11 @@ GetTasks()
//.then(json => console.log(json))
.then(json => json.forEach(task => {
var publication = CreatePublication(task.publication, task.connectorName);
publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event));
tasksContent.appendChild(publication);
if(tasks.filter(task => task.publication.internalId === publication.internalId) < 1)
tasks.push(task);
}));
setInterval(() => {
@ -155,6 +190,10 @@ setInterval(() => {
//.then(json => console.log(json))
.then(json => json.forEach(task => {
var publication = CreatePublication(task.publication, task.connectorName);
publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event));
tasksContent.appendChild(publication);
if(tasks.filter(task => task.publication.internalId === publication.internalId) < 1)
tasks.push(task);
}));
}, 5000);

84
Website/style.css
View File

@ -181,18 +181,20 @@ publication-information {
justify-content: start;
}
publication-information * {
z-index: 1;
color: var(--accent-color);
}
connector-name{
width: fit-content;
margin: 10px 0;
z-index: 1;
}
publication-name{
width: fit-content;
font-size: 16pt;
font-weight: bold;
z-index: 1;
color: var(--accent-color);
}
publication img {
@ -204,7 +206,7 @@ publication img {
z-index: 0;
}
addtask-popup{
popup{
display: none;
width: 100%;
min-height: 100%;
@ -214,7 +216,7 @@ addtask-popup{
z-index: 2;
}
addtask-background {
blur-background {
width: 100%;
height: 100%;
position: absolute;
@ -224,7 +226,7 @@ addtask-background {
}
addtask-window {
display: flex;
display: none;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
@ -303,4 +305,74 @@ addtask-settings addtask-setting{
flex-wrap: wrap;
justify-content: start;
align-content: start;
}
publication-viewer{
display: none;
width: 500px;
height: 300px;
position: absolute;
top: 200px;
left: 400px;
background-color: var(--accent-color);
border-radius: 5px;
overflow: hidden;
}
publication-viewer{
padding: 30px;
}
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;
min-height: 100%;
max-width: 100%;
border-radius: 5px;
z-index: 0;
}
publication-viewer publication-information publication-name{
margin: 5px 0;
}
publication-viewer publication-information publication-author {
margin: 5px 0;
}
publication-viewer publication-information publication-author::before {
content: "Author: ";
}
publication-viewer publication-information publication-description::before {
content: "Description";
display: block;
font-weight: bolder;
}
publication-viewer publication-information publication-description {
font-size: 12pt;
margin: 5px 0;
max-height: 200px;
overflow-x: scroll;
}
publication-viewer publication-information publication-delete {
position: absolute;
bottom: 0px;
right: 0px;
color: red;
margin: 20px;
font-size: 16pt;
}