Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save eazyliving/270fd66e651f6e02c0d2b829cbad20f7 to your computer and use it in GitHub Desktop.
Save eazyliving/270fd66e651f6e02c0d2b829cbad20f7 to your computer and use it in GitHub Desktop.
f3 pagination template for uikit
<!-- This is just fun and to try, if I can make this inside a template
Well... obviously f3 can :)
the original code is taken from uikit's pagination javascript (v2! http://getuikit.com/v2)
Don't take this for good practice, it is not!
It won't go into production for fyyd.de in this form :)
-->
<set pageurl="{{ substr ( @_SERVER.REQUEST_URI, 0, strrpos(@_SERVER.REQUEST_URI,'/')) }}"/>
<set edges="3"/>
<set pages="5"/>
<set hdis="{{@pages / 2}}"/>
<set start="{{ceil(@pagepos > @hdis ? max(min(@pagepos - @hdis, (@maxpages - @pages)),0):0)}}"/>
<set end="{{ceil(@pagepos > $hdis ? min(@pagepos + @hdis,@maxpages) : min (@pages,@maxpages))}}"/>
<set parseurl="{{parse_url('https://'.@HOST.@SERVER.REQUEST_URI)}}"/>
<check if="{{@parseurl.query==''}}">
<true>
<set pageurl="{{ substr ( @_SERVER.REQUEST_URI, 0, strrpos(@_SERVER.REQUEST_URI,'/')).'/%d' }}"/>
</true>
<false>
<set qarr="{{ explode('&',@parseurl.query) }}">
<set newquery = '' />
<repeat group="{{@qarr}}" value="{{@qpart}}">
<set qkeyval="{{ explode ('=', @qpart) }}"/>
<check if="{{@qkeyval.0!='page'}}">
<set newquery="{{@newquery.'&'.$qpart}}"/>
</check>
</repeat>
<set pageurl="{{ @parseurl['path'].'?page=%d'.$newquery}}"/>
</false>
</check>
<ul class="uk-pagination uk-flex-center">
<check if="{{@pagepos>1}}">
<li><a href="#"><span uk-pagination-previous></span></a></li>
</check>
<check if="{{@start>0}}">
<loop from="{{@i=0}}" to="{{@i<min(@edges,@start)}}" step="{{@i++}}">
<set pi="{{@i < 0 ? 0 : (@i < @maxpages ? @i : @maxpages -1)}}"/>
<li <check if="{{@pi==@pagepos}}">class="uk-active"</check>><a href="{{sprintf(@pageurl,@pi)}}">{{@pi+1}}</a></li>
</loop>
<check if="{{@edges < @start && (@start - @edges)!=1}}">
<true>
<li class="uk-disabled"><span>...</span></li>
</true>
<false>
<check if="{{@start - @edges == 1}}">
<set pi="{{@edges < 0 ? 0 : (@edges < @maxpages ? @edges : @maxpages -1)}}"/>
<li <check if="{{@pi==@pagepos}}">class="uk-active"</check>><a href="{{sprintf(@pageurl,@pi)}}">{{@pi+1}}</a></li>
</check>
</false>
</check>
</check>
<loop from="{{@i=@start}}" to="{{@i<@end}}" step="{{@i++}}">
<set pi="{{@i < 0 ? 0 : (@i < @maxpages ? @i : @maxpages -1)}}"/>
<li <check if="{{@pi==@pagepos}}">class="uk-active"</check>><a href="{{sprintf(@pageurl,@pi)}}">{{@pi+1}}</a></li>
</loop>
<check if="{{@end<@maxpages}}">
<check if="{{@maxpages - @edges > @end && (@maxpages - @edges - @end != 1)}}">
<true>
<li class="uk-disabled"><span>..</span></li>
</true>
<false>
<check if="{{@maxpages - @edges - @end == 1}}">
<set pi="{{@end < 0 ? 0 : (@end < @maxpages ? @end : @maxpages -1)}}"/>
<li <check if="{{@pi==@pagepos}}">class="uk-active"</check>><a href="{{sprintf(@pageurl,@pi)}}">{{@pi+1}}</a></li>
</check>
</false>
</check>
<loop from="{{@i=max(@maxpages - @edges, @end)}}" to="{{@i<@maxpages}}" step="{{@i++}}">
<set pi="{{@i < 0 ? 0 : (@i < @maxpages ? @i : @maxpages -1)}}"/>
<li <check if="{{@pi==@pagepos}}">class="uk-active"</check>><a href="{{sprintf(@pageurl,@pi)}}">{{@pi+1}}</a></li>
</loop>
</check>
<check if="{{@pagepos<@maxpages-1}}">
<li><a href="#"><span uk-pagination-next></span></a></li>
</check>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment