bulk actions toolbar, with selected items count

TODO: adding an item resets the checked state of everything, boooo.
this is why react is better :'(
This commit is contained in:
Matchu 2015-09-26 15:00:31 -07:00
parent 621c768921
commit 48185fd5b8
3 changed files with 60 additions and 1 deletions

View file

@ -188,7 +188,10 @@
} }
function objectRemoved(objectWrapper) { function objectRemoved(objectWrapper) {
objectWrapper.hide(250, $.proxy(objectWrapper, 'remove')); objectWrapper.hide(250, function() {
objectWrapper.remove();
updateBulkActions();
});
} }
function compareItemsByName(a, b) { function compareItemsByName(a, b) {
@ -270,6 +273,8 @@
quantityEl.storeValue(); quantityEl.storeValue();
ownedEl.storeValue(); ownedEl.storeValue();
listEl.storeValue(); listEl.storeValue();
updateBulkActions();
}, },
error: function (xhr) { error: function (xhr) {
quantityEl.revertValue(); quantityEl.revertValue();
@ -351,8 +356,22 @@
}); });
checkboxes.attr('checked', !allChecked); checkboxes.attr('checked', !allChecked);
updateBulkActions(); // setting the checked prop doesn't fire change events
}); });
function getCheckboxes() {
return $(hangersElQuery + " input[type=checkbox]");
}
getCheckboxes().live("change", updateBulkActions);
function updateBulkActions() {
var checkedCount = getCheckboxes().filter(':checked').length;
$('.bulk-actions').attr('data-target-count', checkedCount);
$('.bulk-actions-target-count').text(checkedCount);
}
/* /*
Search, autocomplete Search, autocomplete

View file

@ -90,6 +90,9 @@ body.closet_hangers-index
clear: both clear: both
text-align: center text-align: center
.bulk-actions
display: none
.object .object
.quantity .quantity
+opacity(.75) +opacity(.75)
@ -367,6 +370,30 @@ body.closet_hangers-index
span:after span:after
content: "" content: ""
.bulk-actions
border-top: 1px solid $module-border-color
display: block
font-size: 85%
padding: .5em 1em
.bulk-actions-intro, .bulk-actions-target-desc-singular
display: none
&[data-target-count="0"]
.bulk-actions-intro
display: block
text-align: center
.bulk-actions-form
display: none
&[data-target-count="1"]
.bulk-actions-target-desc-singular
display: block
.bulk-actions-target-desc-plural
display: none
#closet-hangers-contact #closet-hangers-contact
input[type=submit] input[type=submit]
display: none display: none

View file

@ -57,6 +57,19 @@
= link_to t('.export_to.petpage'), petpage_user_closet_hangers_path(@user) = link_to t('.export_to.petpage'), petpage_user_closet_hangers_path(@user)
#closet-hangers{:class => public_perspective? ? nil : 'current-user'} #closet-hangers{:class => public_perspective? ? nil : 'current-user'}
- unless public_perspective?
-# TODO: i18n
.bulk-actions{'data-target-count' => 0}
.bulk-actions-intro
Manage items in bulk! Select an item by clicking its thumbnail.
%form.bulk-actions-form
.bulk-actions-target-desc
%span.bulk-actions-target-desc-singular
With the 1 selected item
%span.bulk-actions-target-desc-plural
With the
%span.bulk-actions-target-count 0
selected items
- [true, false].each do |owned| - [true, false].each do |owned|
.closet-hangers-group{'data-owned' => owned.to_s, :id => "closet-hangers-group-#{owned}"} .closet-hangers-group{'data-owned' => owned.to_s, :id => "closet-hangers-group-#{owned}"}
%header %header