Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Como remover essas bordas dos avatares?
Hoje à(s) 06:58 am por AlexG

» Como adicionar um fundo a barra de menus?
Hoje à(s) 01:38 am por SetRaiden

» Preciso de uma logo
Hoje à(s) 01:05 am por odelgado

» [FAQ] Gerir e configurar o Topic'it no seu fórum Forumeiros
Ontem à(s) 11:15 pm por Shek

» Preciso de Ajuda.
Ontem à(s) 11:12 pm por Shek

» Plaquinhas de Rank para o meu Fórum
Ontem à(s) 07:41 pm por Lost154

» Publicidade bugada
Ontem à(s) 07:31 pm por virus

Instale agora o aplicativo Topic'it e acesse o suporte de Forumeiros pelo celular.
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
222 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 220 Visitantes :: 2 Motores de busca

AlexG, Shek

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Botão de staff

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

Resolvido Botão de staff

Mensagem por iScroll em 24/08/17, 12:35 pm

Detalhes da questão


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

Descrição


Gostaria de um código para adicionar o mesmo efeito que isto: http://prntscr.com/gcjqdo
Só que diferente disso gostaria de adicionar grupos, aí por exemplo:
No meu fórum tem grupo de "Donos","Sub-Donos" e "Administradores", aí apareceria esses 3 e a pessoa escolhia o grupo e via os membros e quais deles estão online.
Seria possível ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com
  • 0

Resolvido Re: Botão de staff

Mensagem por Kyo Panda em 25/08/17, 04:00 pm

É possível, mas é quase inalcançável. O Luiz demorou um bom tempo para fazer esse plugin, e mesmo assim tudo o que ele faz é puxar as informações já disponíveis na tela do /memberlist. Para puxarmos o que quer, teríamos que puxar da /groups, e nela não tem as informações como o avatar do membro e o status de online, nos obrigando a fazer uma segunda query para cada membro para puxar essas informações do perfil.

É simplesmente complicado demais para ser feito e pesado demais para o usuário relativo ao valor que trará para seu fórum.


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4321
Pontos Ativos : 5618

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por iScroll em 25/08/17, 04:05 pm

Kyo Panda escreveu:É possível, mas é quase inalcançável. O Luiz demorou um bom tempo para fazer esse plugin, e mesmo assim tudo o que ele faz é puxar as informações já disponíveis na tela do /memberlist. Para puxarmos o que quer, teríamos que puxar da /groups, e nela não tem as informações como o avatar do membro e o status de online, nos obrigando a fazer uma segunda query para cada membro para puxar essas informações do perfil.

É simplesmente complicado demais para ser feito e pesado demais para o usuário relativo ao valor que trará para seu fórum.

Pode puxar as informações sem o avatar nem nada, apenas as mesmas informações que você disse que pode ser feito. Contudo, quero que dê para mandar MP e mostre que está online, seria possível?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Kyo Panda em 25/08/17, 04:10 pm

O status online também não é possível, veja:



http://brasilplayultimate.forumeiros.com/g17-donos

Essas são as informações que consigo puxar sem impactar o fórum. O que está nessa página é possível de puxar.


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4321
Pontos Ativos : 5618

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por iScroll em 25/08/17, 04:11 pm

Kyo Panda escreveu:O status online também não é possível, veja:



http://brasilplayultimate.forumeiros.com/g17-donos

Essas são as informações que consigo puxar sem impactar o fórum. O que está nessa página é possível de puxar.

Puxa apenas se está online (aquela bolinha igual nos tópicos: http://prntscr.com/gd14ye) , horário que entrou e pra enviar mp.

Dá pra fazer?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Kyo Panda em 25/08/17, 04:13 pm

Mas essas informações não existem na página que te passei. Consigo apenas puxar as informações que estão lá sem gerar lag no seu fórum. :/


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4321
Pontos Ativos : 5618

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por iScroll em 25/08/17, 04:14 pm

Consegue então só o nome de usuário e o MP?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Kyo Panda em 25/08/17, 04:19 pm

Seriam:


  • Mensagem Privada
  • Nome de usuário
  • Mensagens
  • Localização
  • Email
  • Web site


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4321
Pontos Ativos : 5618

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por iScroll em 25/08/17, 04:31 pm

Kyo Panda escreveu:Seriam:


  • Mensagem Privada
  • Nome de usuário
  • Mensagens
  • Localização
  • Email
  • Web site

Sim, quero deixar só nome e mensagem privada, apenas isso, retirando todo o resto.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 01:54 pm

Você deseja um código igual ao que temos aqui, mas sem:

  • As opções de busca (caixa de busca e opções de filtro);
  • O avatar.
Deixando somente com:

  • O nome de usuário;
  • O link para MP.
Correto?
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 01:58 pm

Luiz escreveu:Você deseja um código igual ao que temos aqui, mas sem:

  • As opções de busca (caixa de busca e opções de filtro);
  • O avatar.
Deixando somente com:

  • O nome de usuário;
  • O link para MP.
Correto?

Exato mas apenas pra administração, no caso membro desses grupos:
Donos
Sub-Donos
Administradores

Seria possível?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 02:00 pm

Não posso trabalhar com distinção por grupos, mas somente com as informações que estão disponíveis na página /memberlist.

Isso já foi explicado pelo Kyo Panda acima.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 02:14 pm

Luiz escreveu:Não posso trabalhar com distinção por grupos, mas somente com as informações que estão disponíveis na página /memberlist.

Isso já foi explicado pelo Kyo Panda acima.

Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.
Caso não tenha, pode prosseguir da maneira que o senhor falou.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 02:24 pm

Explique melhor essa segunda opção:
Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 02:27 pm

Luiz escreveu:Explique melhor essa segunda opção:
Certo, teria como um código do mesmo jeito que eu personalizasse para adicionar os membros então ? com as mesmas informações pedidas acima ?

Exemplo: Entra um membro novo na staff, vou lá e edito o código e coloco ele.

Certo, vamos lá
Tipo um código HTML cujo eu iria adicionando "manualmente" os usuários que nele estariam, entende ?
Aí eu personalizava sozinho para aparecer apenas membros da minha equipe, entendeu ?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 02:34 pm

Okay. Você ainda vai desejar a caixa de busca? Não, né?


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 02:36 pm

Negativo, sem a caixa por favor.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 03:03 pm

Só mais uma observação.
Nessa sua segunda proposta, não poderemos ver quando foi o último login do usuário, certo, logo, eles seriam mostrados em ordem hierárquica pelo cargo.
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 04:49 pm

Luiz escreveu:Só mais uma observação.
Nessa sua segunda proposta, não poderemos ver quando foi o último login do usuário, certo, logo, eles seriam mostrados em ordem hierárquica pelo cargo.

Certo, dá para mostrar que ele está online pelo menos?
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 08/09/17, 04:53 pm

Nope, foi o que disse acima.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 08/09/17, 05:03 pm

Certo, pode prosseguir, estou de acordo.
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 15/09/17, 02:04 pm

Os UP's acima foram apagados para despoluir o tópico.

---

O código será mais ou menos este:
Código:
(function ($) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum',
        next: 'Próximo',
        prev: 'Anterior'
      },
     
      template: $([
        '<div class="staff-userlist">',
        '  <header>',
        '  </header>',
        '  <main>',
        '    <div class="append-zone">',
        '    </div>',
        '  </main>',
        '  <footer>',
        '  </footer>',
        '</div>'
      ].join('\n'))
    },
   
    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', { 'class': 'fa-list-group-title', 'text': group.name }).prop('outerHTML'),
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('background-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', { 'html': '<i class="fa fa-envelope-o"></i>', 'href': '/privmsg?mode=post&u=' + user.id }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(parent).append(config.view.template);
      }
    }
  };

  $(function () {
    config.engine.init($('body'));
  });
}(jQuery));

Ainda faltam os estilos, no entanto, para configurar, você deverá completar um JSON com as informações:
Código:
list: [
  {
    name: 'Grupo 1',
    color: '#3399cc',
    members: [
      { name: 'Membro 1', id: 1 },
      { name: 'Membro 2', id: 2 },
      { name: 'Membro 3', id: 3 }
    ]
  }, {
    name: 'Grupo 2',
    color: '#000',
    members: [
      { name: 'Membro 4', id: 4 },
      { name: 'Membro 5', id: 5 },
      { name: 'Membro 6', id: 6 },
      { name: 'Membro 7', id: 7 }
    ]
  }
],

Ou seja, é manual.
Tudo okay, certo?


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 15/09/17, 03:09 pm

Perfeito.
Mas veja:
http://prntscr.com/gllow2
Faltou CSS né ? kkk
Vou aguardar você fazer para terminar de testar.

Edit:
Testei o código assim e parou de funcionar, fiz algo errado dentro os cochetes?
Código:
(function ($) {
  'use strict';
 
  var config = {
 
    list: [
      {
        name: 'Donos',
        color: '#E30000',
        members: [
          { name: 'DR_Ultimate', id: 1 },
          { name: 'Diego_Ultimate', id: 9 },
          { name: 'Math_Ultimate', id: 207 }
        ]
      }, {
        name: 'Sub-Donos',
        color: '#FF00FF',
        members: [
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - }
        ]
      }, {
        name: 'Administradores',
        color: '#0033FF',
        members: [
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - },
          { name: 'Ninguém', id: - }
        ]
      }
    ],
 
    view: {
      lang: {
        title: 'Staff do Fórum',
        next: 'Próximo',
        prev: 'Anterior'
      },
     
      template: $([
        '<div class="staff-userlist">',
        '  <header>',
        '  </header>',
        '  <main>',
        '    <div class="append-zone">',
        '    </div>',
        '  </main>',
        '  <footer>',
        '  </footer>',
        '</div>'
      ].join('\n'))
    },
   
    engine: {
 
      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {
 
        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', { 'class': 'fa-list-group-title', 'text': group.name }).prop('outerHTML'),
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('background-color', group.color)
          ;
 
          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', { 'html': '<i class="fa fa-envelope-o"></i>', 'href': '/privmsg?mode=post&u=' + user.id }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });
 
          $list.appendTo(config.view.template.find('.append-zone'));
        });
 
        $(parent).append(config.view.template);
      }
    }
  };
 
  $(function () {
    config.engine.init($('body'));
  });
}(jQuery));
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 15/09/17, 03:21 pm

Irei começar a fazer os estilos agora, como disse anteriormente:
Luiz escreveu:Ainda faltam os estilos, no entanto, para configurar, você deverá completar um JSON com as informações:

---

iScroll escreveu:Testei o código assim e parou de funcionar, fiz algo errado dentro os cochetes?
Sim, em number, você colocou um hífen, o que não é permitido no JavaScript — exceto se for uma string.
Se você trocar o hífen por zero ou qualquer outro número ou uma string irá funcionar.

Glossário:
String:
É um tipo de bloco de texto, muito usado em programação, por exemplo:
Código:
'Eu sou uma string!'; // Correto.
'-'; // Uma string com um hífen — correto.

Eu sou uma string!; // Texto comum que não está em uma string no código — errado.
-; // Um caractere não esperado, como você fez — errado.


avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 15/09/17, 04:24 pm

Certo no aguardo
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por iScroll em 16/09/17, 09:44 pm

UP
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 17/09/17, 05:07 pm

Demorou, mas chegou:
Código:
/**
 * @name Staff Widget.
 * @author Luiz {@link https://lffg.github.io/}
 * @version 1.0
 * @licence MIT
 */
