ex_cell

ex_cell

Un module pour créer des modules couplés de CSS, JavaScript et vues dans Phoenix.

Installation

Ajoutez ce qui suit aux dépendances dans mix.exs :

 { :ex_cell , "~> 0.0.14" }

Dans Phoenix 1.3.0+, ajoutez ce qui suit à 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

Vous pouvez désormais ajouter une cellule / répertoire dans lib / app_web et placer des cellules dans ce répertoire.

Chaque cellule doit contenir une vue.ex et un modèle.html.EEX. La vue et le modèle sont étroitement liés par la cellule.

CSS

Pour vous assurer que tout le CSS peut être placé à côté de votre cellule, vous devez ajouter ce qui suit à votre brunch-config.js :

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

Si vous utilisez autre chose que le brunch pour gérer vos actifs, vous devez ajouter les fichiers au gestionnaire d'actifs de choix.

Javascrip

Si vous souhaitez utiliser la bibliothèque Cell-Js d'accompagnement, vous pouvez l'installer avec votre gestionnaire de packages. Après avoir installé le package JavaScript, ajoutez ce qui suit à votre brunch-config.js :

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

Usage

Une cellule se compose de quelques fichiers:

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

Vous pouvez rendre la cellule dans une vue, un contrôleur ou une autre cellule en ajoutant le code suivant:

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

Cela générerait le HTML suivant lorsque vous rendez la cellule:

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

View.ex

Les vues des cellules se comportent comme des vues normales dans Phoenix, sauf qu'elles ont fourni une méthode de conteneur qui peut être utilisée dans un modèle pour rendre le HTML approprié nécessaire pour initialiser le JavaScript pour une cellule et avoir une classe prédéfinie qui est la même que le nom de la cellule moins l'espace de noms.

 # 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

Le modèle se comporte comme n'importe quel autre modèle de Phoenix, sauf qu'ils ont accès à une méthode de conteneur pour rendre le conteneur HTML cellulaire approprié:

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

Il peut s'agir de tout type de fichier CSS que vous souhaitez (prétraité ou autre). Étant donné que les cellules fournissent des méthodes à l'espace de noms de votre CSS, il est conseillé d'utiliser un espace de noms similaire ou d'utiliser quelque chose comme les modules postcss pour s'assurer que toutes les classes définies sont uniques.

 /* 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

Si vous utilisez Cell-JS, vous pouvez créer JavaScript qui est étroitement couplé à la cellule:

 // 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 ; 

Cellules imbriquées

Pour les cellules imbriquées (par exemple, AppWeb.User.AvatarCell ), assurez-vous d'inclure l'espace de noms dans la feuille de style / javascript.

. User-AvatarCell {}

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

En cas de doute, le nom de la cellule correspond à l'attribut data-cell sur l'élément DOM.