Olá amigos, tenho um pedido um tanto quanto difícil para fazer..
Passei dois dias trabalhando em códigos e mais códigos e não consegui nenhum resultado satisfatório..
Para falar do pedido primeiro tenho que citar uma coisa, geralmente nos fóruns é comum você notar a famosa "Barra de warn", porém optei por não usa-la em meu fórum, fiz um sistema que achei mais interessante para mim..
Funciona assim, quando um usuário comete uma infração, ele recebe um "Aviso" no tópico dele e uma bolinha preta () ao chegar a 3 bolinhas (Avisos) o usuário é banido.

Bom, para não ter qualquer tipo de problema, solicitei que os moderadores e administradores do meu fórum adicionassem um aviso no tópico do usuário informando que ele recebeu um aviso.
Que seria assim (outras cores estão disponíveis para eles também):


Então, para facilitar a vida deles e a minha também ao aplicar um aviso, eu tive a ideia de criar um "gerador automático" de avisos, funcionaria assim:

Um botão seria adicionado ali onde a flecha aponta, escrito "Aplicar aviso" (estaria em todas as mensagens)


O que esse botão faria?
Ele abre uma box pedindo para que se preencha as seguintes informações:

Nome, Motivo do aviso e a box que ele deseja utilizar (são 4 disponíveis no total) e obviamente um botão para enviar o código..

Até agora, acho que eu conseguiria fazer (talvez).. O grande problema é a função que quando o cara clicar em "Enviar aviso" (ou algo do tipo) que seria editar o tópico onde ele clicou em "Aplicar aviso" e colocar la o código gerado pelo formulário e logo em seguida salvar o tópico com o aviso gerado;

Vejam um exemplo


Todo o processo é feito para gerar aquele aviso da imagem acima..

Acho que deve ser muito difícil fazer isso.. Porém eu tentei fazer aqui e não consegui resultados;

Agradeço a atenção de todos. Obrigado desde já!

Ah, agora que consegui entender bem o que você quer.

Mas que complicação, eu ainda sou a favor de simplesmente clicar em editar o tópico e aplicar

Mas vou tentar algo aqui. Quem sabe o JScript ou o Joelson já saibam como fazer.

Olá!

O que eu entendi:

Você precisa adicionar um novo botão no template para ao ser clicado abra um form pra preencher uns dados e depois de clicar em enviar/salvar, edite a mensagem a qual o botão pertence e adicione o html desejado informando sobre o aviso, correto?

Se sim, é fácil, mas vamos tentar fazer aos poucos pra que você possa entender como funciona o sistema do fórum?

Analise o código abaixo:

Código:


    var post_ID = 1; // 4 example...
    var edit_reason = 'O membro foi alertado!';
    var send_txt = "Enviar"; // Default forum language!
    
    $.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
        var subject  = $(data).find('input[name="subject"]').val();        
        var user_Msg = $(data).find('#text_editor_textarea[name="message"]').val();

        $.post("/post", {
            p: post_ID,
            mode: 'editpost',
            subject: subject,
            message: user_Msg,
            edit_reason: edit_reason,
            attach_sig: '1',
            notify: "0",
            post: send_txt
        }).done(function(){
            alert('Info!\n\n O usuário foi alertado com um aviso em seu post!');
        }).fail(function(){
            alert('Atenção!\n\n Ocorreu um erro ao salvar o aviso, aguarde 10 segundos e tente editar novamente!');
        });
    });


Continuaremos após você concluir a sua análise e entendimento,

Nota: eu poderia lhe entregar o código todo pronto, aliás, o "esqueleto" já está pronto, mas é bem melhor você aprender!

JS

Olá JScript, minha internet está meio ruim para mim conseguir testar o código, mas de qualquer forma vou estar postando aqui para avaliação, assim que possível eu o testarei

Código:

jQuery(document).ready(function(){
      var post_ID = 1;
      var edit_reason = 'O membro foi alertado!';
      var send_txt = "Enviar";
   jQuery("#button").prepend('<span id="button" class="gerador">Aplicar aviso</span>');
   jQuery(".gerador").click(function(){
   jQuery("#teste").append('<div id="gerador" style="display:none;"><form><center>Digite seu nome<br /><input type="text" placeholder="Digite seu nome" id="nome" name="nome" required="required" /></center><br /><center>Motivo do aviso<br /><select id="motivo" name="motivo"><option value="">Selecione o motivo</option><option value="Spam">Spam</option><option value="Flood">Flood</option><option value="Ofensa">Ofensa</option><option value="Outro">Outro</option></select><input type="button" id="enviar" name="enviar" value="Gerar aviso"/><input type="button" id="cancel" name="cancel" value="Cancelar"/><input type="text" id="gerar" name="gerar" value="" /></center></form></div>');
   jQuery("#cancel").click(function(){
   jQuery("#gerador").fadeOut(450);
   });
   jQuery("#gerador").show();
   jQuery("#enviar").click(function(){
   jQuery("#gerar").val('<div id="message-box" class="message-green"><center><b>1 aviso aplicado - Motivo: </b>'+jQuery("#motivo").val()+' | <b>by: </b>'+jQuery("#nome").val()+'</center></div>');

jQuery.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
    var subject  = jQuery(data).find('input[name="subject"]').val();       
    var user_Msg = jQuery(data).find('#text_editor_textarea[name="message"]').val()+jQuery("#gerar").val();

  jQuery.post("/post", {
        p: post_ID,
        mode: 'editpost',
        subject: subject,
        message: user_Msg,
        edit_reason: edit_reason,
        attach_sig: '1',
        notify: "0",
        post: send_txt
    }).done(function(){
        alert('Info!\n\n O usuário foi alertado com um aviso em seu post!');
    }).fail(function(){
        alert('Atenção!\n\n Ocorreu um erro ao salvar o aviso, aguarde 10 segundos e tente editar novamente!');
    });
});


});
});
});

Espero que eu tenha acertado xD

Bom estava aguardando alguém postar aqui mas ninguém postou então me perdoem o Double Post..

Bom, os resultado que consegui fora de um fórum foram esses


Funciona direitinho, ai fui pela lógica de adicionar todo o conteúdo pretendido em input (que está como hidden) e depois só getar o value daquele input, mas não sei como eu faria para usar isso que me passou JScript, fiz alguns teste sem sucesso aqui :S

Código que usei na página que tirei a foto foi esse

Código:

<div id="background" title="Clique para esconder">
   <div id="message-box" class="alert" style="margin:20% 10%;">
       Aviso gerado com sucesso!!<br />
        <b>• Não esqueça de colocar o ícone no perfil do usuário</b>   
    </div>
</div>
<div id="teste">
   <span id="button">Quote</span>
    <span id="button">Editar tópico</span>
</div>

Código:

jQuery(document).ready(function(){
      var post_ID = 1;
      var edit_reason = 'O membro foi alertado!';
      var send_txt = "Enviar";
   jQuery("#teste").prepend('<span id="button" class="gerador">Aplicar aviso</span>');
   jQuery(".gerador").click(function(){
   jQuery("#teste").append('<div id="gerador" style="display:none;"><form><center>Digite seu nome<br /><input type="text" placeholder="Digite seu nome" id="nome" name="nome" required="required" /></center><br /><center>Motivo do aviso<br /><select id="motivo" name="motivo"><option value="">Selecione o motivo</option><option value="Spam">Spam</option><option value="Flood">Flood</option><option value="Ofensa">Ofensa</option><option value="Outro">Outro</option></select><input type="button" id="enviar" name="enviar" value="Gerar aviso"/><input type="button" id="cancel" name="cancel" value="Cancelar"/><input type="text" id="gerar" name="gerar" value="" /></center></form></div>');
   jQuery("#cancel").click(function(){
   jQuery("#gerador").fadeOut(450);
   });
   jQuery("#gerador").show();
   jQuery("#enviar").click(function(){
   jQuery("#gerar").val('<div id="message-box" class="message-green"><center><b>1 aviso aplicado - Motivo: </b>'+jQuery("#motivo").val()+' | <b>by: </b>'+jQuery("#nome").val()+'</center></div>');

jQuery.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
    var subject  = jQuery(data).find('input[name="subject"]').val();       
    var user_Msg = jQuery(data).find('#text_editor_textarea[name="message"]').val()+jQuery("#gerar").val();

  jQuery.post("/post", {
        p: post_ID,
        mode: 'editpost',
        subject: subject,
        message: user_Msg,
        edit_reason: edit_reason,
        attach_sig: '1',
        notify: "0",
        post: send_txt
    }).done(function(){
        alert('Info!\n\n O usuário foi alertado com um aviso em seu post!');
    }).fail(function(){
        alert('Atenção!\n\n Ocorreu um erro ao salvar o aviso, aguarde 10 segundos e tente editar novamente!');
    });
});


});
});
});

