diff --git a/CHANGELOG.md b/CHANGELOG.md index ee10ffb..56fad97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,44 +1,74 @@ +# v0.0.9 + +## Changes + +* Reworked the approach to render the containers. It now uses an adapter that + you have to configure. The adapter is used to output the actual HTML. For now, + the adapter provided is the + [CellJS adapter](https://github.com/DefactoSoftware/cells-js) (#30) +* The CellJS adapter no longer accepts a `closing_tag` attribute as added in the + previous release. The CellJS adapter no automatically closes self closing tags + (#31) + # v0.0.8 + ## Changed -- Use Phoenix.content_tag instead of Phoenix.tag by default and add option to remove the closing tag by adding `closing_tag: false` to the options (#27) -- The attribute name is now used to set the `data-cell` attribute and can be overridden to allow prefixing (#28) + +* Use Phoenix.content_tag instead of Phoenix.tag by default and add option to + remove the closing tag by adding `closing_tag: false` to the options (#27) +* The attribute name is now used to set the `data-cell` attribute and can be + overridden to allow prefixing (#28) # v0.0.7 + ## Changed -- Added a cell render method to ExCell.Controller to directly render cells as a view (#23) + +* Added a cell render method to ExCell.Controller to directly render cells as a + view (#23) ## Fixed -- Removed unused Base alias in `lib/ex_cell/base.ex` (#22) + +* Removed unused Base alias in `lib/ex_cell/base.ex` (#22) # v0.0.6 ## Changed -- Updated `README.md` with more elaborate examples and install instructions (#19) -- Removed the need for a `MockCellAdapter` in tests (#18) -- Restructured the code to allow documentation (#18) + +* Updated `README.md` with more elaborate examples and install instructions + (#19) +* Removed the need for a `MockCellAdapter` in tests (#18) +* Restructured the code to allow documentation (#18) ## Removed -- The option to provide a `MockCellAdapter` in the configuration (#18) + +* The option to provide a `MockCellAdapter` in the configuration (#18) # v0.0.5 ## Changed -- Cell module didn't use a fallback adapter for the `__using__` macro (#16) -- Added back the `View.relative_path` method (#15) + +* Cell module didn't use a fallback adapter for the `__using__` macro (#16) +* Added back the `View.relative_path` method (#15) # v0.0.4 ## Changed -- Fixed a bug where the Mix configuration wasn't allowing empty configurations (#13) + +* Fixed a bug where the Mix configuration wasn't allowing empty configurations + (#13) # v0.0.3 ## Added -- Adapters can are now in a `config.ex` (#10) + +* Adapters can are now in a `config.ex` (#10) ## Changed -- Removed the need to specify an adapter for views and controllers (#10) -- ExCell.Controller is imported instead of using the `__using__` macro (#10) + +* Removed the need to specify an adapter for views and controllers (#10) +* ExCell.Controller is imported instead of using the `__using__` macro (#10) ## Removed -- It's no longer possible to specify the adapter through the `__using__` Macro (#10) + +* It's no longer possible to specify the adapter through the `__using__` Macro + (#10) diff --git a/README.md b/README.md index eae654f..0dd9123 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,20 @@ [![CircleCI](https://circleci.com/gh/DefactoSoftware/ex_cell/tree/master.svg?style=shield)](https://circleci.com/gh/DefactoSoftware/ex_cell) # ex_cell + A module for creating coupled modules of CSS, Javascript and Views in Phoenix ## Installation Add the following to the dependencies in `mix.exs` + ```ex -{:ex_cell, "~> 0.0.8"} +{:ex_cell, "~> 0.0.9"} ``` In Phoenix 1.3.0+ add the following to `lib/app_web/web.ex`: ```ex - def controller do quote do ... @@ -37,7 +38,8 @@ end def cell(opts \\ []) do quote do - use ExCell.Cell, namespace: AppWeb + use ExCell.Cell, namespace: AppWeb, + adapter: ExCell.Adapters.CellJS use Phoenix.View, root: "lib/app_web/cells", path: ExCell.View.relative_path(__MODULE__AppWeb) @@ -55,12 +57,16 @@ def cell(opts \\ []) do end ``` -Now you can add a cells/ directory in lib/app_web and place cells in that directory. +Now you can add a cells/ directory in lib/app_web and place cells in that +directory. -Every cell should contain a view.ex and a template.html.eex. The view and template are tightly linked together by the Cell. +Every cell should contain a view.ex and a template.html.eex. The view and +template are tightly linked together by the Cell. ## CSS -To ensure all the CSS can be placed next to your cell you need to add the following to your `brunch-config.js`: + +To ensure all the CSS can be placed next to your cell you need to add the +following to your `brunch-config.js`: ```js ... @@ -75,10 +81,15 @@ stylesheets: { ... ``` -If you use something other than `brunch` to manage your assets, you need to add the files to the assets manager of choice. +If you use something other than `brunch` to manage your assets, you need to add +the files to the assets manager of choice. ## Javascript -If you wish to use the accompanying `cell-js` library you can install [cell-js](https://github.com/DefactoSoftware/cells-js) with your package manager. After you installed the Javascript package, add the following to your `brunch-config.js`: + +If you wish to use the accompanying `cell-js` library you can install +[cell-js](https://github.com/DefactoSoftware/cells-js) with your package +manager. After you installed the Javascript package, add the following to your +`brunch-config.js`: ```js ... @@ -94,9 +105,10 @@ javascripts: { ... ``` - ## Usage + A cell consists of a couple of files: + ``` cells |- avatar @@ -108,7 +120,9 @@ cells ... ``` -You can render the cell in a view, controller or another cell by adding the following code: +You can render the cell in a view, controller or another cell by adding the +following code: + ```ex cell(AvatarCell, class: "CustomClassName", user: %User{}) ``` @@ -121,10 +135,12 @@ This would generate the following HTML when you render the cell: ``` - ### view.ex -Views of cells behave like normal views in Phoenix, except that they have provide a container method that can be used in a template to render the appropiate HTML needed to initialize the Javascript for a cell and have a predefined class that is the same as the cell name minus the namespace. +Views of cells behave like normal views in Phoenix, except that they have +provide a container method that can be used in a template to render the +appropiate HTML needed to initialize the Javascript for a cell and have a +predefined class that is the same as the cell name minus the namespace. ```ex # lib/app_web/cell/avatar/view.ex @@ -154,7 +170,9 @@ end ``` ### template.html.eex -The template behave like any other template in Phoenix except that they have access to a container method to render the appropiate cell HTML container: + +The template behave like any other template in Phoenix except that they have +access to a container method to render the appropiate cell HTML container: ```eex @@ -166,7 +184,11 @@ The template behave like any other template in Phoenix except that they have acc ``` ### style.css -This can be any type of CSS file that you wish (preprocessed or other wise). Because cells provides methods to namespace your CSS you are advised to use a similar namespace or use something like `postcss-modules` to ensure all classses defined are unique. + +This can be any type of CSS file that you wish (preprocessed or other wise). +Because cells provides methods to namespace your CSS you are advised to use a +similar namespace or use something like `postcss-modules` to ensure all classses +defined are unique. ```css .AvatarCell { @@ -182,18 +204,19 @@ This can be any type of CSS file that you wish (preprocessed or other wise). Bec ``` ### index.js -If you use `cells-js` you can create Javascript that is tightly coupled to the cell. + +If you use `cells-js` you can create Javascript that is tightly coupled to the +cell. ```js import { Cell, Builder } from "cells-js"; class AvatarCell extends Cell { initialize() { - this.element.addEventListener('click', this.onToggleOpenClass) - + this.element.addEventListener("click", this.onToggleOpenClass); } - onToggleOpenClass = (e)=> this.element.classList.toggle("open"); + onToggleOpenClass = e => this.element.classList.toggle("open"); } Builder.register(AvatarCell, "AvatarCell"); diff --git a/mix.exs b/mix.exs index bf753cb..994077c 100644 --- a/mix.exs +++ b/mix.exs @@ -1,7 +1,7 @@ defmodule ExCell.Mixfile do use Mix.Project - @version "0.0.8" + @version "0.0.9" def project do [app: :ex_cell,