closet neopets username

app/controllers/users_controller.rb

@@ -6,9 +6,25 @@ class UsersController < ApplicationController
   end
 
   def update
-    @user.update_attributes params[:user]
+    success = @user.update_attributes params[:user]
+    respond_to do |format|
+      format.html {
+        if success
           flash[:success] = "Settings successfully saved"
           redirect_back! user_closet_hangers_path(@user)
+        else
+          flash[:alert] = "Error saving user settings: #{@user.errors.full_messages.to_sentence}"
+        end
+      }
+
+      format.json {
+        if success
+          render :json => true
+        else
+          render :json => {:errors => @user.errors.full_messages}, :status => :unprocessable_entity
+        end
+      }
+    end
   end
 
   protected

app/stylesheets/closet_hangers/_index.sass

@@ -52,6 +52,31 @@ body.closet_hangers-index
       &:after
         content: ":"
 
+  #edit-contact-link, #cancel-contact-link
+    cursor: pointer
+    display: none
+    text-decoration: underline
+
+    &:hover
+      text-decoration: none
+
+  #edit-contact-link
+    #contact-link-has-value
+      display: none
+
+    #contact-link-no-value
+      display: inline
+
+    &.has-value
+      #contact-link-has-value
+        display: inline
+
+      #contact-link-no-value
+        display: none
+
+  #cancel-contact-link
+    margin-left: 1em
+
   #closet-hangers
     clear: both
     text-align: center
@@ -75,6 +100,7 @@ body.closet_hangers-index
         display: none
 
   &.current-user
+    #closet-hangers
       .object:hover
         form
           display: inline
@@ -104,6 +130,7 @@ body.closet_hangers-index
             font-size: 85%
 
     &.js
+      #closet-hangers
         .object:hover .quantity
           input[type=number]
             width: 2.5em
@@ -118,3 +145,17 @@ body.closet_hangers-index
           .quantity span:after
             content: "…"
 
+      #closet-hangers-contact
+        form
+          display: none
+
+        #edit-contact-link, #cancel-contact-link
+          display: inline
+
+        &.editing
+          form
+            display: block
+
+          #edit-contact-link
+            display: none
+

app/views/closet_hangers/index.html.haml

@@ -1,5 +1,6 @@
 - unless public_perspective?
   - title 'Your Items'
+  - add_body_class 'current-user'
   - 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
@@ -14,10 +15,19 @@
       - if @user.neopets_username?
         = link_to "Neomail #{@user.neopets_username}", send_neomail_url(@user)
     - else
+      %span#edit-contact-link{:class => @user.neopets_username? ? 'has-value' : nil}
+        %span#contact-link-no-value
+          Add your Neopets username
+        %span#contact-link-has-value
+          Edit
+          = surround '"' do
+            Neomail
+            %span= @user.neopets_username
       = form_for @user do |f|
         = f.label :neopets_username
         = f.text_field :neopets_username
         = f.submit "Save"
+        %span#cancel-contact-link cancel
 
 #closet-hangers{:class => public_perspective? ? nil : 'current-user'}
   - if public_perspective?

public/javascripts/closet_hangers/index.js

@@ -1,7 +1,9 @@
 (function () {
-  var hangersElQuery = '#closet-hangers.current-user';
+  var body = $(document.body).addClass("js");
+  if(!body.hasClass("current-user")) return false;
+
+  var hangersElQuery = '#closet-hangers';
   var hangersEl = $(hangersElQuery);
-  hangersEl.addClass('js');
 
   $.fn.disableForms = function () {
     return this.data("formsDisabled", true).find("input").attr("disabled", "disabled").end();
@@ -29,7 +31,7 @@
     });
   }
 
-  function handleHangerError(xhr, action) {
+  function handleSaveError(xhr, action) {
     try {
       var data = $.parseJSON(xhr.responseText);
     } catch(e) {
@@ -76,7 +78,7 @@
           input.revertValue();
           span.text(input.val());
 
-          handleHangerError(xhr, "updating the quantity");
+          handleSaveError(xhr, "updating the quantity");
         }
       });
     }
@@ -147,7 +149,7 @@
           itemsSearchField.val("");
         },
         error: function (xhr) {
-          handleHangerError(xhr, "adding the item");
+          handleSaveError(xhr, "adding the item");
         }
       });
     },
@@ -168,5 +170,51 @@
 			.append( "<a>Add <strong>" + item.label + "</strong>" )
 			.appendTo( ul );
 	}