(function ($, html, css) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }, {
        name: 'Grupo 3',
        color: 'red',
        members: [
          { name: 'Membro 8', id: 8 },
          { name: 'Membro 9', id: 9 },
          { name: 'Membro 10', id: 10 },
          { name: 'Membro 11', id: 11 },
          { name: 'Membro 12', id: 12 },
          { name: 'Membro 13', id: 13 },
          { name: 'Membro 14', id: 14 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum'
      },

      template: $(html.join('\n'))
    },

    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', {
                'class': 'fa-list-group-title',
                'text': group.name
              })
                .css('background-color', group.color)
                .prop('outerHTML')
              ,
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('border-left-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', {
                  'class': 'pm-link',
                  'html': '<i class="fa fa-envelope-o"></i>',
                  'href': '/privmsg?mode=post&u=' + user.id
                }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(config.view.template)
          .find('.fa-lang-title')
            .text(config.view.lang.title)
        ;

        $(parent).append(config.view.template);
        $('<style>', { 'text': css.join('\n') }).appendTo('head');

        return this;
      },

      hide: function () {
        $(config.view.template)
          .find('.staff-userlist')
            .hide()
        ;

        return this;
      },

      events: function () {
        $(document).on('click', function () {
          $(config.view.template)
            .find('.staff-userlist')
              .hide()
          ;
        });

        $(config.view.template).on('click', function (event) {
          event.stopPropagation();
        });

        $(config.view.template)
          .find('.staff-userlist-toggler')
            .on('click', function () {
              $(config.view.template)
                .find('.staff-userlist')
                  .toggle()
              ;
            })
        ;

        return this;
      }
    }
  };

  $(function () {
    config.engine.init($('body')).hide().events();
  });
}(jQuery, [
  '<div class="staff-userlist-wrapper">',
  '  <a href="javascript:void(0);" class="staff-userlist-toggler">',
  '    <i class="fa fa-user-secret"></i>',
  '  </a>',
  '  <div class="staff-userlist">',
  '    <header>',
  '      <h3 class="fa-lang-title"></h3>',
  '    </header>',
  '    <main>',
  '      <div class="append-zone">',
  '      </div>',
  '    </main>',
  '  </div>',
  '</div>'
], [
  '.fa-memberlist-wrapper { display: none; }',
  '.staff-userlist-wrapper {',
  '  position: fixed;',
  '  bottom: 0;',
  '  left: 0;',
  '  z-index: 99999;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler {',
  '  background-color: #39c;',
  '  width: 50px;',
  '  height: 50px;',
  '  display: -webkit-inline-box;',
  '  display: -ms-inline-flexbox;',
  '  display: inline-flex;',
  '  -webkit-box-pack: center;',
  '      -ms-flex-pack: center;',
  '          justify-content: center;',
  '  -webkit-box-align: center;',
  '      -ms-flex-align: center;',
  '          align-items: center;',
  '  border-top-right-radius: 3px;',
  '  cursor: pointer;',
  '  -webkit-transition: all 130ms linear;',
  '  transition: all 130ms linear;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler .fa {',
  '  color: #fff;',
  '  font-size: 30px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist {',
  '  position: absolute;',
  '  bottom: 50px;',
  '  left: 0;',
  '  background-color: #fff;',
  '  width: 350px;',
  '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  border-left: solid 0px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header {',
  '  background-color: #39c;',
  '  border-bottom: solid 1px #ddd;',
  '  padding: 13px 15px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header h3 {',
  '  margin: 0;',
  '  padding: 0;',
  '  border: none;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  font-size: 18px;',
  '  font-weight: 500;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone {',
  '  max-height: 80vh;',
  '  max-height: -moz-calc(100vh - 355px);',
  '  max-height: -webkit-calc(100vh - 355px);',
  '  max-height: -ms-calc(100vh - 355px);',
  '  max-height: -o-calc(100vh - 355px);',
  '  max-height: calc(100vh - 355px);',
  '  overflow-y: scroll;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group {',
  '  border-bottom: solid 1px #ddd;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group:last-child {',
  '  border-bottom: none;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-group-title {',
  '  display: block;',
  '  font-size: 14px;',
  '  padding: 9px 15px;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  text-transform: uppercase;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone {',
  '  padding: 10px 15px;',
  '  line-height: 20px;',
  '  font-size: 13px;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item {',
  '  display: block;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item .pm-link {',
  '  float: right;',
  '}'
]));

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 17/09/17, 05:12 pm

OPAAAAAAAAA \o/
Perfeitão, falta só arrumar alguns pequenos detalhes, veja: http://prntscr.com/gmc6y6
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 17/09/17, 05:21 pm

Méh.
Isso é do seu CSS.

O header do seu fórum é selecionado pelo CSS pela tag (header). Isso é extremamente prejudicial.
Recomendo que troque o seletor para um ID ou classe.

---

Código:
/**
 * @name Staff Widget.
 * @author Luiz {@link https://lffg.github.io/}
 * @version 1.0
 * @licence MIT
 */
(function ($, html, css) {
  'use strict';

  var config = {

    list: [
      {
        name: 'Grupo 1',
        color: '#3399cc',
        members: [
          { name: 'Membro 1', id: 1 },
          { name: 'Membro 2', id: 2 },
          { name: 'Membro 3', id: 3 }
        ]
      }, {
        name: 'Grupo 2',
        color: '#000',
        members: [
          { name: 'Membro 4', id: 4 },
          { name: 'Membro 5', id: 5 },
          { name: 'Membro 6', id: 6 },
          { name: 'Membro 7', id: 7 }
        ]
      }, {
        name: 'Grupo 3',
        color: 'red',
        members: [
          { name: 'Membro 8', id: 8 },
          { name: 'Membro 9', id: 9 },
          { name: 'Membro 10', id: 10 },
          { name: 'Membro 11', id: 11 },
          { name: 'Membro 12', id: 12 },
          { name: 'Membro 13', id: 13 },
          { name: 'Membro 14', id: 14 }
        ]
      }
    ],

    view: {
      lang: {
        title: 'Staff do Fórum'
      },

      template: $(html.join('\n'))
    },

    engine: {

      /**
      * @param {object} parent - Corresponde ao seletor pai que a lista será colocada.
      */
      init: function (parent) {

        $.each(config.list, function (index, group) {
          var $list = $('<div>', {
            'class': 'fa-list-group',
            'html' : [
              $('<span>', {
                'class': 'fa-list-group-title',
                'text': group.name
              })
                .css('background-color', group.color)
                .prop('outerHTML')
              ,
              $('<div>', { 'class': 'fa-list-append-zone' }).prop('outerHTML')
            ].join('\n')
          })
            .css('border-left-color', group.color)
          ;

          $.each(group.members, function (index, user) {
            $('<div>', {
              'class': 'fa-list-user-item',
              'html' : [
                $('<a>', { 'text': user.name, 'href': '/u' + user.id }).prop('outerHTML'),
                $('<a>', {
                  'class': 'pm-link',
                  'html': '<i class="fa fa-envelope-o"></i>',
                  'href': '/privmsg?mode=post&u=' + user.id
                }).prop('outerHTML')
              ].join('\n')
            })
              .appendTo($list.find('.fa-list-append-zone'))
            ;
          });

          $list.appendTo(config.view.template.find('.append-zone'));
        });

        $(config.view.template)
          .find('.fa-lang-title')
            .text(config.view.lang.title)
        ;

        $(parent).append(config.view.template);
        $('<style>', { 'text': css.join('\n') }).appendTo('head');

        return this;
      },

      hide: function () {
        $(config.view.template)
          .find('.staff-userlist')
            .hide()
        ;

        return this;
      },

      events: function () {
        $(document).on('click', function () {
          $(config.view.template)
            .find('.staff-userlist')
              .hide()
          ;
        });

        $(config.view.template).on('click', function (event) {
          event.stopPropagation();
        });

        $(config.view.template)
          .find('.staff-userlist-toggler')
            .on('click', function () {
              $(config.view.template)
                .find('.staff-userlist')
                  .toggle()
              ;
            })
        ;

        return this;
      }
    }
  };

  $(function () {
    config.engine.init($('body')).hide().events();
  });
}(jQuery, [
  '<div class="staff-userlist-wrapper">',
  '  <a href="javascript:void(0);" class="staff-userlist-toggler">',
  '    <i class="fa fa-user-secret"></i>',
  '  </a>',
  '  <div class="staff-userlist">',
  '    <header>',
  '      <h3 class="fa-lang-title"></h3>',
  '    </header>',
  '    <main>',
  '      <div class="append-zone">',
  '      </div>',
  '    </main>',
  '  </div>',
  '</div>'
], [
  '.fa-memberlist-wrapper { display: none; }',
  '.staff-userlist-wrapper {',
  '  position: fixed;',
  '  bottom: 0;',
  '  left: 0;',
  '  z-index: 99999;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler {',
  '  background-color: #39c;',
  '  width: 50px;',
  '  height: 50px;',
  '  display: -webkit-inline-box;',
  '  display: -ms-inline-flexbox;',
  '  display: inline-flex;',
  '  -webkit-box-pack: center;',
  '      -ms-flex-pack: center;',
  '          justify-content: center;',
  '  -webkit-box-align: center;',
  '      -ms-flex-align: center;',
  '          align-items: center;',
  '  border-top-right-radius: 3px;',
  '  cursor: pointer;',
  '  -webkit-transition: all 130ms linear;',
  '  transition: all 130ms linear;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler:hover {',
  '  background-color: #444;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist-toggler .fa {',
  '  color: #fff;',
  '  font-size: 30px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist {',
  '  position: absolute;',
  '  bottom: 50px;',
  '  left: 0;',
  '  background-color: #fff;',
  '  width: 350px;',
  '  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);',
  '  border: solid 1px #ddd;',
  '  border-left: none;',
  '  border-left: solid 0px;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header {',
  '  background-color: #39c;',
  '  border-bottom: solid 1px #ddd;',
  '  padding: 13px 15px;',
  '  height: auto;',
  '  width: auto;',
  '  background-size: initial;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist header h3 {',
  '  margin: 0;',
  '  padding: 0;',
  '  border: none;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  font-size: 18px;',
  '  font-weight: 500;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone {',
  '  max-height: 80vh;',
  '  max-height: -moz-calc(100vh - 355px);',
  '  max-height: -webkit-calc(100vh - 355px);',
  '  max-height: -ms-calc(100vh - 355px);',
  '  max-height: -o-calc(100vh - 355px);',
  '  max-height: calc(100vh - 355px);',
  '  overflow-y: scroll;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group {',
  '  border-bottom: solid 1px #ddd;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group:last-child {',
  '  border-bottom: none;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-group-title {',
  '  display: block;',
  '  font-size: 14px;',
  '  padding: 9px 15px;',
  '  color: #fff;',
  '  font-family: "Trebuchet MS", "Segoe UI", "Ubuntu", "Helvetica Neue", "Helvetica", Arial, sans-serif;',
  '  text-transform: uppercase;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone {',
  '  padding: 10px 15px;',
  '  line-height: 20px;',
  '  font-size: 13px;',
  '}',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item {',
  '  display: block;',
  '}',
  '',
  '.staff-userlist-wrapper .staff-userlist main .append-zone .fa-list-group .fa-list-append-zone .fa-list-user-item .pm-link {',
  '  float: right;',
  '}'
]));

@Kyo Panda


Última edição por Luiz em 17/09/17, 05:25 pm, editado 1 vez(es)


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Botão de staff

Mensagem por iScroll em 17/09/17, 05:24 pm

Caraca kkk
Perfeito meu caro, obrigado. <3 <3 <3 Envergonhado
avatar

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1090
Pontos Ativos : 1478

Ver perfil do usuário http://testealrpg.forumeiros.com

Resolvido Re: Botão de staff

Mensagem por Luiz em 17/09/17, 05:25 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 4111
Pontos Ativos : 4734

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum