Reference a Coffeescript event in a separate JS file

Question

Basically I already have a piece of coffeescript that animates a drop down menu:

menu_in  = -> $('.cart_pulldown').slideDown(250)
menu_out = -> $('.cart_pulldown').slideU(150)

$('#store_menu').hoverIntent(over: menu_in, out: menu_out, timeout: 150)

And I want to tie this to the add-to-cart-button action so that the menu slideDown/slideUp sequence happens when a user adds to their cart, heres that js code:

function set_product_page_variant_state() {
var varel = $('div#product-social-links');
var cart_link = $("#add-to-cart-button");
if(varel && cart_link) {
  if(variant_id = varel.attr('data-variant-id')) {
    $.post('/flash_sales/get_state.json', {'variant_ids[]': [variant_id]}, function(data) {
      var state = data[variant_id];
      if(state) {
        if(state=='on_hold') { 
          cart_link.text("On Hold").show();
        } else if(state=='in_my_cart') {
          // TODO: this is funking ugly and slow to load, this whole thing needs a good old fashion refactorin'.
          cart_link.text("In My Cart")
            .hide()
            .after("<a href='/cart' class='action-button add_to_cart' id='#add-to-cart-button'>In My Cart</a>")
            .remove()
        } else if(state=='available') {
          cart_link.removeAttr('disabled').show();
        } else if(state=='sold_out') {
          cart_link.text("Sold Out").show()
        } else {
        // something went wrong, enable the button
          cart_link.removeAttr('disabled').show()
        }
      } else { cart_link.removeAttr('disabled').show() }
    }); 
  } else { cart_link.removeAttr('disabled').show() }
 }
}

and just to be thorough, here is the associated html:

 <div id="cart-form">
                   <%= form_for :order, :url => spree.populate_orders_url do |f| %>
                     <div id="inside-product-cart-form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                       <% if @product.price %>
                         <div>
                           <div class="add-to-cart">
                             <%= hidden_field_tag "variants[#{@variant.id}]", 1 %>
                             <%= button_tag "Add to Cart", :class => "hidden action-button add_to_cart", :type => :submit, :disabled => true, :id => "add-to-cart-button" %>
                           </div>
                         </div>
                       <% end %>
                     </div>
                   <% end %>
                 </div>

Any advice is greatly appreciated, thanks in advance!

BenjaminCorey · Accepted Answer · 2013-07-26 23:22:38Z

1

You can use jQuery delegate events in your Coffeescript file. For example, to show the menu for 500ms before triggering menu_out:

$(document).on 'click', '#add-to-cart-button', (event) ->
  menu_in()
  setTimeout 500, menu_out

edited Jul 26, 2013 at 23:22

answered Jul 25, 2013 at 23:52

BenjaminCorey

4112 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrtriangle Over a year ago

by trigger, do I need to do something besides calling: menu_in menu_out

BenjaminCorey Over a year ago

You'll need to setTimeout for the second call. Updated the code above to reflect this.

tom · Accepted Answer · 2013-07-25 23:41:38Z

0

Since CoffeeScript puts your code in a closure you need to manually attach global variables to the window, like window.menu_in = -> ...

answered Jul 25, 2013 at 23:41

tom

7188 silver badges15 bronze badges

1 Comment

mrtriangle Over a year ago

I am not sure I understand what you mean, could you specify a little more?

Collectives™ on Stack Overflow

Reference a Coffeescript event in a separate JS file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related