The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Make the mentioning system easier to use

View previous topic View next topic Go down

Make the mentioning system easier to use

Post by Ange Tuteur on April 24th 2015, 7:48 am

Make the mentioning system easier to use


By default, the mentioning system relies on the user to type out the name of the person you want to mention, sometimes causing errors and mistakenly tagging other members. This tutorial will provide you with three different ways to make mentioning your members more user friendly ! Smile



Information



The method of installation will be via JavaScript, so make sure to navigate to JavaScript codes management in your Administration Panel. Wink
( Administration Panel > Modules > JavaScript codes management )

If you've recently created a forum, be sure that you enabled JS codes management by choosing Yes.


The first two scripts provided are optimized for all forum versions, provided you have not heavily modified your templates. You will see a variable at the top of these scripts titled version. Be sure to change the number to the one that corresponds to your forum version. The options are :

0 : PHPBB2
1 : PHPBB3
2 : PUNBB
3 : INVISION

( See this topic to find out your version )

Now, feel free to choose the features you want to install. Smile


  1. @ before the username in the profile
  2. Button for mentioning members
  3. SCEditor button for mentioning members


@ before the username in the profile



This modification will allow you to add the @ sign before the usernames in the posting profile. Clicking the @ sign will instantly insert that member's name into the editor !



Create a new script with the following settings. Add

Title : Postprofile Mention
Placement : In all the 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 = 'Mention ' + $(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');
 });
});

Modifications : At the top of the script you will see a version variable. Make sure that the number corresponds to your forum version. Wink

If you want to style the @ sign, you can use the following CSS style rules.
( Display > Colors > CSS stylesheet )
Code:
/* default styles */
a.fa-mention {
 color:#333;
}

/* hover styles */
a.fa-mention:hover {
 color:#666;
}


If you want to change the @ to something else, then find b.innerHTML = '@'; and change the @ sign to whatever you want ! Smile

When you're finished, go ahead and save the script.

Button for mentioning members



This modification will allow you to add a button to the existing post options for mentioning members. Clicking the button will add the username of that member to the editor.


Create a new script with the following settings. Add

Title : Mention button
Placement : In all the pages
Code:
/* FORUM VERSIONS
 * 0 = PHPBB2
 * 1 = PHPBB3
 * 2 = PUNBB
 * 3 = INVISION
 */
$(function() {
 var version = 0,
  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'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3; i<j; i++) {
  b = document.createElement('IMG');
  b.src = image;
  b.alt = 'Mention';
  b.title = 'Mention ' + $(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');
 });
});

Modifications : At the top of the script you will see a version variable. Make sure that the number corresponds to your forum version. Wink

Additionally you will also see an image variable. This is the image for the button, you can changes this with the URL of your own button if you like. Smile

When you're finished, go ahead and save the script.

SCEditor button for mentioning members



This modification will allow you to add a new button to your editor for mentioning members and friends. You can either type the name of the user, or if you have friends, select them from a predefined list. Once you're finish, you can click insert to add the mention into the editor.


Go to JavaScript codes management, and create a new script with the following settings. Add

Title : SCEditor Mention Button
Placement : In all the 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 = 'Select a friend';
  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">Username :</label></div>' + ( s.innerHTML ? '<div><label>Mention a friend :</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 : 'Mention a member'
 });
 
 toolbar = toolbar.replace(/quote,/,'mention,quote,');
 
 function mention(c, e) {
  $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
  e.insertText('@"' + pseudo + '" ');
  });
 }
});


Now, let's add some styles to the stylesheet so our button has the correct image. Go to Administration Panel > Display > Colors > CSS stylesheet paste the following rules and submit.
Code:
/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }

/* drop down input */
#fa-mention {
 background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
 padding-left:22px;
}


Click submit and you're ready to mention your members and friends ! Mr. Green



Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum