Botão de alerta duplicado

Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com
Versão do fórum: phpBB2

Descrição

Olá, estou a utilizar o seguinte código em meu fórum, este que cria um novo botão na caixa de texto, gerando um menu que me permite aplicar mensagens previamente determinadas dentro do código.

No entanto, estou tentando criar dois novos botões distintos porém quando o faço, o segundo sempre copia as configurações do anterior ao invés de ter seu próprio menu. Gostaria de saber quais variáveis devo alterar para que haja certa "individualidade" por parte do mesmo. Além disto, gostaria de saber também se é possível disponibilizar os menu em questão unicamente para membros que possuem direito de moderação.

Código:

$(window).load(function() {
    var settings = {
      img : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe0uWw-WtZp3gO3dHPDQc1Q80TYTlfrKkGm8uK4unyleTfMGBntg',
      title : 'Alerta'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageList1" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="M11" class="listItem1" style="cursor:pointer;">Sucesso</div><div id="M22" class="listItem1" style="cursor:pointer;">Aviso</div><div id="M33" class="listItem1" style="cursor:pointer;">Alerta</div><div id="M44" class="listItem1" style="cursor:pointer;">Informação</div></div>');
     
     
      $('.sceditor-button-message').click(function() {
          var display = $('#messageList').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageList').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageList1').hide(); }
      });
       
$('#M11').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[sucesso=Título][/sucesso]',''); });
$('#M22').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[aviso=Título][/aviso]',''); });
$('#M33').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[alerta=Título][/alerta]',''); });
$('#M44').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[info=Título][/info]',''); });
      $('.listItem1').click(function() { $(this).parent().hide(); });
    }
});

up

Olá,
vou desviar um pouco do assunto, já viu este painel?
https://ajuda.forumeiros.com/t111170-sistema-de-moderacao

obrigado,

Não era exatamente isso mas eu gostei desse modelo proposto. Mas minha duvida em si é que, caso eu crie um novo código, para outro tipo de informações, este segundo código não irá duplicar as informações do primeiro já que ambos usam as mesmas variáveis?

@EDIT quando eu coloquei em pratica gerou um bug, onde fica uma tela branca atras do texto http://pokemonillium.forumeiros.com/t70-lancamento-de-dados-illium-vs-aedion#235

Bem o bom desse segundo JS é que os avisos ficam organizados por grupo, e cada item da lista têm uma variável, isso é o primeiro type: "zalert", é um conector, o segundo type: "zalert" chama esse conectou, não sei se estou a fazer-me perceber.

Mas por exemplo no seu js em cima você usa as tags personalizadas, no qual dá para por no script:

Código:

if (typeof zModTabels === 'undefined') var zModTabels = [{
        type: "success",
        body_start: '[sucesso]',
        body_end: "[/sucesso]\n"
    },
    {
        type: "info",
        body_start: '[info]',
        body_end: "[/info]\n"
    },
 {
        type: "warn",
        body_start: '[aviso]',
        body_end: "[/aviso]\n"
    },
    {
        type: "alert",
        body_start: '[alerta]',
        body_end: "[/alerta]\n"
    }
];


o JS completo

Código:

if (typeof zModConfig === 'undefined') var zModConfig = [{
    icon: "http://icons.iconarchive.com/icons/graphicloads/polygon/16/check-2-icon.png",
}];

if (typeof zModTabels === 'undefined') var zModTabels = [{
        type: "success",
        body_start: '[sucesso]',
        body_end: "[/sucesso]\n"
    },
    {
        type: "info",
        body_start: '[info]',
        body_end: "[/info]\n"
    },
 {
        type: "warn",
        body_start: '[aviso]',
        body_end: "[/aviso]\n"
    },
    {
        type: "alert",
        body_start: '[alerta]',
        body_end: "[/alerta]\n"
    }
];

if (typeof zModMessages === 'undefined') var zModMessages = [{
        name: "Questão Resolvida",
        message: 'Tópico movido e arquivado, o autor está satisfeito/e ou a questão foi resolvida.',
        group_id: 1,
        type: "success"
    },
    {
        name: "Tópico Movido",
        message: 'Este tópico foi movido, ou fechado.',
        group_id: 1,
        type: "info"
    },
    {
        name: "Sem SCAN",
        message: 'O Autor do tópico têm até 24 horas para adicionar o scan do arquivo.',
        group_id: 1,
        type: "alert"
    },
    {
        name: "Infração",
        message: 'O usuário @NOME foi punido por MOTIVO, logo receberá uma punição de X infrações. \nLeia as [url=http://www.power-pixel.net/t57837-]Regras Gerais do fórum[/url]',
        group_id: 1,
        type: "warn"
    },                                           
    /* End Mod */
      {
        name: "Post insuficientes",
        message: 'O autor do tópico não possui os posts suficientes para o seu pedido ser atendido. \nLeia as [url=http://www.power-pixel.net/t57837-]Regras Gerais do fórum[/url]',
        group_id: 2,
        type: "warn"
      },                                     
    {
        name: "Compra efetuada",
        message: 'Compra efetuada com sucesso.',
        group_id: 0,
        type: "success"
    }
                                                           
];