Código:

@charset "utf-8";
/* CSS Document */
*{
   margin:0;
   padding:0;
   outline: none;
}
body{
   background: url(back.jpg) #f9f9f9;
   font: 11px "Lucida Console", Monaco, monospace;
}
#gerador{
   background: #fff;
   border: #d5d5d5 1px solid;
   padding: 9px;
   width: 300px;
   margin: 9px 0;
   font-size: 10px;
   cursor: default;
   color: #999;
   border-radius: 2px;
   line-height: 1.6;
   text-shadow: rgba(255, 255, 255, 0.55) 0 1px 0;
}
#enviar{
   background: #E3F8E1;
   border: 1px solid #ADE0AD;
   color: #0F810F;
   cursor: pointer;
   transition: .6s;
}
#enviar:hover{
   background: #c0f3bb;
   cursor: pointer;
   transition: .4s;
}
#cancel{
   background: #f8e1e1;
   border: 1px solid #e0adad;
   color: #810f0f;
   cursor: pointer;
   transition: .6s;
}
#cancel:hover{
   background: #f3bbbb;
   cursor: pointer;
   transition: .4s;
}
#gerador select, input{
   background: #f4f4f4;
   border: 1px solid #dedede;
   color: #808080;
   padding: 3px 0;
   margin: 3px 0;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   font-size: 12px;
   line-height: 1.6;
   text-shadow: rgba(255, 255, 255, 0.55) 0 1px 0;
   border-radius: 2px;
   width: 100%;
}
#message-box{
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   font-size: 12px;
   line-height: 1.6;
   padding: 10px;
   text-shadow: rgba(255, 255, 255, 0.55) 0 1px 0;
   border-radius: 2px;
   margin: 4px 0;
   text-align: center;
   cursor: default;
}
.message-green {
   background: #E3F8E1;
   border: 1px solid #ADE0AD;
   color: #0F810F;
}
.message-red {
   background: #f8e1e1;
   border: 1px solid #e0adad;
   color: #810f0f;
}
#button {
   /*background: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png) repeat-x #D00000;*/
   background: #D00000;
   border-color: #DC0000;
   border-radius: 3px 3px 3px 3px;
   border-style: solid;
   border-width: 1px;
   box-shadow: 0 1px 0 0 #ED0000 inset, 0 2px 3px rgba(0, 0, 0, 0.2);
   color: #FFF;
   cursor: pointer;
   font-family: Verdana;
   font-size: 10px;
   font-style: normal;
   margin: 20px 4px 0 0;
   padding: 4px 10px;
   text-decoration: none;
}
#teste{
   margin: 40px 30px;
}
#background{
   background: rgba(0,0,0,.9);
   width: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   display: none;
}
.alert {
   background: #E3F8E1;
   border: 1px solid #ADE0AD;
   color: #0F810F;
   cursor: pointer!important;
}

Pode me dar uma "Luz" Js? Agradeço

Amigo, eu já tinha escrito um monte de coisa pra lhe ensinar, mas meu filhinho desligou o note enquanto eu fui tirar a pipoca do micro-ondas...

Mas vamos lá novamente!

Cada post tem um identificador, seja em forma de Class ou um ID, onde baseado no template viewtopic_body padrão, nós podemos encontrar da seguinte forma:


Veja que no exemplo acima, eu marquei os identificadores da mensagem de número 28!

Então baseado nisso e supondo que você usa o template padrão, mesmo com algumas mudanças de skins, mas o resultado é pra ser o mesmo ok?

Você tem duas formas de adicionar o botão [Aplicar aviso]:
1- Por gestão de códigos JavaScript;
2- Editando o template viewtopic_body, na minha opinião é a melhor forma!

