Add basic wish popup

src/assets/css/wish.css

@@ -0,0 +1,16 @@
+/**
+ * Details
+ */
+
+/** Image */
+.ui.modal.wish-details .wish-image {
+    max-width: 100%;
+    max-height: 40vh;
+}
+
+@media (min-width: 768px) {
+    .ui.modal.wish-details .wish-image {
+        max-width: 40%;
+        max-height: 100%;
+    }
+}

src/assets/js/parts/wish.js

@@ -1,7 +1,44 @@
 $(function () {
 
+    /**
+     * Details
+     */
     $(document).on('click', '.ui.button.details', function() {
-        $('.ui.modal.details').modal('show');
+        var wish_details_template = $('template#wish-details').clone(true, true);
-    });
+        var wish_details          = wish_details_template.contents().filter(function() { return this.nodeType !== 3; });
+
+        /** Show modal */
+        wish_details.modal('show');
+
+        /** Get Wish */
+        var card    = $(this).closest('.ui.card.wish');
+        var wish_id = card.attr('data-id');
+
+        var get_wish = new URLSearchParams(
+            {
+                'module' : 'wishes',
+                'page'   : 'api',
+
+                'wish_id' : wish_id,
+            }
+        );
+
+        fetch('/?' + get_wish, { method: 'GET' })
+        .then(handleFetchError)
+        .then(handleFetchResponse)
+        .then(function(response) {
+            var wish = response.info;
+
+            /** General */
+            $('.wish-title').html(wish.title);
+            $('.wish-image').prop('outerHTML', '<img class="image wish-image" src="' + wish.image + '" />');
+            $('.wish-description').html(wish.description);
+        })
+        .catch(handleFetchCatch)
+        .finally(function() {
+
+        });
+    });
+    /** */
 
 });

src/classes/wish.php

@@ -156,7 +156,7 @@ class Wish
 
             default:
                 ?>
-                <div class="ui blurring dimmable fluid card"
+                <div class="ui blurring dimmable fluid card wish"
                     data-id="<?= $this->id ?>"
                     data-cache="<?= $generateCache ?>"
                 >

src/pages/parts/wishlist.php

@@ -217,10 +217,30 @@ namespace wishthis;
 </div>
 
 <!-- Modal: Details -->
-<div class="ui modal details">
+<template id="wish-details">
-    <div class="header">Header</div>
+    <div class="ui large modal wish-details">
+        <div class="header wish-title">
+            <div class="ui fluid placeholder">
+                <div class="line"></div>
+            </div>
+        </div>
 
-    <div class="scrolling content">
+        <div class="scrolling image content">
-        <p>Very long content goes here</p>
+            <div class="wish-image">
+                <div class="ui placeholder">
+                    <div class="image"></div>
                 </div>
             </div>
+
+            <div class="description wish-description">
+                <div class="ui fluid placeholder">
+                    <div class="paragraph">
+                        <div class="line"></div>
+                        <div class="line"></div>
+                        <div class="line"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/pages/wishlist.php

@@ -10,6 +10,7 @@ namespace wishthis;
 
 $wishlist                                  = new Wishlist($_GET['hash']);
 $page                                      = new Page(__FILE__, $wishlist->getTitle());
+$page->stylesheets['wish']                 = 'src/assets/css/wish.css';
 $page->stylesheets['wish-card']            = 'src/assets/css/wish-card.css';
 $page->scripts['wish']                     = 'src/assets/js/parts/wish.js';
 $page->scripts['wishlist-filter-priority'] = 'src/assets/js/parts/wishlist-filter-priority.js';

src/pages/wishlists.php

@@ -9,6 +9,7 @@
 namespace wishthis;
 
 $page                                      = new Page(__FILE__, __('My lists'), 1);
+$page->stylesheets['wish']                 = 'src/assets/css/wish.css';
 $page->stylesheets['wish-card']            = 'src/assets/css/wish-card.css';
 $page->scripts['wish']                     = 'src/assets/js/parts/wish.js';
 $page->scripts['wishlist-filter-priority'] = 'src/assets/js/parts/wishlist-filter-priority.js';