drab v0.1.0 Drab

Drab allows to query and manipulate the browser DOM objects directly from the Phoenix server.

Drab works with Phoenix Framework. To enable it on the specific page you must find its controller and enable Drab by use Drab.Controller there:

defmodule DrabExample.PageController do
  use Example.Web, :controller
  use Drab.Controller 

  def index(conn, _params) do
    render conn, "index.html"
  end
end   

Notice that it will enable Drab on all the pages generated by DrabExample.PageController.

All Drab functions (callbacks and event handlers) should be placed in a module called ‘commander’. It is very similar to controller, but it does not render any pages - it works with the live page instead. Each controller with enabled Drab should have the corresponding commander.

defmodule DrabExample.PageCommander do
  use Drab.Commander, onload: :page_loaded

  # Drab Callbacks
  def page_loaded(socket) do
    socket |> update(:html, set: "Welcome to Phoenix+Drab!", on: "div.jumbotron h2")
    socket |> update(:html, 
          set: "Please visit <a href='https://tg.pl/drab'>Drab</a> page for more examples and description",
          on:  "div.jumbotron p.lead")
  end

  # Drab Events
  def button_clicked(socket, dom_sender) do
    socket |> update(:text, set: "alread clicked", on: this(dom_sender))
  end

end

Drab treats browser page as a database, allows you to read and change the data there. Please refer to Drab.Query documentation to find out how Drab.Query.select/2 or Drab.Query.update/2 works.

Events are defined directly in the HTML by adding drab-event and drab-handler properties:

<button drab-event='click' drab-handler='button_clicked'>clickme</button>

Clicking such button launches DrabExample.PageCommander.button_clicked/2 on the Phoenix server.

There are few shortcuts for the most popular events: click, keyup, keydown, change. For this event an attribute drab-EVENT_NAME must be set. The following like is an equivalent for the previous one:

<button drab-click='button_clicked'>clickme</button>

Summary

Functions

Returns map of Drab configuration options

Functions

config()

Returns map of Drab configuration options.

All the config values may be override in config.exs, for example:

config :drab, disable_controls_while_processing: false

Configuration options:

  • disable_controls_while_processing (default: true) - after sending request to the server, sender will be disabled until get the answer; warning: this behaviour is not broadcasted, so only the control in the current browers will be disabled
  • events_to_disable_while_processing (default: ["click"]) - list of events which will be disabled when waiting for server response
  • disable_controls_when_disconnected (default: true) - disables control when there is no connectivity between the browser and the server
  • socket (default: "/drab/socket") - path to Drab socket