Tags nos tópicos para administradores e moderadores

Detalhes da questão

Endereço do fórum: https://habbling.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Oi gente, eu andei pesquisando para achar prefixos para STAFF e achei, porém eu achei prefixos sem a cor,tipo [Resolvido] ele não fica com a cor igual os prefixos de cores, ele só da a tag [Resolvido]

o código que usei

Código:

/*globals jQuery, _userdata*/
/**
 * @name Sistema de Prefixos.
 * @version 1.2
 * @author Luiz
 * @see {@link http://ajuda.forumeiros.com/}
 * @licence MIT
 */
(function ($) {
  'use strict';
 
  var config = {
    prefixes: [
      'Dúvida', 'Pedido', 'Em Curso',
      'Jogos', 'Recusado', 'Resolvido',
      'Negado'
    ],
 
    lang: {
      all: 'Sem Prefixo'
    },
 
    engine: {
      /**
      * @name Inicializador.
      * @desc Usado para iniciar o script.
      * @param {object} input - Corresponde ao seletor do input-alvo do script.
      */
      init: function (input) {
        var self = this;
      
        var $input = $(input);
        var $dummy = $('<option>', { 'class': 'fa-prefix-item' });
      
        if (!/^\/post$/g.test(location.pathname) && $input) {
          return false;
        }
  
        var $select = $('<select>', {
          'class': 'fa-prefix-select'
        });
 
        $dummy
          .clone()
            .text(config.lang.all)
            .attr('value', '')
            .attr('selected', true)
            .appendTo($select)
        ;
  
        $.each(config.prefixes, function (index, prefix) {
          $dummy
            .clone()
              .text('[' + prefix + ']')
              .attr('value', '[' + prefix + ']')
              .attr('id', 'fa-prefix-item-' + index)
              .appendTo($select)
          ;
        });
  
        $select
          .insertAfter($input)
          .on('change', function () {
            var $this = $(this);
            var value = $this.val();
  
            self.prefix(value, $this.prev());
          })
        ;
      },
    
      /**
      * @name Prefixador.
      * @desc Usada para colocar o prefixo no input.
      * @param {string} value - Corresponde ao prefixo que será colocado.
      * @param {object} input - Corresponde ao seletor do input que será prefixado.
      */
      prefix: function (value, input) {
        var $input = $(input);
 
        if (/^\[.*\]/g.test($input.val())) {
          $input.val($.trim($input.val().replace(/^\[.*\]/, '')));
        }
 
        $input.val($.trim(value + ' ' + $input.val()));
      
      }
    }
  };
 
  $(function () {
 
    if (
      _userdata.user_level !== 1 &&
      _userdata.user_level !== 2
    ) {
      return false;
    }
  
    var $input = $('input[name="subject"]');
    config.engine.init($input);
  });
}(jQuery));

Olá @weverson lopes,

Leia o seguinte tópico: Tags nos tópicos, é o que o senhor deseja?!



Aguardo uma resposta sua,
pedxz.

Olá pedx, sim porém o que eu queria era apenas para staffers, moderadores, e já tenho, só que preciso de colocar a cor nos prefixos e o código que utilizei acima, funciona mas sem cor nos prefixos.

Para Administradores e Moderadores, use:

Código:

