README.md

# Drab, the Server-side jQuery

[![hex.pm version](https://img.shields.io/hexpm/v/drab.svg)](https://hex.pm/packages/drab)

Drab - Access the browser User Interface from the Server Side. No Javascript programming needed anymore!

## Teaser

* Client side:

```html
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width:0%">
  </div>
</div>
<button drab-click="perform_long_process">Click to start processing</button>
```

* Server side:

```elixir
def perform_long_process(socket, dom_sender) do
  steps = MyLongProcess.number_of_steps()
  for i <- 1..steps do
    MyLongProcess.perform_step(i)
    # update the progress bar after each of MyLongProcess steps
    socket 
      |> update(
          css: "width", 
          set: "#{i * 100 / steps}%", 
          on: ".progress-bar")
      |> update(
          :html,         
          set: "#{Float.round(i * 100 / steps, 2)}%", 
          on: ".progress-bar")
  end
  socket |> insert(class: "progress-bar-success", into: ".progress-bar")
end
```

## Warning: this software is still experimental!

### See [Demo Page](https://tg.pl/drab) for live demo and description.

## Installation

  So far the process of the installation is rather manually, in the future will be automatized.

  1. Add `drab` to your list of dependencies in `mix.exs` in your Phoenix application and install it:

```elixir
def deps do
  [{:drab, "~> 0.2.1"}]
end
```

```bash
$ mix deps.get
$ mix compile
```

  2. Add `jquery` to `package.json`:

```json
"dependencies": {
  "jquery": ">= 3.1.1"
}
```

  You may ommit this step if you are not planning to use DOM, jQuery, Drab.Query and Drab.Modal -
  [see Domless Drab](https://tg.pl/drab/nojquery)

  3. Add jQuery as a global at the end of `brunch-config.js`:

```javascript
npm: {globals: {
  $: 'jquery',
  jQuery: 'jquery'
}}
```

  You may ommit this step if you are not planning to use DOM, jQuery, Drab.Query and Drab.Modal -
  [see Domless Drab](https://tg.pl/drab/nojquery)

  4. And install it:

```bash
$ npm install && node_modules/brunch/bin/brunch build 
```

  5. Initialize Drab client library by adding to the layout page (`web/templates/layout/app.html.eex`)

```html
<%= Drab.Client.js(@conn) %>
```
    
    just after the following line:

```html
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
```
    
  6. Initialize Drab websockets by adding the following to `lib/endpoint.ex`:

```elixir
use Drab.Endpoint
```

Congratullations! You have installed Drab and you can proceed with your own Commanders.

## Usage

All the Drab functions (callbacks, event handlers) are placed in the module called `Commander`. Think about it as a controller for the live pages. Commanders are similar to Phoenix controllers and should be placed in `web/commanders` directory.

To enable Drab on the specific pages, you need to add the directive `use Drab.Controller` to your application controller. 

Remember the difference: `controller` renders the page while `commander` works on the live page.

  1. Generate the page Commander. Commander name should correspond to controller, so PageController should have PageCommander:

```bash
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex

Add the following line to your Example.PageController:
    use Drab.Controller 
```

  2. As described in the previous task, add `Drab.Controller` to your page Controller (eg. `web/controllers/page_controller.ex` in the default app):

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

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

  3. Edit the commander file `web/commanders/page_commander.ex` and add some real action - the `onload` callback which fires when the browser connects to Drab.

```elixir
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")
      |> 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
end
```

Function `update/3` (shorthand for `Drab.Query.update/3`) with `:html` parameter sets the HTML of DOM object, analogically to `$().html()` on the client side.

Finally! Run the phoenix server and enjoy working on the Dark Side of the web.

### The code above is available for download [here](https://github.com/grych/drab-example)

## Drab Events

* Client-side: assign the events directly in HTML, using `drab-[event]='event_handler'` attribute, when `event` is the event name (currently: click, change, keyup, keydown) and `event_handler` is the function name in the Commander. This function will be fired on event. Example:

```html
<button drab-click='button_clicked'>Clickme!</button>
```

* Server-side: when clicked, this button will launch the following action on the corresponding commander:

```elixir
defmodule Example.PageCommander do
  use Drab.Commander

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

As you probably guess, this changes button description (`Drab.Query.update/3` used with `:text`).

## What now?

Visit [Demo Page](https://tg.pl/drab) for a live demo and more description.

Visit [Docs with Examples](https://tg.pl/drab/docs) - documentation with short examples.

## Contact

(c)2016 Tomek "Grych" Gryszkiewicz, 
<grych@tg.pl>