[TUTORIAL] Alterar o ícone do tópico em modo AJAX

Instalação do código Javascript

Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript

Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas.

Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:

/*globals jQuery, FA, _userdata*/
 
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 *
 * Modificação por RafaelS. restringir botões aos fóruns
 * https://ajuda.forumeiros.com/
 *
 * @version 1.2
 * @licence MIT
 */
 
(function($) {
 'use strict';
 
 var config = [{
  name: 'Resolvido',
  id: 1,
  background: '#8b5',
  onlyForMod: true,
  forum: 1
  },
  {
  name: 'Em Progresso',
  id: 2,
  background: '#ebb537',
  forum: 6
  },
  {
  name: 'Important',
  id: 5,
  background: '#e3493b',
  onlyForAdmin: true,
  forum: 7
  }
 ];
 
 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,
  forum: undefined,
  };
 
  self.config = $.extend({}, self.defaults, self.userConfig);
 
  $.each(self.config, function(key, value) {
  if (key === undefined) {
    throw new Error('[Topic Icons] The ' + key + ' key was not specified in the script config.');
  }
 
  if (value === undefined) {
    throw new Error('[Topic Icons] The ' + value + ' value was not specified in the settings.');
  }
  });
 };
 
 MarkIcon.prototype.init = function() {
  var self = this;
 
  var $post = $('.post[id*="p"]:first, [id*="post-"].post-wrap: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;
  }
  var atual = $('.sub-header-path a:last').attr("href");
  console.log("Forum detection by RafaelS.");
  if (atual.indexOf("f" + this.config.forum + "-") < 0) {
  console.log("O ícone " + this - config.name + " não está disponível no fórum: " + atual);
  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> Marking...');
 
  $.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> Marked!'))
    .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() {
  alert([
  '[Topic Icons] AJAX Error.',
  'Refresh the page and try again.'
  ].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));

No código abaixo, são necessárias algumas modificações na váriavél config:
Você deve substituir o número na configuração id:1, pelo ID do ícone no seu fórum.
Na configuração forum:1, você deve substituir pelo ID do fórum em que o ícone poderá ser utilizado.
Você pode substituir a cor de fundo do botão aqui: background: '#ebb537'

Resultado do tutorial