Action Specific Javascript for Rails 5

__readme.md

Action Specific Javascript for Rails 5

This is a simple example of action specific javascript. It also allows you to pass data to JS from inside rails controllers. Works with Turbolinks 5 (not required).

Installation

Add the files below to your project, then insert <%= insert_javascript_hook %> somewhere in the footer of your layout.

You'll need these gems:

gem 'jquery-rails'
gem 'jquery-turbolinks' # Only if you use Turbolinks
gem 'turbolinks', '~> 5.0.0' # Only if you use Turbolinks

Example

# Somewhere in your JS stack
Javascript.controller 'Dashboard', index: ->
  console.log this.params.test.some_value

# You can pass values to JS from Rails
class DashboardController < ApplicationController
  def index
    js test: { some_value: 'Hello from Rails!' }
  end
end

_javascript.html.erb

<!-- app/views/layouts/_javascript.html.erb -->
<script type="text/javascript">
    Javascript.rails = JSON.parse("<%= json %>");
    Javascript.start();
</script>

application.coffee

# app/javascripts/application.coffee

# jQuery
#= require jquery
#= require jquery_ujs

# Turbolinks, optional
#= require jquery.turbolinks
#= require turbolinks
#= require turbolinks-compatibility

# You can now include your Javascript controllers.

javascript_controller.coffee

# app/javascripts/application.coffee.rb

class JavascriptController
  controllers: {}
  rails: {}

  controller: (controller, actions) =>
    @controllers[controller] = { } unless @controllers[controller]
    for action, callback of actions
      @controllers[controller][action] = callback

  start: ->
    return unless @rails.controller && @rails.action
    method = "#{@rails.controller}##{@rails.action}"
    callback = @controllers[@rails.controller]?[@rails.action]
    if callback
      callback.call(@rails)
      console.log "Loading Javascript for #{method} with these params:", @rails.params
    else
      console.log "No Javascript for #{method}"

@Javascript = new JavascriptController()

javascript_helper.rb

# app/helpers/javascript_helper.rb

module JavascriptHelper
  def js(objects = {})
    objects.each do |key, value|
      js_object[:params][key] = value
    end
  end

  def insert_javascript_hook
    render 'layouts/javascript', json: escape_javascript(js_object.to_json.html_safe)
  end

  private

  def js_object
    params = request.params
    @js_object ||= {
      controller: params[:controller].camelize,
      action: params[:action],
      params: {}
    }
  end
end

turbolinks-compatibility.coffee

# app/javascripts/turbolinks-compatibility.coffee

# If you are using Turbolinks and the jquery-turbolinks gem, this file fixes that.
# https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

{defer, dispatch} = Turbolinks

handleEvent = (eventName, handler) ->
  document.addEventListener(eventName, handler, false)

translateEvent = ({from, to}) ->
  handler = (event) ->
    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
    event.preventDefault() if event.defaultPrevented
  handleEvent(from, handler)

translateEvent from: "turbolinks:click", to: "page:before-change"
translateEvent from: "turbolinks:request-start", to: "page:fetch"
translateEvent from: "turbolinks:request-end", to: "page:receive"
translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
translateEvent from: "turbolinks:render", to: "page:update"
translateEvent from: "turbolinks:load", to: "page:change"
translateEvent from: "turbolinks:load", to: "page:update"

loaded = false
handleEvent "DOMContentLoaded", ->
  defer ->
    loaded = true
handleEvent "turbolinks:load", ->
  if loaded
    dispatch("page:load")

jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
  if jQuery.trim(xhr.responseText).length > 0
    dispatch("page:update")