From 2876de2db0443f3458124b5a551ba51d2b157395 Mon Sep 17 00:00:00 2001 From: Matchu Date: Sat, 22 Jun 2013 15:27:00 -0700 Subject: [PATCH] Move closet-hangers-update form from partial to JS We lose no-JS support, which I kinda miss, but caching is gonna be more important down the line. Delete form moves next, then we cache. CSRF token changes: it looks like, by setting a data attribute in AJAX, I was overwriting the CSRF token. I don't remember it working that way, but now we use beforeSend to add the X-CSRF-Token header instead, which is nicer, anyway. The issue might've been something else, but this worked :/ The CSS was also not showing the loading ellipsis properly. I think that's a dev-only issue in how live assets are being served versus static assets, but may as well add UTF-8 charset directives everywhere, anyway. --- app/assets/javascripts/ajax_auth.js | 13 ++++--- .../javascripts/closet_hangers/index.js | 39 +++++++++++++++++-- app/assets/stylesheets/application.css.sass | 4 +- .../closet_hangers/_closet_hanger.html.haml | 10 +---- app/views/closet_hangers/index.html.haml | 39 ++++++++++++------- app/views/layouts/application.html.haml | 1 + 6 files changed, 73 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/ajax_auth.js b/app/assets/javascripts/ajax_auth.js index 50b7c062..d77448d7 100644 --- a/app/assets/javascripts/ajax_auth.js +++ b/app/assets/javascripts/ajax_auth.js @@ -1,9 +1,10 @@ (function () { - var csrf_param = $('meta[name=csrf-param]').attr('content'), - csrf_token = $('meta[name=csrf-token]').attr('content'), - data = {}; + var CSRFProtection = function (xhr) { + var token = $('meta[name="csrf-token"]').attr('content'); + if(token) xhr.setRequestHeader('X-CSRF-Token', token); + }; - data[csrf_param] = csrf_token; - - $.ajaxSetup({data: data}); + $.ajaxSetup({ + beforeSend: CSRFProtection + }); })(); diff --git a/app/assets/javascripts/closet_hangers/index.js b/app/assets/javascripts/closet_hangers/index.js index dc8a489e..8fd9b3b1 100644 --- a/app/assets/javascripts/closet_hangers/index.js +++ b/app/assets/javascripts/closet_hangers/index.js @@ -64,6 +64,42 @@ */ + var body = $(document.body).addClass("js"); + if(!body.hasClass("current-user")) return false; + + // When we get hangers HTML, add the controls. We do this in JS rather than + // in the HTML for caching, since otherwise the requests can take forever. + // If there were another way to add hangers, then we'd have to worry about + // that, but, right now, the only way to create a new hanger from this page + // is through the autocompleter, which reinitializes anyway. Geez, this thing + // is begging for a rewrite, but today we're here for performance. + $("#closet-hanger-update-tmpl").template("updateFormTmpl"); + onHangersInit(function () { + // Super-lame hack to get the user ID from where it already is :/ + var currentUserId = itemsSearchForm.data("current-user-id"); + $("#closet-hangers div.closet-hangers-group").each(function () { + var groupEl = $(this); + var owned = groupEl.data("owned"); + groupEl.find("div.closet-list").each(function () { + var listEl = $(this); + var listId = listEl.data("id"); + listEl.find("div.object").each(function () { + var hangerEl = $(this); + var hangerId = hangerEl.data("id"); + var quantityEl = hangerEl.find("div.quantity"); + var quantity = hangerEl.data("quantity"); + $.tmpl("updateFormTmpl", { + quantity: quantity, + list_id: listId, + owned: owned, + user_id: currentUserId, + closet_hanger_id: hangerId + }).appendTo(quantityEl); + }); + }); + }); + }); + $.fn.liveDraggable = function (opts) { this.live("mouseover", function() { if (!$(this).data("init")) { @@ -72,9 +108,6 @@ }); }; - var body = $(document.body).addClass("js"); - if(!body.hasClass("current-user")) return false; - $.fn.disableForms = function () { return this.data("formsDisabled", true).find("input").attr("disabled", "disabled").end(); } diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 5590424c..20399e0a 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -1,3 +1,5 @@ +@charset "UTF-8" + @import compass @import partials/clean/constants @@ -25,4 +27,4 @@ @import static/donate @import static/image_mode @import static/terms -@import users/top_contributors \ No newline at end of file +@import users/top_contributors diff --git a/app/views/closet_hangers/_closet_hanger.html.haml b/app/views/closet_hangers/_closet_hanger.html.haml index 8ed2079a..a7a66de8 100644 --- a/app/views/closet_hangers/_closet_hanger.html.haml +++ b/app/views/closet_hangers/_closet_hanger.html.haml @@ -1,18 +1,10 @@ - show_controls ||= false # we could do user check here, but may as well do it once -%div{'class' => closet_hanger_partial_class(closet_hanger), 'data-item-id' => closet_hanger.item_id, 'data-quantity' => closet_hanger.quantity} +%div{'class' => closet_hanger_partial_class(closet_hanger), 'data-item-id' => closet_hanger.item_id, 'data-quantity' => closet_hanger.quantity, 'data-id' => closet_hanger.id} = render :partial => 'items/item_link', :locals => {:item => closet_hanger.item} .quantity{:class => "quantity-#{closet_hanger.quantity}"} %span= closet_hanger.quantity - - if show_controls - = form_for [current_user, closet_hanger], :html => {:class => 'closet-hanger-update'} do |f| - = return_to_field_tag - = f.hidden_field :list_id - = f.hidden_field :owned - = f.number_field :quantity, :min => 0, :required => true - = f.submit t('.submit') - if show_controls = form_tag [current_user, closet_hanger], :method => :delete, :class => 'closet-hanger-destroy' do = return_to_field_tag = hidden_field_tag 'closet_hanger[owned]', closet_hanger.owned = submit_tag t('.delete') - diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml index 69cc03b6..337a5fd9 100644 --- a/app/views/closet_hangers/index.html.haml +++ b/app/views/closet_hangers/index.html.haml @@ -73,23 +73,34 @@ = render_unlisted_closet_hangers(owned) %span.empty-list= t '.unlisted.empty' -- localized_cache :action_suffix => 'autocomplete_tmpls' do - %script#autocomplete-item-tmpl{:type => 'text/x-jquery-tmpl'} - %a - = t '.autocomplete.add_item_html', :item_name => '${item_name}' +- if user_signed_in? + - localized_cache action_suffix: 'tmpls' do + %script#autocomplete-item-tmpl{type: 'text/x-jquery-tmpl'} + %a + = t '.autocomplete.add_item_html', item_name: '${item_name}' - %script#autocomplete-add-to-list-tmpl{:type => 'text/x-jquery-tmpl'} - %a - = t '.autocomplete.add_to_list_html', :list_name => '${list_name}' + %script#autocomplete-add-to-list-tmpl{type: 'text/x-jquery-tmpl'} + %a + = t '.autocomplete.add_to_list_html', list_name: '${list_name}' - %script#autocomplete-add-to-group-tmpl{:type => 'text/x-jquery-tmpl'} - %a - = t '.autocomplete.add_to_group_html', :group_name => '${group_name}' + %script#autocomplete-add-to-group-tmpl{type: 'text/x-jquery-tmpl'} + %a + = t '.autocomplete.add_to_group_html', group_name: '${group_name}' - %script#autocomplete-already-in-collection-tmpl{:type => 'text/x-jquery-tmpl'} - %span - = t '.autocomplete.already_in_collection_html', - :collection_name => '${collection_name}' + %script#autocomplete-already-in-collection-tmpl{type: 'text/x-jquery-tmpl'} + %span + = t '.autocomplete.already_in_collection_html', + collection_name: '${collection_name}' + + %script#closet-hanger-update-tmpl{type: 'text/x-jquery-tmpl'} + -# Gotta do this weird subbing in the path, since the braces will be + -# escaped if they themselves are inserted. Probably deserves a more + -# legit method, especially if we ever need it again. + = form_tag user_closet_hanger_path(user_id: '$0', id: '$1').sub('$0', '${user_id}').sub('$1', '${closet_hanger_id}'), method: :put, authenticity_token: false, class: 'closet-hanger-update' do + = hidden_field_tag 'closet_hanger[list_id]', '${list_id}' + = hidden_field_tag 'closet_hanger[owned]', '${owned}' + = number_field_tag 'closet_hanger[quantity]', '${quantity}', + min: 0, required: true - content_for :stylesheets do = stylesheet_link_tag 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/south-street/jquery-ui.css' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 13003b4b..6d59a72a 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -1,6 +1,7 @@ !!! 5 %html %head + %meta{charset: 'utf-8'} %title - if content_for? :title = yield :title