[Plugin] Ribbon para Postagens

Olá á todos!   Compartilho um Plugin que talvez seja útil seu fórum, lembre-se que este foi feito sobe medida e para uma situação específica de uso, porém podemos alterar mais para frente conforme as necessidades! Este é O Ribbon, basicamente aparecerá uma faixa bem estilosa no canto direito da área de postagem, com o texto e estilização que você especificar na configuração do Plugin, espero que goste.

Instalação:
Painel administrativo    Módulos    HTML e Javascript    Gestão dos códigos Javascript    Criar um novo Javascript
O "Investimento" selecione "Nos tópicos".

---

Código:

Código:

/*
 * Coded Flash157
 * Discord: hax0r
 *
 * Este JQuery adiciona uma faixa personalizada as postagens no fórum,
 * especifique um nome de quem poderá usar e estilização.
 *
*/

(function($){
    'use strict';

    $(document).ready(function(){
      
      var ribbonSettings = {
        'Flash157': { //nome do usuário
          text: 'STAFF', //tag escrita que será aparente
          class: 'ribbon-3', //class css (adicione quantas quiser)
          style: ''
        },
        'Chefia-de-Governo': {
          text: 'Conta Oficial',
          class: 'ribbon-4',
          style: ''
        },
        'Divisão de Doc. e Regs.': {
          text: 'Conta Oficial',
          class: 'ribbon-4',
          style: ''
        },
        'Flower,-': {
          text: 'STAFF',
          class: 'ribbon-3',
          style: ''
        },
      };

      $('.post-wrap').each(function(){
        var $post = $(this);
        var $locale = $post.find('.post-body .post');
        var authorNames = $post.find('.post-aside .post-author-name > a > span > strong').map(function(){
          return $(this).text().trim();
        }).get();

        if(authorNames.length > 0){
          authorNames.forEach(function(authorName){
            if (ribbonSettings.hasOwnProperty(authorName)) {
              var settings = ribbonSettings[authorName];
              var ribbonHTML = '<div class="ribbon ' + settings.class + '" style="' + settings.style + '"><span>' + settings.text + '</span></div>';
              $locale.prepend(ribbonHTML);
            }
          });
        }
        
        //console.log(authorNames);
      });
    });
  })(jQuery);


CSS (estilo):

Código:

.ribbon {
    position: relative;
    right: -5px;
    top: -4px;
}
.ribbon {
    z-index: 999;
    overflow: hidden;
    width: 75px;
    height: 75px;
    position: absolute!important;
    text-align: right;
}
.ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px;
}
.ribbon-3 span {
    background: linear-gradient(#4169e1 0%, #3759bf 100%) !important;
}

.ribbon-3 span::before {
    border-left: 3px solid #3759bf !important;
    border-top: 3px solid #3759bf !important;
}
.ribbon-3 span::after {
    border-right: 3px solid #3759bf !important;
    border-top: 3px solid #3759bf !important;
}
.ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-bottom: 0px solid transparent;
}
.ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
}


Screenshots:





Observações:
Resolvi manter a configuração intácta para melhor localização para alterações pelo usuário, conforme segue os comentários dentro do código.

Este foi testado em AwesomeBB, porém acredito que não seja díficil alterá-lo para versões menores (fácil alteração), sinta-se á vontade para pedir ou me contactar livremente pelos canais de comunição informados.

Até mais!

Ribbon 0.1 - 07/12/23

Changelogs:

+ Possibilidade de adicionar um Ribbon exclusivo para um determinado Grupo. (use a cor hex).

Código:
Substitua o código anterior por este este para usufruir da modificação.

Código:

(function($){
    'use strict';
 
    $(document).ready(function(){
      
      var ribbonSettings = {
        'Flah157': { //nome do usuário
          text: 'STAFF', //tag escrita que será aparente
          class: 'ribbon-3', //class css (adicione quantas quiser)
          style: ''
        },
        'Chefia-de-Governo': {
          text: 'Conta Oficial',
          class: 'ribbon-4',
          style: ''
        },
        'Divisão de Doc. e Regs.': {
          text: 'Conta Oficial',
          class: 'ribbon-4',
          style: ''
        },
        'Flower,-': {
          text: 'STAFF',
          class: 'ribbon-3',
          style: ''
        },
        '#ce0039': { //a cor do grupo
          text: 'STAFF',//tag escrita que será aparente
          class: 'ribbon-3',//class css (adicione quantas quiser)
          style: ''
        },
      };
 
      $('.post-wrap').each(function(){
        var $post = $(this);
        var $locale = $post.find('.post-body .post');
        
        var authorColorRGB = $post.find('.post-aside .post-author-name > a > span[style]').css('color');
        var authorColorHex = rgbToHex(authorColorRGB);
        //console.log('cor convertida: ', authorColorHex);

        var authorNames = $post.find('.post-aside .post-author-name > a > span > strong').map(function(){
          return $(this).text().trim();
        }).get();
 
        if(authorNames.length > 0){
          authorNames.forEach(function(authorName){
            if (ribbonSettings.hasOwnProperty(authorName) || (authorColorHex && ribbonSettings.hasOwnProperty(authorColorHex))) {
              var settings = ribbonSettings[authorName] || ribbonSettings[authorColorHex];
              var ribbonHTML = '<div class="ribbon ' + settings.class + '" style="' + settings.style + ' color: ' + authorColorHex + ';"><span>' + settings.text + '</span></div>';
              $locale.prepend(ribbonHTML);
            }
          });
        }
      });

      function rgbToHex(rgb) {
        if (!rgb) return null;
        var match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        if (!match) return null;

        function hex(x) {
          return ('0' + parseInt(x).toString(16)).slice(-2);
        }

        return '#' + hex(match[1]) + hex(match[2]) + hex(match[3]);
      }
    });
})(jQuery);

CSS (estilização):
Não houve alterações necessárias para a estilização, use o CSS no índice da postagem.

---

Relate problemas ou comportamentos inesperados,

Até mais!