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

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

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

Mensagem por RafaelS. em 12/11/18, 03:17 pm

Alterar o ícone do tópico em modo AJAX

Por vezes torna-se cansativo ter que editar os tópicos para alterar o ícone dele. Com este tutorial, você poderá diretamente alterar o ícone no topo do tópico. O ícone será alterado pelo o que foi escolhido sem que a página tenha que ser recarregada.

Alterar o ícone do tópico em modo AJAX


TUTORIAIS, DICAS E ASTÚCIAS

Instalação do código Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript
Seta 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.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta 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.
Seta 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:

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

avatar

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4212
Pontos Ativos : 5208

Ver perfil do usuário http://techmais.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum