PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic wish popup

Browse source
This commit is contained in:
grandeljay 2022-12-10 19:09:49 +01:00
parent 121350ec61
commit 5ab968a15c
6 changed files with 82 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/assets/css/wish.css Normal file
View file

@ -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%;
}
}

39
src/assets/js/parts/wish.js
View file

@ -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() {
});
});
/** */
});

2
src/classes/wish.php
View file

@ -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 ?>"
>

32
src/pages/parts/wishlist.php
View file

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

1
src/pages/wishlist.php
View file

@ -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';

1
src/pages/wishlists.php
View file

@ -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';