[Tutorial] Emoticons pessoais

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

Admin
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
https://bestweb.forumeiro.com

MensagemAdmin Ter Out 04, 2016 5:41 pm

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


[Tutorial] Emoticons pessoais Index_12

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)
[Tutorial] Emoticons pessoais Firesh10
[Tutorial] Emoticons pessoais 110111Arrow 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:

[Tutorial] Emoticons pessoais Untitl28

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


- 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
[Tutorial] Emoticons pessoais Painel13
[Tutorial] Emoticons pessoais 110111Arrow Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[Tutorial] Emoticons pessoais 110210Arrow 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.
[Tutorial] Emoticons pessoais 110310Arrow Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[Tutorial] Emoticons pessoais 110410Arrow 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();" />'+
        ' '+
        '<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

[Tutorial] Emoticons pessoais W0IlshQ
(Para visualizar a ferramenta você deve ir no seu perfil e clicar para modificar o campo)

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

- Resultado

[Tutorial] Emoticons pessoais GPOGtJa

Ver o tópico anterior Ver o tópico seguinte Ir para o 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ões neste sub-fórum
Não podes responder a tópicos