All Projects → Flowpack → Flowpack.listable

Flowpack / Flowpack.listable

Licence: mit
Neos package that helps you to render lists of things

Projects that are alternatives of or similar to Flowpack.listable

Hhhorizontalpagingview
HHHorizontalPagingView是一个实现上下滚动时菜单悬停在顶端,并且可以左右滑动切换的视图
Stars: ✭ 348 (+923.53%)
Mutual labels:  pagination
Laravel Vue Pagination
A Vue.js pagination component for Laravel paginators that works with Bootstrap
Stars: ✭ 541 (+1491.18%)
Mutual labels:  pagination
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✭ 679 (+1897.06%)
Mutual labels:  pagination
Nestjs Typeorm Paginate
📃 Pagination response object function + types for typeorm + nestjs
Stars: ✭ 377 (+1008.82%)
Mutual labels:  pagination
Order query
Find next / previous Active Record(s) in one query
Stars: ✭ 472 (+1288.24%)
Mutual labels:  pagination
Tables
Bulma themed, VueJS powered Datatable with server-side loading and JSON template setup
Stars: ✭ 575 (+1591.18%)
Mutual labels:  pagination
React Js Pagination
Stars: ✭ 308 (+805.88%)
Mutual labels:  pagination
Knockout Pagination
Knockout.js分页插件
Stars: ✭ 11 (-67.65%)
Mutual labels:  pagination
Messenger
iOS - Real-time messaging app 🎨
Stars: ✭ 491 (+1344.12%)
Mutual labels:  pagination
Api Pagination
📄 Link header pagination for Rails and Grape APIs.
Stars: ✭ 641 (+1785.29%)
Mutual labels:  pagination
Jekyll Paginate V2
Pagination Generator for Jekyll 3 (enhanced replacement for the old built-in jekyll-paginate gem) ⛺
Stars: ✭ 412 (+1111.76%)
Mutual labels:  pagination
Jqpaginator
基于 jQuery 的分页组件
Stars: ✭ 424 (+1147.06%)
Mutual labels:  pagination
X.pagedlist
Library for easily paging through any IEnumerable/IQueryable in ASP.NET/ASP.NET Core
Stars: ✭ 625 (+1738.24%)
Mutual labels:  pagination
Mymovies
A Flutter app which shows a list of popular movies.
Stars: ✭ 371 (+991.18%)
Mutual labels:  pagination
Vuejs Paginate
A Vue.js(v2.x+) component for creating pagination.
Stars: ✭ 697 (+1950%)
Mutual labels:  pagination
Datatablesbundle
This Bundle integrates the jQuery DataTables plugin into your Symfony application.
Stars: ✭ 334 (+882.35%)
Mutual labels:  pagination
Sieve
⚗️ Clean & extensible Sorting, Filtering, and Pagination for ASP.NET Core
Stars: ✭ 560 (+1547.06%)
Mutual labels:  pagination
Gatsby Pagination
Gatsby utility that generates pages with pagination
Stars: ✭ 33 (-2.94%)
Mutual labels:  pagination
Paginationjs
A jQuery plugin to provide simple yet fully customisable pagination.
Stars: ✭ 726 (+2035.29%)
Mutual labels:  pagination
Vue Composable
Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +50 different composables
Stars: ✭ 638 (+1776.47%)
Mutual labels:  pagination

Listable

This Neos package solves one problem: help you list any nodes in Fusion. The idea is very simple: you often need to display list of things (e.g. news, articles etc), and the concern of listing items should better be separated from the concern of rendering items. This package provides a solid foundation for listing, while allowing you to take care of rendering stuff on your own.

TL;DR

  1. Install the package with composer: composer require flowpack/listable Here it is on packagist.
  2. If you want a paginated list, use Flowpack.Listable:PaginatedCollection.
  3. If you just want a simple list, use Flowpack.Listable:Collection (or just Neos.Fusion:Collection!).
  4. If you need a list with a header and an archive link, wrap you list into Flowpack.Listable:List
  5. For each of your nodetypes create a new Fusion object of type NodeTypeName + '.Short', or manually define a rendering object.
  6. Rely on public API keys when overriding settings.

Fusion objects

Keys documented here are considered public API and would be treated with semantic versioning in mind. Extend all other properties at your own risk.

Flowpack.Listable:Collection

This object is just a simple convienince wrapper around Neos.Fusion:Collection, use it if you want to save a few keystrokes. It wraps the list with UL and LI tags with a provided name and also set Flowpack.Listable:ContentCaseShort as a default for itemRenderer.

