Con este plugin puede convertirse en su propio emoticon mediante el uso de su avatar ! No sólo eso , se puede elegir entre docenas de EmotiUser de al cambiar el id a la del usuario que desee.
Ya que soy "u1" que va a analizar el texto como mi bella imagen de usuario.
También puede cambiar el id de usar los avatares de otros miembros como emoticonos!
Note : Avatars are dynamically retrieved, so if the user changes their avatar it'll also change in older posts.
Instalación
Para instalar este módulo vaya al menú
Admin Panel > Modules > JavaScript codes management y crear una nueva JavaScript con los siguientes ajustes .
Title : EmotiUser
Placement : In all the pages
Pegue la siguiente secuencia de comandos y presentar:
- Código:
(function() {
'EmotiUser - Become your own personal emoticon !';
'DEVELOPED BY ANGE TUTEUR';
'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
'ORIGIN : http://fmdesign.forumotion.com/';
window.EmotiUser = {
default_icon : 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png', // default avatar
cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour )
// tagType influences the type of tags used
// 0 = BBCode
// 1 = HTML
tagType : 0,
// markup format
tag : [
'[table class="emotiuser"][tr][td]:u{UID}:[/td][/tr][/table]',
'<span class="emotiuser">:u{UID}:</span>'
],
parse : function() {
if (!EmotiUser.tags) {
EmotiUser.tags = $('.emotiuser');
EmotiUser.index = -1;
}
var tag = EmotiUser.tags[++EmotiUser.index];
if (tag) {
var txt = $(tag).text(),
tag_id = txt.replace(/:u(\d+):/, '$1'),
storage = window.localStorage;
if (storage && storage['emotiuser_' + tag_id] && storage['emotiuser_' + tag_id + '_exp'] > +new Date - EmotiUser.cacheTime) {
var icon = document.createElement('IMG'),
data = JSON.parse(storage['emotiuser_' + tag_id]);
icon.className = 'emotiuser_icon';
icon.src = data.src;
icon.alt = data.alt;
icon.title = data.title;
tag.parentNode.insertBefore(icon, tag);
tag.parentNode.removeChild(tag);
EmotiUser.parse();
} else {
$.get('/ajax/index.php?f=m&user_id=' + tag_id, function(d) {
var icon = $('.tooltip-content > img', d)[0],
name = $('.tooltip-title', d).text() || d;
if (!icon) {
icon = document.createElement('IMG');
icon.src = EmotiUser.default_icon;
}
icon.className = 'emotiuser_icon';
icon.title = name;
icon.alt = txt;
if (storage && window.JSON) {
storage['emotiuser_' + tag_id] = JSON.stringify({
src : icon.src,
alt : icon.alt,
title : icon.title
});
storage['emotiuser_' + tag_id + '_exp'] = +new Date;
}
tag.parentNode.insertBefore(icon, tag);
tag.parentNode.removeChild(tag);
EmotiUser.parse();
});
}
} else {
delete EmotiUser.tags;
delete EmotiUser.index;
}
}
};
document.write('<style type="text/css">.emotiuser, .emotiuser * { display:inline-block; } .emotiuser_icon { height:30px; vertical-align:middle; margin:3px; } .sceditor-button-emotiuser div { background:none !important; }</style>');
$(function(){
EmotiUser.parse();
if ($.sceditor && toolbar) {
$.sceditor.command.set('emotiuser', {
dropDown : function(editor, caller, callback) {
var content = document.createElement('DIV'),
input = document.createElement('INPUT'),
submit = document.createElement('INPUT');
input.type = 'text';
input.value = _userdata.user_id;
input.id = 'emotiuser_number';
submit.type = 'button';
submit.className = 'button';
submit.value = 'Insert';
submit.onclick = function() {
var id = +$('#emotiuser_number', this.parentNode)[0].value;
if (typeof id === 'number' && id > 0) {
callback(id);
editor.closeDropDown(true);
} else {
alert('Please insert a valid user id');
}
};
content.innerHTML = '<div><label for="emotiuser_number">User Id</label></div>';
content.firstChild.appendChild(input);
content.appendChild(submit);
editor.createDropDown(caller, 'emotiuser', content);
},
exec : function(c) {
var e = this;
$.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
});
},
txtExec : function(c) {
var e = this;
$.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
});
},
tooltip : 'EmotiUser'
});
toolbar = toolbar.replace(/date/, 'emotiuser,date');
$(function() {
var button = $('.sceditor-button-emotiuser div')[0];
if (button) {
$(button).append(_userdata.avatar.replace(/<img/, '<img style="height:16px;width:16px;"'));
button.style.textIndent = '0px';
}
});
}
});
}());
Una vez enviado el guión debe ser bueno y listo para usar EmotiUser! Ir a publicar un nuevo mensaje y haga clic en su avatar , que se debe mostrar en la barra de herramientas editor para empezar a insertar algunos iconos EmotiUser! Bueno.
Modificaciones
Si desea realizar modificaciones en el guión por favor siga leyendo.
Estos son los tres valores que están disponibles para modificaciones en la secuencia de comandos:
default_icon : Este contiene el URL de la imagen del avatar por defecto que se utilizará si el usuario especificado no está disponible . Puede cambiar esto con el icono predeterminado que desea mostrar. Por defecto es:
https://2img.net/i/fa/invision/pp-blank-thumb-38px.pngcacheTime : Si analizamos el avatar del usuario se recupera a través de AJAX , por lo que en un intento de acelerar los tiempos de carga de la imagen de usuario se almacena en caché durante 1 hora. ( 1 * 60 * 60 * 1000) Modificar este valor si desea que el tiempo de caché para ser más largo o más corto.
tagType : Toma un número que especifica el tipo de etiqueta que se utilizará para los iconos EmotiUser. De forma predeterminada se establece en 0, que significa que está utilizando una tabla de BBCode. Si desea utilizar el cambio de HTML este valor en 1.
Si usted tiene alguna pregunta o comentario no dude en dejar a continuación. Diviértete siendo un icono gestual !
Tutorial escrito por Ange Tuteur en EmotiUser - Become your own personal emoticon !