Add wish details image
This commit is contained in:
grandeljay
parent
b7df60fc98
commit
5d79e1b36d
6 changed files with 57 additions and 82 deletions
|
|
@ -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) {
|
||||
height: 40vh;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@supports selector(.ui.modal.wish-details .wish-image:has(.ui.placeholder)) {
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -210,13 +210,25 @@ function handleFetchError(response) {
|
|||
}
|
||||
|
||||
function handleFetchResponse(response) {
|
||||
var isText = response.headers.get('content-type')?.includes('text/html');
|
||||
var isJSON = response.headers.get('content-type')?.includes('application/json');
|
||||
var content_type = response.headers.get('content-type');
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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 ?>',
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue