[Tutorial] Emoticons pessoais

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 156d 5h 47m 56s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Ter Out 04, 2016 5:41 pm

Autor: Angie Tuteur
Funcionalidade: Em todas as versões



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.


-->Tutoriais, dicas e astúcias <--




Emoticons pessoais


- 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

(carregue na imagem para aumentar)
Arrow Criar um campo personalizado - Para criar um novo perfil personalizado, deverá carregar no link.

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


Arrow Tipo - O que pretendemos no momento é criar uma zona de texto, sendo assim terá de selecionar o campo "zona de texto".
Arrow Nome - Aqui você deve definir um nome para a sua nova função. Ex. Emoticons pessoais.
Arrow Descrição - Aqui você deve definir uma descrição para o campo, ela será mostrada no perfil do membro.
Arrow URL do ícone - Deixe este campo em branco.
Arrow 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.
Arrow Visualização - Marque apenas no "Perfil".
Arrow Tipo de visualização - Defina que o campo será exibido como "Texto".
Arrow 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.
Arrow 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.
Arrow 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".
Arrow Conteúdo padrão- Deverá preencher este campo com o código que será passado logo abaixo.
ArrowLargura 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!


- 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.

Painel de controle :seta2: Modulos :seta2: HTML & JavaScript :seta2: "Aba" Gestão dos códigos JavaScripts
Arrow Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Arrow 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.
Arrow Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Arrow 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://illiweb.com/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://illiweb.com/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();" />'+
        ' '+
        '<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;
        }
        }
        }
        });

- Gerenciar a ferramenta


(Para visualizar a ferramenta você deve ir no seu perfil e clicar para modificar o campo)

Arrow Adicionar Neste campo você deve colocar o link dos seu emoticons, podendo alterná-los ou adicionar quantos quiser com os botões auxiliares à direita.
Arrow Atualizar Assim que adicionado os emoticons no campo 1, você só precisa atualizar e salvar o campo.
Arrow Enviar Aqui você pode dar upload na sua imagem através do servidor de hospedagem do fórum.
Arrow Cancelar Caso deseje cancelar o processo, é só clicar neste botão.

- Resultado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum