ProductPromotion
Logo

Elixir

made by https://0x3d.site

GitHub - khusnetdinov/phoenix_gon: :fire: Phoenix variables in your JavaScript without headache.
:fire: Phoenix variables in your JavaScript without headache. - khusnetdinov/phoenix_gon
Visit Site

GitHub - khusnetdinov/phoenix_gon: :fire: Phoenix variables in your JavaScript without headache.

GitHub - khusnetdinov/phoenix_gon: :fire: Phoenix variables in your JavaScript without headache.

PhoenixGon Hex.pm Build Status Open Source Helpers

Your Phoenix variables in your JavaScript.

img

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

  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
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.

JSON Library

Per default the Jason is used to encode JSON data, however this can be changed via the application configuration, eg:

config :phoenix_gon, :json_library, Poison

Contributors

Special thanks to Andrey Soshchenko @getux.

License

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

Articles
to learn more about the elixir concepts.

Resources
which are currently available to browse on.

mail [email protected] to add your project or resources here 🔥.

FAQ's
to know more about the topic.

mail [email protected] to add your project or resources here 🔥.

Queries
or most google FAQ's about Elixir.

mail [email protected] to add more queries here 🔍.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory