Setar ranking automaticamente de acordo com o grupo

Detalhes da questão

Endereço do fórum: http://stmteste.forumeiros.com
Versão do fórum: AwesomeBB

Descrição

Em um fórum modernBB utilizei os seguintes códigos para setar ranks ao estar em um grupo:

Código:

(function ($) {
  'use strict';
 
  var ranks = [
    {
      color: '#00700D',
      rank: {
        name: 'CODI',
        className: 'rank codi'
      }
    },
    {
      color: '#00C1DB',
      rank: {
        name: 'ITM',
        className: 'rank itm'
      }
    },
    {
      color: '#0E9923',
      rank: {
        name: 'Auditoria Fiscal',
        className: 'rank af'
      }
    },
    {
      color: '#BD5224',
      rank: {
        name: 'Superintendência',
        className: 'rank sup'
      }
    },
     {
      color: '#1F4208',
      rank: {
        name: 'Serviço Secreto',
        className: 'rank ss'
      }
    },
    {
      color: '#FF8C00',
      rank: {
        name: 'CRH',
        className: 'rank crh'
      }
    },
    {
      color: '#FF0000',
      rank: {
        name: 'Treinador',
        className: 'rank tre'
      }
    },
    {
    color: '#D25BF0',
    rank: {
      name: 'Admin',
      className: 'rank adm'
      }
    },
    {
    color: '#131312',
    rank: {
      name: 'Corregedoria',
      className: 'rank cor'
      }
    },
    {
    color: '#0074F0',
    rank: {
      name: 'Professores',
      className: 'rank prof'
      }
    }
  ];
 
  var exceptions = [
  ];
 
  /**
  * Iterate over the rank array.
  *
  * @param  {string} color
  * @param  {object<jQuery>} $originalRank
  * @return {void}
  */
  function iterate(color, $originalRank) {
    var $except = $originalRank.attr('class');
    var $is_except = false;
 
    $.each(exceptions, function(index, exception) {
  
      if($except == exception) {
        $is_except = true;
        return;
      }
    });
 
    if($is_except) return;
 
    $.each(ranks, function () {  
      var $dummy = $('<span>')
        .css('color', this.color);
 
      // If the color is not the same, pass to the next iteration:
      if ($dummy.css('color') !== color) {
        return;
      }
 
      // Create the rank element:
      var $newRank = $('<div>', {
        'class': 'lf-custom-rank',
      })
        .text(this.rank.name)
        .addClass(this.rank.className);
 
      $originalRank.replaceWith($newRank);
    });
  }
 
  $(function () {
    // Topics:
    $('.post .postprofile').each(function () {
      var $this = $(this);
      var $user = $this.find('.postprofile-name > a[href] > span[style]');
 
      if (!$user.length) {
        $this.css('border-left-color', '#f0f0f0');
        return;
      }
  
      iterate($user.css('color'), $this.find('.postprofile-rank .rank'));
  
      $this.css('border-left-color', $user.css('color'));
    });
 
    // Profile:
    if (!/^\/u\d+$/.test(location.pathname)) {
      return;
    }
 
    var $profile = $('#profile-advanced-right');
    var $user = $profile.find('.module > .h3 > span[style]');
 
      if (!$user.length) {
        return;
      }
 
    iterate($user.css('color'), $profile.find('.mod-login-rank > br + .rank'));
  });
})(jQuery);

Código:

