Botão Moderação

Detalhes da questão

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

Descrição

olá boa tarde eu tenho um sistema moderação de icones diretamente na pagina os meus botões atuais são como a imagem abaixo

http://prntscr.com/k171qz

eu gostaria um botão igual esse ou melhor

http://prntscr.com/k171fb

desde ja obrigado!

Olá @ranzatti,
poderia passar o JS para poder ajudar!

Pedxz escreveu:Olá @ranzatti,
poderia passar o JS para poder ajudar!

opa claro que sim segue abaixo o codigo js

Código:

/*globals jQuery, FA*/
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version {alpha} 1.0
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id  : 1, background: '#8b5' },
    { name: 'Em Curso', id  : 2, background: '#8b5' },
    { name: 'Regras', id  : 3, background: '#8b5' },
    { name: 'Atendida', id  : 4, background: '#8b5' },
    { name: 'Importante', id  : 5, background: '#8b5' },
    { name: 'Tutorial', id  : 6, background: '#8b5' },
    { name: 'Recusado', id  : 7, background: '#8b5' },
    { name: 'Aceito', id  : 8, background: '#8b5' },
    { name: 'Banido', id  : 9, background: '#8b5' },
    { name: 'Desbanido', id  : 10, background: '#8b5' },
    { name: 'Designer', id  : 11, background: '#8b5' },
    { name: 'Aprovado', id  : 12, background: '#8b5' },
    { name: 'Reprovado', id  : 13, background: '#8b5' },
  ];
 
  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 };
    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.');
      }
    });
  };
 
  MarkIcon.prototype.init = function () {
    var self = this;
 
    var $post = $('.post:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      return;
    }
 
    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)
    ;
  };
 
  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);
 
        $form.find('input[name="post_icon"]').val(self.config.id);
        $form.find('input[name="edit_reason"]').remove();
 
        var encode = document.charset.toLowerCase() === 'utf-8'
          ? window.encodeURIComponent
          : window.escape
        ;
 
        var data = {
          subject          : $form.find('[name="subject"]').val(),
          post_icon        : self.config.id,
          message          : $form.find('[name="message"]').val(),
          mode              : $form.find('[name="mode"]').val(),
          p                : $form.find('[name="p"]').val(),
          modif_topic_title : $form.find('[name="modif_topic_title"]').val(),
          topictype        : $form.find('[name="topictype"]').val(),
          poll_title        : $form.find('[name="poll_title"]').val(),
          poll_option_text  : $form.find('[name="poll_option_text"]').val(),
          poll_length      : $form.find('[name="poll_length"]').val(),
          poll_multiple    : $form.find('[name="poll_multiple"]').val(),
          poll_cancel_vote  : $form.find('[name="poll_cancel_vote"]').val(),
          'auth[]'          : $form.find('[name="auth[]"]').val(),
          post              : 1
        };
 
        var encoded = $.map(data, function (value, key) {
          return key + '=' + encode(value);
        }).join('&');
 
        $.post(self.messageLink, encoded)
          .done(function () {
            self.changeText('<i class="fa fa-check"></i> Marcado!');
          })
          .fail(function () {
            alert([
              '[#2] Houve um erro ao marcar o tópico como "' + self.config.name + '".',
              'Por favor, contate o suporte técnico.'
            ].join('\n'));
          })
        ;
      })
      .fail(function () {
        alert([
          '[#1] Houve um erro ao marcar o tópico como "' + self.config.name + '".',
          'Por favor, contate o suporte técnico.'
        ].join('\n'));
      })
    ;
  };
 
  MarkIcon.prototype.changeText = function (text) {
    var self = this;
 
    $(self.button)
      .html(text)
    ;
  };
 
  $(function () {
    $.each(config, function () {
      var self = this;
 
      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));

Mude para:

Código:

/*globals jQuery, FA, _userdata*/
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version {alpha} 1.0
 * @licence MIT
 */
 
/*(function ($) {
  'use strict';
 
  var config = [
     { name: 'Resolvido', id  : 1, background: '#8BC163' },
    { name: 'Em Curso', id  : 2, background: '#F6BA59' },
    { name: 'Regras', id  : 3, background: '#434A53' },
    { name: 'Atendida', id  : 4, background: '#8b5' },
    { name: 'Importante', id  : 5, background: '#8b5' },
    { name: 'Tutorial', id  : 6, background: '#8b5' },
    { name: 'Recusado', id  : 7, background: '#8b5' },
    { name: 'Aceito', id  : 8, background: '#8b5' },
    { name: 'Banido', id  : 9, background: '#8b5' },
    { name: 'Desbanido', id  : 10, background: '#8b5' },
    { name: 'Designer', id  : 11, background: '#8b5' },
    { name: 'Aprovado', id  : 12, background: '#8b5' },
    { name: 'Reprovado', id  : 13, background: '#8b5' }
  ];
 
  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
    };
    
    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:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      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> Alterado...');
 
    $.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> Alterado!'))
          .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));


Código não esta funcionando nem aparece os botões!

Erro meu :/
Mude:

Código:

/*globals jQuery, FA, _userdata*/
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version {alpha} 1.0
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id  : 1, background: '#8BC163' },
    { name: 'Em Curso', id  : 2, background: '#F6BA59' },
    { name: 'Regras', id  : 3, background: '#434A53' },
    { name: 'Atendida', id  : 4, background: '#8b5' },
    { name: 'Importante', id  : 5, background: '#8b5' },
    { name: 'Tutorial', id  : 6, background: '#8b5' },
    { name: 'Recusado', id  : 7, background: '#8b5' },
    { name: 'Aceito', id  : 8, background: '#8b5' },
    { name: 'Banido', id  : 9, background: '#8b5' },
    { name: 'Desbanido', id  : 10, background: '#8b5' },
    { name: 'Designer', id  : 11, background: '#8b5' },
    { name: 'Aprovado', id  : 12, background: '#8b5' },
    { name: 'Reprovado', id  : 13, background: '#8b5' }
  ];
 
  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
    };
   
    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:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      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> Alterado...');
 
    $.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> Alterado!'))
          .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));


Pedxz escreveu:Erro meu :/
Mude:

Código:

/*globals jQuery, FA, _userdata*/
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version {alpha} 1.0
 * @licence MIT
 */
 
(function ($) {
  'use strict';
 
  var config = [
     { name: 'Resolvido', id  : 1, background: '#8BC163' },
    { name: 'Em Curso', id  : 2, background: '#F6BA59' },
    { name: 'Regras', id  : 3, background: '#434A53' },
    { name: 'Atendida', id  : 4, background: '#8b5' },
    { name: 'Importante', id  : 5, background: '#8b5' },
    { name: 'Tutorial', id  : 6, background: '#8b5' },
    { name: 'Recusado', id  : 7, background: '#8b5' },
    { name: 'Aceito', id  : 8, background: '#8b5' },
    { name: 'Banido', id  : 9, background: '#8b5' },
    { name: 'Desbanido', id  : 10, background: '#8b5' },
    { name: 'Designer', id  : 11, background: '#8b5' },
    { name: 'Aprovado', id  : 12, background: '#8b5' },
    { name: 'Reprovado', id  : 13, background: '#8b5' }
  ];
 
  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
    };
    
    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:first');
    var $link = $post.find('a[href$="mode=editpost"]');
 
    if (!$link.length) {
      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> Alterado...');
 
    $.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> Alterado!'))
          .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));


Então amigo quando dou F5 na pagina está dando esse erro abaixo como eu resolvo esse erro

http://prntscr.com/k19wxb

Então usa o teu primeiro JS e usa este CSS:

Código:

.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;
}