Home
Hi there,
This code will create a list of members that is updated via AJAX in the lower-left corner of the page.
Placement: In all pages.
Title: As you wish.
Result (gif): https://i.imgur.com/rfuqUqR.gif
o/
This code will create a list of members that is updated via AJAX in the lower-left corner of the page.
- Code:
/*globals jQuery, _userdata*/
/**
*! Simple memberlist in bottom of the page.
*
* @author Luiz~
* @licence MIT
*
* Copyright (c) Luiz~ | All rights reserved.
*/
(function ($) {
'use strict';
var members = {
config: {
max_per_page: 20,
only_members: false
},
text: {
title: 'Memberlist',
search_placeholder: 'Find a user...',
next_text: 'Next',
back_text: 'Back'
},
ajaxInit: function () {
members.checkCount();
members.counter = 0;
$.ajax({
url: '/memberlist',
method: 'GET',
data: {
mode: members.template.find('#fa-display-user-type').val(),
order: members.template.find('#fa-order-user-type').val(),
start: 0,
username: ''
},
beforeSend: function () {
members.template.find('.fa-user-list .append-user-list-zone')
.html([
'<span class="loading-status">',
' <i class="fa fa-spin fa-refresh"></i>',
'</span>'
].join('\n'))
;
}
})
.done(function (context) {
context = context.replace(/src=/gi, 'data-src=');
var $table = $('#memberlist', context);
var $row = $table.find('tbody tr');
members.template.find('.loading-status').remove();
members.template.find('.member-user-row').remove();
$row.each(function () {
var $this = $(this);
var isIn = $this.index();
if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
var member = $this.find('td').eq(1).html();
var pmlink = $this.find('td').eq(6).find('a').attr('href');
members.extraValue = '';
if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
}
if (members.template.find('#fa-display-user-type').val() === 'posts') {
members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
}
if (members.template.find('#fa-display-user-type').val() === 'joined') {
members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
}
members.create.new(avatar, member, members.extraValue, pmlink, isIn);
}
});
return false;
})
.fail(function () {
members.create.error('Error! :(');
})
;
},
ajaxPrev: function () {
members.checkCount('minus');
$.ajax({
url: '/memberlist',
method: 'GET',
data: {
mode: members.template.find('#fa-display-user-type').val(),
order: members.template.find('#fa-order-user-type').val(),
start: members.counter,
username: ''
},
beforeSend: function () {
members.template.find('.fa-user-list .append-user-list-zone')
.html([
'<span class="loading-status">',
' <i class="fa fa-spin fa-refresh"></i>',
'</span>'
].join('\n'))
;
}
})
.done(function (context) {
context = context.replace(/src=/gi, 'data-src=');
var $table = $('#memberlist', context);
var $row = $table.find('tbody tr');
members.template.find('.loading-status').remove();
members.template.find('.member-user-row').remove();
$row.each(function () {
var $this = $(this);
var isIn = $this.index();
if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
var member = $this.find('td').eq(1).html();
var pmlink = $this.find('td').eq(6).find('a').attr('href');
members.extraValue = '';
if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
}
if (members.template.find('#fa-display-user-type').val() === 'posts') {
members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
}
if (members.template.find('#fa-display-user-type').val() === 'joined') {
members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
}
members.create.new(avatar, member, members.extraValue, pmlink, isIn);
}
});
return false;
})
.fail(function () {
members.create.error('Houve um erro. <br /> Tente novamente!');
})
;
},
ajaxNext: function () {
members.checkCount('plus');
$.ajax({
url: '/memberlist',
method: 'GET',
data: {
mode: members.template.find('#fa-display-user-type').val(),
order: members.template.find('#fa-order-user-type').val(),
start: members.counter,
username: ''
},
beforeSend: function () {
members.template.find('.fa-user-list .append-user-list-zone')
.html([
'<span class="loading-status">',
' <i class="fa fa-spin fa-refresh"></i>',
'</span>'
].join('\n'))
;
}
})
.done(function (context) {
context = context.replace(/src=/gi, 'data-src=');
var $table = $('#memberlist', context);
var $row = $table.find('tbody tr');
members.template.find('.loading-status').remove();
members.template.find('.member-user-row').remove();
$row.each(function () {
var $this = $(this);
var isIn = $this.index();
if (isIn < members.config.max_per_page && members.template.css('display') === 'block') {
var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
var member = $this.find('td').eq(1).html();
var pmlink = $this.find('td').eq(6).find('a').attr('href');
members.extraValue = '';
if (members.template.find('#fa-display-user-type').val() === 'lastvisit') {
members.extraValue = '<i class="fa fa-clock-o"></i> ' + $this.find('td').eq(4).text();
}
if (members.template.find('#fa-display-user-type').val() === 'posts') {
members.extraValue = '<i class="fa fa-comments-o"></i> ' + $this.find('td').eq(5).text();
}
if (members.template.find('#fa-display-user-type').val() === 'joined') {
members.extraValue = '<i class="fa fa-user-plus"></i> ' + $this.find('td').eq(3).text();
}
members.create.new(avatar, member, members.extraValue, pmlink, isIn);
}
});
return false;
})
.fail(function () {
members.create.error('Error! :(');
})
;
},
ajaxFind: function (username) {
members.currentFind = $.ajax({
url: '/memberlist',
method: 'GET',
data: {
mode: members.template.find('#fa-display-user-type').val(),
order: members.template.find('#fa-order-user-type').val(),
submit: 'Ok',
username: username
},
})
.done(function (context) {
context = context.replace(/src=/gi, 'data-src=');
var $table = $('#memberlist', context);
var $row = $table.find('tbody tr');
members.template.find('.finding-loading-status').remove();
members.template.find('li.member-user-find').remove();
if (!members.template.find('#fa-field-find-user').is(':focus')) {
return false;
}
$row.each(function () {
var $this = $(this);
var isIn = $this.index();
if (isIn < 3 && members.template.css('display') === 'block') {
var avatar = $this.find('td.avatar-mini').find('a img').attr('data-src');
var member = $this.find('td').eq(1).html();
var pmlink = $this.find('td').eq(6).find('a').attr('href');
if (members.template.find('#fa-field-find-user').val().length < 4) {
members.template.find('.fa-search-error').remove();
members.create.newFound($('<li>', {
class: 'member-user-find error-for-find fa-search-error',
html: '<i class="fa fa-ban"></i> You must enter at least 3 characters.'
}).prop('outerHTML'));
return;
}
if (!member) {
members.create.newFound($('<li>', {
class: 'member-user-find error-for-find',
html: '<i class="fa fa-ban"></i> User does not exist.'
}).prop('outerHTML'));
return;
}
members.create.newFound($('<li>', {
class: 'member-user-find member-user-find-' + isIn,
html: [
$('<div>', { style: 'background-image: url(' + avatar + ')', 'class': 'fa-user-find-avatar' }).prop('outerHTML'),
$('<span>', { 'class': 'fa-username', html: member }).prop('outerHTML'),
$('<a>', { href: pmlink, 'class': 'fa-pmlink-find', html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML')
].join('\n')
}).prop('outerHTML'));
}
});
return false;
})
.fail(function () {
members.create.newFound($('<li>', {
class: 'member-user-find error-for-find',
html: 'Error :('
}).prop('outerHTML'));
})
;
},
checkCount: function (number) {
if (members.counter === 0) {
members.template.find('#fa-contact-prev-page')
.addClass('disabled')
;
} else {
members.template.find('#fa-contact-prev-page')
.removeClass('disabled')
;
}
if (number === 'plus') {
members.template.find('#fa-contact-prev-page')
.removeClass('disabled')
;
members.counter = members.counter + 20;
return;
}
if (number === 'minus' && members.counter !== 0) {
if (members.counter === 0) {
members.template.find('#fa-contact-prev-page')
.addClass('disabled')
;
}
members.counter = members.counter - 20;
return;
}
},
create: {
new: function (avatar, member, extraValue, pmlink, isIn) {
members.template.find('.append-user-list-zone')
.append([
'<tr class="member-user-row member-user-' + isIn + '">',
' <td>',
$('<img />', { src: avatar, 'class': 'fa-userlist-avatar' }).prop('outerHTML'),
' </td>',
$('<td>', { 'class': 'fa-userlist-username', html: member }).prop('outerHTML'),
$('<td>', { 'class': 'fa-userlist-extra-value', html: extraValue }).prop('outerHTML'),
' <td class="fa-userlist-pmwrapper">',
$('<a>', { href: pmlink, html: '<i class="fa fa-envelope"></i>' }).prop('outerHTML'),
' </td>',
'</tr>'
].join('\n'))
;
},
newFound: function (member) {
members.template.find('.fa-members-find ul')
.append(member)
;
},
error: function (log) {
members.template.find('.fa-user-list .append-user-list-zone')
.html('<span class="log log-error loading-status">' + log + '</span>')
;
}
},
counter: 0,
extraValue: ''
};
$(function () {
if (_userdata["session_logged_in"] === 0 && members.config.only_members) {
return false;
}
members.template = $([
'<div class="fa-memberlist-wrapper">',
' <div class="fa-memberlist-toggler">',
' <a href="javascript:void(0)" title="Open the userlist.">',
' <i class="fa fa-users"></i>',
' </a>',
' </div>',
' <div class="fa-memberlist-inner">',
' <header>',
' <h4>' + members.text.title + '</h4>',
' <form id="fa-find-user">',
' <input id="fa-field-find-user" autocomplete="off" type="search" placeholder="' + members.text.search_placeholder + '" />',
' <div class="fa-members-find" style="display: none;">',
' <ul>',
' <span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>',
' </ul>',
' <span class="fa fa-times" id="close-find-wrapper"></span>',
' </div>',
' <div class="fa-select-form-group">',
' <label for="fa-display-user-type">Display by:</label>',
' <select id="fa-display-user-type">',
' <option value="lastvisit" selected="selected">Last visit</option>',
' <option value="joined">Register date</option>',
' <option value="username">Username</option>',
' <option value="posts">Messages</option>',
' </select>',
' </div>',
' <div class="fa-select-form-group">',
' <label for="fa-order-user-type">Order:</label>',
' <select id="fa-order-user-type">',
' <option value="">Growing</option>',
' <option value="DESC" selected="selected">Decreasing</option>',
' </select>',
' </div>',
' </form>',
' </header>',
' <div class="fa-user-list">',
' <table class="fa-userlist-table">',
' <tbody class="append-user-list-zone">',
' </tbody>',
' </table>',
' </div>',
' <footer>',
' <a id="fa-contact-next-page">' + members.text.next_text + '</a>',
' <a id="fa-contact-prev-page" class="disabled">' + members.text.back_text + '</a>',
' </footer>',
' </div>',
'</div>'
].join('\n'))
.appendTo('body')
;
members.template.find('.fa-memberlist-toggler')
.on('click', function () {
members.counter = 0;
var $this = $(this);
$this.toggleClass('next-is-visible');
if ($this.is('.next-is-visible')) {
console.log('Rodando ajax primário...');
members.ajaxInit();
}
$this
.next()
.toggle()
;
return false;
})
;
members.template.find('#fa-contact-prev-page')
.on('click', function () {
if (members.counter >= 20) {
console.log('Rodando ajax de página anterior...');
members.ajaxPrev();
}
members.checkCount();
return false;
})
;
members.template.find('#fa-contact-next-page')
.on('click', function () {
console.log('Rodando ajax de próxima página...');
members.ajaxNext();
return false;
})
;
members.template.find('#fa-field-find-user')
.on({
focus: function () {
members.template.find('.fa-members-find ul li').remove();
members.template.find('.fa-members-find ul')
.html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>')
;
},
keyup: function () {
if (members.currentFind) {
members.currentFind.abort();
}
if (members.template.find('#fa-field-find-user').val().length === 0) {
members.template.find('.fa-members-find ul')
.html('<span class="finding-loading-status fa-search-error"><i class="fa fa-user"></i> Enter a user nickname...</span>')
;
}
if ($(this).val().length >= 3) {
members.template.find('.fa-members-find ul')
.html([
'<li class="finding-loading-status">',
' <i class="fa fa-spin fa-refresh"></i>',
' <span class="sr-only">Loading...</span>',
'</li>'
].join('\n'))
;
members.ajaxFind($(this).val());
} else {
members.template.find('.fa-members-find ul')
.html('<span class="finding-loading-status fa-search-error"><i class="fa fa-ban"></i> You must enter at least 3 characters.</span>')
;
return false;
}
}
})
;
members.template.find('#close-find-wrapper')
.on('click', function () {
members.template.find('.fa-members-find ul').hide();
members.template.find('.fa-members-find ul li').remove();
members.template.find('#fa-field-find-user').val('');
})
;
members.template.find('form')
.on('submit', function (event) {
event.preventDefault();
})
;
members.template.find('#fa-display-user-type, #fa-order-user-type')
.on('change', function () {
members.ajaxInit();
return false;
})
;
members.template.on('click', function (event) {
event.stopPropagation();
});
$(document).on('click', function () {
members.template.find('.fa-memberlist-inner')
.hide()
;
});
members.style = [
'.fa-members-find .fa-user-find-avatar {',
' display: inline-block;',
' width: 30px;',
' height: 30px;',
' background-size: 20px;',
' background-position: center center;',
' background-repeat: no-repeat;',
' vertical-align: middle;',
' border-radius: 100px;',
' border: solid 1px #fff;',
' background-color: #fff;',
' box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.39);',
'}',
'',
'.fa-members-find ul li {',
' margin-bottom: 5px;',
' display: block;',
' position: relative;',
'}',
'',
'.fa-members-find .fa-pmlink-find {',
' position: absolute;',
' top: 50%;',
' right: 20px;',
' color: #39c;',
' font-size: 15px;',
' -moz-transform: translateY(-50%);',
' -ms-transform: translateY(-50%);',
' -webkit-transform: translateY(-50%);',
' -o-transform: translateY(-50%);',
' transform: translateY(-50%);',
'}',
'',
'.fa-members-find .fa-pmlink-find:hover {',
' color: #444;',
'}',
'',
'.fa-memberlist-inner a {',
' cursor: pointer;',
'}',
'',
'.fa-members-find {',
' display: block;',
' background-color: #cde6f3;',
' position: absolute;',
' left: 15px;',
' right: 15px;',
' padding: 15px;',
' color: #555;',
' box-shadow: 0 0 4px 0px #c5deea;',
' font-size: 11px;',
'}',
'',
'.loading-status {',
' font-size: 24px;',
' padding: 15px 0px;',
' text-align: center;',
' display: block;',
'}',
'',
'.fa-userlist-username img,',
'.member-user-find img {',
' display: none;',
'}',
'',
'.fa-memberlist-wrapper {',
' position: fixed;',
' bottom: 0px;',
' left: 0px;',
' z-index: 99999;',
'}',
'',
'td.fa-userlist-extra-value {',
' position: absolute;',
' top: 50%;',
' right: 30px;',
' -moz-transform: translateY(-50%);',
' -ms-transform: translateY(-50%);',
' -webkit-transform: translateY(-50%);',
' -o-transform: translateY(-50%);',
' transform: translateY(-50%);',
'}',
'',
'.fa-memberlist-inner {',
' position: absolute;',
' display: none;',
'}',
'',
'.fa-memberlist-toggler {',
' width: 45px;',
' height: 45px;',
' box-sizing: border-box;',
' background-color: #39c;',
' position: relative;',
' border-radius: 0 5px 0 0;',
' transition: all 200ms;',
'}',
'',
'.fa-memberlist-toggler:hover {',
' background-color: #2e3133;',
'}',
'',
'.fa-memberlist-toggler i.fa {',
' position: absolute;',
' font-size: 25px;',
' top: 50%;',
' left: 47%;',
' color: #fff;',
' -moz-transform: translate(-50%, -50%);',
' -ms-transform: translate(-50%, -50%);',
' -webkit-transform: translate(-50%, -50%);',
' -o-transform: translate(-50%, -50%);',
' transform: translate(-50%, -50%);',
'}',
'',
'.fa-memberlist-wrapper * {',
' box-sizing: border-box;',
'}',
'',
'.fa-memberlist-inner {',
' position: absolute;',
' z-index: 99999999;',
' bottom: 45px;',
' background-color: #fff;',
' width: 350px;',
' box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
' border: solid 1px #ddd;',
' border-left: solid 0px;',
'}',
'',
'.fa-memberlist-inner header h4 {',
' color: #fff;',
' background-color: #39c;',
' padding: 10px 15px;',
' font-family: "Trebuchet MS", Arial, sans-serif;',
' text-transform: uppercase;',
' border: none;',
' margin: 0;',
' font-size: 18px;',
' font-weight: normal;',
'}',
'',
'.fa-memberlist-inner header form {',
' padding: 15px 15px 0 15px;',
' position: relative;',
' width: 100%;',
' display: block;',
'}',
'',
'.fa-memberlist-inner header form input,',
'.fa-memberlist-inner header form select {',
' width: 100%;',
' border: solid 1px #cecece;',
' padding: 7px;',
' font-size: 13px;',
' border-radius: 3px;',
' display: block;',
' padding-left: 31px;',
' color: #555;',
' background-image: url(https://forumeiros.github.io/assets/src/svg/find.svg);',
' background-repeat: no-repeat;',
' background-size: 16px;',
' background-position: 8px center;',
' transition: all 200ms;',
'}',
'',
'.fa-memberlist-inner header form select {',
' padding-left: 7px;',
' background: none;',
'}',
'',
'.fa-memberlist-inner header form label {',
' display: block;',
' margin-bottom: 6px;',
' margin-top: 13px;',
' font-size: 11px;',
'}',
'',
'.fa-memberlist-inner header form input::placeholder {',
' color: #555;',
'}',
'',
'.fa-memberlist-inner header form input:focus {',
' border-color: #39c;',
' outline: none;',
' box-shadow: inset 0 0 1px 0px #3399cc, 0 0 1px 1px #3399cc;',
'}',
'',
'.fa-memberlist-inner .fa-user-list {',
' padding: 15px;',
'}',
'',
'.fa-memberlist-inner footer {',
' background-color: #ddd;',
' padding: 10px 15px;',
'}',
'',
'.fa-memberlist-inner footer a {',
' font-size: 12px;',
' border-bottom: solid 1px transparent;',
' color: #39c;',
'}',
'',
'.fa-memberlist-inner footer a:hover {',
' border-bottom-color: #39c;',
'}',
'',
'a#fa-contact-next-page {',
' float: right;',
'}',
'',
'.disabled {',
' opacity: .9;',
' filter: blur(.5px);',
' cursor: not-allowed !important;',
'}',
'',
'.disabled:hover {',
' border-bottom-color: transparent!important;',
'}',
'',
'.fa-user-list {',
' max-height: 80vh;',
' max-height: -moz-calc(100vh - 355px);',
' max-height: -webkit-calc(100vh - 355px);',
' max-height: -ms-calc(100vh - 355px);',
' max-height: -o-calc(100vh - 355px);',
' max-height: calc(100vh - 355px);',
' overflow-y: scroll;',
' margin-top: 15px;',
' border-top: solid 1px #ddd;',
'}',
'',
'.fa-user-list table {',
' width: 100%;',
' border-collapse: collapse;',
'}',
'',
'tr.member-user-row {',
' display: block;',
' margin-bottom: 15px;',
' position: relative;',
'}',
'',
'tr.member-user-row:last-child {',
' margin-bottom: 0px;',
'}',
'',
'tr.member-user-row td img.fa-userlist-avatar {',
' width: 25px;',
' margin-right: 3px;',
' height: 25px;',
' border: solid 1px #989898;',
' border-radius: 5px;',
' box-shadow: 0 0 1px black;',
'}',
'',
'td.fa-userlist-pmwrapper {',
' position: absolute;',
' top: 50%;',
' right: 2px;',
' -moz-transform: translateY(-50%);',
' -ms-transform: translateY(-50%);',
' -webkit-transform: translateY(-50%);',
' -o-transform: translateY(-50%);',
' transform: translateY(-50%);',
'}',
'',
'td.fa-userlist-pmwrapper i {',
' color: #39c;',
' font-size: 15px;',
'}',
'',
'td.fa-userlist-pmwrapper i:hover {',
' color: #444;',
'}',
'',
'input#fa-field-find-user:focus + div.fa-members-find,',
'div.fa-members-find:hover {',
' display: block!important;',
'}',
'',
'span#close-find-wrapper {',
' position: absolute;',
' right: 15px;',
' top: 50%;',
' -moz-transform: translateY(-50%);',
' -ms-transform: translateY(-50%);',
' -webkit-transform: translateY(-50%);',
' -o-transform: translateY(-50%);',
' transform: translateY(-50%);',
' cursor: pointer;',
'}',
'',
'span#close-find-wrapper:hover {',
' color: #39c;',
'}'
].join('\n');
$('<style>', {
type: 'text/css',
text: members.style
}).appendTo('head');
});
}(jQuery));
Placement: In all pages.
Title: As you wish.
Result (gif): https://i.imgur.com/rfuqUqR.gif
o/
