[TUTORIAL] Emoticons pessoais no fórum

Introdução

Muitas vezes não gostamos dos emoticons disponibilizados por certos fóruns. Este tutorial resolverá o problema, pois ele ensinará como permitir que os membros adicionem e usem os seus próprios emoticons pessoais.




1º - Criando novo campo do perfil
Primeiramente você deverá criar um novo campo de perfil. Para gerir os perfis deverá aceder a:
Painel de Controle -> Usuários & Grupos -> Usuários -> Perfis

Criar um campo personalizado - Para criar um novo perfil personalizado, deverá carregar no link.

2º - Definir os valores do novo campo:
Agora devemos compor o nosso campo, veja abaixo como proceder para configurá-la:

Tipo - O que pretendemos no momento é criar uma zona de texto, sendo assim terá de selecionar o campo "zona de texto".

Nome - Aqui você deve definir um nome para a sua nova função. Ex. Emoticons pessoais.

Descrição - Aqui você deve definir uma descrição para o campo, ela será mostrada no perfil do membro.

URL do ícone - Deixe este campo em branco.

Obrigatório o preenchimento? - Aqui você deve definir este campo como "não" pois assim ele não irá ser mostrado no formulário de cadastro.

Visualização - Marque apenas no "Perfil".

Tipo de visualização - Defina que o campo será exibido como "Texto".

Quem pode modificar o valor do seu conteúdo - Aqui você deve definir quem pode modificar este campo, o recomendável é que seja definido para que o próprio usuário possa modificar o campo.

Exibir este campo para visitantes tendo ao menos o status - Defina o nível mínimo que o usuário precisa ter para que o mesmo possa visualizar este campo.

Separador - Escolha o modo como este campo será separado dos outros. Ele poderá ser separado por uma barra, por uma quebra de linha ou pulando uma linha. Lembrando que neste caso você deve escolher "Quebra de linha".

Conteúdo padrão- Deverá preencher este campo com o código que será passado logo abaixo.

Largura máxima - Deverá definir um número máximo de caracteres, que o moderador terá à disposição, assim que colocar um conteúdo no campo de perfil.

Conteúdo padrão:

Código:

[table class="fa_personal_emoticons"][tr][td][/td][/tr][/table]

Após as modificações, salve o campo, volte à editá-lo e no campo "Zona de texto" clique em "Substituir conteúdo". Confirme!


3º - Adicionando o script no fórum
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as paginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Código a ser utilizado:

Código:

$(function() {
        'DEVELOPED BY ANGE TUTEUR';
        'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
        'ORIGIN : http://fmdesign.forumotion.com/t1012-user-generated-emoticons#21094';
        if (!window.localStorage) return;
        window.fa_pemoticons_config = {
        hide_field : false, // hide/show field on profile
        position : 'top', // position of personal emoticons ; top or bottom
        // language settings
        lang : {
        title : 'Emoticons pessoais',
        desc : 'Você pode abaixo gerenciar seus emoticons pessoais. Estes emoticons serão exibidos no editor uma vez que você atualizar seu perfil.',
        update : 'Atualizar',
        upload : 'Enviar',
        cancel : 'Cancelar',
        add : 'Adicionar mais',
        delete : 'Deletar',
        up : 'Subir',
        down : 'Descer'
        }
        };
        // load handler for iframes
        // adds custom emoticons once the frame is loaded
        window.fa_pemoticons_load = function() {
        var insertEmoticon = function () {
        $('#text_editor_textarea').sceditor('instance').insert('[img]' + this.src + '[/img] ');
        },
        injectEmoticons = function (emotes, body) {
        if (fa_pemoticons_config.position.toLowerCase() == 'top') {
        body.insertBefore(emotes, body.firstChild.nextSibling);
        } else {
        body.appendChild(emotes);
        }
        },
        body = $(this).contents().find('body')[0],
        div = $('<div id="fa_personal_emoticon_list" />')[0];
        if (body) {
        if (localStorage['fa_pemoticons_u' + _userdata.user_id]) {
        div.innerHTML = localStorage['fa_pemoticons_u' + _userdata.user_id];
        for (var a = div.getElementsByTagName('IMG'), i = 0, j = a.length; i < j; i++) {
        a[i].onclick = insertEmoticon;
        }
        injectEmoticons(div, body);
        } else {
        $.get('/u' + _userdata.user_id, function(d) {
        var emoticons = $('.fa_personal_emoticons img', d),
        i = 0,
        j = emoticons.length;
        if (j) {
        for (; i < j; i++) {
        emoticons[i].onclick = insertEmoticon;
        div.appendChild(emoticons[i]);
        div.appendChild(document.createTextNode('\u00A0'));
        }
        }
        localStorage['fa_pemoticons_u' + _userdata.user_id] = div.innerHTML;
        injectEmoticons(div, body);
        });
        }
        }
        };
        // add load handlers for each iframe
        $(function() {
        var button = $('.sceditor-button-emoticon')[0];
        if (button) {
        button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_pemoticons_load;
        this.onclick = null;
        };
        }
        $('iframe[src^="/smilies"]').load(fa_pemoticons_load);
        });
        // hide field in profile
        if (fa_pemoticons_config.hide_field) {
        $('.fa_personal_emoticons').closest('[id^="field_id"]').hide();
        }
        // editing of profile field
        if (/\/profile|\/u\d+/.test(window.location.href)) {
        for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
        if (/class="fa_personal_emoticons"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
        // define global object
        window.fa_pemoticons = {
        // add new input to pemoticons_box
        add : function (value) {
        $('#pemoticons_box', fa_pemoticons.popup).append(
        '<div class="pemoticon_row">'+
        '<img class="pemoticon_preview" src="' + ( value ? value : 'http://2img.net/i/fa/empty.gif' ) + '" />'+
        '<input class="pemoticon_value inputbox" type="text" value="' + ( value ? value : '' ) + '" oninput="fa_pemoticons.preview(this)" />'+
        '<a class="pemoticons_action pemoticons_plus" href="#" onclick="fa_pemoticons.add(); return false;" title="' + fa_pemoticons_config.lang.add + '">+</a>'+
        '<a class="pemoticons_action pemoticons_minus" href="#" onclick="fa_pemoticons.remove(this); return false;" title="' + fa_pemoticons_config.lang.delete + '">-</a>'+
        '<a class="pemoticons_action pemoticons_up" href="#" onclick="fa_pemoticons.moveUp(this); return false;" title="' + fa_pemoticons_config.lang.up + '">▲</a>'+
        '<a class="pemoticons_action pemoticons_down" href="#" onclick="fa_pemoticons.moveDown(this); return false;" title="' + fa_pemoticons_config.lang.down + '">▼</a>'+
        '</div>'
        ).scrollTop(9999);
        },
        // remove input from pemoticons_box
        remove : function (that) {
        that.parentNode.parentNode.removeChild(that.parentNode);
        },
        // move the emoticon up in the list
        moveUp : function (that) {
        var prev = that.parentNode.previousSibling;
        if (prev) {
        prev.parentNode.insertBefore(that.parentNode, prev);
        }
        },
        // move the emoticon down in the list
        moveDown : function (that) {
        var next = that.parentNode.nextSibling,
        nextNext;
        if (next) {
        nextNext = next.nextSibling;
        if (nextNext) {
        next.parentNode.insertBefore(that.parentNode, nextNext);
        } else {
        next.parentNode.appendChild(that.parentNode);
        }
        }
        },
        // update the emoticon preview
        preview : function (that) {
        that.previousSibling.src = that.value ? that.value : 'http://2img.net/i/fa/empty.gif';
        },
        // update textarea with new value
        update : function () {
        var emoticons = $('.pemoticon_value', fa_pemoticons.popup),
        newVal = '[table class="fa_personal_emoticons"][tr][td]',
        i = 0,
        j = emoticons.length;
        for (; i < j; i++) {
        if (emoticons[i].value) {
        newVal += '[img]' + emoticons[i].value + '[/img]';
        }
        }
        fa_pemoticons.textarea.value = newVal + '[/td][/tr][/table]';
        fa_pemoticons.cancel();
        localStorage.removeItem('fa_pemoticons_u' + _userdata.user_id); // clear emoticon cache
        },
        // remove popup
        cancel : function () {
        document.body.style.overflow = '';
        document.body.removeChild(fa_pemoticons.popup);
        fa_pemoticons.popup = null;
        },
        // open servimg upload
        upload : function () {
        var win = window.open('http://www.servimg.com/', '_blank', 'width=620,height=300');
        $.get('/privmsg?mode=post', function(d) {
        var email = d.match(/var servImgAccount = '(.*?)';/i),
        id = d.match(/var servImgId = '(.*?)';/i),
        f = d.match(/var servImgF = '(.*?)';/i);
        if (email && id && f && email[1] && id[1] && f[1]) {
        win.location.href = 'http://www.servimg.com/multiupload.php?&mode=fae&account=' + email[1] + '&id=' + id[1] + '&f=' + f[1];
        }
        });
        },
        popup : null,
        textarea : null
        };
        // assign handler to textarea to show popup
        a[i].onfocus = function() {
        this.blur();
        if (fa_pemoticons.popup) {
        fa_pemoticons.cancel();
        }
        var popup = $(
        '<div id="pemoticons_overlay">'+
        '<div id="pemoticons_modal">'+
        '<h1>' + fa_pemoticons_config.lang.title + '</h1>'+
        '<p>' + fa_pemoticons_config.lang.desc + '</p>'+
        '<div id="pemoticons_box"></div>'+
        '<div style="text-align:center;">'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.update + '" onclick="fa_pemoticons.update();" />'+
        '&nbsp;'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.upload + '" onclick="fa_pemoticons.upload();" />'+
        '&nbsp;'+
        '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.cancel + '" onclick="fa_pemoticons.cancel();" />'+
        '</div>'+
        '</div>'+
        '</div>'
        )[0],
        emoticons = this.value.match(/\[img\].*?\[\/img\]/gmi),
        i = 0,
        j = emoticons ? emoticons.length : 0;
        fa_pemoticons.popup = popup;
        fa_pemoticons.textarea = this;
        if (j) {
        for (; i < j; i++) {
        fa_pemoticons.add(emoticons[i].replace(/^\[img\]|\[\/img\]$/ig, ''));
        }
        } else {
        fa_pemoticons.add();
        }
        document.body.style.overflow = 'hidden';
        document.body.appendChild(popup);
        };
        // add modal styles to the document
        $('head').append(
        '<style type="text/css">'+
        '#pemoticons_overlay { font-family:arial; background:rgba(0, 0, 0, 0.5); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999; }'+
        '#pemoticons_modal { background:#EEE; width:290px; height:300px; border:1px solid #CCC; position:absolute; top:50%; margin-top:-150px; left:50%; margin-left:-145px; overflow:auto; }'+
        '#pemoticons_box { height:150px; text-align:center; margin:3px; overflow:auto; }'+
        '#pemoticons_modal p { font-size:12px; margin:0; }'+
        '#pemoticons_modal h1 { font-size:24px; margin:0; }'+
        '#pemoticons_modal h1, #pemoticons_modal p, #pemoticons_modal div { padding:3px; }'+
        'a.pemoticons_action { background:#69C; font-size:20px; color:#FFF; text-align:center; text-decoration:none; display:inline-block; height:16px; width:16px; line-height:16px; vertical-align:middle; margin:1px; border-radius:100%; }'+
        'a.pemoticons_up, a.pemoticons_down { font-size:10px; }'+
        'a.pemoticons_down { line-height:18px; }'+
        'a.pemoticons_minus { line-height:13px; }'+
        'a.pemoticons_action:hover { opacity:0.7 }'+
        'img.pemoticon_preview { width:20px; max-height:30px; vertical-align:middle; }'+
        'input.pemoticon_value { margin:0 3px; width:130px; }'+
        '</style>'
        );
        break;
        }
        }
        }
        });

4º - Gerenciar a ferramenta

Adicionar Neste campo você deve colocar o link dos seu emoticons, podendo alterná-los ou adicionar quantos quiser com os botões auxiliares à direita.

Atualizar Assim que adicionado os emoticons no campo 1, você só precisa atualizar e salvar o campo.

Enviar Aqui você pode dar upload na sua imagem através do servidor de hospedagem do fórum.

Cancelar Caso deseje cancelar o processo, é só clicar neste botão.

5º - Resultado

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Emoticons pessoais no fórum