Coffeescript - How to convert a javascript into coffeescript in ruby on rails?

Question

I have a button in my views in test.html.erb as follows

<button  id="Todo_full" onclick="showFullscreen(this);">Full size</button>

and its javascript is as follows:

    function showFullscreen(event)
    {
    var elem = document.getElementById('card_' + event.id);

        if (elem.requestFullscreen) {
        return elem.requestFullscreen();
        }
        else if (elem.mozRequestFullScreen) 
        {

        /* Firefox */
        return elem.mozRequestFullScreen();
        }
    }

When I keep the javascript code at the below of the test.html.erb file it works fine. And when I convert this code into coffeescript through http://js2.coffee/ and keep the code in app/assets/javascript/test.coffee which is as follows:

showFullscreen = (event) ->
  elem = document.getElementById('card_' + event.id)
  if elem.requestFullscreen
    return elem.requestFullscreen()
  else if elem.mozRequestFullScreen

    ### Firefox ###

    return elem.mozRequestFullScreen()
  return

It shows an error in console

Uncaught ReferenceError: showFullscreen is not defined
    at HTMLButtonElement.onclick ((index):384)

Even when I use window.onload = -> at the top of coffeescript's code I get the same error in console.

Thank you

Those code snippets aren't quite equivalent. The JavaScript one is defining a global showFullscreen function whereas the CoffeeScript one is creating a local showFullscreen function inside a scope wrapper. Perhaps you want to say @showFullScreen = (event) -> ... or window.showFullScreen = (event) -> .... Or better, don't use an onclick attribute at all, create local functions and bind them to elements. — mu is too short
– mu is too short, Commented Dec 4, 2018 at 7:50

calebkm · Accepted Answer · 2019-11-07 16:47:48Z

2

The issue you're running into is the different scoping between JS and CoffeeScript. To get your code working, you need to scope your function globally on window or the CoffeeScript shorthand @.

From the CoffeeScript docs:

If you’d like to create top-level variables for other scripts to use, attach them as properties on window.

Which for your function would look like:

# Using window
window.showFullscreen = (event) ->
  elem = document.getElementById('card_' + event.id)
  ...

# Or using @
@showFullscreen = (event) ->
  elem = document.getElementById('card_' + event.id)
  ...

The CoffeeScript @ is shorthand for this in JavaScript. So, in your example, because you're defining the function at the top level window scope window == @. Keep in mind that within your functions the scope will be different and window != @, and instead @ will be scoped to whatever this is inside of your function. This blog post has a nice explanation:

Speaking of this, CoffeeScript has a shortcut for it, the @ symbol. It's easy to write this off as meaningless syntactical sugar, but it is useful. First, constructor parameters prefixed with @ are converted into properties:
 # CoffeeScript
 class User
   constructor: (@id) ->
 // JavaScript
 function User(id) {
   this.id = id;
 }
Beyond this though, it's a nice way to define class method:
 # CoffeeScript
 class User
   constructor: (@id) ->

    @findById: (id) =>
    ...
 // JavaScript
 function User(id) {
   this.id = id;
  }
 User.findById = function() {};
Neither @ nor the fat arrow => mean that you don't have to worry about the current meaning of this (or its alias @). They aren't silver bullets, which isn't to say that they don't add value.

answered Nov 7, 2019 at 16:47

calebkm

1,0436 silver badges17 bronze badges

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

3 Comments

shashi verma Over a year ago

Thanks for the reply bro, but I quit working on ror technology now.

calebkm Over a year ago

Awww bummer @shashiverma! RoR is still my fav :-) If you think this answer was helpful anyway, could you mark is at the correct answer for future viewers? Out of curiosity, what tech are you working with now?

shashi verma Over a year ago

sure why not, I have created an admin template in ror but I was always confused with pipelines, CoffeeScript, in which sequence we should import (or require) libraries. Now I am working on a javascript framework vuejs.

Collectives™ on Stack Overflow

Coffeescript - How to convert a javascript into coffeescript in ruby on rails?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related