Par défaut le système de mentions (tags utilisateur) requiert que vous tapiez le nom de l'utilisateur mentionné manuellement, cela cause souvent des erreurs et vous vous retrouvez à mentionner d'autres membres. Cette astuce va vous donner différents moyens de faciliter ce système afin d'éviter ces erreurs  .
Informations
Les deux premiers codes Javascript doivent être modifiés suivant la version de votre forum, rien de bien grave vous devrez indiquer comme valeur de la variable version le chiffre correspondant à votre version.
0 : PHPBB2
1 : PHPBB3
2 : PUNBB
3 : INVISION
Un @ devant le nom d'utilisateur dans le profil
Cette modification ajoute un @ devant le nom de l'utilisateur dans les profils de messages. En cliquant sur celui-ci le nom de l'utilisateur sera directement ajouté dans l'éditeur.
Créez un nouveau Javascript avec les paramètres suivant :
Titre : Mentionner via le profil des messages
Placement : sur toutes les pages
- Code:
/* FORUM VERSIONS
* 0 = PHPBB2
* 1 = PHPBB3
* 2 = PUNBB
* 3 = INVISION
*/
$(function() {
var version = 0;
if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
my_setcookie('fa_mention','');
} if (!/\/t\d+/.test(window.location.pathname)) return;
for (var a = $(['.name strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
b = document.createElement('A');
b.title = 'Mentionner ' + $(a[i]).text();
b.style.marginRight = '3px';
b.className = 'fa-mention';
b.innerHTML = '@';
b.href = '#';
b.onclick = function() {
var n = this.title.replace(/^.*?\s/,'');
if ($.sceditor) t.insertText('@"' + n + '" ');
else {
my_setcookie('fa_mention', n);
window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
}
return false;
};
a[i].parentNode.insertBefore(b, a[i]);
}
$(function(){
if (!$.sceditor) return;
t=$(t).sceditor('instance');
});
});
Si vous voulez styliser cette arobase il faudra ajouter un peu de CSS. Par exemple le code suivant (PA > Affichage > Couleurs > Feuille de style) :
- Code:
/* style par défaut */
a.fa-mention {
color:#333;
}
/* style au survol */
a.fa-mention:hover {
color:#666;
}
Bouton mentionner dans les options de message
Cette modification vous permettra d'ajouter un bouton aux options de message. Vous pourrez alors citer la personne qui à écrit le message en cliquant sur le bouton.
Créez un nouveau code Javascript avec les paramètres suivants :
Titre : Mentionner via les options de message
Placement : sur toutes les pages
- Code:
/* FORUM VERSIONS
* 0 = PHPBB2
* 1 = PHPBB3
* 2 = PUNBB
* 3 = INVISION
* 4 = MODERNBB
*/
$(function() {
var version = 4,
image = 'http://i19.servimg.com/u/f19/18/21/60/73/mentio10.png';
if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
my_setcookie('fa_mention','');
} if (!/\/t\d+/.test(window.location.pathname)) return;
for (var a = $(['.post-options', '.profile-icons', '.post-options', '.posting-icons', '.profile-icons'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a', '.postprofile-name a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3 || version == 4; i<j; i++) {
b = document.createElement('IMG');
b.src = image;
b.alt = 'Mentionner';
b.title = 'Mentionner ' + $(a[i]).closest('.post').find(d + ':not(.fa-mention)').text();
b.className = 'i_icon_mention';
b.onclick = function() {
var n = this.title.replace(/^.*?\s/,'');
if ($.sceditor) t.insertText('@"' + n + '" ');
else {
my_setcookie('fa_mention', n);
window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
}
};
if (l) {
c = document.createElement('LI');
c.appendChild(b);
}
a[i].insertBefore(l ? c : b, a[i].firstChild);
}
$(function(){
if (!$.sceditor) return;
t=$(t).sceditor('instance');
});
});
Afin de changer l'image du bouton il vous faudra changer l'adresse de la variable image au début du script.
Bouton mentionner dans l'éditeur
Cette modification vous permettra d'ajouter un bouton à l'éditeur de message. Vous pourrez alors mentionner un membre lambda ou en choisir un parmi vos amis  .
Créez un nouveau code javascript avec les paramètres suivants.
Titre : Bouton mentionner dans l'éditeur
placement : sur toutes les pages
- Code:
$(function(){
if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
var storage = window.localStorage, s = document.createElement('SELECT'), amis;
if (storage && storage.faAmis && storage.faAmisExp > +new Date - 29*59*1000 && storage.faAmisUser == _userdata.username) s.innerHTML = storage.faAmis;
else {
$.get('/privmsg?mode=post', function(d) {
amis = $('select[name="userfriend"]', d)[0] || 0;
if (amis) {
amis.firstChild.innerHTML = 'Sélectionner un ami';
s.innerHTML = amis.innerHTML;
}
if (storage) {
storage.faAmis = amis ? amis.innerHTML : 0;
storage.faAmisUser = _userdata.username;
storage.faAmisExp = +new Date;
}
});
}
$.sceditor.command.set('mention', {
dropDown : function(editor, caller, callback) {
var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
b.type = 'button';
b.value = 'Insert';
b.className = 'button';
c.type = 'text';
c.id = 'fa-mention';
a.innerHTML = '<div><label for="fa-mention">Pseudo de l\'utilisateur :</label></div>' + ( s.innerHTML ? '<div><label>Mentionner un ami :</label></div>' : '' ) + '<div></div>';
a.firstChild.appendChild(c);
a.lastChild.appendChild(b);
if (s.innerHTML != 0) {
s.value = '';
a.getElementsByTagName('DIV')[1].appendChild(s);
s.onchange = function() {
c.value = s.value;
};
}
b.onclick = function() {
c.value && callback(c.value);
editor.closeDropDown(true);
};
editor.createDropDown(caller, 'insertmention', a);
},
exec : function(c) { mention(c, this) },
txtExec : function(c) { mention(c, this) },
tooltip : 'Mentionner un membre'
});
toolbar = toolbar.replace(/quote,/,'mention,quote,');
function mention(c, e) {
$.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
e.insertText('@"' + pseudo + '" ');
});
}
});
Ajoutez maintenant le code CSS suivant à votre feuille de style CSS (PA > Affichage > Couleurs > Feuille de style) :
- Code:
/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
/* menu déroulant du bouton mentionner */
#fa-mention {
background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
padding-left:22px;
}
Vous voilà prêt à mentionner tous vos membres et amis  !
|
Accueil
Créer un forum
Rendre le système de mentions plus facile à utiliser
par Shadow Mar 19 Mai 2015 - 9:52
