Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
93 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 90 Visitantes :: 2 Motores de busca

Luiz~, ShadowPrince, YuriGama

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

[TUTORIAL] Emoticons pessoais no fórum

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

[TUTORIAL] Emoticons pessoais no fórum

Mensagem por Cream em Ter 18 Out 2016 - 12:15



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)
Seta 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:


Seta Tipo - O que pretendemos no momento é criar uma zona de texto, sendo assim terá de selecionar o campo "zona de texto".
Seta Nome - Aqui você deve definir um nome para a sua nova função. Ex. Emoticons pessoais.
Seta Descrição - Aqui você deve definir uma descrição para o campo, ela será mostrada no perfil do membro.
Seta URL do ícone - Deixe este campo em branco.
Seta 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.
Seta Visualização - Marque apenas no "Perfil".
Seta Tipo de visualização - Defina que o campo será exibido como "Texto".
Seta 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.
Seta 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.
Seta 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".
Seta Conteúdo padrão- Deverá preencher este campo com o código que será passado logo abaixo.
SetaLargura 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
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta 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.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta 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();" />'+
        '&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;
        }
        }
        }
        });

- Gerenciar a ferramenta


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

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

- Resultado






© Fórum dos Fóruns & Ange Tuteur


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

Cream
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8374
Pontos Ativos : 13591

http://ajuda.forumeiros.com

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

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5