Add basic wish popup
This commit is contained in:
parent
121350ec61
commit
5ab968a15c
6 changed files with 82 additions and 7 deletions
16
src/assets/css/wish.css
Normal file
16
src/assets/css/wish.css
Normal 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%;
|
||||
}
|
||||
}
|
|
@ -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() {
|
||||
|
||||
});
|
||||
});
|
||||
/** */
|
||||
|
||||
});
|
||||
|
|
|
@ -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 ?>"
|
||||
>
|
||||
|
|
|
@ -217,10 +217,30 @@ namespace wishthis;
|
|||
</div>
|
||||
|
||||
<!-- Modal: Details -->
|
||||
<div class="ui modal details">
|
||||
<div class="header">Header</div>
|
||||
<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 class="scrolling content">
|
||||
<p>Very long content goes here</p>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in a new issue