add AJAX to Character listing

This commit is contained in:
coderkun 2014-05-26 17:46:30 +02:00
commit 688d6d6382
4 changed files with 207 additions and 148 deletions

View file

@ -0,0 +1,25 @@
<?php
foreach($characters as &$character)
{
// Role translation
foreach($character['characterroles'] as &$role)
{
switch($role)
{
case 'admin': $role = _('Admin');
break;
case 'moderator': $role = _('Moderator');
break;
case 'user': $role = _('User');
break;
}
}
}
?>
<?=json_encode(array(
'seminary' => $seminary,
'characters' => $characters,
'more' => (($page*$limit) < $charactersCount)
))?>

View file

@ -18,10 +18,10 @@
<fieldset class="filter">
<p><small>Sortierung:</small></p>
<select name="sortorder" onchange="this.form.submit();">
<option value="charactername" <?php if($sortorder == 'charactername') : ?>selected="selected"<?php endif ?>><?=_('Character name')?></option>
<option value="name" <?php if($sortorder == 'name') : ?>selected="selected"<?php endif ?>><?=_('Character name')?></option>
<option value="xps" <?php if($sortorder == 'xps') : ?>selected="selected"<?php endif ?>><?=_('XPs')?></option>
<option value="role" <?php if($sortorder == 'role') : ?>selected="selected"<?php endif ?>><?=_('Role')?></option>
<option value="date" <?php if($sortorder == 'date') : ?>selected="selected"<?php endif ?>><?=_('Date of registration')?></option>
<option value="created" <?php if($sortorder == 'created') : ?>selected="selected"<?php endif ?>><?=_('Date of registration')?></option>
<?php foreach($characterfields as &$characterfield) : ?>
<option value="<?=$characterfield['url']?>" <?php if($sortorder == $characterfield['url']) : ?>selected="selected"<?php endif ?>><?=$characterfield['title']?></option>
<?php endforeach ?>
@ -30,7 +30,7 @@
</fieldset>
</form>
<ul class="admnql">
<ul id="characterlist" class="admnql">
<?php foreach($characters as &$character) : ?>
<li class="cf">
<img src="<?=$linker->link(array('media','avatar',$seminary['url'],$character['charactertype_url'],$character['xplevel']['level'],'portrait'))?>">
@ -46,3 +46,63 @@
</li>
<?php endforeach ?>
</ul>
<?php if(is_null($all) && ($page*$limit) < $charactersCount) : ?>
<nav class="admin">
<li><a id="show-more" href="<?=$linker->link(null,3,true,array('page'=>$page+1,'sortorder'=>$sortorder))?>"><?=_('Show more')?></a></li>
<li><a id="show-all" href="<?=$linker->link('all',3,true,array('sortorder'=>$sortorder))?>"><?=_('Show all')?></a></li>
</nav>
<?php endif ?>
<script>
var page = 1;
var request;
var linkAvatar = "<?=$linker->link(array('media','avatar','SEMINARY','CHARACTERTYPE','XPLEVEL','portrait'))?>";
var linkCharacter = "<?=$linker->link(array('character','SEMINARY','CHARACTER'),1)?>";
var linkUser = "<?=$linker->link(array('users','user','USER'))?>";
var linkPage = "<?=$linker->link(null,3,true,array('page'=>'PAGE','sortorder'=>$sortorder))?>";
$("#show-more").click(function(event) {
if(request) {
request.abort();
}
page++;
request = $.getJSON(linkPage.replace('PAGE', page), function(data) {
linkAvatar = linkAvatar.replace('SEMINARY', data['seminary']['url']);
linkCharacter = linkCharacter.replace('SEMINARY', data['seminary']['url']);
$.each(data['characters'], function(key, character) {
var urlAvatar = linkAvatar.replace('CHARACTERTYPE', character['charactertype_url']).replace('XPLEVEL', character['xplevel']['level']);
var urlCharacter = linkCharacter.replace('CHARACTER', character['url']);
var urlUser = linkUser.replace('USER', character['user']['url']);
$("#characterlist").append(
"<li class=\"cf\">" +
"<img src=\"" + urlAvatar + "\" />" +
"<p><a href=\"" + urlCharacter + "\">" + character['name'] + "</a><span>" + character['xps'] + " <?=_('XPs')?></span></p>" +
"<p>" +
"<small><a href=\"" + urlUser + "\">" + character['user']['username'] + "</a></small>\n" +
(character['characterroles'].length > 0 ? "<small>(" + character['characterroles'].join(', ') + ")</small>" : '') +
"</p>" +
"<p class=\"chrflds\">" + $.map(character['characterfields'], function(val, i) {
return val['value'];
}).join('</p>\n<p class="chrflds">') + "</p>" +
"</li>"
);
});
if(data['more']) {
$("#show-more").attr('href', linkPage.replace('PAGE', page+1));
}
else {
$("#show-more").remove();
$("#show-all").remove();
}
});
request.fail(function (jqXHR, textStatus, errorThrown) {
window.location.href = linkPage.replace('PAGE', page);
});
event.preventDefault();
return false;
});
</script>