/* Ranks Administrativos*/
.rank.adm{background-image: radial-gradient(circle, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);background-size: 1800% 1800%;animation: rainbow 6s ease infinite;}
.rank.adm:before{content: "\f121";margin-right: 5px;font-family: "FontAwesome";}
.rank.codi{background: linear-gradient(to right, #000000 0%, #00700D 100%); color:#FFFFFF;}
.rank.codi:before{content: "\f002";margin-right: 5px;font-family: "FontAwesome";}
.rank.crh{background: linear-gradient(to right, #C7631D 0%, #FF8C00 100%);}
.rank.crh:before{content: "\f2c3";margin-right: 5px;font-family: "FontAwesome";}
.rank.cor{background-image: linear-gradient(to right, #666666, #5c5c5c, #525252, #484848, #3f3f3f, #373737, #2f2f2f, #282828, #202020, #181818, #0e0e0e, #000000);}
.rank.cor:before{content: "\f0e3";margin-right: 5px;font-family: "FontAwesome";}
.rank.ss{background-image: linear-gradient(to right, #000000, #004002, #040038, #a98a01, #115000);color: #fff09c;background-size: 1800% 1800%;animation: rainbow 6s linear infinite;}
.rank.ss:before {content: "\f21b";margin-right: 5px;font-family: "FontAwesome";}
.rank.sup{background: linear-gradient(to right, #000000 0%, #BD5224 100%); color:#FFFFFF;}
.rank.sup:before {content: "\f24e";margin-right: 5px;font-family: "FontAwesome";}
.rank.af{background-color: #0E9923; color:#FFFFFF;}
.rank.af:before {content: "\f201";margin-right: 5px;font-family: "FontAwesome";}
.rank.itm{background-color: #00C1DB; color:#FFFFFF;}
.rank.itm:before {content: "\f19c";margin-right: 5px;font-family: "FontAwesome";}
/*Ranks dos Usuários*/
.rank.tre{background-color:#FF0000;}
.rank.tre:before{content: "\f0e7";margin-right: 5px;font-family: "FontAwesome";}
.rank.prof{background-color:#0074F0;}
.rank.prof:before{content: "\f040";margin-right: 5px;font-family: "FontAwesome";}

Tentei utilizar este mesmo código em um fórum AwesomeBB mas não surtiu efeito, ficando apenas um rank escrito usuário, como mostrado (https://prnt.sc/v51qvd)

Gostaria de saber se há alguma forma de setar ranks automaticamente neste tipo de forum

Olá,

Tente substituir o JS por esse abaixo

Código:

(function ($) {
  'use strict';
 
  var ranks = [
    {
      color: '#00700D',
      rank: {
        name: 'CODI',
        className: 'rank codi'
      }
    },
    {
      color: '#00C1DB',
      rank: {
        name: 'ITM',
        className: 'rank itm'
      }
    },
    {
      color: '#0E9923',
      rank: {
        name: 'Auditoria Fiscal',
        className: 'rank af'
      }
    },
    {
      color: '#BD5224',
      rank: {
        name: 'Superintendência',
        className: 'rank sup'
      }
    },
    {
      color: '#1F4208',
      rank: {
        name: 'Serviço Secreto',
        className: 'rank ss'
      }
    },
    {
      color: '#FF8C00',
      rank: {
        name: 'CRH',
        className: 'rank crh'
      }
    },
    {
      color: '#FF0000',
      rank: {
        name: 'Treinador',
        className: 'rank tre'
      }
    },
    {
    color: '#D25BF0',
    rank: {
      name: 'Admin',
      className: 'rank adm'
      }
    },
    {
    color: '#131312',
    rank: {
      name: 'Corregedoria',
      className: 'rank cor'
      }
    },
    {
    color: '#0074F0',
    rank: {
      name: 'Professores',
      className: 'rank prof'
      }
    }
  ];
 
  var exceptions = [
  ];
 
  /**
  * Iterate over the rank array.
  *
  * @param  {string} color
  * @param  {object<jQuery>} $originalRank
  * @return {void}
  */
  function iterate(color, $originalRank) {
    var $except = $originalRank.attr('class');
    var $is_except = false;
 
    $.each(exceptions, function(index, exception) {
 
      if($except == exception) {
        $is_except = true;
        return;
      }
    });
 
    if($is_except) return;
 
    $.each(ranks, function () {
      var $dummy = $('<span>')
        .css('color', this.color);
 
      // If the color is not the same, pass to the next iteration:
      if ($dummy.css('color') !== color) {
        return;
      }
 
      // Create the rank element:
      var $newRank = $('<div>', {
        'class': 'lf-custom-rank',
      })
        .text(this.rank.name)
        .addClass(this.rank.className);
 
      $originalRank.replaceWith($newRank);
    });
  }
 
  $(function () {
    // Topics:
    $('.post .post-aside').each(function () {
      var $this = $(this);
      var $user = $this.find('.post-author-name > a[href] > span[style]');
 
      if (!$user.length) {
        $this.css('border-left-color', '#f0f0f0');
        return;
      }
 
      iterate($user.css('color'), $this.find('.post-author-title .new-rank'));
 
      $this.css('border-left-color', $user.css('color'));
    });
 
    // Profile:
    if (!/^\/u\d+$/.test(location.pathname)) {
      return;
    }
 
    var $profile = $('.cp-sidebar');
    var $user = $profile.find('.box > .box-head > span[style]');
 
      if (!$user.length) {
        return;
      }
 
    iterate($user.css('color'), $profile.find('.mod-login-rank > br + .rank'));
  });
})(jQuery);

Título alterado para "Setar ranking automaticamente de acordo com o grupo".

Até mais!

Continua como no print

Olá @paola maielo,

Altere o código em cima para:

Código:

(function ($) {
  'use strict';
 
  var ranks = [
    {
      color: '#00700D',
      rank: {
        name: 'CODI',
        className: 'rank codi'
      }
    },
    {
      color: '#00C1DB',
      rank: {
        name: 'ITM',
        className: 'rank itm'
      }
    },
    {
      color: '#0E9923',
      rank: {
        name: 'Auditoria Fiscal',
        className: 'rank af'
      }
    },
    {
      color: '#BD5224',
      rank: {
        name: 'Superintendência',
        className: 'rank sup'
      }
    },
    {
      color: '#1F4208',
      rank: {
        name: 'Serviço Secreto',
        className: 'rank ss'
      }
    },
    {
      color: '#FF8C00',
      rank: {
        name: 'CRH',
        className: 'rank crh'
      }
    },
    {
      color: '#FF0000',
      rank: {
        name: 'Treinador',
        className: 'rank tre'
      }
    },
    {
    color: '#D25BF0',
    rank: {
      name: 'Admin',
      className: 'rank adm'
      }
    },
    {
    color: '#131312',
    rank: {
      name: 'Corregedoria',
      className: 'rank cor'
      }
    },
    {
    color: '#0074F0',
    rank: {
      name: 'Professores',
      className: 'rank prof'
      }
    }
  ];
 
  var exceptions = [
  ];
 
  /**
  * Iterate over the rank array.
  *
  * @param  {string} color
  * @param  {object<jQuery>} $originalRank
  * @return {void}
  */
  function iterate(color, $originalRank) {
    var $except = $originalRank.attr('class');
    var $is_except = false;
 
    $.each(exceptions, function(index, exception) {
 
      if($except == exception) {
        $is_except = true;
        return;
      }
    });
 
    if($is_except) return;
 
    $.each(ranks, function () {
      var $dummy = $('<span>')
        .css('color', this.color);
 
      // If the color is not the same, pass to the next iteration:
      if ($dummy.css('color') !== color) {
        return;
      }
 
      // Create the rank element:
      var $newRank = $('<div>', {
        'class': 'lf-custom-rank',
      })
        .text(this.rank.name)
        .addClass(this.rank.className);
 
      $originalRank.replaceWith($newRank);
    });
  }
 
  $(function () {
    // Topics:
    $('.post-wrap .post-aside').each(function () {
      var $this = $(this);
      var $user = $this.find('.post-author-name > a[href] > span[style]');
 
      if (!$user.length) {
        $this.css('border-left-color', '#f0f0f0');
        return;
      }
 
      iterate($user.css('color'), $this.find('.post-author-title .new-rank'));
 
      $this.css('border-left-color', $user.css('color'));
    });
 
    // Profile:
    if (!/^\/u\d+$/.test(location.pathname)) {
      return;
    }
 
    var $profile = $('.cp-sidebar');
    var $user = $profile.find('.box > .box-head > span[style]');
 
      if (!$user.length) {
        return;
      }
 
    iterate($user.css('color'), $profile.find('.mod-login-rank > br + .rank'));
  });
})(jQuery);

Atenciosamente,
pedxz.