Mudar fundo de acordo com o ícone

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Mudar fundo de acordo com o ícone

Mensagem por Victores 27.03.19 0:43

Detalhes da questão


Endereço do fórum: http://brasilplayclassic.forumeiros.com
Versão do fórum: ModernBB

Descrição


Boas, tenho o seguinte código
Código:
/*globals jQuery, FA*/
 
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version 1.2
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id  : 4, background: '#8b5', onlyForMod: true },
    { name: 'Em Curso', id  : 1, background: '#ebb537' },
    { name: 'Recusado', id  : 1, background: '#FF0000', onlyForMod: true  },
    { name: 'Importante', id: 5, background: '#e3493b', onlyForAdmin: true }
  ];
 
  window.FA = window.FA || {};
  FA.Topic = FA.Topic || {};
 
  var MarkIcon;
  FA.Topic.MarkIcon = MarkIcon = function (config) {
    var self = this;
 
    self.userConfig = config;
    self.defaults = {
      name: undefined,
      id: undefined,
      background: undefined,
      onlyForMod: false,
      onlyForAdmin: false
    };
  
    self.config = $.extend({}, self.defaults, self.userConfig);
 
    $.each(self.config, function (key, value) {
      if (key === undefined) {
        throw new Error ('Não foi especificado um: ' + key + ' para o script de botões.');
      }
 
      if (value === undefined) {
        throw new Error ('Não foi especificado um valor: ' + value + ' para o script de botões.');
      }
    });
  };
 
  MarkIcon.prototype.init = function () {
    var self = this;
 
    var $post = $('.post:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      return false;
    }
 
    if (this.config.onlyForMod && (_userdata.user_level !== 1 && _userdata.user_level !== 2)) {
      return false;
    }
 
    if (this.config.onlyForAdmin && _userdata.user_level !== 1) {
      return false;
    }
 
    self.messageLink = $link.attr('href');
 
    self.$button = $('<button>', {
      'class'  : 'fa-mark-icon-button',
      'data-id': self.config.id,
      'text'  : self.config.name
    });
 
    self.$button
      .css('background-color', self.config.background)
      .on('click', function (event) {
        event.preventDefault();
 
        self.runAjax();
      })
      .insertBefore($post)
    ;
 
    self.appendStyles();
  };
 
  MarkIcon.prototype.runAjax = function () {
    var self = this;
 
    self.changeText('<i class="fa fa-refresh fa-spin"></i> Marcando...');
 
    $.get(self.messageLink)
      .done(function (context) {
        var $form = $('form[action="/post"]', context);
 
        var encode  = document.charset.toLowerCase() === 'utf-8' ? window.encodeURIComponent : window.escape;
 
        var formData = $form.serializeArray();
 
        var data = {};
        $.each(formData, function () {
          var obj = this;
 
          data[obj.name] = obj.value;
        });
 
        data.post_icon = self.config.id;
        data.post = 1;
 
        var encoded = $.map(data, function (value, key) {
          return key + '=' + encode(value);
        }).join('&');
 
        $.post(self.messageLink, encoded)
          .done(self.changeText('<i class="fa fa-check"></i> Marcado!'))
          .fail(self.error)
        ;
      })
      .fail(self.error)
    ;
  };
 
  MarkIcon.prototype.changeText = function (text) {
    var self = this;
 
    self.runAjax = function () {
      return false;
    };
 
    self.$button
      .html(text)
      .prop('disabled', true)
    ;
  };
 
  MarkIcon.prototype.error = function () {
    var self = this;
 
    alert([
      'Houve um erro ao marcar o tópico como "' + self.config.name + '".',
      'Por favor, contate o suporte técnico.'
    ].join('\n'));
  };
 
  MarkIcon.prototype.appendStyles = function () {
    $('<style>', {
      'text': [
        '.fa-mark-icon-button {',
        '  padding: 8px 8px 8px 8px;',
        '  border: none;',
        '  color: #fff;',
        '  margin: 10px 0 10px 6px;',
        '  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.08);',
        '  border-radius: 3px;',
        '}'
      ].join('\n')
    }).appendTo('head');
  };
 
  $(function () {
    $.each(config, function () {
      var self = this;
 
      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));
Gostaria que ele marcasse na frente do título do topico e o fundo ficasse com a cor de cada botão, assim como nessa imagem: https://imgur.com/JZWQjhf

 alguém poderia ajudar ?
Victores

Victores
Novo Membro

Membro desde : 21/11/2011
Mensagens : 9
Pontos : 17

http://rpg-bpc.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por tikky 27.03.19 7:07

Olá @Victores,
Crie uma nova página JavaScript, com investimento em todas às páginas - com o seguinte código:
Código:
/**
 * Change the topic background according to the icon.
 *
 * @author   Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.1
 * @license  MIT
 */
 
(function($) {
  'use strict';
 
  var config = [
    { url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
    { url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
    { url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
  ];
 
  if (! /^(?:\/f\d+(?:p\d+|)-.*|\/search)$/i.test(location.pathname)) return false;
  
  $(function() {
    $('.dterm').each(function() {
      var $this = $(this);
 
      if (! $this.css('background-image')) return;
 
      $.each(config, function(index, current) {
        var regex = new RegExp (current.url, 'gi');
        if (! regex.test($this.css('background-image'))) {
          return;
        }
 
        /**
         * Pintamos com o fundo desejado.
         */
        $this
          .parent()
          .css('background-color', current.background)
        ;
      });
    });
  });
})(jQuery);
A configuração é semelhante ao script apresentado em cima:
Código:
var config = [
    { url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
    { url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
    { url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
  ];
 
na url, o senhor põe o endereço do ícone e em background a cor de fundo, como apresentado em cima.


Cordialmente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7983
Pontos : 9247

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por Victores 27.03.19 18:38

@Pedxz Coloquei o código acima e sequer estão aparecendo dentro dos tópicos para seleção.
Victores

Victores
Novo Membro

Membro desde : 21/11/2011
Mensagens : 9
Pontos : 17

http://rpg-bpc.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por Victores 29.03.19 11:15

UP aqui pra alguém me ajudar
Victores

Victores
Novo Membro

Membro desde : 21/11/2011
Mensagens : 9
Pontos : 17

http://rpg-bpc.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por tikky 29.03.19 13:04

Olhe, o senhor primeiramente deve adicionar alguns ícones da mensagens para o código funcionar. Leia o seguinte tópico: [FAQ] Adicionar ícones nas mensagens , e após isso faça:
Pedxz escreveu:Olá @Victores,
Crie uma nova página JavaScript, com investimento em todas às páginas - com o seguinte código:
Código:
/**
 * Change the topic background according to the icon.
 *
 * @author   Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.1
 * @license  MIT
 */
 
(function($) {
  'use strict';
 
  var config = [
    { url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
    { url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
    { url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
  ];
 
  if (! /^(?:\/f\d+(?:p\d+|)-.*|\/search)$/i.test(location.pathname)) return false;
  
  $(function() {
    $('.dterm').each(function() {
      var $this = $(this);
 
      if (! $this.css('background-image')) return;
 
      $.each(config, function(index, current) {
        var regex = new RegExp (current.url, 'gi');
        if (! regex.test($this.css('background-image'))) {
          return;
        }
 
        /**
         * Pintamos com o fundo desejado.
         */
        $this
          .parent()
          .css('background-color', current.background)
        ;
      });
    });
  });
})(jQuery);
A configuração é semelhante ao script apresentado em cima:
Código:
var config = [
    { url: 'i.imgur.com/pj3DCqm.png', background: 'rgba(146, 86, 178, 0.23)' },
    { url: 'i.imgur.com/N0UIwZW.png', background: 'rgba(127, 194, 93, 0.27)' },
    { url: 'i.imgur.com/9yStjvf.png', background: 'rgba(229, 86, 73, 0.13)' }
  ];
 
na url, o senhor põe o endereço do ícone e em background a cor de fundo, como apresentado em cima.


Cordialmente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7983
Pontos : 9247

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por Victores 29.03.19 14:57

Resolvido, pode fechar... Obrigado !
Victores

Victores
Novo Membro

Membro desde : 21/11/2011
Mensagens : 9
Pontos : 17

http://rpg-bpc.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Mudar fundo de acordo com o ícone

Mensagem por Roevs 29.03.19 16:06

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
Roevs

Roevs
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos