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 JavascriptAs 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 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:
- 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 |