Botão resolvido duvida!

Detalhes da questão

Endereço do fórum: http://aquariumbrasil.forumeiro.com
Versão do fórum: phpBB3

Descrição

Pois bem pessoal gostaria de uma com a questão abaixo:

1-Botão resolvido (Onde apenas o usuário e os moderadores ou administrador podem clicar mudando assim o ícone de "em curso" para "resolvido" na postagem)


por enquanto acho que é só.

Boa tarde,

Só é permitida uma questão por tópico. Sendo assim, o senhor só poderá prosseguir com uma aqui.
Com qual iremos continuar? o/

Botão resolvido!

Olá novamente,

Por favor, leia este tópico resolvido de uma dúvida semelhante à sua:
-> Clique aqui.

o/

Já li todo este tópico fiz o procedimento porém não consegui fazer funcionar corretamente e apaguei as modificações pra começar do zero

Certo. O senhor já possui os ícones de mensagem setados?

Sim são estes:

undefined | ID: 0
Resolvido | ID: 2
Em curso | ID: 1
Fechado | ID: 3
Artigo | ID: 4
Ok | ID: 5
Cancelado | ID: 6

O senhor deseja um botão para cada?

Para os seguintes icones com as seguintes autorizações (se possível for):

Resolvido - Dono da postagem Moderadores e Adm
Fechado - Moderadores e Adm
Artigo - Moderadores e Adm
Cancelado - Moderadores e Adm

Tente criar um novo JavaScript com este código:

Código:

/*globals jQuery, FA, _userdata*/
 
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author lffg <https://github.com/lffg>
 * @version 1.2
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id: 2, background: '#8b5' },
    { name: 'Fechado', id: 3, background: '#ebb537', onlyForMod: true },
    { name: 'Artigo', id: 4, background: '#e3493b', onlyForMod: true },
    { name: 'Cancelado', id: 6, background: 'red', onlyForMod: 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));

o/

Funcionou 100% agora eu gostaria de mudar o icone desses botões (que estão com cores) por imagens

Quais as imagens?

Pode ser qualquer imagem pois irei editar depois

Eu precisarei das imagens para continuar. :/

Edit:
O senhor não acha melhor colocar um ícone antes do botão ao invés das imagens?

http://fontawesome.io/icons/

Resolvido
Fechado
Artigo
Cancelado

Favor colocar um exemplo para inserção desse icone

Troque o código por este:

Código:

/*globals jQuery, FA, _userdata*/
 
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author lffg <https://github.com/lffg>
 * @version 1.2
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id: 2, img: 'http://i45.servimg.com/u/f45/11/65/59/72/resolu11.png' },
    { name: 'Fechado', id: 3, img: 'http://i.imgur.com/jQhcBgj.png', onlyForMod: true },
    { name: 'Artigo', id: 4, img: 'http://i.imgur.com/nqYmnBI.png', onlyForMod: true },
    { name: 'Cancelado', id: 6, img: 'http://i86.servimg.com/u/f86/11/66/91/15/cancel12.png', onlyForMod: 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,
      'html'  : $('<img />', { 'src': self.config.img }).prop('outerHTML')
    });
 
    self.$button
      .on('click', function (event) {
        event.preventDefault();
 
        self.runAjax();
      })
      .insertBefore($post)
    ;
 
    self.appendStyles();
  };
 
  MarkIcon.prototype.runAjax = function () {
    var self = this;
 
    $.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)
          .fail(self.error)
        ;
      })
      .fail(self.error)
    ;
  };
 
  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 {',
        '  margin: 10px 0 10px 6px;',
        '  background-color: transparent;',
        '  border: none;',
        '}'
      ].join('\n')
    }).appendTo('head');
  };
 
  $(function () {
    $.each(config, function () {
      var self = this;
 
      (new FA.Topic.MarkIcon(self)).init();
    });
  });
}(jQuery));

o/

Como ficaria o codigo do resolvido com o icone abaixo nas 4 opções:

<i class="fa fa-flag" aria-hidden="true"></i>

Não consegui entender.

Luiz escreveu:Eu precisarei das imagens para continuar. :/

Edit:
O senhor não acha melhor colocar um ícone antes do botão ao invés das imagens?

http://fontawesome.io/icons/

Voce me passou esse site ai como ficaria com uma bandeirinha nas minhas 4 opções mais o nome exemplo :

(Bandeirinha) Resolvido

O senhor vai querer com as imagens ou com os ícones?

Quero os icones por enquanto com a bandeirinha, lhe pedi o design com as imagens apenas para salvar logo para futuras edições

Troque por este:

Código:

/*globals jQuery, FA, _userdata*/
 
/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author lffg <https://github.com/lffg>
 * @version 1.2
 */
 
(function ($) {
  'use strict';
 
  var config = [
    { name: 'Resolvido', id: 2, background: '#8b5', icon: 'fa-flag' },
    { name: 'Fechado', id: 3, background: '#ebb537', icon: 'fa-flag', onlyForMod: true },
    { name: 'Artigo', id: 4, background: '#e3493b', icon: 'fa-flag', onlyForMod: true },
    { name: 'Cancelado', id: 6, background: 'red', icon: 'fa-flag', onlyForMod: 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,
      icon: '',
      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,
      'html'  : [
        $('<i>', { 'class': 'fa' }).addClass(self.config.icon).prop('outerHTML'),
        $('<span>', { 'text': self.config.name }).prop('outerHTML')
      ].join('\n')
    });
 
    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));

Você pode configurá-los nessa parte do script:

Código:

var config = [
  { name: 'Resolvido', id: 2, background: '#8b5', icon: 'fa-flag' },
  { name: 'Fechado', id: 3, background: '#ebb537', icon: 'fa-flag', onlyForMod: true },
  { name: 'Artigo', id: 4, background: '#e3493b', icon: 'fa-flag', onlyForMod: true },
  { name: 'Cancelado', id: 6, background: 'red', icon: 'fa-flag', onlyForMod: true }
];

Não se esqueça de instalar a FontAwesome no seu fórum:
-> https://ajuda.forumeiros.com/t103208-tutorial-instalacao-do-font-awesome-no-forum

Resultou obrigado!