Skip to content
🔥 Phoenix variables in your JavaScript without headache.
Elixir
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add camel case option Jun 8, 2019
test Add camel case option Jun 8, 2019
.formatter.exs Adds default .formatter.exs and runs `mix format` on the repo Nov 1, 2018
.gitignore Mix env Apr 25, 2017
.travis.yml Release version Apr 4, 2018
LICENSE Initial commit Apr 25, 2017
README.md Add camel case option Jun 8, 2019
mix.exs Add camel case option Jun 8, 2019
mix.lock Add camel case option Jun 8, 2019

README.md

PhoenixGon Hex.pm Build Status Open Source Helpers

Your Phoenix variables in your JavaScript.

img

Installation

If available in Hex, 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/endpoint.ex before you router plug.
defmodule Project.Endpoint do

  ...

  plug PhoenixGon.Pipeline
  plug Project.Router
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.
  1. 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
  1. 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

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.
  • getAssets(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.

You can’t perform that action at this time.