Mensagens moderativas

Detalhes da questão

Endereço do fórum: https://assuntosgeral-com-br.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Olá,

Eu possuo o código citado abaixo e gostaria de saber se há possibilidades de transformar. Por exemplo as mensagens moderativas estão em forma de imagens, gostaria de transforma-la em HTML em vez de imagens seria escrita e com personalização seria feito a base do HTML. Seria possível?

Código:

(function ($, css) {
  'use strict';
 
  var buttons = [
    {
      label: 'Dúvida resolvida',
      img: 'https://i.imgur.com/fDQMQJT.png'
    }, {
      label: 'Dúvida VIP Resolvida',
      img: 'https://i.imgur.com/CCOOz0U.png'
    }, {
      label: 'Dúvida em andamento',
      img: 'https://i.imgur.com/rk7rHqF.png'
    }, {
      label: 'Dúvida abandonada',
      img: 'https://i.imgur.com/1EWX64Z.png'
    }, {
      label: 'Dúvida VIP abandonada',
      img: 'https://i.imgur.com/wE7prr5.png'
    }, {
      label: 'Denúncia Aceita e Resolvida',
      img: 'https://i.imgur.com/xdpaMzR.png'
    }, {
      label: 'Denúncia Recusada',
      img: 'https://i.imgur.com/5Nko14y.png'
    }, {
      label: 'Sugestão Aprovada',
      img: 'https://i.imgur.com/gL2u2uR.png'
    }, {
      label: 'Sugestão Em análise',
      img: 'https://i.imgur.com/JSwaBVr.png'
    }, {
      label: 'Sugestão Negada',
      img: 'https://i.imgur.com/TaMq08O.png'
    }, {
      label: 'Evento finalizado',
      img: 'https://i.imgur.com/gQWBCgR.png'
    }, {
      label: 'Pedido em atendimento',
      img: 'https://i.imgur.com/BQOCVUe.png'
    }, {
      label: 'Pedido entregue',
      img: 'https://i.imgur.com/WfFvp3R.png'
    }, {
      label: 'Pedido Arquivado',
      img: 'https://i.imgur.com/b9QGWTV.png'
      }, {
      label: 'Noticia autorizada a ser postada',
      img: 'https://i.imgur.com/yPjbc66.png'
    }, {
      label: 'Materia autoriza a ser postada',
      img: 'https://i.imgur.com/u0ubicD.png'
    }, {
      label: 'Duvida gamer resolvida',
      img: 'https://i.imgur.com/t36A2Ye.png'
    }, {
      label: 'Duvida gamer em andamento',
      img: 'https://i.imgur.com/jQKlOS4.png'
    }, {
      label: 'Duvida gamer abandonada',
      img: 'https://i.imgur.com/oUE8mcD.png'
    }, {
      label: 'Tópico reaberto a pedido do autor',
      img: 'https://i.imgur.com/lNvOjQ8.png'
    }, {
      label: 'Modificação de Nick aceita',
      img: 'https://i.imgur.com/sII93Jy.png'
    }
  ];
 
  $(window).on('load', function () {

    if (_userdata.user_level !== 1 && _userdata.user_level !== 2) {
      return;
    }
 
    var $textarea = $('#text_editor_textarea');
 
    if (!$textarea) {
      return;
    }
 
    var $sceditor = $textarea.sceditor('instance');
   
    $('<a>', {
      'class': 'sceditor-button sceditor-button-moderacao',
      'unselectable': 'on',
      'title': 'Imagens moderativas da equipe',
      'href': 'javascript:void(0);',
      'html': $('<div>', {
        'unselectable': 'on',
        'text': 'Imagens moderativas',
        'style': [
          'opacity: initial !important;',
          'filter: none !important;',
          'background-image: url(https://i.servimg.com/u/f39/18/21/41/30/tuto14.png) !important;'
        ].join(' ')
      }).prop('outerHTML')
    })
      .appendTo($('.sceditor-group').last())
        .on('click', function (event) {
 
          event.preventDefault();
          event.stopPropagation();
 
          if ($dropdown.css('display') === 'block') {
            $dropdown.hide();
            return;
          }
 
          var $this = $(this);
 
          $dropdown
            .css({
              display: 'block',
              position: 'absolute',
              top: $this.offset().top + 'px',
              left: $this.offset().left + 'px',
              marginTop: '27px'
            })
          ;
         
        })
    ;
   
    var $dropdown = $('<div>', {
      'class': 'sceditor-dropdown sceditor-dropdown-moderacao',
    })
      .hide()
        .appendTo('body')
          .on('click', function (event) {
            event.stopPropagation();
          })
    ;
   
    $.each(buttons, function () {
      var button = this;
 
      $('<a>', {
        'href': 'javascript:void(0);',
        'text': button.label,
        'data-text': '[img]' + button.img + '[/img]',
        'class': 'sceditor-dropdown-item'
      })
        .appendTo($dropdown)
          .on('click', function () {
            $sceditor.insertText($(this).attr('data-text'));
            $dropdown.hide();
          })
      ;
    });
 
    $(document).on('click', function () {
      $dropdown.hide();
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.sceditor-dropdown-moderacao {',
  '  padding: 0px !important;',
  '  max-height: 123px;',
  '  overflow-y: scroll;',
  '}',
  '',
  '.sceditor-dropdown-moderacao > .sceditor-dropdown-item {',
  '  display: block;',
  '  padding: 10px;',
  '  border-bottom: solid 1px #ddd;',
  '}'
]));

Olá @Ketholy,
Veja se é isto que a Senhora deseja:

Código:

(function($, css) {
    'use strict';

    var buttons = [{
        label: 'Dúvida resolvida',
        content: '<p>Dúvida resolvida</p><br /><img src="https://i.imgur.com/fDQMQJT.png" />'
    }, {
        label: 'Dúvida VIP Resolvida',
        content: 'https://i.imgur.com/CCOOz0U.png'
    }, {
        label: 'Dúvida em andamento',
        content: 'https://i.imgur.com/rk7rHqF.png'
    }, {
        label: 'Dúvida abandonada',
        content: 'https://i.imgur.com/1EWX64Z.png'
    }, {
        label: 'Dúvida VIP abandonada',
        content: 'https://i.imgur.com/wE7prr5.png'
    }, {
        label: 'Denúncia Aceita e Resolvida',
        content: 'https://i.imgur.com/xdpaMzR.png'
    }, {
        label: 'Denúncia Recusada',
        content: 'https://i.imgur.com/5Nko14y.png'
    }, {
        label: 'Sugestão Aprovada',
        content: 'https://i.imgur.com/gL2u2uR.png'
    }, {
        label: 'Sugestão Em análise',
        content: 'https://i.imgur.com/JSwaBVr.png'
    }, {
        label: 'Sugestão Negada',
        content: 'https://i.imgur.com/TaMq08O.png'
    }, {
        label: 'Evento finalizado',
        content: 'https://i.imgur.com/gQWBCgR.png'
    }, {
        label: 'Pedido em atendimento',
        content: 'https://i.imgur.com/BQOCVUe.png'
    }, {
        label: 'Pedido entregue',
        content: 'https://i.imgur.com/WfFvp3R.png'
    }, {
        label: 'Pedido Arquivado',
        content: 'https://i.imgur.com/b9QGWTV.png'
    }, {
        label: 'Noticia autorizada a ser postada',
        content: 'https://i.imgur.com/yPjbc66.png'
    }, {
        label: 'Materia autoriza a ser postada',
        content: 'https://i.imgur.com/u0ubicD.png'
    }, {
        label: 'Duvida gamer resolvida',
        content: 'https://i.imgur.com/t36A2Ye.png'
    }, {
        label: 'Duvida gamer em andamento',
        content: 'https://i.imgur.com/jQKlOS4.png'
    }, {
        label: 'Duvida gamer abandonada',
        content: 'https://i.imgur.com/oUE8mcD.png'
    }, {
        label: 'Tópico reaberto a pedido do autor',
        content: 'https://i.imgur.com/lNvOjQ8.png'
    }, {
        label: 'Modificação de Nick aceita',
        content: 'https://i.imgur.com/sII93Jy.png'
    }];

    $(window).on('load', function() {

        if (_userdata.user_level !== 1 && _userdata.user_level !== 2) {
            return;
        }

        var $textarea = $('#text_editor_textarea');

        if (!$textarea) {
            return;
        }

        var $sceditor = $textarea.sceditor('instance');

        $('<a>', {
                'class': 'sceditor-button sceditor-button-moderacao',
                'unselectable': 'on',
                'title': 'Mensagens moderativas da equipe',
                'href': 'javascript:void(0);',
                'html': $('<div>', {
                    'unselectable': 'on',
                    'text': 'Mensagens moderativas',
                    'style': [
                        'opacity: initial !important;',
                        'filter: none !important;',
                        'background-image: url(https://i.servimg.com/u/f39/18/21/41/30/tuto14.png) !important;'
                    ].join(' ')
                }).prop('outerHTML')
            })
            .appendTo($('.sceditor-group').last())
            .on('click', function(event) {

                event.preventDefault();
                event.stopPropagation();

                if ($dropdown.css('display') === 'block') {
                    $dropdown.hide();
                    return;
                }

                var $this = $(this);

                $dropdown
                    .css({
                        display: 'block',
                        position: 'absolute',
                        top: $this.offset().top + 'px',
                        left: $this.offset().left + 'px',
                        marginTop: '27px'
                    });

            });

        var $dropdown = $('<div>', {
                'class': 'sceditor-dropdown sceditor-dropdown-moderacao',
            })
            .hide()
            .appendTo('body')
            .on('click', function(event) {
                event.stopPropagation();
            });

        $.each(buttons, function() {
            var button = this;

            $('<a>', {
                    'href': 'javascript:void(0);',
                    'text': button.label,
                    'data-text': button.content,
                    'class': 'sceditor-dropdown-item'
                })
                .appendTo($dropdown)
                .on('click', function() {
                    $sceditor.insertText($(this).attr('data-text'));
                    $dropdown.hide();
                });
        });

        $(document).on('click', function() {
            $dropdown.hide();
        });

        $('<style>', {
            'text': css.join('\n')
        }).appendTo('head');
    });
}(jQuery, [
    '.sceditor-dropdown-moderacao {',
    '  padding: 0px !important;',
    '  max-height: 123px;',
    '  overflow-y: scroll;',
    '}',
    '',
    '.sceditor-dropdown-moderacao > .sceditor-dropdown-item {',
    '  display: block;',
    '  padding: 10px;',
    '  border-bottom: solid 1px #ddd;',
    '}'
]));

Cordialmente,
pedxz

Olá Pedxz,

Não seria esse modelo, seria um automático que não precise de imagens. Tendo como exemplo as mensagens aqui do FDF, não por igual mais semelhante.

Sim claro, porém agora é só adicionar o código HTML/BBCode na parte content de cada botão, só não removi as imagens porque seria muito trabalho.
Vamos exemplificar:

Código:

(function($, css) {
    'use strict';

    var buttons = [{
        label: 'Dúvida resolvida',
        content: '<p>Dúvida resolvida</p><br /><img src="https://i.imgur.com/fDQMQJT.png" />'
    }, {
        label: 'Dúvida VIP Resolvida',
        content: '[table][tr][td][h4]Dúvida VIP Resolvida[/h4]\nMovido para "Questões resolvidas".[/td][/tr][/table]'
    }, {
        label: 'Dúvida em andamento',
        content: '<div><h6>Dúvida em andamento</h6><p>Está questão foi marcada como "Em Curso", dúvida em andamento.</p></div>'
    }, {
        label: 'Dúvida abandonada',
        content: 'https://i.imgur.com/1EWX64Z.png'
    }, {
        label: 'Dúvida VIP abandonada',
        content: 'https://i.imgur.com/wE7prr5.png'
    }, {
        label: 'Denúncia Aceita e Resolvida',
        content: 'https://i.imgur.com/xdpaMzR.png'
    }, {
        label: 'Denúncia Recusada',
        content: 'https://i.imgur.com/5Nko14y.png'
    }, {
        label: 'Sugestão Aprovada',
        content: 'https://i.imgur.com/gL2u2uR.png'
    }, {
        label: 'Sugestão Em análise',
        content: 'https://i.imgur.com/JSwaBVr.png'
    }, {
        label: 'Sugestão Negada',
        content: 'https://i.imgur.com/TaMq08O.png'
    }, {
        label: 'Evento finalizado',
        content: 'https://i.imgur.com/gQWBCgR.png'
    }, {
        label: 'Pedido em atendimento',
        content: 'https://i.imgur.com/BQOCVUe.png'
    }, {
        label: 'Pedido entregue',
        content: 'https://i.imgur.com/WfFvp3R.png'
    }, {
        label: 'Pedido Arquivado',
        content: 'https://i.imgur.com/b9QGWTV.png'
    }, {
        label: 'Noticia autorizada a ser postada',
        content: 'https://i.imgur.com/yPjbc66.png'
    }, {
        label: 'Materia autoriza a ser postada',
        content: 'https://i.imgur.com/u0ubicD.png'
    }, {
        label: 'Duvida gamer resolvida',
        content: 'https://i.imgur.com/t36A2Ye.png'
    }, {
        label: 'Duvida gamer em andamento',
        content: 'https://i.imgur.com/jQKlOS4.png'
    }, {
        label: 'Duvida gamer abandonada',
        content: 'https://i.imgur.com/oUE8mcD.png'
    }, {
        label: 'Tópico reaberto a pedido do autor',
        content: 'https://i.imgur.com/lNvOjQ8.png'
    }, {
        label: 'Modificação de Nick aceita',
        content: 'https://i.imgur.com/sII93Jy.png'
    }];

    $(window).on('load', function() {

        if (_userdata.user_level !== 1 && _userdata.user_level !== 2) {
            return;
        }

        var $textarea = $('#text_editor_textarea');

        if (!$textarea) {
            return;
        }

        var $sceditor = $textarea.sceditor('instance');

        $('<a>', {
                'class': 'sceditor-button sceditor-button-moderacao',
                'unselectable': 'on',
                'title': 'Mensagens moderativas da equipe',
                'href': 'javascript:void(0);',
                'html': $('<div>', {
                    'unselectable': 'on',
                    'text': 'Mensagens moderativas',
                    'style': [
                        'opacity: initial !important;',
                        'filter: none !important;',
                        'background-image: url(https://i.servimg.com/u/f39/18/21/41/30/tuto14.png) !important;'
                    ].join(' ')
                }).prop('outerHTML')
            })
            .appendTo($('.sceditor-group').last())
            .on('click', function(event) {

                event.preventDefault();
                event.stopPropagation();

                if ($dropdown.css('display') === 'block') {
                    $dropdown.hide();
                    return;
                }

                var $this = $(this);

                $dropdown
                    .css({
                        display: 'block',
                        position: 'absolute',
                        top: $this.offset().top + 'px',
                        left: $this.offset().left + 'px',
                        marginTop: '27px'
                    });

            });

        var $dropdown = $('<div>', {
                'class': 'sceditor-dropdown sceditor-dropdown-moderacao',
            })
            .hide()
            .appendTo('body')
            .on('click', function(event) {
                event.stopPropagation();
            });

        $.each(buttons, function() {
            var button = this;

            $('<a>', {
                    'href': 'javascript:void(0);',
                    'text': button.label,
                    'data-text': button.content,
                    'class': 'sceditor-dropdown-item'
                })
                .appendTo($dropdown)
                .on('click', function() {
                    $sceditor.insertText($(this).attr('data-text'));
                    $dropdown.hide();
                });
        });

        $(document).on('click', function() {
            $dropdown.hide();
        });

        $('<style>', {
            'text': css.join('\n')
        }).appendTo('head');
    });
}(jQuery, [
    '.sceditor-dropdown-moderacao {',
    '  padding: 0px !important;',
    '  max-height: 123px;',
    '  overflow-y: scroll;',
    '}',
    '',
    '.sceditor-dropdown-moderacao > .sceditor-dropdown-item {',
    '  display: block;',
    '  padding: 10px;',
    '  border-bottom: solid 1px #ddd;',
    '}'
]));

Certo Pedxz,

Mais poderia exemplificar um deles já pronto com HTML/BBcode assim eu faria o resto sozinha.

Então se for em HTML:

Código:

var buttons = [{
        label: 'Dúvida em andamento',
        content: '<div><h6>Dúvida em andamento</h6><p>Está questão foi marcada como "Em Curso", dúvida em andamento.</p></div>'
    }];

É só adicionar o código desta forma, se for BBCode

Código:

var buttons = [{
        label: 'Dúvida VIP Resolvida',
        content: '[table][tr][td][h4]Dúvida VIP Resolvida[/h4]\nMovido para "Questões resolvidas".[/td][/tr][/table]'
    }];

A Senhora, deve usar \n para fazer uma quebra de linha, mas é só adicionar o código que quer.

Com Class
HTML

Código:

var buttons = [{
        label: 'Dúvida em andamento',
        content: '<div class="note note-warning"><h6>Dúvida em andamento</h6><p>Está questão foi marcada como "Em Curso", dúvida em andamento.</p></div>'
    }];

BBCode

Código:

var buttons = [{
        label: 'Dúvida VIP Resolvida',
        content: '[table class="note note-success"][tr][td][h4]Dúvida VIP Resolvida[/h4]\nMovido para "Questões resolvidas".[/td][/tr][/table]'
    }];

E basta criar um código da sua folha de estilo para personalizar a class note note-*

Obrigada Pedxz, pode dá como resolvido.

Bem vinda de novo Ex Boss

Tópico resolvido Movido para "Questões resolvidas".