0003-wcs-add-pagination-for-list-of-cards-68037.patch
| combo/apps/wcs/forms.py | ||
|---|---|---|
| 86 | 86 |
'carddef_reference', |
| 87 | 87 |
'related_card_path', |
| 88 | 88 |
'card_ids', |
| 89 |
'limit', |
|
| 89 | 90 |
'only_for_user', |
| 90 | 91 |
'custom_schema', |
| 91 | 92 |
) |
| combo/apps/wcs/models.py | ||
|---|---|---|
| 1384 | 1384 | |
| 1385 | 1385 |
@property |
| 1386 | 1386 |
def css_class_names(self): |
| 1387 |
return '%s card' % super().css_class_names
|
|
| 1387 |
return '%s card %s' % (super().css_class_names, self.get_reference())
|
|
| 1388 | 1388 | |
| 1389 | 1389 |
def get_cell_extra_context(self, context): |
| 1390 | 1390 |
extra_context = super().get_cell_extra_context(context) |
| combo/public/static/js/combo.public.js | ||
|---|---|---|
| 355 | 355 |
return false; |
| 356 | 356 |
}); |
| 357 | 357 | |
| 358 |
// pagination in cells with list of items |
|
| 359 |
$(document).on('combo:cell-loaded', function(ev, cell) {
|
|
| 360 |
var $pagination = $(cell).find('.cell-items-pagination');
|
|
| 361 |
if ($pagination.length == 0) return; |
|
| 362 |
var page_index = 0; |
|
| 358 |
function pagination_update_page(items, max_page_index, step, paginate_by, $pagination, focus_first_item) {
|
|
| 359 |
var page_index = $pagination.data('page_index') + step;
|
|
| 360 |
if (page_index == 0) {
|
|
| 361 |
$pagination.find('.cell-items-pagination-prev').prop('disabled', true);
|
|
| 362 |
} else {
|
|
| 363 |
$pagination.find('.cell-items-pagination-prev').prop('disabled', null);
|
|
| 364 |
} |
|
| 365 |
if (page_index == max_page_index - 1) {
|
|
| 366 |
$pagination.find('.cell-items-pagination-next').prop('disabled', true);
|
|
| 367 |
} else {
|
|
| 368 |
$pagination.find('.cell-items-pagination-next').prop('disabled', null);
|
|
| 369 |
} |
|
| 370 |
start_item = paginate_by * page_index; |
|
| 371 |
items.hide(); |
|
| 372 |
items.slice(start_item, start_item + paginate_by).show(); |
|
| 373 |
$pagination.data('page_index', page_index);
|
|
| 374 |
if (focus_first_item) {
|
|
| 375 |
$pagination.parent().focus(); |
|
| 376 |
} |
|
| 377 |
}; |
|
| 378 | ||
| 379 |
function paginate($pagination, items, must_focus) {
|
|
| 380 |
$pagination.data('page_index', 0);
|
|
| 363 | 381 |
var paginate_by = parseInt($pagination.data('paginate-by'));
|
| 364 |
// Get all <li> inside the same div as us, ignoring whether they are part of |
|
| 365 |
// different <ul> |
|
| 366 |
var wrapper = $pagination.parent(); |
|
| 367 |
wrapper.attr('tabindex', -1)
|
|
| 368 |
var items = $pagination.parent().find('li');
|
|
| 369 | 382 |
var max_page_index = Math.ceil(items.length / paginate_by); |
| 370 | 383 |
if (items.length <= paginate_by) {
|
| 371 | 384 |
return; |
| 372 | 385 |
} |
| 373 | 386 | |
| 374 | 387 |
function update_page(step, focus_first_item) {
|
| 375 |
page_index = page_index + step; |
|
| 376 |
if (page_index == 0) {
|
|
| 377 |
$pagination.find('.cell-items-pagination-prev').prop('disabled', true);
|
|
| 378 |
} else {
|
|
| 379 |
$pagination.find('.cell-items-pagination-prev').prop('disabled', null);
|
|
| 380 |
} |
|
| 381 |
if (page_index == max_page_index - 1) {
|
|
| 382 |
$pagination.find('.cell-items-pagination-next').prop('disabled', true);
|
|
| 383 |
} else {
|
|
| 384 |
$pagination.find('.cell-items-pagination-next').prop('disabled', null);
|
|
| 385 |
} |
|
| 386 |
start_item = paginate_by * page_index; |
|
| 387 |
items.hide(); |
|
| 388 |
items.slice(start_item, start_item + paginate_by).show(); |
|
| 389 |
if (focus_first_item) {
|
|
| 390 |
wrapper.focus() |
|
| 388 |
if (! must_focus) {
|
|
| 389 |
focus_first_item = false; |
|
| 391 | 390 |
} |
| 392 |
}; |
|
| 391 |
pagination_update_page(items, max_page_index, step, paginate_by, $pagination, focus_first_item); |
|
| 392 |
} |
|
| 393 | 393 | |
| 394 | 394 |
$pagination.find('.cell-items-pagination-prev').click(function() { update_page(-1, true); });
|
| 395 | 395 |
$pagination.find('.cell-items-pagination-next').click(function() { update_page(1, true); });
|
| 396 | 396 |
update_page(0, false); |
| 397 | 397 |
$pagination.prop('hidden', null);
|
| 398 |
}; |
|
| 399 | ||
| 400 |
function paginate_cards($pagination) {
|
|
| 401 |
var items = $pagination.parent().find('.card.' + $pagination.data('cell-reference'));
|
|
| 402 |
paginate($pagination, items, false); |
|
| 403 |
}; |
|
| 404 | ||
| 405 |
// pagination for cells with list of items or for card cells |
|
| 406 |
$(document).on('combo:cell-loaded', function(ev, cell) {
|
|
| 407 |
var $pagination = $(cell).find('.cell-items-pagination');
|
|
| 408 |
if ($pagination.length == 0) return; |
|
| 409 |
// Get all <li> inside the same div as us, ignoring whether they are part of |
|
| 410 |
// different <ul> |
|
| 411 |
var wrapper = $pagination.parent(); |
|
| 412 |
wrapper.attr('tabindex', -1)
|
|
| 413 |
var items = $pagination.parent().find('li');
|
|
| 414 |
paginate($pagination, items, true); |
|
| 398 | 415 |
}); |
| 416 | ||
| 399 | 417 |
$('.cell-items-pagination').each(function(idx, elem) {
|
| 400 |
$(document).trigger('combo:cell-loaded', $(elem).parents('.cell').first());
|
|
| 418 |
var $cells = $(elem).parents('.cell');
|
|
| 419 |
if ($cells.length) {
|
|
| 420 |
$(document).trigger('combo:cell-loaded', $cells.first());
|
|
| 421 |
} else if ($(elem).data('cell-reference')) {
|
|
| 422 |
paginate_cards($(elem)); |
|
| 423 |
} |
|
| 401 | 424 |
}); |
| 402 | 425 |
}); |
| combo/public/templates/combo/pagination.html | ||
|---|---|---|
| 1 |
{% load static %}
|
|
| 2 |
<div class="cell-items-pagination" data-paginate-by="{{ paginate_by|default:10 }}" hidden>
|
|
| 1 |
<div class="cell-items-pagination"{% if data_cell_reference %} data-cell-reference="{{ data_cell_reference }}"{% endif %} data-paginate-by="{{ paginate_by|default:10 }}" hidden>
|
|
| 3 | 2 |
<button class="cell-items-pagination-prev" disabled>←</a> |
| 4 | 3 |
<button class="cell-items-pagination-next" disabled>→</a> |
| 5 | 4 |
</div> |
| combo/public/templates/combo/placeholder.html | ||
|---|---|---|
| 16 | 16 |
{% if extra_context %}data-extra-context="{{ extra_context|signed|urlencode }}"{% endif %}
|
| 17 | 17 |
{% endwith %}
|
| 18 | 18 |
><div>{% render_cell cell %}</div></div>
|
| 19 |
{% if cell.include_pagination %}
|
|
| 20 |
{% include "combo/pagination.html" with paginate_by=cell.limit data_cell_reference=cell.get_reference %}
|
|
| 21 |
{% endif %}
|
|
| 19 | 22 |
{% endfor %}
|
| 20 | 23 |
{% if placeholder_options.fx_grid_layout %}</div>{% endif %}
|
| 21 | 24 |
{% if outer_tag %}</{{outer_tag|default:"div"}}>{% endif %}
|
| combo/public/templatetags/combo.py | ||
|---|---|---|
| 127 | 127 |
for i in range(repeat): |
| 128 | 128 |
new_cell = copy.copy(cell) |
| 129 | 129 |
new_cell.repeat_index = i |
| 130 |
new_cell.include_pagination = bool(i + 1 == repeat) |
|
| 130 | 131 |
repeated_cells.append(new_cell) |
| 131 | 132 |
context['cells'][cell_idx:cell_idx] = repeated_cells |
| 132 | 133 | |
| tests/test_wcs.py | ||
|---|---|---|
| 2696 | 2696 |
assert len(resp.context['cells']) == 3 |
| 2697 | 2697 |
for i in range(0, 3): |
| 2698 | 2698 |
assert '<h2>Foo bar X%sY</h2>' % i in resp |
| 2699 |
assert 'data-paginate-by="10"' in resp |
|
| 2700 | ||
| 2701 |
cell.limit = 42 |
|
| 2702 |
cell.save() |
|
| 2703 |
resp = app.get(page.get_online_url()) |
|
| 2704 |
assert len(resp.context['cells']) == 3 |
|
| 2705 |
for i in range(0, 3): |
|
| 2706 |
assert '<h2>Foo bar X%sY</h2>' % i in resp |
|
| 2707 |
assert 'data-paginate-by="42"' in resp |
|
| 2699 | 2708 | |
| 2700 | 2709 |
# using custom view |
| 2701 | 2710 |
cell.carddef_reference = 'default:card_model_1:foo' |
| 2702 |
- |
|