Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mgwidmann/scrivener_html
HTML view helpers for Scrivener
https://github.com/mgwidmann/scrivener_html
bootstrap bulma-css-framework custom-html ecto elixir elixir-phoenix foundation html materialize materializecss-framework pagination-links scrivener semantic
Last synced: about 21 hours ago
JSON representation
HTML view helpers for Scrivener
- Host: GitHub
- URL: https://github.com/mgwidmann/scrivener_html
- Owner: mgwidmann
- License: mit
- Created: 2015-08-18T01:44:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-06T14:52:39.000Z (7 months ago)
- Last Synced: 2025-01-03T14:13:35.821Z (8 days ago)
- Topics: bootstrap, bulma-css-framework, custom-html, ecto, elixir, elixir-phoenix, foundation, html, materialize, materializecss-framework, pagination-links, scrivener, semantic
- Language: Elixir
- Size: 184 KB
- Stars: 125
- Watchers: 9
- Forks: 209
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- freaking_awesome_elixir - Elixir - Helpers built to work with Scrivener's page struct to easily build HTML output for various CSS frameworks. (Framework Components)
- fucking-awesome-elixir - scrivener_html - Helpers built to work with Scrivener's page struct to easily build HTML output for various CSS frameworks. (Framework Components)
- awesome-elixir - scrivener_html - Helpers built to work with Scrivener's page struct to easily build HTML output for various CSS frameworks. (Framework Components)
README
# Scrivener.Html [](https://semaphoreci.com/mgwidmann/scrivener_html)
Helpers built to work with [Scrivener](https://github.com/drewolson/scrivener)'s page struct to easily build HTML output for various CSS frameworks.
## Setup
Add to `mix.exs`
```elixir
# add :scrivener_html to deps
defp deps do
[
# ...
{:scrivener_html, "~> 1.8"}
# ...
]
end
# add :scrivener_html to applications list
defp application do
[
# ...
applications: [ ..., :scrivener_html, ... ]
# ...
]
end
```
For use with Phoenix.HTML, configure the `:routes_helper` module in `config/config.exs`
like the following:
```elixir
config :scrivener_html,
routes_helper: MyApp.Router.Helpers,
# If you use a single view style everywhere, you can configure it here. See View Styles below for more info.
view_style: :bootstrap
```
Import to your view.
```elixir
defmodule MyApp.UserView do
use MyApp.Web, :view
import Scrivener.HTML
end
```
## Example Usage
Use in your template.
```elixir
<%= for user <- @page do %>
...
<% end %>
<%= pagination_links @page %>
```
Where `@page` is a `%Scrivener.Page{}` struct returned from `Repo.paginate/2`.
So the function in your controller is like:
```elixir
# params = %{"page" => _page}
def index(conn, params) do
page = MyApp.User
# Other query conditions can be done here
|> MyApp.Repo.paginate(params)
render conn, "index.html", page: page
end
```
### Scopes and URL Parameters
If your resource has any url parameters to be supplied, you should provide them as the 3rd parameter. For example, given a scope like:
```elixir
scope "/:locale", App do
pipe_through [:browser]
get "/page", PageController, :index, as: :pages
get "/pages/:id", PageController, :show, as: :page
end
```
You would need to pass in the `:locale` parameter and `:path` option like so:
_(this would generate links like "/en/page?page=1")_
```elixir
<%= pagination_links @conn, @page, ["en"], path: &pages_path/4 %>
```
With a nested resource, simply add it to the list:
_(this would generate links like "/en/pages/1?page=1")_
```elixir
<%= pagination_links @conn, @page, ["en", @page_id], path: &page_path/4, action: :show %>
```
### Query String Parameters
Any additional query string parameters can be passed in as well.
```elixir
<%= pagination_links @conn, @page, ["en"], some_parameter: "data" %>
# Or if there are no URL parameters
<%= pagination_links @conn, @page, some_parameter: "data" %>
```
### Custom Actions
If you need to hit a different action other than `:index`, simply pass the action name to use in the url helper.
```elixir
<%= pagination_links @conn, @page, action: :show %>
```
### Customizing Output
Below are the defaults which are used without passing in any options.
```elixir
<%= pagination_links @conn, @page, [], distance: 5, next: ">>", previous: "<<", first: true, last: true, view_style: :bootstrap %>
# Which is the same as
<%= pagination_links @conn, @page %>
```
To prevent HTML escaping (i.e. seeing things like `<` on the page), simply use `Phoenix.HTML.raw/1` for any `&` strings passed in, like so:
```elixir
<%= pagination_links @conn, @page, previous: Phoenix.HTML.raw("←"), next: Phoenix.HTML.raw("→") %>
```
To show icons instead of text, simply render custom html templates, like:
_(this example uses materialize icons)_
```elixir
# Using Phoenix.HTML's sigil_E for EEx
<%= pagination_links @conn, @page, previous: ~E(chevron_left), next: ~E(chevron_right) %>
# Or by calling render
<%= pagination_links @conn, @page, previous: render("pagination.html", direction: :prev), next: render("pagination.html", direction: :next)) %>
```
The same can be done for first/last links as well (`v1.7.0` or higher).
_(this example uses materialize icons)_
```elixir
<%= pagination_links @conn, @page, first: ~E(chevron_left), last: ~E(chevron_right) %>
```
## View Styles
There are six view styles currently supported:
- `:bootstrap` (the default) This styles the pagination links in a manner that
is expected by Bootstrap 3.x.
- `:bootstrap_v4` This styles the pagination links in a manner that
is expected by Bootstrap 4.x.
- `:foundation` This styles the pagination links in a manner that is expected
by Foundation for Sites 6.x.
- `:semantic` This styles the pagination links in a manner that is expected by
Semantic UI 2.x.
- `:materialize` This styles the pagination links in a manner that
is expected by Materialize css 0.x.
- `:bulma` This styles the pagination links in a manner that is expected by Bulma 0.4.x, using the `is-centered` as a default.
## Extending
For custom HTML output, see `Scrivener.HTML.raw_pagination_links/2`.
See `Scrivener.HTML.raw_pagination_links/2` for option descriptions.
Scrivener.HTML can be included in your view and then just used with a simple call to `pagination_links/1`.
```elixir
iex> Scrivener.HTML.pagination_links(%Scrivener.Page{total_pages: 10, page_number: 5}) |> Phoenix.HTML.safe_to_string()
"
"
```
## SEO
SEO attributes like `rel` are automatically added to pagination links. In addition, a helper for header `` tags is available (`v1.7.0` and higher) to be placed in the `` tag.
See `Scrivener.HTML.SEO` documentation for more information.