PhoenixGon

Your Phoenix variables in your JavaScript.

Installation

The package can be installed by adding phoenix_gon to your list of dependencies in mix.exs:

def deps do
  [{:phoenix_gon, "~> 0.4.0"}]
end

Usage

Three steps configuration:

1. You need add plug to lib/project/router.ex after plug :fetch_session.

defmodule Project.Router do
  # ...

  pipeline :browser do
    # ...

    plug :fetch_session
    plug PhoenixGon.Pipeline

    # ...
  end

  # ...
end

Plug accepts options:

- `:env` - this option for hard overloading Mix.env.
- `:namespace` - namespace for javascript object in global window space.
- `:assets` - map for keeping permanent variables in javascript.
- `:camel_case` - if set to true, all assets names will be converted to camel case format on render.

2. Add possibility to use view helper by adding use PhoenixGon.View in templates in web/views/layout_view.ex file:

defmodule Project.LayoutView do
  # ...

  import PhoenixGon.View

  # ...
end

3. Add helper render_gon_script to you layout in /web/templates/layout/app.html.eex before main javascript file:

  # ...

  <%= render_gon_script(@conn) %>
  <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

Now you can read phoenix variables in browser console and javascript code.

Phoenix controllers

For using gon in controllers just add:

defmodule Project.Controller do
  # ...

  import PhoenixGon.Controller

  # ...
end

Controller methods:

All controller variables are kept in assets map.

• put_gon - Put variable to assets.
• update_gon - Update variable in assets.
• drop_gon - Drop variable in assets.
• get_gon - Get variable from assets.

Example:

def index(conn, _params) do
  conn = put_gon(conn, controller: variable)
  render conn, "index.html"
end

def index(conn, _params) do
  conn = put_gon(conn, controller: variable)
  redirect conn, to: "/somewhere.html"
end

JavaScript

Gon object is kept in window.

Browser

Now you can access to you variables in console:

// browser console

Gon.assets()

// Object {controller: "variable"}

JavaScript assets

// Somewhere in javascript modules

window.Gon.assets()

JavaScript methods:

Phoenix env methods:

• getEnv() - Returns current phoenix env.
• isDev() - Returns boolean if development env.
• isProd() - Returns boolean if production env.
• isCustomEnv(env) - Return bollean if custom env.

Assets variables methods:

• assets() - Returns all variables setting in config and controllers.
• getAsset(key) - Returns variable by key.

Contributors

Special thanks to Andrey Soshchenko @getux.

License

The library is available as open source under the terms of the MIT License.