Plugin de favoritos via Rest API

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+*.lock
+.parcel-cache/
+*.css.map
+*.js.map

.nvmrc

@@ -0,0 +1 @@
+v23.11.0

assets/scripts/index.ts

@@ -0,0 +1,91 @@
+import Toastify from 'toastify-js';
+
+const favoritePosts = {
+    init() {
+        if (!this.component) return;
+
+        this.addEventListeners();
+    },
+
+    addEventListeners() {
+        this.component.addEventListener('click', this.handleClick.bind(this));
+    },
+
+    async favoritePost() {
+        // @ts-ignore
+        fetch(wpApiSettings.root + wpApiSettings.rest_namespace + '/favorite-posts', {
+            method: 'POST',
+            body: JSON.stringify({
+                post_id: this.component.dataset.postId
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+                // @ts-ignore
+                'X-WP-Nonce': wpApiSettings.nonce
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            Toastify({ text: data.message }).showToast();
+
+            this.component.classList.add('is-favorite');
+        })
+        .catch(error => {
+            Toastify({
+                text: 'Failed to add favorite post',
+                className: 'error',
+                style: {
+                    background: 'linear-gradient(to right, #ff0000, #ff4747)',
+                }
+            }).showToast();
+        });
+    },
+
+    async handleClick() {
+        !!this.dialogLoader && this.dialogLoader.showModal();
+
+        if (this.component.classList.contains('is-favorite')) {
+            await this.removeFavoritePost();
+        } else {
+            await this.favoritePost();
+        }
+
+        !!this.dialogLoader && this.dialogLoader.close();
+    },
+
+    async removeFavoritePost() {
+        // @ts-ignore
+        fetch(wpApiSettings.root + wpApiSettings.rest_namespace + '/favorite-posts', {
+            method: 'DELETE',
+            body: JSON.stringify({
+                post_id: this.component.dataset.postId
+            }),
+            headers: {
+                'Content-Type': 'application/json',
+                // @ts-ignore
+                'X-WP-Nonce': wpApiSettings.nonce
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            Toastify({ text: data.message }).showToast();
+
+            this.component.classList.remove('is-favorite');
+        })
+        .catch(error => {
+            Toastify({
+                text: 'Failed to remove favorite post',
+                className: 'error',
+                style: {
+                    background: 'linear-gradient(to right, #ff0000, #ff4747)',
+                }
+            }).showToast();
+        });
+    },
+
+    component: document.querySelector('.favorite-post-button'),
+    dialogLoader: document.querySelector('#dialog-loader'),
+    favoritePostsPopover: document.querySelector('#favorite-posts-popover'),
+}
+
+favoritePosts.init();

assets/scss/index.scss

@@ -0,0 +1,61 @@
+@import './loader.scss';
+
+.favorite-post-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: block;
+    outline: none;
+    opacity: 0.5;
+    padding: 0;
+    transition: all 0.3s ease-in-out;
+
+    &:hover,
+    &.is-favorite {
+        opacity: 1;
+        transform: scale(2);
+    }
+
+    img {
+        height: 32px;
+        pointer-events: none;
+    }
+}
+
+#dialog-loader {
+    background-color: transparent;
+    border: none;
+    opacity: 0;
+    padding: 150px;
+    transform: scaleY(0);
+    transition: opacity 0.7s ease-out,
+                transform 0.7s ease-out,
+                overlay 0.7s ease-out allow-discrete,
+                display 0.7s ease-out allow-discrete;
+
+    &:open {
+    opacity: 1;
+    transform: scaleY(1);
+    }
+
+    /* Styles the *starting point* of the open state */
+    /* Must come AFTER the dialog:open rule due to equal specificity */
+    @starting-style {
+        &:open {
+            opacity: 0;
+            transform: scaleY(0);
+        }
+    }
+
+    &::backdrop {
+        background-color: rgba(255, 255, 255, 0);
+        transition: background-color 0.7s ease-out allow-discrete;
+    }
+
+    &:open::backdrop {
+        background-color: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(10px);
+    }
+
+    .loader { width: 96px; }
+}

assets/scss/loader.scss

@@ -0,0 +1,25 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 50px;
+  aspect-ratio: 1;
+  color:#dc1818;
+  background:
+   radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
+   radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
+   linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
+   linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
+  background-size: 50% 50%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.loader:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  opacity: 0.4;
+  animation: l3 1s infinite;
+}
+@keyframes l3 {
+  to {transform:scale(1.8);opacity:0}
+}