AFX Pagination

Pagination_simple.fusion

# 
# simple pagination with parameter appending to a uri
#
prototype(Vendor.Site:Components.Molecules.Pagination) < prototype(PackageFactory.AtomicFusion:Component) {
    @styleguide {
        title = 'Pagination'
        props {
            current = 12
            start = 8
            end = 16
            last = 25
            baseUri = 'http://www.example.com'
        }
    }

    # first number to be rendererd (if greater than 1 "first" is shown)  
    start = 1 
    
    # last page number to be rendered 
    end = 1
    
    # number to highlight as current
    current = 1
    
    # last possible number (used for "last" if greater than end)     
    last = 1

    # prototype to render the link, the prototype gets the attribute "page" passed
    baseUri = null

    renderer = afx`
        <div class="page-navigation"
            @if.isPaginationNeeded={props.last > 1}
        >
            <ul class="neos-widget-paginator">

                <li class="prev" @if.shall={props.current > 1} >
                    <a href={props.baseUri + '?page=' + (props.current - 1)}>prev</a>
                </li>

                <li class="first" @if.shall={props.start > 1}>
                    <a href={props.baseUri + '?page=1'}>1</a>
                </li>

                <li @if.shall={props.start > 2}>...</li>

                <Neos.Fusion:Collection collection={Array.range(props.start, props.end)} itemName="page" @children="itemRenderer">
                    <li class={(props.current == page) ? 'current': ''}>
                        <a href={props.baseUri + '?page=' + page}>next</a>
                    </li>
                </Neos.Fusion:Collection>

                <li @if.shall={props.end < (props.last - 1)}>...</li>

                <li  class="last" @if.shall={props.end < props.last}>
                    <a href={props.baseUri + '?page=' + props.last}>1</a>
                </li>

                <li class="next" @if.shall={props.current < props.last} >
                    <a href={props.baseUri + '?page=' + (props.current + 1)}>next</a>
                </li>

            </ul>
        </div>
    `
}

Pagination_with_link_indirection.fusion

#
# pagination with translation and link generation via passed linkRenderer-prototyoe
#
prototype(Vendor.Site:Components.Molecules.Pagination) < prototype(PackageFactory.AtomicFusion:Component) {
    @styleguide {
        title = 'Pagination'
        props {
            current = 12
            start = 8
            end = 16
            last = 25
            linkRenderer = 'Vendor.Site:Prototypes.Pagination.AnchorLinkRenderer'
        }
    }

    # first number to be rendererd (if greater than 1 "first" is shown)  
    start = 1 
    
    # last page number to be rendered 
    end = 1
    
    # number to highlight as current
    current = 1
    
    # last possible number (used for "last" if greater than end)     
    last = 1

    # prototype to render the link, the prototype gets the attribute "page" passed
    linkRenderer = 'Vendor.Site:Prototypes.Pagination.DocumentNodeLinkRenderer'

    renderer = afx`
        <div class="page-navigation"
            @if.isPaginationNeeded={props.last > 1}
        >
            <ul class="neos-widget-paginator">

                <li class="prev" @if.shall={props.current > 1} >
                    <Neos.Fusion:Renderer type={props.linkRenderer} element.page={props.current - 1} @children="element.content">
                        {Translation.id('widget.paginate.previous').package('Neos.FluidAdaptor').source('Main')}
                    </Neos.Fusion:Renderer>
                </li>

                <li class="first" @if.shall={props.start > 1}>
                    <Neos.Fusion:Renderer type={props.linkRenderer} element.page={1} @children="element.content">
                        {1}
                    </Neos.Fusion:Renderer>
                </li>

                <li @if.shall={props.start > 2}>...</li>

                <Neos.Fusion:Collection collection={Array.range(props.start, props.end)} itemName="page" @children="itemRenderer">
                    <li class={(props.current == page) ? 'current': ''}>
                        <Neos.Fusion:Renderer type={props.linkRenderer} element.isCurrent={props.current == page} element.page={page} @children="element.content">
                            {page}
                        </Neos.Fusion:Renderer>
                    </li>
                </Neos.Fusion:Collection>

                <li @if.shall={props.end < (props.last - 1)}>...</li>

                <li  class="last" @if.shall={props.end < props.last}>
                    <Neos.Fusion:Renderer type={props.linkRenderer} element.page={props.last} @children="element.content">
                        {props.last}
                    </Neos.Fusion:Renderer>
                </li>

                <li class="next" @if.shall={props.current < props.last} >
                    <Neos.Fusion:Renderer type={props.linkRenderer} element.page={props.current + 1} @children="element.content">
                         {Translation.id('widget.paginate.next').package('Neos.FluidAdaptor').source('Main')}
                    </Neos.Fusion:Renderer>
                </li>

            </ul>
        </div>
    `
}