Created
July 6, 2018 22:49
-
-
Save eazyliving/270fd66e651f6e02c0d2b829cbad20f7 to your computer and use it in GitHub Desktop.
f3 pagination template for uikit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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