• Stars
    star
    98
  • Rank 333,508 (Top 7 %)
  • Language
    Elixir
  • License
    MIT License
  • Created about 7 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

More Repositories

1

ruby.fundamental

📚 Fundamental programming with ruby examples and references. It covers threads, SOLID principles, design patterns, data structures, algorithms. Books for reading. Repo for website https://github.com/khusnetdinov/betterdocs
Ruby
464
star
2

loki

📝 Loki is library that includes helpers for building powerful interactive command line applications, tasks, modules.
Elixir
87
star
3

elmkit

🎒 Elm kit is web application boilerplate kit for development. This kit build on Brunch, Node, Sass, Elm-lang. It helps you to start development more productive following best practices.
Elm
51
star
4

kazan

💣 Kazan creates rails project and setups predefined gems and tools. Env settings, Spec tools, Database settings, development tools. Bonuses for production.
Ruby
26
star
5

betterdocs

📚 Web version of https://github.com/khusnetdinov/ruby.fundamental repo - Fundamental programming with ruby examples and references. It covers threads, SOLID principles, design patterns, data structures, algorithms. Books for reading.
HTML
26
star
6

phoenix_routes_js

Phoenix routes helpers in JavaScript code.
Elixir
20
star
7

linq

This gem is wrapper for linq.js JavaScript plugin. Language-Integrated Query (LINQ) is a set of features introduced in Visual Studio 2008 (That moment for #C, VisualBasic) that extends powerful query capabilities to the language syntax. LINQ introduces standard, easily-learned patterns for querying and updating data, and the technology can be extended to support potentially any kind of data store.
Ruby
13
star
8

active_endpoint

[ARCHIVE] 🔧 ActiveEndpoint is middleware for Rails application that collect and analize request and response per request for route endpoint. It works with minimum affecting to application response time.
Ruby
13
star
9

sesamex

[WIP] Another authentication hex for Phoenix.
Elixir
12
star
10

nimbusex

Additional helpers for Phoenix what were not included in Phoenix by different reasons.
Elixir
11
star
11

.janus

🍀 Janus vim distribution customization.
Vim Script
7
star
12

grayscale-favicon

🍴 Grayscale favicon for manipulating the favicon and set it to grayscale.
JavaScript
5
star
13

vagrant

🔒 Vagrant environment and services sandbox for development application. Possible to set partial isolation or full
Makefile
5
star
14

zae_bash

🔌 Provision development tools for Mac OS.
Shell
4
star
15

multipurpose_theme

🍪 Rails multipurpose bootstrap theme
CSS
3
star
16

reactor.js

Starter kit for web application build with Brunch, Sass, React, Mocha.
JavaScript
3
star
17

khusnetdinov.github.io

[Empty] Github pages.
1
star
18

vimfiles

Installation vim with plugins and tools
Vim Script
1
star
19

provisioner

Prepare enviroment on linux (Ubuntu) for run Ruby on Rails application in production. Setting up deploy user, timezone, locales, swapfile. Install PostgreSQL, Redis, Nginx.
1
star
20

clojure-koans

Clojure Koans Solutions
Clojure
1
star
21

.tmux

☑️ Provision tmux with custom settings.
Shell
1
star
22

rails_theme

Rails responsive theme based on Twitter Bootstrap
CSS
1
star