Website/index.html

@@ -35,10 +35,10 @@
           <publication-name>Tensei Pandemic</publication-name>
         </publication-information>
       </publication>
-    </content>    
-    
-    <popup>
-      <blur-background></blur-background>
+    </content>
+
+    <addtask-popup>
+      <addtask-background></addtask-background>
       <addtask-window>
         <window-titlebar>
           <p>Add Task</p>
@@ -58,21 +58,7 @@
           <div id="taskSelectOutput"></div>
         </window-content>
       </addtask-window>
-      <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>
-    
+    </addtask-popup>
   </viewport>
   
   <settingstab id="settingstab">

Website/interaction.js

@@ -18,9 +18,6 @@ const slideOutRightTiming = {
     easing: "ease-in"
 }
 
-let publications = [];
-let tasks = [];
-
 const taskTypesSelect = document.querySelector("#taskTypes")
 const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
 const selectPublication = document.querySelector("#taskSelectOutput");
@@ -29,19 +26,12 @@ const settingsTab = document.querySelector("#settingstab");
 const settingsCog = document.querySelector("#settingscog");
 const selectRecurrence = document.querySelector("#selectReccurrence");
 const tasksContent = document.querySelector("content");
-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 addtaskpopup = document.querySelector("addtask-popup");
 const closetaskpopup = document.querySelector("#closePopupImg");
 
 settingsCog.addEventListener("click", () => slide());
-closetaskpopup.addEventListener("click", () => HidePopup())
-document.querySelector("blur-background").addEventListener("click", () => HidePopup());
+closetaskpopup.addEventListener("click", () => HideNewTaskWindow())
+document.querySelector("addtask-background").addEventListener("click", () => HideNewTaskWindow());
 
 let availableTaskTypes;
 GetTaskTypes()
@@ -69,15 +59,17 @@ 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", () => {
-                       CreateTask(taskTypesSelect.value, selectRecurrence.value, connectorSelect.value, publication.internalId, "en");
-                       selectPublication.replaceChildren();
+                       CreateNewMangaDownloadTask(
+                           taskTypesSelect.value,
+                           connectorSelect.value,
+                           publication.internalId
+                           );
                    });
                    selectPublication.appendChild(option);
                }
@@ -86,11 +78,11 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
 });
 
 function CreatePublication(publication, connector){
-    var publicationElement = document.createElement('publication');
-    publicationElement.setAttribute("id", publication.internalId);
+    var option = document.createElement('publication');
+    option.setAttribute("id", publication.internalId);
     var img = document.createElement('img');
     img.src = publication.posterUrl;
-    publicationElement.appendChild(img);
+    option.appendChild(img);
     var info = document.createElement('publication-information');
     var connectorName = document.createElement('connector-name');
     connectorName.innerText = connector;
@@ -99,19 +91,18 @@ function CreatePublication(publication, connector){
     var publicationName = document.createElement('publication-name');
     publicationName.innerText = publication.sortName;
     info.appendChild(publicationName);
-    publicationElement.appendChild(info);
-    if(publications.filter(pub => pub.internalId === publication.internalId) < 1)
-        publications.push(publication);
-    return publicationElement;
+    option.appendChild(info);
+    return option;
 }
 
-function DeleteTask(taskType, connectorName, publicationId){
-    
+function CreateNewMangaDownloadTask(taskType, connectorName, publicationId){
+    CreateTask(taskType, selectRecurrence.value, connectorName, publicationId, "en");
+    selectPublication.innerHTML = "";
 }
 
 var slideIn = true;
-function slide() {
-    if (slideIn)
+function slide(){
+    if(slideIn)
         settingsTab.animate(slideInRight, slideInRightTiming);
     else
         settingsTab.animate(slideInRight, slideOutRightTiming);
@@ -129,36 +120,12 @@ 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();
-    addTaskWindow.style.display = "flex";
-    ShowPopup();
+    addtaskpopup.style.display = "block";
+    addtaskpopup.animate(fadeIn, fadeInTiming);
 }
-function HidePopup(){
-    generalPopup.style.display = "none";
-    addTaskWindow.style.display = "none";
-    publicationViewer.style.display = "none";
+function HideNewTaskWindow(){
+    addtaskpopup.style.display = "none";
 }
 
 const fadeIn = [
@@ -167,7 +134,7 @@ const fadeIn = [
 ];
 
 const fadeInTiming = {
-    duration: 50,
+    duration: 150,
     iterations: 1,
     fill: "forwards"
 }
@@ -177,11 +144,7 @@ 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(() => {
@@ -190,10 +153,6 @@ 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,20 +181,18 @@ 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 {
@@ -206,7 +204,7 @@ publication img {
     z-index: 0;
 }
 
-popup{
+addtask-popup{
     display: none;
     width: 100%;
     min-height: 100%;
@@ -216,7 +214,7 @@ popup{
     z-index: 2;
 }
 
-blur-background {
+addtask-background {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -226,7 +224,7 @@ blur-background {
 }
 
 addtask-window {
-    display: none;
+    display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     position: absolute;
@@ -305,74 +303,4 @@ 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;
 }