CODEWITHSUNDEEP
ruby-on-railsrubyhtmlcoffeescript
reknirt
reknirt

Reputation: 2254

Embedding a ruby object into coffeescript

I'm going to try and simplify a previous question: I have a products page at http://pants.telegraphbranding.com/t/women/long-sleeve. When you hover over a product's list of thumbnails the main image should change for that product. But right now, every product on the page is trying to change. To get a unique id of for product I'm using:

<div id="main-image" data-productid="<%= product.id %>">
  <%= link_to large_image(product, :itemprop => "image", :class => "product-image"), product, :itemprop => 'url' %>
</div><!-- main-image-->

How do I incorporate the data-productid="<%= product.id %> into my coffeescript file?

add_image_handlers = ->

thumbnails = ($ '#product-images ul.thumbnails')
($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
thumbnails.find('li').eq(0).addClass 'selected'
thumbnails.find('a').on 'click', (event) ->
  ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
  ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
  ($ this).mouseout ->
    thumbnails.find('li').removeClass 'selected'
    ($ event.currentTarget).parent('li').addClass 'selected'
false

thumbnails.find('li').on 'mouseenter', (event) ->
  ($ '#main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

thumbnails.find('li').on 'mouseleave', (event) ->
  ($ '#main-image img').attr 'src', ($ '#main-image').data('selectedThumb')

show_variant_images = (variant_id) ->
  ($ 'li.vtmb').hide()
  ($ 'li.vtmb-' + variant_id).show()
  currentThumb = ($ '#' + ($ '#main-image').data('selectedThumbId'))
  if not currentThumb.hasClass('vtmb-' + variant_id)
    thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
    newImg = thumb.find('a').attr('href')
    ($ 'ul.thumbnails li').removeClass 'selected'
    thumb.addClass 'selected'
    ($ '#main-image img').attr 'src', newImg
    ($ '#main-image').data 'selectedThumb', newImg
    ($ '#main-image').data 'selectedThumbId', thumb.attr('id')

update_variant_price = (variant) ->
  variant_price = variant.data('price')
  ($ '.price.selling').text(variant_price) if variant_price

$ ->
 add_image_handlers()
 show_variant_images ($ '#product-variants input[type="radio"]').eq(0).attr('value') if 
($ '#product-variants input[type="radio"]').length > 0
($ '#product-variants input[type="radio"]').click (event) ->
show_variant_images @value
update_variant_price ($ this)

Obviously I would like the coffeescript to pull out the unique id's of each main image so that the image change only happens for that specific image.

I appreciate it. Sorry for the length.

Upvotes: 0

Views: 230

Answers (1)

kirushik
kirushik

Reputation: 1314

At first, one should enumerate all the elements with data-productid properties.

For this very page var elements = $(".main-image") should be enough. (Please keep in mind the class selector here. Original page contained id selectors, and caused roubles and havoc. Fixed for now.)

Then one should iterate over achieved values: $.each(elements, function(index, element){...}) should do the trick.

And at last it is possible to retrieve data-productid values from elements (in $.each loop, I mean): $(element).data("productid") will return required values. (Please note $(element) part here. element.data(...) won't work because we enumerated jQuery accessors, not actual elements — and they need to be dereferenced before use.)

Combine that into something like $.each($(".main-image"), function(index,elem){console.log($(elem).data("productid"))}) (tested in Chrome DevTools against actual page, seemed to work) — voilà, problem solved!

Upvotes: 1

Related Questions