Add wish details image

src/assets/css/wish.css

@@ -3,7 +3,10 @@
  */
 
 /** Image */
-.ui.modal.wish-details .wish-image {
+.ui.modal.wish-details .wish-image,
+.ui.modal.wish-details .wish-image is:(img, svg) {
+    height: auto;
+
     max-width: 100%;
     max-height: 40vh;
 }
@@ -19,12 +22,14 @@
     }
 }
 
-.ui.modal.wish-details .wish-image:has(.ui.placeholder) {
+@supports selector(.ui.modal.wish-details .wish-image:has(.ui.placeholder)) {
-    height: 40vh;
-}
-@media (min-width: 768px) {
     .ui.modal.wish-details .wish-image:has(.ui.placeholder) {
-        width: 40%;
+        height: 40vh;
+    }
+    @media (min-width: 768px) {
+        .ui.modal.wish-details .wish-image:has(.ui.placeholder) {
+            width: 40%;
+        }
     }
 }
 

src/assets/js/default.js

@@ -210,13 +210,25 @@ function handleFetchError(response) {
 }
 
 function handleFetchResponse(response) {
-    var isText = response.headers.get('content-type')?.includes('text/html');
+    var content_type = response.headers.get('content-type');
-    var isJSON = response.headers.get('content-type')?.includes('application/json');
+    var isText       = false;
+    var isJSON       = false;
+
+    if (content_type) {
+        isText =    content_type.includes('text/html')
+                 || content_type.includes('image/svg+xml');
+
+        isJSON = content_type.includes('application/json');
+    }
 
     if (isText) {
-        return response.text().then(function(text) {
+        return response
+        .text()
+        .then(function(text) {
             if (text.toLowerCase().includes('error') || text.toLowerCase().includes('exception')) {
                 showError(text);
+            } else {
+                return text;
             }
         })
     } else if (isJSON) {
@@ -228,6 +240,8 @@ function handleFetchResponse(response) {
             return json;
         });
     }
+
+    return response;
 }
 
 function handleFetchCatch(error) {

src/assets/js/inline.js.php

@@ -19,7 +19,8 @@ global $options;
 
     /** Wish */
     wishthis.wish = {
-        'status' : {
+        'no_image' : '<?= Wish::NO_IMAGE ?>',
+        'status'   : {
             'temporary'   : '<?= Wish::STATUS_TEMPORARY ?>',
             'unavailable' : '<?= Wish::STATUS_UNAVAILABLE ?>',
             'fulfilled'   : '<?= Wish::STATUS_FULFILLED ?>',

src/assets/js/parts/wish.js

@@ -29,9 +29,33 @@ $(function () {
         .then(function(response) {
             var wish = response.info;
 
-            /** General */
+            /**
+             * Wish
+             */
+            /** Title */
             $('.wish-title').html(wish.title);
-            $('.wish-image').prop('outerHTML', '<img class="image wish-image" src="' + wish.image + '" />');
+
+            /** Image */
+            var wish_image       = wish.image ? wish.image : wishthis.wish.no_image;
+            var wish_image_ext   = wish_image.split('.').pop();
+
+            if ('svg' === wish_image_ext) {
+                fetch(wish_image, { method: 'GET' })
+                .then(handleFetchError)
+                .then(handleFetchResponse)
+                .then(function(response) {
+                    var svg = $(response).filter(function() { return 'svg' === this.nodeName; });
+
+                    $('.wish-image').html(svg);
+                })
+                .catch(function(response) {
+                    $('.wish-image').html('<img src="' + wish_image + '" />');
+                });
+            } else {
+                $('.wish-image').html('<img src="' + wish_image + '" />');
+            }
+
+            /** Description */
             $('.wish-description').html(wish.description);
         })
         .catch(handleFetchCatch)

src/classes/wish.php

@@ -358,75 +358,6 @@ class Wish
                 <i class="stream icon"></i>
                 <span><?= __('Details') ?></span>
             </button>
-
-            <?php if ($this->url) { ?>
-                <a class="ui compact labeled icon button"
-                   href="<?= $this->url ?>" target="_blank"
-                   title="<?= __('Visit') ?>"
-                >
-                    <i class="external icon"></i>
-                    <span><?= __('Visit') ?></span>
-                </a>
-            <?php } ?>
-        </div>
-        <?php
-        $buttons = ob_get_clean();
-
-        return $buttons;
-        ?>
-        <div class="extra content buttons">
-            <?php if (!$userIsCurrent) { ?>
-                <a class="ui small primary labeled icon button fulfil"
-                title="<?= __('Fulfil wish') ?>"
-                >
-                    <i class="gift icon"></i>
-                    <?= __('Fulfil wish') ?>
-                </a>
-            <?php } ?>
-
-            <?php if ($this->url) { ?>
-                <a class="ui small labeled icon button<?= $userIsCurrent ? ' primary' : '' ?>"
-                href="<?= $this->url ?>" target="_blank"
-                title="<?= __('Visit') ?>"
-                >
-                    <i class="external icon"></i>
-                    <?= __('Visit') ?>
-                </a>
-            <?php } else { ?>
-                <a class="ui small labeled icon disabled button<?= $userIsCurrent ? ' primary' : '' ?>"
-                title="<?= __('Visit') ?>"
-                >
-                    <i class="external icon"></i>
-                    <?= __('Visit') ?>
-                </a>
-            <?php } ?>
-
-            <?php if ($userIsCurrent) { ?>
-                <div class="ui small labeled icon top left pointing dropdown button wish-options disabled"
-                    title="<?= __('Options') ?>"
-                >
-                    <i class="cog icon"></i>
-                    <span class="text"><?= __('Options') ?></span>
-                    <div class="menu">
-
-                        <button class="item wish-fulfilled">
-                            <i class="check icon"></i>
-                            <?= __('Mark as fulfilled') ?>
-                        </button>
-
-                        <button class="item wish-edit" data-id="<?= $this->id ?>">
-                            <i class="pen icon"></i>
-                            <?= __('Edit') ?>
-                        </button>
-
-                        <button class="item wish-delete">
-                            <i class="trash icon"></i>
-                            <?= __('Delete') ?>
-                        </button>
-
-                    </div>
-                </div>
-            <?php } ?>
         </div>
         <?php
         $buttons = ob_get_clean();

src/pages/parts/wishlist.php

@@ -226,7 +226,7 @@ namespace wishthis;
         </div>
 
         <div class="scrolling image content">
-            <div class="wish-image">
+            <div class="ui rounded image wish-image">
                 <div class="ui fluid placeholder">
                     <div class="image"></div>
                 </div>