+
+	var contactEl = $('#closet-hangers-contact');
+	var editContactLink = $('#edit-contact-link');
+	var contactForm = contactEl.children('form');
+	var cancelContactLink = $('#cancel-contact-link');
+	var contactFormUsername = contactForm.children('input[type=text]');
+	var editContactLinkUsername = $('#contact-link-has-value span');
+
+	function closeContactForm() {
+	  contactEl.removeClass('editing');
+	}
+
+	editContactLink.click(function () {
+	  contactEl.addClass('editing');
+	  contactFormUsername.focus();
+	});
+
+	cancelContactLink.click(closeContactForm);
+
+	contactForm.submit(function (e) {
+	  var data = contactForm.serialize();
+	  contactForm.disableForms();
+	  $.ajax({
+	    url: contactForm.attr('action') + '.json',
+	    type: 'post',
+	    data: data,
+	    dataType: 'json',
+	    complete: function () {
+	      contactForm.enableForms();
+	    },
+	    success: function () {
+	      var newName = contactFormUsername.val();
+	      if(newName.length > 0) {
+	        editContactLink.addClass('has-value');
+	        editContactLinkUsername.text(newName);
+	      } else {
+	        editContactLink.removeClass('has-value');
+	      }
+	      closeContactForm();
+      },
+	    error: function (xhr) {
+	      handleSaveError(xhr, 'saving Neopets username');
+	    }
+	  });
+	  e.preventDefault();
+	});
 })();
 

public/stylesheets/compiled/screen.css

@@ -639,11 +639,41 @@ body.closet_hangers-index #closet-hangers-contact label:after {
   content: ":";
 }
 /* line 55, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link, body.closet_hangers-index #cancel-contact-link {
+  cursor: pointer;
+  display: none;
+  text-decoration: underline;
+}
+/* line 60, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link:hover, body.closet_hangers-index #cancel-contact-link:hover {
+  text-decoration: none;
+}
+/* line 64, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link #contact-link-has-value {
+  display: none;
+}
+/* line 67, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link #contact-link-no-value {
+  display: inline;
+}
+/* line 71, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link.has-value #contact-link-has-value {
+  display: inline;
+}
+/* line 74, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #edit-contact-link.has-value #contact-link-no-value {
+  display: none;
+}
+/* line 77, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index #cancel-contact-link {
+  margin-left: 1em;
+}
+/* line 80, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers {
   clear: both;
   text-align: center;
 }
-/* line 60, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 85, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers .object .quantity {
   -moz-opacity: 0.75;
   -webkit-opacity: 0.75;
@@ -657,27 +687,27 @@ body.closet_hangers-index #closet-hangers .object .quantity {
   text-align: left;
   top: 60px;
 }
-/* line 70, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 95, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers .object .quantity span, body.closet_hangers-index #closet-hangers .object .quantity input[type=number] {
   font-size: 16px;
   font-weight: bold;
 }
-/* line 74, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 99, ../../../app/stylesheets/closet_hangers/_index.sass */
 body.closet_hangers-index #closet-hangers .object form {
   display: none;
 }
-/* line 79, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 105, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover form {
+body.closet_hangers-index.current-user #closet-hangers .object:hover form {
   display: inline;
 }
-/* line 82, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 108, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy {
   position: absolute;
   right: 18px;
   top: 0;
 }
-/* line 87, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .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 */
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -702,23 +732,23 @@ body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-han
   font-size: 80%;
 }
 /* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:hover {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
   background-color: #005300;
 }
 /* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:hover {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover {
   color: white;
 }
 /* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:active {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:active {
   top: 1px;
 }
 /* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */
-body.closet_hangers-index #closet-hangers.current-user .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;
 }
-/* line 90, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 116, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity {
   -moz-opacity: 1;
   -webkit-opacity: 1;
   -o-opacity: 1;
@@ -727,36 +757,52 @@ body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity {
   top: 56px;
   padding: 0;
 }
-/* line 96, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity span {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span {
   display: none;
 }
-/* line 99, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity input[type=number] {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] {
   padding: 2px;
   width: 2em;
 }
-/* line 103, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 129, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity input[type=submit] {
+body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] {
   font-size: 85%;
 }
-/* line 108, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 135, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user.js .object:hover .quantity input[type=number] {
+body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] {
   width: 2.5em;
 }
-/* line 111, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 138, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user.js .object:hover .quantity input[type=submit] {
+body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] {
   display: none;
 }
-/* line 114, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user.js .object.loading {
+body.closet_hangers-index.current-user.js #closet-hangers .object.loading {
   background: #eeffee;
   outline: 1px solid #006600;
 }
-/* line 118, ../../../app/stylesheets/closet_hangers/_index.sass */
+/* line 145, ../../../app/stylesheets/closet_hangers/_index.sass */
-body.closet_hangers-index #closet-hangers.current-user.js .object.loading .quantity span:after {
+body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after {
   content: "…";
 }
+/* line 149, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index.current-user.js #closet-hangers-contact form {
+  display: none;
+}
+/* line 152, ../../../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 156, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form {
+  display: block;
+}
+/* line 159, ../../../app/stylesheets/closet_hangers/_index.sass */
+body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link {
+  display: none;
+}
 
 /* line 3, ../../../app/stylesheets/closet_pages/_new.sass */
 body.closet_pages-new #title, body.closet_pages-create #title {