Craeted Publication Viewer

Website/index.html

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

Website/interaction.js

@@ -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()
@@ -59,17 +69,15 @@ GetAvailableControllers()
 
 searchPublicationQuery.addEventListener("keypress", (event) => {
    if(event.key === "Enter"){
+       selectPublication.replaceChildren();
        GetPublication(connectorSelect.value, searchPublicationQuery.value)
            //.then(json => console.log(json));
            .then(json => 
                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);
                }
@@ -78,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;
@@ -91,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);
@@ -120,12 +129,36 @@ function ResetContent(){
     tasksContent.appendChild(add);
 }
 
-function ShowNewTaskWindow(){
-    addtaskpopup.style.display = "block";
-    addtaskpopup.animate(fadeIn, fadeInTiming);
+function ShowPopup(){
+    generalPopup.style.display = "block";
+    generalPopup.animate(fadeIn, fadeInTiming);
 }
-function HideNewTaskWindow(){
-    addtaskpopup.style.display = "none";
+
+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();
+    addTaskWindow.style.display = "flex";
+    ShowPopup();
+}
+function HidePopup(){
+    generalPopup.style.display = "none";
+    addTaskWindow.style.display = "none";
+    publicationViewer.style.display = "none";
 }
 
 const fadeIn = [
@@ -134,7 +167,7 @@ const fadeIn = [
 ];
 
 const fadeInTiming = {
-    duration: 150,
+    duration: 50,
     iterations: 1,
     fill: "forwards"
 }
@@ -144,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(() => {
@@ -153,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);

Website/style.css

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