Craeted Publication Viewer
This commit is contained in:
parent
f85e02fb0a
commit
201773af50
@ -37,8 +37,8 @@
|
||||
</publication>
|
||||
</content>
|
||||
|
||||
<addtask-popup>
|
||||
<addtask-background></addtask-background>
|
||||
<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">
|
||||
|
||||
@ -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);
|
||||
@ -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;
|
||||
@ -304,3 +306,73 @@ addtask-settings addtask-setting{
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user