Skip to content

Commit

Permalink
Release v0.0.9 (#33)
Browse files Browse the repository at this point in the history
  • Loading branch information
jessedijkstra authored Dec 13, 2017
1 parent 0d08375 commit 7cee4a3
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 34 deletions.
60 changes: 45 additions & 15 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
59 changes: 41 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
...
Expand All @@ -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)
Expand All @@ -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
...
Expand All @@ -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
...
Expand All @@ -94,9 +105,10 @@ javascripts: {
...
```


## Usage

A cell consists of a couple of files:

```
cells
|- avatar
Expand All @@ -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{})
```
Expand All @@ -121,10 +135,12 @@ This would generate the following HTML when you render the cell:
</span>
```


### 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
Expand Down Expand Up @@ -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
<!-- lib/app_web/cell/avatar/template.html.eex -->
Expand All @@ -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 {
Expand All @@ -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");
Expand Down
2 changes: 1 addition & 1 deletion mix.exs
Original file line number Diff line number Diff line change
@@ -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,
Expand Down

0 comments on commit 7cee4a3

Please sign in to comment.