ex_cell

ex_cell

وحدة لإنشاء وحدات مقترنة من CSS ، JavaScript ووجهات النظر في فينيكس.

تثبيت

أضف ما يلي إلى التبعيات في mix.exs :

 { :ex_cell , "~> 0.0.14" }

في Phoenix 1.3.0+ أضف ما يلي إلى 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

يمكنك الآن إضافة خلايا/ دليل في lib/ app_web ووضع الخلايا في هذا الدليل.

يجب أن تحتوي كل خلية على عرض. يتم ربط العرض والقالب بإحكام معًا بواسطة الخلية.

CSS

لضمان وضع جميع CSS بجوار زنزانتك ، تحتاج إلى إضافة ما يلي إلى brunch-config.js :

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

إذا كنت تستخدم شيئًا آخر غير الغداء لإدارة أصولك ، فأنت بحاجة إلى إضافة الملفات إلى مدير الأصول المفضل.

جافا سكريبت

إذا كنت ترغب في استخدام مكتبة Cell-JS المصاحبة ، فيمكنك تثبيتها مع مدير الحزمة. بعد تثبيت حزمة JavaScript ، أضف ما يلي إلى brunch-config.js :

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

الاستخدام

تتكون خلية من ملفين:

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

يمكنك عرض الخلية في طريقة عرض أو وحدة تحكم أو خلية أخرى عن طريق إضافة الكود التالي:

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

هذا من شأنه أن يولد HTML التالي عند تقديم الخلية:

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

عرض

تتصرف وجهات نظر الخلايا مثل وجهات النظر العادية في Phoenix ، باستثناء أنها توفر طريقة حاوية يمكن استخدامها في قالب لتقديم HTML المناسب المطلوب لتهيئة JavaScript لخلية ولها فئة محددة مسبقًا هي نفس اسم الخلية ناقص مساحة الاسم.

 # 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

يتصرف القالب مثل أي قالب آخر في فينيكس باستثناء أن لديهم إمكانية الوصول إلى طريقة حاوية لتقديم حاوية HTML الخلية المناسبة:

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

يمكن أن يكون هذا أي نوع من ملفات CSS التي ترغب في ذلك (معالجة مسبقًا أو غيرها). نظرًا لأن الخلايا توفر طرقًا لمساحة الاسم CSS ، يُنصح باستخدام مساحة اسم مماثلة أو استخدام شيء مثل مواد PostCSS للتأكد من أن جميع الفئات المحددة فريدة من نوعها.

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

إذا كنت تستخدم Cell-JS ، يمكنك إنشاء JavaScript مقترنة بإحكام بالخلية:

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

الخلايا المتداخلة

بالنسبة للخلايا المتداخلة (على سبيل المثال AppWeb.User.AvatarCell ) ، تأكد من تضمين مساحة الاسم في ورقة الأنماط/JavaScript.

. User-AvatarCell {}

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

عندما تكون في شك ، يتوافق اسم الخلية مع سمة data-cell على عنصر DOM.