Mas se optar pela primeira, abaixo está o código que testei aqui:

Código:


function warning(post_ID) {
    var edit_reason = 'O membro foi alertado!';
    var send_txt = "Enviar"; // Default forum language!

    $.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
        var subject  = $(data).find('input[name="subject"]').val();        
        var user_Msg = $(data).find('#text_editor_textarea[name="message"]').val();

        user_Msg = user_Msg + "Adicione aqui o testo que deseja somar com a mensagem do membro! Tem que adicionar senão você remove o conteúdo atual..."
        
        $.post("/post", {
            p: post_ID,
            mode: 'editpost',
            subject: subject,
            message: user_Msg,
            edit_reason: edit_reason,
            attach_sig: '1',
            notify: "0",
            post: send_txt
        }).done(function(){
            alert('Info!\n\n O usuário foi alertado com um aviso em seu post!');
        }).fail(function(){
            alert('Atenção!\n\n Ocorreu um erro ao salvar o aviso, aguarde 10 segundos e tente editar novamente!');
        });
    });
}

var target = $('div.post');
var len = target.length - 1, oThis;            
for (var index = len; index >= 0; index--) {            
    oThis = $(target[index]);
    var post_ID = oThis.children('a:first').attr('name');
    oThis.find('.post-options').prepend('<span id="warning_' + post_ID + '" class="gerador" onclick="warning(' + post_ID + ')">Aplicar aviso</span>');
}


Perceba que cada mensagem tem um identificador único! Pega esse código acima e adiciona na gestão de código JavaScript apenas pra você testar e ver o efeito ok?

Continuamos em seguida,

JS

Bom, ja que não consigo entender muito bem, vou falar o que eu entendi do código

Código:

function warning(post_ID) {
    var edit_reason = 'O membro foi alertado!'; // razão pela qual o tópico foi editado
    var send_txt = "Enviar"; // Default forum language!

    $.get("/post?p=" + post_ID + "&mode=editpost", function(data) { // pega o ID do post
        var subject  = $(data).find('input[name="subject"]').val();       
        var user_Msg = $(data).find('#text_editor_textarea[name="message"]').val(); // pega o val da mensagem do membro

        user_Msg = user_Msg + "Adicione aqui o testo que deseja somar com a mensagem do membro! Tem que adicionar senão você remove o conteúdo atual..." // adiciono a mensagem desejada
       
        $.post("/post", {
            p: post_ID,
            mode: 'editpost',
            subject: subject,
            message: user_Msg,
            edit_reason: edit_reason,
            attach_sig: '1',
            notify: "0",
            post: send_txt
        }).done(function(){
            alert('Info!\n\n O usuário foi alertado com um aviso em seu post!');
        }).fail(function(){
            alert('Atenção!\n\n Ocorreu um erro ao salvar o aviso, aguarde 10 segundos e tente editar novamente!');
        });
    });
}

var target = $('div.post');
var len = target.length - 1, oThis;           
for (var index = len; index >= 0; index--) {           
    oThis = $(target[index]);
    var ID = oThis.children('a:first').attr('name');
    oThis.find('.post-options').prepend('<span id="warning_' + ID + '" class="gerador" onclick="warning(' + ID + ')">Aplicar aviso</span>');
}

Só que não consigo implementar em meu código
Mas é isso ai, vou continuar estudando o código aqui

Olá!

Eu já testei e funciona perfeitamente!

O ID da mensagem é capturado nessa parte:

Código:


var target = $('div.post');
var len = target.length - 1, oThis;            
for (var index = len; index >= 0; index--) {            
    oThis = $(target[index]);
    var post_ID = oThis.children('a:first').attr('name');
    oThis.find('.post-options').prepend('<span id="warning_' + post_ID + '" class="gerador" onclick="warning(' + post_ID + ')">Aplicar aviso</span>');
}


E passado para essa função:

Código:

function warning(post_ID) {

Essa parte:

Código:


$.get("/post?p=" + post_ID + "&mode=editpost", function(data) {

Apenas faz a edição da mensagem tendo por base o post_ID!

Perceba que eu deixei a variável com o mesmo nome pra que você possa entender melhor!

JS