ex_cell

EX_CELL

Um módulo para criar módulos acoplados de CSS, JavaScript e visualizações em Phoenix.

Instalação

Adicione o seguinte às dependências no mix.exs :

 { :ex_cell , "~> 0.0.14" }

Em Phoenix 1.3.0+ Adicione o seguinte a lib/app_web/web.ex :

 def controller do
  quote do
  ...

  import ExCell.Controller

  ...
  end
end

def view ( opts \ [ ] ) do
  quote do
    ...

    import ExCell.View

    ...
  end
end

def cell ( opts \ [ ] ) do
  quote do
    use ExCell.Cell , namespace: AppWeb ,
                     adapter: ExCell.Adapters.CellJS

    use Phoenix.View , root: "lib/app_web/cells" ,
                      path: ExCell.View . relative_path ( __MODULE__ , AppWeb )

    import Phoenix.Controller ,
           only: [ get_csrf_token: 0 , get_flash: 2 , view_module: 1 ]

    use Phoenix.HTML

    import AppWeb.Router.Helpers
    import AppWeb.Gettext

    # Add everything you want to use in the cells
  end
end

Agora você pode adicionar um diretório/ diretório em lib/ app_web e colocar células nesse diretório.

Cada célula deve conter uma exibição.Ex e um modelo.html.eex. A visualização e o modelo estão fortemente ligados pela célula.

CSS

Para garantir que todos os CSs possam ser colocados ao lado da sua célula, você precisa adicionar o seguinte ao seu brunch-config.js :

...
stylesheets : {
  joinTo : {
    "css/app.css" : [
      "assets/css/app.css" ,
      "lib/app_web/cells/**/*.css"
    ]
  }
}
. . .

Se você usar algo que não seja um brunch para gerenciar seus ativos, precisará adicionar os arquivos ao gerente de ativos de escolha.

JavaScript

Se você deseja usar a biblioteca Cell-JS que acompanha, pode instalá-la com seu gerenciador de pacotes. Depois de instalar o pacote JavaScript, adicione o seguinte ao seu brunch-config.js :

...
javascripts : {
  joinTo : {
    "js/vendor.js" : / ^node_modules / ,
    "js/app.js" : [
      "assets/js/**/*.js" ,
      "lib/app_web/cells/**/*.js"
    ]
  }
}
. . . 

Uso

Uma célula consiste em alguns arquivos:

 cells
|- avatar
|  |- template.html.eex
|  |- view.ex
|  |- style.css (optional)
|  |- index.js (optional)
|- header
...

Você pode renderizar a célula em uma visão, controlador ou outra célula adicionando o seguinte código:

 cell ( AvatarCell , class: "CustomClassName" , user: % User { } )

Isso geraria o seguinte HTML ao renderizar a célula:

 < span class =" AvatarCell " data-cell =" AvatarCell " data-cell-params =" {} " >
  < img src =" /images/foo/avatar.jpg " class =" AvatarCell-Image " alt =" foo " />
</ span >

View.Ex

As visualizações das células se comportam como visualizações normais em Phoenix, exceto que elas fornecem um método de contêiner que pode ser usado em um modelo para renderizar o HTML apropriado necessário para inicializar o JavaScript para uma célula e ter uma classe predefinida que é o mesmo que o nome da célula menos o espaço para nome.

 # lib/app_web/cell/avatar/view.ex
defmodule AppWeb.AvatarCell do
  @ moduledoc """
  The avatar cell used to render the user avatars.
  """

  use AppWeb , :cell
  alias App.Accounts.Avatar

  def class_names ( assigns ) do
    [ assigns [ :class ] , class_name ( assigns [ :size ] ) ]
    |> Enum . reject ( fn ( v ) -> is_nil ( v ) end )
  end

  def avatar_image_path ( user ) do
    Avatar . url ( { user . avatar , user } , :thumb )
  end

  def avatar_image_alt ( user ) do
    [ user . first_name , user . last_name ]
    |> Enum . join ( " " )
    |> String . trim ( )
  end
end

template.html.eex

O modelo se comporta como qualquer outro modelo em Phoenix, exceto que eles têm acesso a um método de contêiner para renderizar o contêiner HTML da célula apropriado:

 <!-- lib/app_web/cell/avatar/template.html.eex -->
<%= container ( tag: :span ,  class: class_names (assigns)) do % >
  <%= if image_path = avatar_image_path ( @user ) do % >
    <%= img_tag (image_path, class: class_name ( " image " ), alt: avatar_image_alt ( @user )) % >
  <% end % >
<% end % >

style.css

Este pode ser qualquer tipo de arquivo CSS que você desejar (pré -processado ou outro sábio). Como as células fornecem métodos para o nome de nome do seu CSS, você é aconselhado a usar um espaço de nome semelhante ou usar algo como os módulos PostCSS para garantir que todas as classes definidas sejam únicas.

 /* lib/app_web/cell/avatar/style.css */
. AvatarCell {
  border-radius : 50 % ;
  height : 50 px ;
  width : 50 px ;
}

. AvatarCell-image {
  display : inline-block;
  max-width : 100 % ;
}

Index.js

Se você usar célula-js, poderá criar JavaScript que é fortemente acoplado à célula:

 // lib/app_web/cells/avatar/index.js
import { Cell , Builder } from "@defacto/cell-js" ;

class AvatarCell extends Cell {
  initialize ( ) {
    this . element . addEventListener ( "click" , this . onToggleOpenClass ) ;
  }

  onToggleOpenClass = e => this . element . classList . toggle ( "open" ) ;
}

Builder . register ( AvatarCell , "AvatarCell" ) ;

export default AvatarCell ; 

Células aninhadas

Para células aninhadas (por exemplo, AppWeb.User.AvatarCell ), certifique -se de incluir o espaço para nome na folha de estilo/javascript.

. User-AvatarCell {}

 Builder . register ( AvatarCell , "User-AvatarCell" ) ;

Em caso de dúvida, o nome da célula corresponde ao atributo data-cell no elemento DOM.