Adicionar texto antes da lista de botões

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

Atendido / Resolvido Adicionar texto antes da lista de botões

Mensagem por JR_Junior em 11.10.17 14:37

Detalhes da questão


Endereço do fórum: http://darkstreetrpg.forumeiros.com
Versão do fórum: phpBB3

Descrição


Olá!
Tenho um script que adiciona botões de Resolvido, Em Curso, Aceito, etc, que aparecem em lista horizontal no tópico.

Gostaria que antes da lista de botões, na mesma linha, eu possa add qualquer texto, por exemplo:

Marcar tópico como: [Resolvido] [Em Curso] [Recusado]

Código do script:
Código:

/*globals jQuery, FA*/
       
        /**
        * Alterar o ícone do tópico com AJAX.
        *
        * @author Luiz
        * @version 1.2
        * @licence MIT
        */
       
        (function ($) {
          'use strict';
   
          var config = [/*onlyForAdmin: true*/
            { name: 'Resolvido', id  : 1, background: '#80c25e', onlyForMod: true },
            { name: 'Em Curso', id  : 3, background: '#ecb840', onlyForMod: true },
            { name: 'Aceito', id  : 2, background: '#6c65a2', onlyForMod: true },
            { name: 'Recusado', id  : 6, background: '#cc43a7', onlyForMod: true },
            { name: 'Único', id  : 4, background: '#9256b2', onlyForMod: true },
            { name: 'Importante', id: 5, background: '#e34b3c', 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: 2px 5px 4px 5px;',
                '  padding-top: 2px;',
                '  padding-right: 5px;',
                '  padding-bottom: 4px;',
                '  padding-left: 5px;',
                '  border: none;',
                '  color: #fff;',
                '  margin: 0px 0 5px 4px;',
                '  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);',
                '  border-radius: 5px;',
                '  cursor: pointer;',
                '}'
              ].join('\n')
            }).appendTo('head');
          };
       
          $(function () {
            $.each(config, function () {
              var self = this;
       
              (new FA.Topic.MarkIcon(self)).init();
            });
          });
        }(jQuery));
JR_Junior

JR_Junior
Nível 5

Masculino
Inscrito dia : 10/05/2012
Mensagens : 46
Pontos Ativos : 79

Ver perfil do usuário http://darkstreet-server.livreforum.com

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por Luiz em 11.10.17 18:12

Leia:
-> https://ajuda.forumeiros.com/t46956-tutorial-sistema-de-prefixos

Note que as imagens do FDF devem ser exclusivas para este fórum:
-> http://prntscr.com/gw5rdr

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por JR_Junior em 11.10.17 18:22

@Luiz escreveu:Leia:
-> https://ajuda.forumeiros.com/t46956-tutorial-sistema-de-prefixos

Note que as imagens do FDF devem ser exclusivas para este fórum:
-> http://prntscr.com/gw5rdr

o/

Não mano, não é isso! É um script que você mesmo arrumou pra mim!
Aquele que add os botões Resolvido, Em Curso, etc:
Adicionar texto antes da lista de botões VXeMozVHSXCNKwKm23pj2A

O que eu quero é que antes do primeiro botão(Resolvido) eu possa add o texto: Marcar tópico como:
JR_Junior

JR_Junior
Nível 5

Masculino
Inscrito dia : 10/05/2012
Mensagens : 46
Pontos Ativos : 79

Ver perfil do usuário http://darkstreet-server.livreforum.com

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por Luiz em 11.10.17 18:24

Eu precisarei que o senhor libere a visualização de ao menos um dos botões para os membros sem poderes moderativos.
Não se esqueça também de modificar as imagens dos ícones. o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por JR_Junior em 11.10.17 18:29

@Luiz escreveu:Eu precisarei que o senhor libere a visualização de ao menos um dos botões para os membros sem poderes moderativos.
Não se esqueça também de modificar as imagens dos ícones. o/

Feito! Botão Resolvido liberado!

Conta: Tester
Senha: @Testes

OBS: As imagens do ícones são temporárias, logo estarei criando outras personalizadas!
JR_Junior

JR_Junior
Nível 5

Masculino
Inscrito dia : 10/05/2012
Mensagens : 46
Pontos Ativos : 79

Ver perfil do usuário http://darkstreet-server.livreforum.com

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por Luiz em 11.10.17 18:35

Troque o script por este:
Código:
/*globals jQuery, FA*/
       
        /**
        * Alterar o ícone do tópico com AJAX.
        *
        * @author Luiz
        * @version 1.2
        * @licence MIT
        */
       
        (function ($) {
          'use strict';
   
          var config = [/*onlyForAdmin: true*/
            { name: 'Resolvido', id  : 1, background: '#80c25e', onlyForMod: true },
            { name: 'Em Curso', id  : 3, background: '#ecb840', onlyForMod: true },
            { name: 'Aceito', id  : 2, background: '#6c65a2', onlyForMod: true },
            { name: 'Recusado', id  : 6, background: '#cc43a7', onlyForMod: true },
            { name: 'Único', id  : 4, background: '#9256b2', onlyForMod: true },
            { name: 'Importante', id: 5, background: '#e34b3c', 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: 2px 5px 4px 5px;',
                '  padding-top: 2px;',
                '  padding-right: 5px;',
                '  padding-bottom: 4px;',
                '  padding-left: 5px;',
                '  border: none;',
                '  color: #fff;',
                '  margin: 0px 0 5px 4px;',
                '  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);',
                '  border-radius: 5px;',
                '  cursor: pointer;',
                '}'
              ].join('\n')
            }).appendTo('head');
          };
       
          $(function () {
            $.each(config, function () {
              var self = this;
       
              (new FA.Topic.MarkIcon(self)).init();
            });

            $('.fa-mark-icon-button:first').before($('<strong>', {
               'text': 'Marcar tópico como : '
            }));
          });
        }(jQuery));
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por JR_Junior em 11.10.17 20:12

Perfeito! Muito obrigado!!!! OK
JR_Junior

JR_Junior
Nível 5

Masculino
Inscrito dia : 10/05/2012
Mensagens : 46
Pontos Ativos : 79

Ver perfil do usuário http://darkstreet-server.livreforum.com

Atendido / Resolvido Re: Adicionar texto antes da lista de botões

Mensagem por Luiz em 11.10.17 20:15

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6626
Pontos Ativos : 7521

Ver perfil do usuário https://luizfelipe.dev

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