From 6203caf186819b5d433fda5c78c0d2c047bbe1fb Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 25 Jul 2011 14:06:07 -0400 Subject: [PATCH] Your Items autocompleter can add to both owned and wanted --- app/stylesheets/closet_hangers/_index.sass | 11 +- app/views/closet_hangers/index.html.haml | 7 +- public/javascripts/closet_hangers/index.js | 141 +++++++++++++++------ public/stylesheets/compiled/screen.css | 48 +++---- 4 files changed, 137 insertions(+), 70 deletions(-) diff --git a/app/stylesheets/closet_hangers/_index.sass b/app/stylesheets/closet_hangers/_index.sass index c60a9e18..5a4ab6d1 100644 --- a/app/stylesheets/closet_hangers/_index.sass +++ b/app/stylesheets/closet_hangers/_index.sass @@ -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 diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml index 1bb23d5f..f229cc2e 100644 --- a/app/views/closet_hangers/index.html.haml +++ b/app/views/closet_hangers/index.html.haml @@ -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 diff --git a/public/javascripts/closet_hangers/index.js b/public/javascripts/closet_hangers/index.js index c6d50b38..fc7acd23 100644 --- a/public/javascripts/closet_hangers/index.js +++ b/public/javascripts/closet_hangers/index.js @@ -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 $( "
  • " ) - .data( "item.autocomplete", item ) - .append( "Add " + item.label + "" ) - .appendTo( ul ); + }); + + var autocompleter = itemsSearchField.data("autocomplete"); + + autocompleter._renderItem = function( ul, item ) { + var li = $("
  • ").data("item.autocomplete", item); + if(item.is_item) { // these are items from the server + li.append("    Add " + item.label + ""); + } else { // these are group inserts + li.append("I " + item.group.label + " the " + item.item.label + ""); + } + 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'); - }); })(); diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 78eb5185..73b6ea0e 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -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; }