if (typeof zModGroups === 'undefined') var zModGroups = [{
        id: 0,
        name: 'Diversos'
    },
    {
        id: 1,
        name: 'Moderação'
    },
    {
      id: 2,
      name: 'Designer'
      }
];

$(function() {

    $('<style type="text/css">.sceditor-button-staff div {background: url(' + zModConfig[0].icon + ') !important;}</style>').appendTo("head");

    var list = "";

    $('.zmod_box td').each(function() {
        this.innerHTML = this.innerHTML.replace(/\[icon\="?(.*?)"?\](.*?)\[\/icon\]/g, "<div><i class=\"$1\ icon-message\">$2</i></div>")
            .replace(/\[div\](.*?)\[\/div\]/g, "<div>$1</div>");
    });

    $(window).load(function() {
        function zModGetTable(type, body) {
            var str = "";
            for (var y = 0; y < zModTabels.length; y++) str += (zModTabels[y].type === type) ? (body === "start") ? zModTabels[y].body_start : zModTabels[y].body_end : "";
            return str;
        }

        function zModGetModMessageByGroupId(f, g) {
            var str = "",
                c = 0;
            for (var z = 0; z < zModMessages.length; z++) {
                if (zModMessages[z].group_id == f) {
                    str += "<li class='mod_editor_message group_" + zModMessages[z].group_id + "' id='group_" + z + "_" + zModMessages[z].group_id + "'><a style='cursor: pointer'>" + zModMessages[z].name + "</a></li>\n";
                    if (g === 0) zModInsertToSCEditor('#group_' + z + '_' + zModMessages[z].group_id + ' a', zModMessages[z].message, zModMessages[z].type);
                    c++;
                }
            }
            if (g === 1) str = c;

            return str;
        }

        function zModInsertToSCEditor(e, t, i) {
            $(e).live("click", function(e) {
                $("#text_editor_textarea").sceditor("instance").insertText(zModGetTable(i, "start") + t, zModGetTable(i, "end"));
            });
        }

        function zModToggleSCEditor(o, i) {
            $(o).live("click", function(o) {
                $(i).toggle();
            });
        }

        for (var x = 0; x < zModGroups.length; x++) {
            if (zModGetModMessageByGroupId(zModGroups[x].id, 1) > 0) {
                list += "<li class='mod_editor_section' id='list_" + zModGroups[x].id + "'><a style='cursor: pointer'>" + zModGroups[x].name + " (" + zModGetModMessageByGroupId(zModGroups[x].id, 1) + ")</a></li>" + zModGetModMessageByGroupId(zModGroups[x].id, 0);
                zModToggleSCEditor("#list_" + zModGroups[x].id + " a", ".group_" + zModGroups[x].id + "");
            }
        }

        zModToggleSCEditor('.sceditor-button.sceditor-button-staff', '.mod_box');

        $("textarea, .sceditor-button").click(function() {
            $(".mod_box").hide();
        });

        $(".sceditor-button-source").click(function() {
            $(".sceditor-button-staff").removeClass("disabled");
        });

        if(_userdata.user_level === 1 | _userdata.user_level === 2) $(".sceditor-group:last-child").before('<div class="sceditor-group"><a class="sceditor-button sceditor-button-staff" title="mensagem de mod"><div unselectable="on">mensagens de mod</div></a><div class="mod_box" style="display: none;"><ul class="mod_groups" id="mod_box_i">' + list + '<li class="copyright_e"> Created by Zeus - All right reserved</li></div></div></div>');
       
    });

});


adicione isso do seu CSS

Código:

/* Alert box */

#preview .postbody .zmod_box.zalert .icon-message:before,
.postbody .zmod_box.zalert .icon-message:before,
.zmod_box.zalert .icon-message:before {
    border-color: #fff;
    box-shadow: 1px 1px 2px #000;
}
#preview .postbody .zmod_box.zalert,
.postbody .zmod_box.zalert,
.zmod_box.zalert {
    background: #d03436;
    width: 100%;
    padding: 10px;
    border: 1px solid #820d0f !important;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.2);
}
#preview .postbody .zmod_box.zalert td,
div[class*='post--'] .postbody .zmod_box.zalert td,
.zmod_box.zalert td,
.postbody .zmod_box.zalert td {
    border: 0px !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px black;
}

