Skip to content

🔥 Phoenix variables in your JavaScript without headache.

License

Notifications You must be signed in to change notification settings

eamonpenland/phoenix_gon

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PhoenixGon Hex.pm Build Status

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.2.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` - namescpase for javacript object in global window space.
- `:assets` - map for keeping permament variables in javascript.
  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 gem is available as open source under the terms of the MIT License.

About

🔥 Phoenix variables in your JavaScript without headache.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Elixir 100.0%