Your Items autocompleter can add to both owned and wanted
This commit is contained in:
parent
7476314953
commit
6203caf186
4 changed files with 137 additions and 70 deletions
|
@ -20,7 +20,7 @@ body.closet_hangers-index
|
|||
#closet-hangers-items-search
|
||||
float: right
|
||||
|
||||
input[type=search]
|
||||
input[name=q]
|
||||
&.loading
|
||||
background:
|
||||
image: url(/images/loading.gif)
|
||||
|
@ -110,7 +110,7 @@ body.closet_hangers-index
|
|||
font-size: 250%
|
||||
margin: 0
|
||||
|
||||
span
|
||||
span.show, span.hide
|
||||
color: $soft-text-color
|
||||
display: none
|
||||
font-size: 85%
|
||||
|
@ -118,9 +118,10 @@ body.closet_hangers-index
|
|||
right: 1em
|
||||
bottom: 0
|
||||
|
||||
&:hover span
|
||||
color: inherit
|
||||
text-decoration: underline
|
||||
&:hover
|
||||
span.show, span.hide
|
||||
color: inherit
|
||||
text-decoration: underline
|
||||
|
||||
.closet-hangers-group
|
||||
border-top: 1px solid $module-border-color
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
- content_for :before_flashes do
|
||||
= link_to "Import closet from Neopets", new_closet_page_path, :id => 'import-link'
|
||||
= form_tag items_path, :method => :get, :id => 'closet-hangers-items-search', 'data-current-user-id' => current_user.id do
|
||||
= search_field_tag :q, nil, :placeholder => "Find items to add"
|
||||
= text_field_tag :q, nil, :placeholder => "Find items to add"
|
||||
= submit_tag 'Search', :name => nil
|
||||
- else
|
||||
- title "#{@user.name}'s Items"
|
||||
|
@ -43,7 +43,10 @@
|
|||
- [true, false].each do |owned|
|
||||
.closet-hangers-group{'data-owned' => owned.to_s}
|
||||
%header
|
||||
%h3 Items #{closet_hanger_subject} #{closet_hanger_verb(owned)}
|
||||
%h3
|
||||
Items
|
||||
= closet_hanger_subject
|
||||
%span.verb= closet_hanger_verb(owned)
|
||||
%span.show click to show
|
||||
%span.hide click to hide
|
||||
.closet-hangers-group-content
|
||||
|
|
|
@ -1,4 +1,28 @@
|
|||
(function () {
|
||||
/*
|
||||
|
||||
Hanger groups
|
||||
|
||||
*/
|
||||
|
||||
var hangerGroups = [];
|
||||
|
||||
$('div.closet-hangers-group').each(function () {
|
||||
var el = $(this);
|
||||
hangerGroups[hangerGroups.length] = {
|
||||
label: el.find('span.verb').text(),
|
||||
owned: (el.attr('data-owned') == 'true')
|
||||
};
|
||||
}).find('header').click(function () {
|
||||
$(this).parent().toggleClass('hidden');
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Hanger forms
|
||||
|
||||
*/
|
||||
|
||||
var body = $(document.body).addClass("js");
|
||||
if(!body.hasClass("current-user")) return false;
|
||||
|
||||
|
@ -124,53 +148,97 @@
|
|||
});
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Search, autocomplete
|
||||
|
||||
*/
|
||||
|
||||
$('input, textarea').placeholder();
|
||||
|
||||
var itemsSearchForm = $("#closet-hangers-items-search[data-current-user-id]");
|
||||
var itemsSearchField = itemsSearchForm.children("input[type=search]");
|
||||
var itemsSearchField = itemsSearchForm.children("input[name=q]");
|
||||
|
||||
itemsSearchField.autocomplete({
|
||||
select: function (e, ui) {
|
||||
var item = ui.item;
|
||||
itemsSearchField.addClass("loading");
|
||||
if(ui.item.is_item) {
|
||||
// Let the autocompleter finish up this search before starting a new one
|
||||
setTimeout(function () { itemsSearchField.autocomplete("search", ui.item) }, 0);
|
||||
} else {
|
||||
var item = ui.item.item;
|
||||
var group = ui.item.group;
|
||||
|
||||
$.ajax({
|
||||
url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
|
||||
type: "post",
|
||||
data: {closet_hanger: {quantity: 1}, return_to: window.location.pathname + window.location.search},
|
||||
complete: function () {
|
||||
itemsSearchField.removeClass("loading");
|
||||
},
|
||||
success: function (html) {
|
||||
var doc = $(html);
|
||||
hangersEl.html( doc.find('#closet-hangers').html() );
|
||||
quantityInputs().storeValue(); // since all the quantity inputs are new, gotta store initial value again
|
||||
doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
|
||||
itemsSearchField.val("");
|
||||
},
|
||||
error: function (xhr) {
|
||||
handleSaveError(xhr, "adding the item");
|
||||
}
|
||||
});
|
||||
itemsSearchField.addClass("loading");
|
||||
|
||||
var closetHanger = {
|
||||
quantity: 1,
|
||||
owned: group.owned
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
|
||||
type: "post",
|
||||
data: {closet_hanger: closetHanger, return_to: window.location.pathname + window.location.search},
|
||||
complete: function () {
|
||||
itemsSearchField.removeClass("loading");
|
||||
},
|
||||
success: function (html) {
|
||||
var doc = $(html);
|
||||
hangersEl.html( doc.find('#closet-hangers').html() );
|
||||
quantityInputs().storeValue(); // since all the quantity inputs are new, gotta store initial value again
|
||||
doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250);
|
||||
itemsSearchField.val("");
|
||||
},
|
||||
error: function (xhr) {
|
||||
handleSaveError(xhr, "adding the item");
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
source: function (input, callback) {
|
||||
$.getJSON("/items.json?q=" + input.term, function (data) {
|
||||
var output = [];
|
||||
var items = data.items;
|
||||
for(var i in items) {
|
||||
items[i].label = items[i].name;
|
||||
output[output.length] = items[i];
|
||||
if(typeof input.term == 'string') { // user-typed query
|
||||
$.getJSON("/items.json?q=" + input.term, function (data) {
|
||||
var output = [];
|
||||
var items = data.items;
|
||||
for(var i in items) {
|
||||
items[i].label = items[i].name;
|
||||
items[i].is_item = true;
|
||||
output[output.length] = items[i];
|
||||
}
|
||||
callback(output);
|
||||
});
|
||||
} else { // item was chosen, now choose a group to insert
|
||||
var groupInserts = [];
|
||||
for(var i in hangerGroups) {
|
||||
groupInserts[groupInserts.length] = {
|
||||
group: hangerGroups[i],
|
||||
item: input.term,
|
||||
label: input.term.label
|
||||
}
|
||||
}
|
||||
callback(output);
|
||||
})
|
||||
callback(groupInserts);
|
||||
}
|
||||
}
|
||||
}).data( "autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li></li>" )
|
||||
.data( "item.autocomplete", item )
|
||||
.append( "<a>Add <strong>" + item.label + "</strong>" )
|
||||
.appendTo( ul );
|
||||
});
|
||||
|
||||
var autocompleter = itemsSearchField.data("autocomplete");
|
||||
|
||||
autocompleter._renderItem = function( ul, item ) {
|
||||
var li = $("<li></li>").data("item.autocomplete", item);
|
||||
if(item.is_item) { // these are items from the server
|
||||
li.append("<a>Add <strong>" + item.label + "</strong>");
|
||||
} else { // these are group inserts
|
||||
li.append("<a>I <strong>" + item.group.label + "</strong> the <strong>" + item.item.label + "</strong>");
|
||||
}
|
||||
return li.appendTo(ul);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Contact Neopets username form
|
||||
|
||||
*/
|
||||
|
||||
var contactEl = $('#closet-hangers-contact');
|
||||
var editContactLink = $('#edit-contact-link');
|
||||
var contactForm = contactEl.children('form');
|
||||
|
@ -216,10 +284,5 @@
|
|||
});
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
$('div.closet-hangers-group header').click(function () {
|
||||
$(this).parent().toggleClass('hidden');
|
||||
});
|
||||
})();
|
||||
|
||||
|
|
|
@ -611,7 +611,7 @@ body.closet_hangers-index #closet-hangers-items-search {
|
|||
float: right;
|
||||
}
|
||||
/* line 24, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index #closet-hangers-items-search input[type=search].loading {
|
||||
body.closet_hangers-index #closet-hangers-items-search input[name=q].loading {
|
||||
background-image: url(/images/loading.gif);
|
||||
background-position: 2px center;
|
||||
background-repeat: no-repeat;
|
||||
|
@ -717,7 +717,7 @@ body.closet_hangers-index header h3 {
|
|||
margin: 0;
|
||||
}
|
||||
/* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index header span {
|
||||
body.closet_hangers-index header span.show, body.closet_hangers-index header span.hide {
|
||||
color: #448844;
|
||||
display: none;
|
||||
font-size: 85%;
|
||||
|
@ -725,28 +725,28 @@ body.closet_hangers-index header span {
|
|||
right: 1em;
|
||||
bottom: 0;
|
||||
}
|
||||
/* line 121, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index header:hover span {
|
||||
/* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index header:hover span.show, body.closet_hangers-index header:hover span.hide {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 126, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index .closet-hangers-group {
|
||||
border-top: 1px solid #006600;
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
/* line 133, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 134, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover form {
|
||||
display: inline;
|
||||
}
|
||||
/* line 136, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 137, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 0;
|
||||
}
|
||||
/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 142, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input {
|
||||
/* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
|
||||
-moz-border-radius: 5px;
|
||||
|
@ -787,7 +787,7 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-han
|
|||
body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
|
||||
background-color: #999999;
|
||||
}
|
||||
/* line 144, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 145, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
|
||||
-moz-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
|
@ -797,65 +797,65 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
|
|||
top: 56px;
|
||||
padding: 0;
|
||||
}
|
||||
/* line 150, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 151, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
|
||||
display: none;
|
||||
}
|
||||
/* line 153, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 154, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
|
||||
padding: 2px;
|
||||
width: 2em;
|
||||
}
|
||||
/* line 157, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 158, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
|
||||
font-size: 85%;
|
||||
}
|
||||
/* line 163, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 164, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
|
||||
width: 2.5em;
|
||||
}
|
||||
/* line 166, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 167, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
|
||||
display: none;
|
||||
}
|
||||
/* line 169, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 170, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
|
||||
background: #eeffee;
|
||||
outline: 1px solid #006600;
|
||||
}
|
||||
/* line 173, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 174, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
|
||||
content: "…";
|
||||
}
|
||||
/* line 177, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 178, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers-contact form {
|
||||
display: none;
|
||||
}
|
||||
/* line 180, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 181, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers-contact #edit-contact-link, body.closet_hangers-index.current-user.js #closet-hangers-contact #cancel-contact-link {
|
||||
display: inline;
|
||||
}
|
||||
/* line 184, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 185, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
|
||||
display: block;
|
||||
}
|
||||
/* line 187, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 188, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link {
|
||||
display: none;
|
||||
}
|
||||
/* line 191, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 192, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js .closet-hangers-group header {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 194, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 195, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js .closet-hangers-group header .hide {
|
||||
display: block;
|
||||
}
|
||||
/* line 198, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 199, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .hide, body.closet_hangers-index.current-user.js .closet-hangers-group.hidden .closet-hangers-group-content {
|
||||
display: none;
|
||||
}
|
||||
/* line 201, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
/* line 202, ../../../app/stylesheets/closet_hangers/_index.sass */
|
||||
body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .show {
|
||||
display: block;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue