Botões automáticos ModernBB

Detalhes da questão

Endereço do fórum: http://www.ultimateliferp.forumeiros.com
Versão do fórum: PunBB

Descrição

Tenho este código no PUNBB, gostaria de muda-lo para ModerNBB:

Código:

Código:

(function($) {
  'use strict';
 
  var config = {
            icons: [
              {
            name: 'emcurso',
            id: 1,
            image: 'http://i.imgur.com/YoQ49mz.png',
        },
        {
            name: 'solved',
            id: 7,
            image: 'http://i.imgur.com/yhh8eFG.png',
        },       
        {
            name: 'rejected',
            id: 6,
            image: 'http://i.imgur.com/WODqkHH.png',
        },
      ],
      message: [
        'Administradores, ajude a organizar o fórum. ',
        'Caso a denúncia tenha sido resolvida, clique no botão resolvido.'
      ].join(''),
      message_icon: 'http://i.imgur.com/uPsiC.png',
  };
     
 
  $(function() {
      if (_userdata.user_level < 1) {
        return;
      }
     
      var $form = $('form[name="post"]');
     
      if ($form.length) {
        var submitting = false;
       
        $.each(config.icons, function(index, icon) {
            if ((new RegExp(icon.name  '=true', 'i')).test(location.search)) {
              $('#post_icon_'  icon.id).prop('checked', true);
              $('input[type="submit"]').prop('type', 'hidden');
              $form.submit();
             
              submitting = true;
             
              return false;
            }
        });
       
        if (submitting) {
            return;
        }
      }
 
      var $edit = $('.post:eq(0) .i_icon_edit');
     
      if (!$edit.length) {
        return;
      }
     
      $([
        '<style>',
        '  .fa-solved-message {',
        '      border: 1px solid green;',
        '      padding:5px;',
        '      color:#666666;',
        '      text-align:center;',
        '      font-family:Verdana;',
        '      font-size:11px',
        '  }',
        '  .fa-solved-message img {',
        '      height: 48px;',
        '      vertical-align: middle;',
        '  }',
        '</style>',
      ].join('\n')).appendTo('head');
     
      $([
        '<div class="fa-solved-message">',
        '  <img src="'  config.message_icon  '" /> ',
        '  '  config.message,
        '</div>',
      ].join('\n')).prependTo('.main-content .message:eq(0)');
     
      $.each(config.icons, function(index, icon) {
        $([
            '<a href="'  $edit.parent().attr('href')  '&'  icon.name  '=true">',
            '  <img src="'  icon.image  '">',
            '</a>',
        ].join('\n')).appendTo('.paged-foot');
      });
  });
}(jQuery));

Os ids das imagens eu mesmo irei editar.

Troque por esse:

Código:

(function($) {
  'use strict';
 
  var config = {
            icons: [
              {
            name: 'emcurso',
            id: 1,
            image: 'http://i.imgur.com/YoQ49mz.png',
        },
        {
            name: 'solved',
            id: 7,
            image: 'http://i.imgur.com/yhh8eFG.png',
        },       
        {
            name: 'rejected',
            id: 6,
            image: 'http://i.imgur.com/WODqkHH.png',
        },
      ],
      message: [
        'Administradores, ajude a organizar o fórum. ',
        'Caso a denúncia tenha sido resolvida, clique no botão resolvido.'
      ].join(''),
      message_icon: 'http://i.imgur.com/uPsiC.png',
  };
     
 
  $(function() {
      if (_userdata.user_level < 1) {
        return;
      }
     
      var $form = $('form[name="post"]');
     
      if ($form.length) {
        var submitting = false;
       
        $.each(config.icons, function(index, icon) {
            if ((new RegExp(icon.name + '=true', 'i')).test(location.search)) {
              $('#post_icon_' + icon.id).prop('checked', true);
              $('input[type="submit"]').prop('type', 'hidden');
              $form.submit();
             
              submitting = true;
             
              return false;
            }
        });
       
        if (submitting) {
            return;
        }
      }
 
      var $edit = $('.post:eq(0) .ion-edit');
     
      if (!$edit.length) {
        return;
      }
     
      $([
        '<style>',
        '  .fa-solved-message {',
        '      border: 1px solid green;',
        '      padding:5px;',
        '      color:#666666;',
        '      text-align:center;',
        '      font-family:Verdana;',
        '      font-size:11px',
        '  }',
        '  .fa-solved-message img {',
        '      height: 48px;',
        '      vertical-align: middle;',
        '  }',
        '</style>',
      ].join('\n')).appendTo('head');
     
      $([
        '<div class="fa-solved-message">',
        '  <img src="' + config.message_icon + '" /> ',
        '  ' + config.message,
        '</div>',
      ].join('\n')).prependTo('.main-content .message:eq(0)');
     
      $.each(config.icons, function(index, icon) {
        $([
            '<a href="' + $edit.parent().attr('href') + '&' + icon.name + '=true">',
            '  <img src="' + icon.image + '">',
            '</a>',
        ].join('\n')).appendTo('.paged-foot');
      });
  });
}(jQuery));

Sem resultado :/

Poderia me dizer qual a função desse código? Estou meio desligado em relação a ele. :v

Aqui veja: http://prntscr.com/gv8hv6 ao clicar nesses 3 botões ele seta a imagem em cima do tópico de "Recusado, Resolvido ou Em curso"

Desta maneira: http://prntscr.com/gv8i64

É como se fosse o botão resolvido aqui do FDF?

Se sim, leia este tópico:
-> https://ajuda.forumeiros.com/t110240-#775737

Bom demais, o JS funcionou.
uma pergunta, isso aparece para todos os membros ou apenas para membros da staff?

Para as pessoas que conseguem visualizar o botão de editar no primeiro post.
Isto é, o autor do tópico (se tiver permissão para editar), os moderadores e administradores.

Ah. Eu fiz umas pequenas modificações.
Recomendo que troque por este:

Código:

--- REMOVIDO

o/

---

Edit:

Mais uma pequena correção:

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' },
  ];
 
  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)
    ;
 
    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 data = $form.serializeArray().reduce(function (object, pair) {
          object[pair.name] = pair.value;
          return object;
        }, {
          post_icon: self.config.id,
          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;',
        '  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/

Agora com o código não muda o ícone mais.
Outra coisa, gostaria apenas que membros da staff tivessem acesso. (que tenham permissão de moderação do tópico de determinadas áreas )

Basta o senhor remover as permissões de edição nas autorizações do subfórum.

Troque o código por este:

Código:

/*globals jQuery, FA*/

/**
 * Alterar o ícone do tópico com AJAX.
 *
 * @author Luiz
 * @version 1.0
 * @licence MIT
 */

(function ($) {
  'use strict';

  var config = [
    { name: 'Resolvido', id  : 4, background: '#8b5' },
    { name: 'Em Curso', id  : 1, background: '#ebb537' },
  ];

  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)
    ;

    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));


Eu deixo a edição para os membros caso queiram editar as mensagens postadas pro eles.
Já a moderação pode editar o tópico de todos, inclusive o meu que tem o painel.

Aí no caso, ficaria oculto para esses membros que tem como editar as mensagens ? Se não, há como fazer?
(OBS: As imagens já estão apenas para Moderadores colocarem)

Leia as orientações desta mensagem:
-> https://ajuda.forumeiros.com/t110330-restringindo-botoes#776317

Aí sim, valeu <3