dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Your Items autocompleter can add to both owned and wanted

Browse source
This commit is contained in:
Emi Matchu 2011-07-25 14:06:07 -04:00
parent 7476314953
commit 6203caf186
4 changed files with 137 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/stylesheets/closet_hangers/_index.sass
View file

@ -20,7 +20,7 @@ body.closet_hangers-index
#closet-hangers-items-search #closet-hangers-items-search
float: right float: right
input[type=search] input[name=q]
&.loading &.loading
background: background:
image: url(/images/loading.gif) image: url(/images/loading.gif)
@ -110,7 +110,7 @@ body.closet_hangers-index
font-size: 250% font-size: 250%
margin: 0 margin: 0
span span.show, span.hide
color: $soft-text-color color: $soft-text-color
display: none display: none
font-size: 85% font-size: 85%
@ -118,9 +118,10 @@ body.closet_hangers-index
right: 1em right: 1em
bottom: 0 bottom: 0
&:hover span &:hover
color: inherit span.show, span.hide
text-decoration: underline color: inherit
text-decoration: underline
.closet-hangers-group .closet-hangers-group
border-top: 1px solid $module-border-color border-top: 1px solid $module-border-color

7
app/views/closet_hangers/index.html.haml
View file

@ -4,7 +4,7 @@
- content_for :before_flashes do - content_for :before_flashes do
= link_to "Import closet from Neopets", new_closet_page_path, :id => 'import-link' = 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 = 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 = submit_tag 'Search', :name => nil
- else - else
- title "#{@user.name}'s Items" - title "#{@user.name}'s Items"
@ -43,7 +43,10 @@
- [true, false].each do |owned| - [true, false].each do |owned|
.closet-hangers-group{'data-owned' => owned.to_s} .closet-hangers-group{'data-owned' => owned.to_s}
%header %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.show click to show
%span.hide click to hide %span.hide click to hide
.closet-hangers-group-content .closet-hangers-group-content

141
public/javascripts/closet_hangers/index.js
View file

@ -1,4 +1,28 @@
(function () { (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"); var body = $(document.body).addClass("js");
if(!body.hasClass("current-user")) return false; if(!body.hasClass("current-user")) return false;
@ -124,53 +148,97 @@
}); });
}); });
/*
Search, autocomplete
*/
$('input, textarea').placeholder(); $('input, textarea').placeholder();
var itemsSearchForm = $("#closet-hangers-items-search[data-current-user-id]"); 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({ itemsSearchField.autocomplete({
select: function (e, ui) { select: function (e, ui) {
var item = ui.item; if(ui.item.is_item) {
itemsSearchField.addClass("loading"); // 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({ itemsSearchField.addClass("loading");
url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
type: "post", var closetHanger = {
data: {closet_hanger: {quantity: 1}, return_to: window.location.pathname + window.location.search}, quantity: 1,
complete: function () { owned: group.owned
itemsSearchField.removeClass("loading"); };
},
success: function (html) { $.ajax({
var doc = $(html); url: "/user/" + itemsSearchForm.data("current-user-id") + "/items/" + item.id + "/closet_hanger",
hangersEl.html( doc.find('#closet-hangers').html() ); type: "post",
quantityInputs().storeValue(); // since all the quantity inputs are new, gotta store initial value again data: {closet_hanger: closetHanger, return_to: window.location.pathname + window.location.search},
doc.find('.flash').hide().insertBefore(hangersEl).show(500).delay(5000).hide(250); complete: function () {
itemsSearchField.val(""); itemsSearchField.removeClass("loading");
}, },
error: function (xhr) { success: function (html) {
handleSaveError(xhr, "adding the item"); 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) { source: function (input, callback) {
$.getJSON("/items.json?q=" + input.term, function (data) { if(typeof input.term == 'string') { // user-typed query
var output = []; $.getJSON("/items.json?q=" + input.term, function (data) {
var items = data.items; var output = [];
for(var i in items) { var items = data.items;
items[i].label = items[i].name; for(var i in items) {
output[output.length] = items[i]; 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 ) var autocompleter = itemsSearchField.data("autocomplete");
.append( "<a>Add <strong>" + item.label + "</strong>" )
.appendTo( ul ); 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 contactEl = $('#closet-hangers-contact');
var editContactLink = $('#edit-contact-link'); var editContactLink = $('#edit-contact-link');
var contactForm = contactEl.children('form'); var contactForm = contactEl.children('form');
@ -216,10 +284,5 @@
}); });
e.preventDefault(); e.preventDefault();
}); });
$('div.closet-hangers-group header').click(function () {
$(this).parent().toggleClass('hidden');
});
})(); })();

48
public/stylesheets/compiled/screen.css
View file

@ -611,7 +611,7 @@ body.closet_hangers-index #closet-hangers-items-search {
float: right; float: right;
} }
/* line 24, ../../../app/stylesheets/closet_hangers/_index.sass */ /* 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-image: url(/images/loading.gif);
background-position: 2px center; background-position: 2px center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -717,7 +717,7 @@ body.closet_hangers-index header h3 {
margin: 0; margin: 0;
} }
/* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */ /* 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; color: #448844;
display: none; display: none;
font-size: 85%; font-size: 85%;
@ -725,28 +725,28 @@ body.closet_hangers-index header span {
right: 1em; right: 1em;
bottom: 0; bottom: 0;
} }
/* line 121, ../../../app/stylesheets/closet_hangers/_index.sass */ /* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */
body.closet_hangers-index header:hover span { body.closet_hangers-index header:hover span.show, body.closet_hangers-index header:hover span.hide {
color: inherit; color: inherit;
text-decoration: underline; 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 { body.closet_hangers-index .closet-hangers-group {
border-top: 1px solid #006600; border-top: 1px solid #006600;
margin-bottom: 2em; margin-bottom: 2em;
padding-bottom: 1em; 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 { body.closet_hangers-index.current-user #closet-hangers .object:hover form {
display: inline; 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 { body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
position: absolute; position: absolute;
right: 18px; right: 18px;
top: 0; 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 { 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 */ /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */
-moz-border-radius: 5px; -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 { body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
background-color: #999999; 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 { body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
-moz-opacity: 1; -moz-opacity: 1;
-webkit-opacity: 1; -webkit-opacity: 1;
@ -797,65 +797,65 @@ body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
top: 56px; top: 56px;
padding: 0; 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 { body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
display: none; 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] { body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
padding: 2px; padding: 2px;
width: 2em; 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] { body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
font-size: 85%; 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] { body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
width: 2.5em; 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] { body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
display: none; 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 { body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
background: #eeffee; background: #eeffee;
outline: 1px solid #006600; 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 { body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
content: "…"; 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 { body.closet_hangers-index.current-user.js #closet-hangers-contact form {
display: none; 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 { 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; 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 { body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
display: block; 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 { body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link {
display: none; 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 { body.closet_hangers-index.current-user.js .closet-hangers-group header {
cursor: pointer; 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 { body.closet_hangers-index.current-user.js .closet-hangers-group header .hide {
display: block; 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 { 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; 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 { body.closet_hangers-index.current-user.js .closet-hangers-group.hidden header .show {
display: block; display: block;
} }