Configuration options:

Setting Description Defaults
collection An instance of ElasticSearchQueryBuilder, FlowQuery object or an array of nodes 'to-be-set'
listClass Classname of UL tag ''
itemClass Classname of LI tag wrapping each item ''
itemRenderer Object used for rendering child items. Within it you get two context vars set: node and iterator 'Flowpack.Listable:ContentCaseShort'
itemName Name of the the node context variable 'node'
iterationName Name of the the iterator context variable 'iteration'

Example:

prototype(My.Custom:Object) < prototype(Flowpack.Listable:Collection) {
  collection = ${q(site).find('[instanceof Something.Custom:Here]').sort('date', 'DESC').slice(0, 6).get()}
  listClass = 'MyList'
  itemClass = 'MyList-item'
}

It would use the object Something.Custom:Here.Short for rendering each item.

Make sure to correctly configure the cache.

Flowpack.Listable:PaginatedCollection

This object allows you to paginate either ElasticSearch results, FlowQuery result objects or pure Node arrays.

Configuration options:

Setting Description Defaults
collection An instance of ElasticSearchQueryBuilder, FlowQuery object or an array of nodes 'to-be-set'
itemsPerPage Number of items per page when using pagination 24
maximumNumberOfLinks Number of page links in pagination 15
listRenderer Object used for rendering the list. 'Flowpack.Listable:Collection'
showPreviousNextLinks Boolean value used to decide whether the previous and next links should be added false

When used with ElasticSearch, build the query, but don't execute it, the object will do it for you:

prototype(My.Custom:Object) < prototype(Flowpack.Listable:PaginatedCollection) {
  collection = ${Search.query(site).nodeType('Something.Custom:Here').sortDesc('date')}
  itemsPerPage = 12
  prototype(Flowpack.Listable:Collection) {
    listClass = 'MyPaginatedList'
    itemClass = 'MyPaginatedList-item'
  }
}

If you have additional URL parameters (e.g for a date filter) you have to register the argument and change the cache entryDiscriminator in order work accordingly. HINT: Do not forget to register a corresponding route for your custom argument.

prototype(My.Custom:Object) < prototype(Flowpack.Listable:PaginatedCollection) {
  ...

  prototype(Flowpack.Listable:PaginationParameters) {
    date = ${request.arguments.data}
  }

  @cache {
    entryDiscriminator = ${request.arguments.currentPage + request.arguments.date}
  }

}

This object is configured by default to dynamic cache mode for pagination to work. All you have to do is add correct entryTags and you are all set.

Flowpack.Listable:List

There's often a need to render a list with a header and an archive link. This object takes your list and wraps it with just that.

Configuration options:

Setting Description Defaults
wrapClass Class of the div that wraps the whole object ''
listTitle Title of the list ''
listTitleClass Class of the list title ''
archiveLink Nodepath for the archive link ''
archiveLinkTitle Title of the archive link ''
archiveLinkClass Classname of the archive link ''
archiveLinkAdditionalParams AdditionalParams of the archive link, e.g. @context.archiveLinkAdditionalParams = ${{archive: 1}} {}
list A list that this object should wrap value

Example:

prototype(My.Custom:Object) < prototype(Flowpack.Listable:PaginatedCollection) {
  @process.list = Flowpack.Listable:List {
    listTitle = 'My List'
    archiveLink = '~/page-path-or-identifier'
    archiveLinkTitle = 'See all news'
  }
  collection = ${q(site).find('[instanceof Something.Custom:Here]').sort('date', 'DESC').slice(0, 6).get()}
}

Flowpack.Listable:Pagination

You can also use pagination standalone from the PaginatedCollection.

Configuration options:

Setting Description Defaults
totalCount A total count of items 'to-be-set'
itemsPerPage Number of items per page 24
maximumNumberOfLinks A maximum number of links 15
class A class around pagination 'Pagination'
itemClass A total count of items 'Pagination-item'
currentItemClass A class for a current item 'isCurrent'
currentPage Current page, starting with 1 `${request.arguments.currentPage
showPreviousNextLinks Boolean value used to decide whether the previous and next links should be added false

FlowQuery Helpers you can use

filterByDate

Filter nodes by properties of type date.

filterByReference

Filter nodes by properties of type reference or references.

sortRecursiveByIndex

Sort nodes recursively by their sorting property.

Example:

${q(site).find('[instanceof Neos.Neos:Document]').sortRecursiveByIndex('DESC').get()}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].