/**
 *! Criar tags no título dos tópicos com painel de seleção.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var tags = [
    {
      tag: 'imagem',
      background: '#666'
    },
    {
      tag: 'widget',
      background: '#000'
    }
  ];
 
  $(function () {
    var counter = 1;
 
    /**
    * Parte 1.
    * Aqui nós criamos o seletor de tags acima do editor:
    */
    if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) {

  if (_userdata.user_level !== 2 && _userdata.user_level !== 1){
      return;
    }
      // Criar a zona para colocar-se os inputs:
      var $textarea = $('#textarea_content');
      var $title = $('form [name="subject"]');
      var $zone = $([
        '<div class="fa-icon-selector">',
        '  <div class="fa-icon-selector-inner">',
        '  </div>',
        '</div>',
      ].join('\n'))
        .prependTo($textarea)
      ;
 
      // Criar-se os inputs dentro da zona criada anteriormente:
      var $appendZone = $zone.find('.fa-icon-selector-inner');
      $.each(tags, function (index, tag) {
        $([
          '<div class="fa-tag-form-group">',
          '  <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />',
          '  <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>',
          '</div>',
        ].join('\n'))
          .appendTo($appendZone)
        ;
     
        counter++;
      });
 
      // Função para dar focus num input X caso este seja a tag dum tópico X:
      if (/^\[.*\]/gi.test($title.val())) {
        $title.val().replace(/^\[(.*)\]/gi, function (find, match) {
          $('[data-tag="' + match + '"]').prop('checked', true);
        });
      }
 
      // Trigger para a adição/edição do prefixo no input de título:
      $zone
        .find('input.select-tag-input')
          .on('focus', function () {
            setPrefix($(this).attr('data-tag'));
          })
      ;
 
      // Função para setar/editar o prefixo:
      var setPrefix = function (prefix) {
 
        if (/^\[.*\]/gi.test($title.val())) {
          $title.val($title.val().replace(/^\[.*\]/gi, function () {
            return '[' + prefix + ']';
          }));
       
          return;
        }
     
        $title.val('[' + prefix + '] ' + $title.val().trim());
      };
    }
 
    /**
    * Parte 2.
    * Aqui nós iremos substituir a tag entre os colchetes por uma tag real:
    */
    var $link = $('a[href^="/t"]');
    $link.each(function () {
 
      var $this = $(this);
 
      $.each(tags, function (index, tag) {
        var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim');
        var text = $this.text();
 
        if (!regex.test(text)) {
          return;
        }
 
        $this.addClass('fa-tagged-link');
        $this.text(text.trim().replace(regex, ''));
        $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>');
      });
    });
 
    /**
    * Parte 3:
    * Estilos.
    */
    var styles = [
      '.fa-icon-selector-inner strong {',
      '  display: block;',
      '  margin-bottom: 4px;',
      '  font-weight: bold;',
      '}',
      '',
      '.fa-icon-selector .fa-tag-form-group {',
      '  display: inline-block;',
      '  margin-right: 15px;',
      '  margin-top: 4px;',
      '}',
      '',
      '.fa-tagged-link {',
      '  text-decoration: none !important;',
      '}',
      '',
      '.fa-tagged-link:hover {',
      '  color: #f73 !important;',
      '  text-decoration: none !important;',
      '}',
      '',
      'span.fa-topic-tag {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 1px 5px;',
      '  border-radius: 3px;',
      '  margin-right: 4px;',
      '  display: inline;',
      '  text-decoration: none!important',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
 
  });
}(jQuery));

Diga-me as cores que pretende usar para cada "prefixo" para facilitar a adição no script!

oi pedx, quero adicionar vermelho, preto e amarelo

weverson lopes escreveu:oi pedx, quero adicionar vermelho, preto e amarelo

Para que tags?

Código:

Dúvida
Pedido
Em Curso
Jogos
Recusado
Resolvido
Negado

Oi de novo, sim isso mesmo

weverson lopes escreveu:Oi de novo, sim isso mesmo

Peço imensa desculpa pela falta de coerência, o script dos prefixos será removido e o novo será o das tags que é basicamente o sistema de prefixos com cor de fundo, então para finalizar a edição do script das tags é necessário as cores que o senhor pretende usar

magina, são preto, amarelo e vermelho apenas, o resto vc coloca do jeito que achar melhor, ou todos da mesma cor e depois eu mudo

Remova o script dos prefixos e use:

Código:

/**
 *! Criar tags no título dos tópicos com painel de seleção.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function($) {
    'use strict';

    var tags = [{
            tag: 'Dúvida',
            background: '#434A53'
        },
        {
            tag: 'Pedido',
            background: '#E95546'
        },
        {
            tag: 'Em curso',
            background: '#F6BA59'
        },
        {
            tag: 'Jogos',
            background: '#D870A9'
        },
        {
            tag: 'Recusado',
            background: '#D770AD'
        },
        {
            tag: 'Resolvido',
            background: '#8BC163'
        },
        {
            tag: 'Negado',
            background: '#AAB2BC'
        }
    ];

    $(function() {
        var counter = 1;

        /**
        * Parte 1.
        * Aqui nós criamos o seletor de tags acima do editor:
        */
        if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) {

            if (_userdata.user_level !== 2 && _userdata.user_level !== 1) {
                return;
            }
            // Criar a zona para colocar-se os inputs:
            var $textarea = $('#textarea_content');
            var $title = $('form [name="subject"]');
            var $zone = $([
                    '<div class="fa-icon-selector">',
                    '  <div class="fa-icon-selector-inner">',
                    '  </div>',
                    '</div>',
                ].join('\n'))
                .prependTo($textarea);

            // Criar-se os inputs dentro da zona criada anteriormente:
            var $appendZone = $zone.find('.fa-icon-selector-inner');
            $.each(tags, function(index, tag) {
                $([
                        '<div class="fa-tag-form-group">',
                        '  <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />',
                        '  <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>',
                        '</div>',
                    ].join('\n'))
                    .appendTo($appendZone);

                counter++;
            });

            // Função para dar focus num input X caso este seja a tag dum tópico X:
            if (/^\[.*\]/gi.test($title.val())) {
                $title.val().replace(/^\[(.*)\]/gi, function(find, match) {
                    $('[data-tag="' + match + '"]').prop('checked', true);
                });
            }

            // Trigger para a adição/edição do prefixo no input de título:
            $zone
                .find('input.select-tag-input')
                .on('focus', function() {
                    setPrefix($(this).attr('data-tag'));
                });

            // Função para setar/editar o prefixo:
            var setPrefix = function(prefix) {

                if (/^\[.*\]/gi.test($title.val())) {
                    $title.val($title.val().replace(/^\[.*\]/gi, function() {
                        return '[' + prefix + ']';
                    }));

                    return;
                }

                $title.val('[' + prefix + '] ' + $title.val().trim());
            };
        }

        /**
        * Parte 2.
        * Aqui nós iremos substituir a tag entre os colchetes por uma tag real:
        */
        var $link = $('a[href^="/t"]');
        $link.each(function() {

            var $this = $(this);

            $.each(tags, function(index, tag) {
                var regex = new RegExp('\\[' + tag.tag + '\\]', 'gim');
                var text = $this.text();

                if (!regex.test(text)) {
                    return;
                }

                $this.addClass('fa-tagged-link');
                $this.text(text.trim().replace(regex, ''));
                $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>');
            });
        });

        /**
        * Parte 3:
        * Estilos.
        */
        var styles = [
            '.fa-icon-selector-inner strong {',
            '  display: block;',
            '  margin-bottom: 4px;',
            '  font-weight: bold;',
            '}',
            '',
            '.fa-icon-selector .fa-tag-form-group {',
            '  display: inline-block;',
            '  margin-right: 15px;',
            '  margin-top: 4px;',
            '}',
            '',
            '.fa-tagged-link {',
            '  text-decoration: none !important;',
            '}',
            '',
            '.fa-tagged-link:hover {',
            '  color: #f73 !important;',
            '  text-decoration: none !important;',
            '}',
            '',
            'span.fa-topic-tag {',
            '  color: #fff;',
            '  background-color: #39c;',
            '  padding: 1px 5px;',
            '  border-radius: 3px;',
            '  margin-right: 4px;',
            '  display: inline;',
            '  text-decoration: none!important',
            '}'
        ].join('\n');

        $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');

    });
}(jQuery));

Obrigado pedx, ajudou muito mais uma das 300 vezes que te pedi ajuda hahahaha obrigadoooo