From b6e0e7275b763af6314acdbf2e547e287743e38b Mon Sep 17 00:00:00 2001 From: Jasper Moelker Date: Thu, 31 Mar 2016 17:04:32 +0200 Subject: [PATCH] feat(nav/pagination): nav, items, previous & next (and variations) macros + demos + docs --- README.md | 1 + src/nav/pagination/README.md | 64 +++++++++++++++++++++++++ src/nav/pagination/pagination.demo.html | 46 ++++++++++++++++++ src/nav/pagination/pagination.html | 59 +++++++++++++++++++++++ 4 files changed, 170 insertions(+) create mode 100644 src/nav/pagination/README.md create mode 100644 src/nav/pagination/pagination.demo.html create mode 100644 src/nav/pagination/pagination.html diff --git a/README.md b/README.md index fe7d763..6652227 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ You can [view the demos of all available modules](https://jbmoelker.github.io/nu * [nav](https://jbmoelker.github.io/nunjucks-bootstrap/#nav/nav/nav.demo.html) * [navbar](https://jbmoelker.github.io/nunjucks-bootstrap/#nav/navbar/navbar.demo.html) * [pager](https://jbmoelker.github.io/nunjucks-bootstrap/#nav/pager/pager.demo.html) + * [pagination](https://jbmoelker.github.io/nunjucks-bootstrap/#nav/pagination/pagination.demo.html) * [tabs](https://jbmoelker.github.io/nunjucks-bootstrap/#nav/tabs/tabs.demo.html) The source files of all modules can be found in `src/`. Each module has its own readme with instructions on how to use its macros. diff --git a/src/nav/pagination/README.md b/src/nav/pagination/README.md new file mode 100644 index 0000000..79431b7 --- /dev/null +++ b/src/nav/pagination/README.md @@ -0,0 +1,64 @@ +# Pagination + +## Functionality + +> Provide pagination links for your site or app with the multi-page pagination component, +> or the simpler [pager alternative](../pager/README.md). +> +> -- [Bootstrap > Pagination](http://v4-alpha.getbootstrap.com/components/pagination/) + +## Usage + +Import the macros: + +```html +{% import "nav/pagination/pagination.html" as pagination %} +``` + +Create pagination. E.g. for pages 1 to 10 with active and disabled link: + +``` +{% call pagination.nav() %} + {{ pagination.disabledPrevious() }} + {{ pagination.activeItem(1) }} + {% for page in range(2, 11) -%} + {{ pagination.item(page, '#/path/to/?page=' + page) }} + {%- endfor %} + {{ pagination.next(url = '#/path/to/next-page') }} +{% endcall %} +``` + +### `.nav()`, `.largeNav()`, `smallNav()`. + +Creates a (normal, large, small) pagination element. + +Use as [`call` block](http://mozilla.github.io/nunjucks/templating.html#call). +Content inside block is displayed inside the pagination element. + +index | parameter | type | description +--- | --- | --- | --- +0 | classes | string[] *optional* | List of classes to apply to the pagination element. + +### `.item()`, `.activeItem()`, `.disabledItem()` + +Creates a (normal, active, disabled) pagination item. + +index | parameter | type | description +--- | --- | --- | --- +0 | text | string *optional* | Text displayed inside item. Defaults to `Previous` / `Next`. +1 | url | string *optional* | Url item links to. Not needed for `activeItem()`, `disabledItem()`. + +### `.previous()`, `.next()`, `disabledPrevious()`, `disabledNext()` + +Creates a (previous, next) pagination link. + +index | parameter | type | description +--- | --- | --- | --- +0 | text | string *optional* | Text displayed inside item. Defaults to `Previous` / `Next`. +1 | url | string *optional* | Url item links to. Not needed for `disabledItem()`. + + +## Notes + +* Previous and next links are decorated with `rel="prev"` / `rel="next"` to [indicate paginated content](https://support.google.com/webmasters/answer/1663744). +* Disabled links are formatted as `` instead of `` as there is no such thing as a "disabled link" in HTML. \ No newline at end of file diff --git a/src/nav/pagination/pagination.demo.html b/src/nav/pagination/pagination.demo.html new file mode 100644 index 0000000..19f15f1 --- /dev/null +++ b/src/nav/pagination/pagination.demo.html @@ -0,0 +1,46 @@ +{% extends "demo/module/module.html" %} +{% import "./pagination.html" as pagination %} + +{% block content %} + + {% call pagination.nav() %} + {{ pagination.previous(url = '#/path/to/previous-page') }} + {% for page in range(1, 11) -%} + {{ pagination.item(page, '#/path/to/?page=' + page) }} + {%- endfor %} + {{ pagination.next(url = '#/path/to/next-page') }} + {% endcall %} + + + + {% call pagination.nav() %} + {{ pagination.disabledPrevious() }} + {{ pagination.activeItem(1) }} + {% for page in range(2, 11) -%} + {{ pagination.item(page, '#/path/to/?page=' + page) }} + {%- endfor %} + {{ pagination.next(url = '#/path/to/next-page') }} + {% endcall %} + + + + {% call pagination.largeNav() %} + {{ demoPaginationItems() }} + {% endcall %} + + + + {% call pagination.smallNav() %} + {{ demoPaginationItems() }} + {% endcall %} + +{% endblock %} + +{% macro demoPaginationItems() %} + {{ pagination.previous(url = '#/path/to/previous-page') }} + {% for page in range(1, 5) -%} + {{ pagination.item(page, '#/path/to/?page=' + page) }} + {%- endfor %} + {{ pagination.activeItem(5) }} + {{ pagination.disabledNext() }} +{% endmacro %} \ No newline at end of file diff --git a/src/nav/pagination/pagination.html b/src/nav/pagination/pagination.html new file mode 100644 index 0000000..2540fda --- /dev/null +++ b/src/nav/pagination/pagination.html @@ -0,0 +1,59 @@ +{%- macro nav(classes = []) -%} + +{%- endmacro -%} + +{%- macro largeNav(classes = []) -%} + +{%- endmacro -%} + +{%- macro smallNav(classes = []) -%} + +{%- endmacro -%} + +{%- macro item(text, url) -%} +
  • {{ text }}
    • +{%- endmacro -%} + +{%- macro activeItem(text) -%} +
  • {{ text }}
    • +{%- endmacro -%} + +{%- macro disabledItem(text, url) -%} +
  • {{ text }}
    • +{%- endmacro -%} + +{%- macro previous(text = 'Previous', url) -%} +
  • + +
    • +{%- endmacro -%} + +{%- macro next(text = 'Next', url) -%} +
  • + +
    • +{%- endmacro -%} + +{%- macro disabledPrevious(text = 'Previous') -%} +
  • + + + {{ text }} + +
    • +{%- endmacro -%} + +{%- macro disabledNext(text = 'Next') -%} +
  • + + + {{ text }} + +
    • +{%- endmacro -%} \ No newline at end of file