finalização nos controles e 2.0.0

ValkyriaTech · Apr 10, 2021 · 3a7ddf3 · 3a7ddf3
1 parent ba3a94a
commit 3a7ddf3
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
 # PDF Attachments for WordPress Posts & Pages
-This plugin will add a custom metabox controller to attach PDF files to WordPress posts
+Custom metabox controller to upload and manage posts / pages attachments
 
-The custom metabox name is <code>wppa_attachment_list</code>. It's saved as a JSON *string* list
+The custom metabox name is <code>wppa_attachment_list</code>. It's saved as a JSON *object* list:
 
-**Just download the source and install it as a plugin.**
-
-### AJAX path
-If the plugin doesn't work, try to specify the full wordpress ajax path in <code>main.js</code>:
-
-```javascript
-request.open("POST", '//' + window.location.host + '/wp-admin/admin-ajax.php', true);
+```json
+{
+  "name":"Attachment Name",
+  "cover_image":"http://xyz/nice_image.jpg",
+  "url":"http://xyz/nice_doc.pdf"
+}
 ```
+
+**Just download the source and install it as a plugin.**
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,43 @@
 :root {
   --background: #f0f0f0;
+  --itemHover: #d0d0d0;
+}
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  margin-left: .5rem;
+}
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 2px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+  }
+    .lds-ring div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    .lds-ring div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    .lds-ring div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 #attachmentDropzone {
@@ -21,10 +59,20 @@
   border-radius: 1rem;
   overflow: hidden;
   display: none;
+  padding: 0 1rem;
 }
   .attach-dialog-show {
     display: block !important;
   }
+  #attachmentDialog #closeAttachmentDialog {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: transparent;
+    border: none;
+    font-size: 150%;
+    cursor: pointer;
+  }
   #attachmentDialog .row {
     display: flex;
   }
@@ -41,56 +89,61 @@
       #attachmentDialog .row .column img {
         width: 90%;
         height: auto;
+        border-radius: .2rem;
+      }
+      #attachmentDialog .row .column #wppa_attachmentCoverImage {
+        display: none;
+      }
+      #attachmentDialog .row .column #wppa_attachmentCoverImageLabel i {
+        margin-right: .5rem;
+        font-size: 120%;
       }
       #attachmentDialog .row .column input {
         width: 80%;
         margin-bottom: 2rem;
       }
-      #attachmentDialog .row .column button {
-        width: 3rem;
-        margin-top: 5rem;
-        display: grid;
-        place-items: center;
+      #attachmentDialog .row .column #wppa_attachmentSend {
+        width: 5rem;
+        margin-top: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
-#pdfFilesContainer {
+#attachmentsContainer {
   width: 100%;
   height: 15rem;
   background-color: var(--background);
   overflow-y: auto;
   margin-bottom: 1rem;
   display: flex;
   flex-direction: column;
-  padding: .5rem;
 }
-  #pdfFilesContainer .file-item {
+  #attachmentsContainer .att-item {
     display: flex;
     align-items: center;
     width: 100%;
+    padding: 1rem;
   }
-    #pdfFilesContainer .file-item i {
-      font-size: 120%;
+    #attachmentsContainer .att-item:hover {
+      background-color: var(--itemHover);
     }
-    #pdfFilesContainer .file-item input {
-      width: 7rem;
-      margin-left: 1rem;
-      margin-right: 2rem;
-    }
-    #pdfFilesContainer .file-item span {
-      margin-left: .5rem;
-      margin-right: 1rem;
-    }
-    #pdfFilesContainer .file-item .action-btns {
+    #attachmentsContainer .att-item .action-btns {
       display: none;
-      justify-content: flex-end;
-      align-items: center;
     }
-      #pdfFilesContainer .file-item:hover .action-btns {
+      #attachmentsContainer .att-item:hover .action-btns {
         display: flex;
       }
-      #pdfFilesContainer .file-item .action-btns a {
+      #attachmentsContainer .att-item a {
         margin-right: .5rem;
       }
-      #pdfFilesContainer .file-item .action-btns i {
+      #attachmentsContainer .att-item i {
+        font-size: 120%;
         cursor: pointer;
+        margin-right: .5rem;
+      }
+      #attachmentsContainer .att-item span {
+        margin-left: .5rem;
+        margin-right: 1rem;
+        width: 7.5rem;
       }
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/js/main.js b/js/main.js
@@ -12,7 +12,20 @@ function docReady(fn) {
   }
 }
 
-function getAttachmentDetails(fileUrl, fileName) {
+function loader(elementId, action = 'start') {
+  if (document.getElementById(elementId)) {
+    switch (action) {
+      case 'start':
+        document.getElementById(elementId).innerHTML += '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
+        break;
+      case 'stop':
+        document.getElementById(elementId).querySelector('.lds-ring').remove();
+        break;
+    }
+  }
+}
+
+function getAttachmentDetails(fileUrl, fileName, attachmentKey = null, attachmentCoverImage = null) {
 
   let dialog = document.getElementById('attachmentDialog');
 
@@ -21,19 +34,27 @@ function getAttachmentDetails(fileUrl, fileName) {
 
   dialog.querySelector('#wppa_attachmentFileUrl').value = fileUrl;
 
+  if (attachmentKey != null)
+    dialog.querySelector('#wppa_attachmentSend').setAttribute('data-key', attachmentKey);
+
+  if (attachmentCoverImage != null)
+    dialog.querySelector('#wppa_attachmentCoverImageShow').setAttribute('src', attachmentCoverImage);
+
   dialog.classList.add('attach-dialog-show');
 
 }
 
 function uploadAttachCover(singleFile) {
 
+  loader('wppa_attachmentSend');
+
   let formData = new FormData();
 
   formData.append('file', singleFile, singleFile.name);
   formData.append('action', 'wppaUploadImage');
 
   let request = new XMLHttpRequest();
-  request.open("POST", '//' + window.location.host + '/cogna/wp-admin/admin-ajax.php', true);
+  request.open("POST", wpApiUrl, true);
 
   request.onload = function() {
     if (this.status >= 200 && this.status < 400) {
@@ -42,6 +63,7 @@ function uploadAttachCover(singleFile) {
       if(resp != null && resp != '') {
 
         document.getElementById('wppa_attachmentCoverImageShow').setAttribute('src', resp);
+        loader('wppa_attachmentSend', 'stop');
 
       }
 
@@ -58,6 +80,11 @@ function uploadAttachCover(singleFile) {
 
 }
 
+function closeAttachmentDialog() {
+  document.getElementById('wppa_attachmentSend').removeAttribute('data-key');
+  document.getElementById('attachmentDialog').classList.remove('attach-dialog-show');
+}
+
 docReady(function() {
 
   if(fileList != null && fileList != '')
@@ -98,14 +125,61 @@ docReady(function() {
         url: document.getElementById('wppa_attachmentFileUrl').value
       };
 
-      wppaAtachments.push(uploadedFile);
+      // editing
+      if (this.getAttribute('data-key')) {
+        let key = this.getAttribute('data-key');
+        wppaAtachments[key] = uploadedFile;
+        let attItemBlock = document.getElementById('attachment_' + key);
+        attItemBlock.querySelector('span').innerHTML = uploadedFile.name;
+      }
+      else {
+        wppaAtachments.push(uploadedFile);
+
+        let attachmentItemBlock = '<li class="att-item" id="attachment_' + (wppaAtachments.length - 1) + '">' +
+          '<span>' + uploadedFile.name + '</span>' +
+          '<div class="action-btns">' +
+            '<a title="Abrir" class="link-btn" href="' + uploadedFile.url + '" target="blank" rel="noopener noreferrer"><i class="fas fa-link"></i></a>' +
+            '<i title="Detalhes" data-key="' + (wppaAtachments.length - 1) + '" class="fas fa-edit edit-btn"></i>' +
+            '<i title="Remover" data-key="' + (wppaAtachments.length - 1) + '" class="fas fa-times remove-btn"></i>' +
+          '</div>' +
+        '</li>';
+        document.getElementById('attachmentsContainer').innerHTML += attachmentItemBlock;
+      }
+
       document.getElementById('wppa_attachment_list').value = JSON.stringify(wppaAtachments);
 
-      // ------- mostrar arquivos na lista --------
+      // clear data
+      closeAttachmentDialog();
 
-      dialog.classList.remove('attach-dialog-show');
+    });
 
+    document.getElementById('closeAttachmentDialog').addEventListener('click', function (){
+      closeAttachmentDialog();
     });
   }
 
+  // default click
+  document.addEventListener('click', function(e) {
+    for (var target = e.target; target && target != this; target = target.parentNode)
+      if (target.matches('.remove-btn')) {
+
+        wppaAtachments.splice(target.getAttribute('data-key'), 1);
+        document.getElementById('wppa_attachment_list').value = JSON.stringify(wppaAtachments);
+        target.parentNode.parentNode.remove();
+
+        document.getElementById('attachmentsContainer').querySelectorAll('li').forEach((item, i) => {
+          item.setAttribute('id', 'attachment_' + i);
+          item.querySelector('.edit-btn').setAttribute('data-key', i);
+          item.querySelector('.remove-btn').setAttribute('data-key', i);
+        });
+
+
+      } else if (target.matches('.edit-btn')) {
+
+        let attachment = wppaAtachments[target.getAttribute('data-key')];
+        getAttachmentDetails(attachment.url, attachment.name, target.getAttribute('data-key'), attachment.cover_image);
+
+      }
+  });
+
 });
diff --git a/js/main.min.js b/js/main.min.js