/* Success box */

#preview .postbody .zmod_box.zsuccess .icon-message:before,
.postbody .zmod_box.zsuccess .icon-message:before,
.zmod_box.zsuccess .icon-message:before {
    border-color: #fff;
    box-shadow: 1px 1px 2px #000;
}
#preview .postbody .zmod_box.zsuccess,
.postbody .zmod_box.zsuccess,
.zmod_box.zsuccess {
    background: #7bb32d;
    width: 100%;
    padding: 10px;
    border: 1px solid #59861b !important;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.2);
}
#preview .postbody .zmod_box.zsuccess td,
div[class*='post--'] .postbody .zmod_box.zsuccess td,
.zmod_box.zsuccess td,
.postbody .zmod_box.zsuccess td {
    border: 0px !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px black;
}

/* Warning box */

#preview .postbody .zmod_box.zwarning .icon-message:before,
.postbody .zmod_box.zwarning .icon-message:before,
.zmod_box.zwarning .icon-message:before {
    border-color: #fff;
    box-shadow: 1px 1px 2px #000;
}
#preview .postbody .zmod_box.zwarning,
.postbody .zmod_box.zwarning,
.zmod_box.zwarning {
    background: #d09415;
    width: 100%;
    padding: 10px;
    border: 1px solid #845d0b !important;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.2);
}
#preview .postbody .zmod_box.zwarning td,
div[class*='post--'] .postbody .zmod_box.zwarning td,
.postbody .zmod_box.zwarning td {
    border: 0px !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px black;
}

/* Info box */

#preview .postbody .zmod_box.zinfo .icon-message:before,
.postbody .zmod_box.zinfo .icon-message:before,
.zmod_box.zinfo .icon-message:before {
    border-color: #fff;
    box-shadow: 1px 1px 2px #000;
}
#preview .postbody .zmod_box.zinfo,
.postbody .zmod_box.zinfo,
.zmod_box.zinfo {
    background: #15a8d0;
    width: 100%;
    padding: 10px;
    border: 1px solid #0e627a !important;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.2);
}
#preview .postbody .zmod_box.zinfo td,
div[class*='post--'] .postbody .zmod_box.zinfo td,
.postbody .zmod_box.zinfo td {
    border: 0px !important;
    color: #fff !important;
    text-shadow: 1px 1px 2px black;
}


Não tenho conhecimento sobre JS então é um pouco complexo para que eu entenda, porém creio que peguei sua explicação.

Em relação a este novo código que me passou, não teve êxito. Ele gera o novo botão normalmente, mas ao clicar ele "buga" como se todo o conteúdo oculto surgisse em uma unica linha, texto sobre texto.

Porque faltar o CSS:

Código:

.mod_groups {
    line-height: 1.5;
    font-size: 11px;
    font-weight: 400;
}

.mod_box {
    -moz-background-clip: padding;
    -moz-border-radius: 2px;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    background: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    color: #333;
    width: 200px;
    line-height: 1;
    padding: 10px;
    position: absolute;
    z-index: 999;
}

.mod_editor_section {
    background: #f1f1f1;
    padding: 5px;
    font-weight: bold;
    border-bottom: 1px solid #d7d7d7;
    text-align: left;
    text-transform: uppercase;
}

.copyright_e {
    margin-top: 5px;
    background: #f8f8f8;
    border-top: 1px solid #d7d7d7;
    text-align: left;
    padding: 2px 5px;
    font-size: 9px;
    color: #777;
    text-shadow: 1px 1px 0px white;
}

.mod_editor_message {
    padding: 2px 5px;
    text-align: left;
}

.mod_groups {
    height: 150px;
    overflow-y: scroll;
}

.mod_groups li {
    list-style-type: none;
    margin-left: -40px;
}

.sceditor-button-staff {
    position: relative;
}

.mod_box {
    top: 73px;
}

#quick_reply .mod_groups li {
    margin-left: 0px;
}

#quick_reply .mod_box {
    top: 35px;
}

.sceditor-button-staff.disabled div {
    opacity: 1.0 !important;
    filter: alpha(opacity=100) !important;
}


Gostei do resultado deste :3

Agora explicando melhor o JS

Esta parte é o tipo de alerta (type), o body_start é como começará o aviso eo body_end como acaba.

Código:

if (typeof zModTabels === 'undefined') var zModTabels = [{
        type: "success",
        body_start: '[sucesso]',
        body_end: "[/sucesso]\n"
    },
    {
        type: "info",
        body_start: '[info]',
        body_end: "[/info]\n"
    },
 {
        type: "warn",
        body_start: '[aviso]',
        body_end: "[/aviso]\n"
    },
    {
        type: "alert",
        body_start: '[alerta]',
        body_end: "[/alerta]\n"
    }
];


Agora a segunda parte são as mensagens personalizadas, o name será o nome da alerta que vai aparecer da "caixa" de escolha, a message é o que vai aparecer dentro dos avisos, group_id e o id do grupo que explicarei em baixo, mas serve para organizar e por fim o type que é o tipo de alerta

Código:

var zModMessages = [{
        name: "Questão Resolvida",
        message: 'Tópico movido e arquivado, o autor está satisfeito/e ou a questão foi resolvida.',
        group_id: 1,
        type: "success"
    },
    {
        name: "Tópico Movido",
        message: 'Este tópico foi movido, ou fechado.',
        group_id: 1,
        type: "info"
    },
    {
        name: "Sem SCAN",
        message: 'O Autor do tópico têm até 24 horas para adicionar o scan do arquivo.',
        group_id: 1,
        type: "alert"
    },
    {
        name: "Infração",
        message: 'O usuário @NOME foi punido por MOTIVO, logo receberá uma punição de X infrações. \nLeia as [url=http://www.power-pixel.net/t57837-]Regras Gerais do fórum[/url]',
        group_id: 1,
        type: "warn"
    },                 


Agora o group_id, serve só para organizar o tipo de alertas

Código:

if (typeof zModGroups === 'undefined') var zModGroups = [{
        id: 0,
        name: 'Diversos'
    },
    {
        id: 1,
        name: 'Moderação'
    },
    {
      id: 2,
      name: 'Designer'
      }
];


Através do Id que organiza quem pode e quem não pode usar? Ou apenas onde cada alerta vai ficar naquela "tabela"

up

O id é só para organizar, esse painel é só visível para staffs, como demonstrado do print (link citado em cima).

Tudo bem então

@Edit: Pelo que eu entendi do tutorial do link, o que determina quem pode usar/ver esse painel é o "id". E como possuo três equipes de STAFF, sendo administradores, moderadores e narradores, eu gostaria de incluir os narradores como hábeis a utilizar este painel.

Porém ao adicionar um novo id, não mudou em nada, qual alteração devo fazer para incluir este terceiro grupo?

Vamos ignorar o termo "grupo" e atribuir o nome "legenda", a legenda simplesmente separa o tipo de alertas, só possui essa função.
O painel só aparece a

if(_userdata.user_level === 1 | _userdata.user_level === 2)

Administradores e Moderadores

Então sobre hipótese alguma é possível incluir membros de demais setores, mesmo que isso signifique ter que deixar o painel disponível a todos os usuários?

Talvez pudéssemos fazer isso diretamente para usuários específicos, mas, ao acessar o código fonte, eles seriam capazes de ver os recursos de outro usuário privilegiado. Sobre hipótese que criou, eu não entendi. Ceder acesso ao Painel à todos é um processo manual e cansativo. Poderia explicar?

Se for o que entendi, quando se trata de userlevel, só existem dois mesmo. O terceiro é "Membro", e nada mais. Se um membro está no grupo de Moderadores cuja o nome seja um, ele tem controle de permissões igualmente aos outros... O código não consegue captar isso.

Olá Shek,

O painel a qual me refiro não é o painel de controle, e sim este botão que abre um "painel/menu" onde é disponibilizado informações previamente formatadas no codigo, para que o membro possa simplesmente selecionar a opção, e enviar a mensagem.

https://ajuda.forumeiros.com/t111170-sistema-de-moderacao

Sim, entendo. Mas, especificar para usuários os recursos do script até é possível, mas, é algo em vão, devido ao fato de estar tudo no código fonte.

Entendo...

Estive pensando, e acredito que seja um pensamento amador meu. Mas, se por acaso eu disponibilizar direitos de moderação a determinados sub-foruns/topicos, a usuários específicos. Estes mesmos usuários serão aptos a ter o mesmo nível de moderadores?

Olá!

Pelo que entendi, você está confundindo os termos Grupo e Permissões. O grupo quando possuí poderes moderativos, qualquer membro que adentrar neste grupo terá os mesmos poderes moderativos naquele fórum. Neste exato momento entra o termo permissões. As permissões é o que rege o grupo dentro daquilo que você quer.

Ou seja: Se tens um grupo, você define as permissões de moderador, todos que estão no grupo terão o mesmo controle sob algum fórum, excerto, se você criar grupos separados para cada usuário e aplicar permissões separadas para cada um deles.

Até mais.

Ah sim, fora este o "erro" que eu percebi agora a pouco. Sendo assim está tudo okay !

Obrigado Shek e Pedxz!!