Script Tags

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

Atendido / Resolvido Script Tags

Mensagem por iScroll em 26.10.17 2:14

Detalhes da questão


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

Descrição


Bom o script é funcional e gostaria de fazer o seguinte:
que estas opções: http://prntscr.com/h233zr
Apareça apenas para moderadores/administradores, só que junto com isso: http://prntscr.com/h23459

Se possível ao clicar em "Em curso", por exemplo, já setar no título do tópico [Em Curso], seria possível isso?

Caso sim, fico no aguardo, caso não basta deixar como pedido mesmo.

Script :
Código:
/**
 *! Criar tags no título dos tópicos com painel de seleção.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var tags = [
    {
      tag: 'imagem',
      background: '#666'
    },
    {
      tag: 'widget',
      background: '#000'
    }
  ];
 
  $(function () {
    var counter = 1;
 
    /**
    * Parte 1.
    * Aqui nós criamos o seletor de tags acima do editor:
    */
    if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) {
      // Criar a zona para colocar-se os inputs:
      var $textarea = $('#textarea_content');
      var $title = $('form [name="subject"]');
      var $zone = $([
        '<div class="fa-icon-selector">',
        '  <div class="fa-icon-selector-inner">',
        '  </div>',
        '</div>',
      ].join('\n'))
        .prependTo($textarea)
      ;
 
      // Criar-se os inputs dentro da zona criada anteriormente:
      var $appendZone = $zone.find('.fa-icon-selector-inner');
      $.each(tags, function (index, tag) {
        $([
          '<div class="fa-tag-form-group">',
          '  <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />',
          '  <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>',
          '</div>',
        ].join('\n'))
          .appendTo($appendZone)
        ;
       
        counter++;
      });
 
      // Função para dar focus num input X caso este seja a tag dum tópico X:
      if (/^\[.*\]/gi.test($title.val())) {
        $title.val().replace(/^\[(.*)\]/gi, function (find, match) {
          $('[data-tag="' + match + '"]').prop('checked', true);
        });
      }
 
      // Trigger para a adição/edição do prefixo no input de título:
      $zone
        .find('input.select-tag-input')
          .on('focus', function () {
            setPrefix($(this).attr('data-tag'));
          })
      ;
 
      // Função para setar/editar o prefixo:
      var setPrefix = function (prefix) {
 
        if (/^\[.*\]/gi.test($title.val())) {
          $title.val($title.val().replace(/^\[.*\]/gi, function () {
            return '[' + prefix + ']';
          }));
         
          return;
        }
       
        $title.val('[' + prefix + '] ' + $title.val().trim());
      };
    }
 
    /**
    * Parte 2.
    * Aqui nós iremos substituir a tag entre os colchetes por uma tag real:
    */
    var $link = $('a[href^="/t"]');
    $link.each(function () {
 
      var $this = $(this);
 
      $.each(tags, function (index, tag) {
        var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim');
        var text = $this.text();
 
        if (!regex.test(text)) {
          return;
        }
 
        $this.addClass('fa-tagged-link');
        $this.text(text.trim().replace(regex, ''));
        $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>');
      });
    });
 
    /**
    * Parte 3:
    * Estilos.
    */
    var styles = [
      '.fa-icon-selector-inner strong {',
      '  display: block;',
      '  margin-bottom: 4px;',
      '  font-weight: bold;',
      '}',
      '',
      '.fa-icon-selector .fa-tag-form-group {',
      '  display: inline-block;',
      '  margin-right: 15px;',
      '  margin-top: 4px;',
      '}',
      '',
      '.fa-tagged-link {',
      '  text-decoration: none !important;',
      '}',
      '',
      '.fa-tagged-link:hover {',
      '  color: #f73 !important;',
      '  text-decoration: none !important;',
      '}',
      '',
      'span.fa-topic-tag {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 1px 5px;',
      '  border-radius: 3px;',
      '  margin-right: 4px;',
      '  display: inline;',
      '  text-decoration: none!important',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
   
  });
}(jQuery));
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Luiz em 26.10.17 16:10

É possível sim, mas é um pouco complexo, fora que...
Teríamos que fazer muitas requisições para alterar um só título, o que pode afetar mais ainda o problema de lentidão. :/

Acho que também não há razão para restringir apenas aos Administradores e moderadores, tendo em vista que é só adicionar a tag [TAG] no título que ela já repõe pela TAG. O painel no SCEditor tem a função de facilitar.
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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

Atendido / Resolvido Re: Script Tags

Mensagem por iScroll em 26.10.17 16:16

Sobre a lentidão, reparei que se marcar em "Melhorar CSS" ele repara isso '-', mas cria "alguns" bugs.
A restrição é para que os usuários não editem, tendo em vista que só usarei [Em Curso], [Recusado], [Importante], [Resolvido], em topicos que contenham formulários, sendo assim, eles não conseguem editar o tópico para mudar o título, a função de restringir é apenas esta.
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Luiz em 26.10.17 16:18

Troque o código por este a fim de restringir a visualização do painel aos usuários normais:
Código:
/**
 *! Criar tags no título dos tópicos com painel de seleção.
 *
 *  @author Luiz~
 *  @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a>
 *  @licence MIT
 */
(function ($) {
  'use strict';
 
  var tags = [
    {
      tag: 'imagem',
      background: '#666'
    },
    {
      tag: 'widget',
      background: '#000'
    }
  ];
 
  $(function () {
    var counter = 1;
 
    /**
    * Parte 1.
    * Aqui nós criamos o seletor de tags acima do editor:
    */
    if (location.pathname === '/post' && $('form input[name="subject"]').length > 0) {

      if (_userdata.user_level !== 2 && _userdata.user_level !== 1) {
        return;
      }
     
      // Criar a zona para colocar-se os inputs:
      var $textarea = $('#textarea_content');
      var $title = $('form [name="subject"]');
      var $zone = $([
        '<div class="fa-icon-selector">',
        '  <div class="fa-icon-selector-inner">',
        '  </div>',
        '</div>',
      ].join('\n'))
        .prependTo($textarea)
      ;
 
      // Criar-se os inputs dentro da zona criada anteriormente:
      var $appendZone = $zone.find('.fa-icon-selector-inner');
      $.each(tags, function (index, tag) {
        $([
          '<div class="fa-tag-form-group">',
          '  <input type="radio" class="select-tag-input" name="select-tag-radio" id="tag-input-' + counter + '" data-tag="' + tag.tag + '" />',
          '  <label for="tag-input-' + counter + '" class="fa-tag-label">' + tag.tag + '</label>',
          '</div>',
        ].join('\n'))
          .appendTo($appendZone)
        ;
       
        counter++;
      });
 
      // Função para dar focus num input X caso este seja a tag dum tópico X:
      if (/^\[.*\]/gi.test($title.val())) {
        $title.val().replace(/^\[(.*)\]/gi, function (find, match) {
          $('[data-tag="' + match + '"]').prop('checked', true);
        });
      }
 
      // Trigger para a adição/edição do prefixo no input de título:
      $zone
        .find('input.select-tag-input')
          .on('focus', function () {
            setPrefix($(this).attr('data-tag'));
          })
      ;
 
      // Função para setar/editar o prefixo:
      var setPrefix = function (prefix) {
 
        if (/^\[.*\]/gi.test($title.val())) {
          $title.val($title.val().replace(/^\[.*\]/gi, function () {
            return '[' + prefix + ']';
          }));
         
          return;
        }
       
        $title.val('[' + prefix + '] ' + $title.val().trim());
      };
    }
 
    /**
    * Parte 2.
    * Aqui nós iremos substituir a tag entre os colchetes por uma tag real:
    */
    var $link = $('a[href^="/t"]');
    $link.each(function () {
 
      var $this = $(this);
 
      $.each(tags, function (index, tag) {
        var regex = new RegExp ('\\[' + tag.tag + '\\]', 'gim');
        var text = $this.text();
 
        if (!regex.test(text)) {
          return;
        }
 
        $this.addClass('fa-tagged-link');
        $this.text(text.trim().replace(regex, ''));
        $this.prepend('<span class="fa-topic-tag" style="background-color: ' + tag.background + ';">' + tag.tag + '</span>');
      });
    });
 
    /**
    * Parte 3:
    * Estilos.
    */
    var styles = [
      '.fa-icon-selector-inner strong {',
      '  display: block;',
      '  margin-bottom: 4px;',
      '  font-weight: bold;',
      '}',
      '',
      '.fa-icon-selector .fa-tag-form-group {',
      '  display: inline-block;',
      '  margin-right: 15px;',
      '  margin-top: 4px;',
      '}',
      '',
      '.fa-tagged-link {',
      '  text-decoration: none !important;',
      '}',
      '',
      '.fa-tagged-link:hover {',
      '  color: #f73 !important;',
      '  text-decoration: none !important;',
      '}',
      '',
      'span.fa-topic-tag {',
      '  color: #fff;',
      '  background-color: #39c;',
      '  padding: 1px 5px;',
      '  border-radius: 3px;',
      '  margin-right: 4px;',
      '  display: inline;',
      '  text-decoration: none!important',
      '}'
    ].join('\n');
 
    $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head');
   
  });
}(jQuery));

E a melhor forma de fazer com que o script funcione é no SCEditor, o que me impede de fazê-lo via AJAX. o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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

Atendido / Resolvido Re: Script Tags

Mensagem por iScroll em 26.10.17 16:25

Seria possível faze-lo então aparecer na resposta rápida ? Ai quando o usuário comentar ele já clicar lá e enviar Feliz
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Luiz em 26.10.17 16:36

Não, tendo em vista que a resposta rápida não apresenta o editor de títulos. :/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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

Atendido / Resolvido Re: Script Tags

Mensagem por iScroll em 26.10.17 16:39

Certo, então vamos fazer diferente, nestes icones: http://prntscr.com/h2cflr
Será possível adiciona-los ?
Exemplo: Ao clicar "Em curso" já modifica para [Em Curso], "Resolvido" [Resolvido], entendeu?

Ou de alguma outra maneira que o senhor acha que não fique tão monótomo.
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Luiz em 26.10.17 16:40

Foi o que disse acima. O script em questão foi feito para funcionar na página de postagem, e somente lá. Triste
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

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

Atendido / Resolvido Re: Script Tags

Mensagem por iScroll em 26.10.17 16:42

Certo, peço que deixe o tópico aberto para que se o senhor ou o Kyo bolar alguma ideia que deixe mais "automático" seria uma boa Feliz

Se puder ver com ele para responder este tópico eu ficaria agradecido também, caso contrário podes fechar.
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Kyo Panda em 26.10.17 16:52

[...] Kyo bolar alguma ideia que deixe mais "automático" seria uma boa [...]

A única maneira de fazer isso seria com uma boa dose de requisições ajax, o que resultaria num plugin completamente diferente do atual. É possível fazer, mas demanda tempo e trabalho demais para ser produzido e sua aplicação é muito específica.

O senhor pode aguardar e ver se outro membro o faz para você.
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

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

Atendido / Resolvido Re: Script Tags

Mensagem por iScroll em 26.10.17 16:58

Essa dose de requisições certamente deixaria o fórum mais lento.. Estou evitando fazer isto, ja que resolvi o problema de lentidão cujo qual estava tendo..
Façamos o seguinte, do jeito que está já está ótimo, podem fechar e estou agradecido pelo atendimento.
Se futuramente você se disponibilizar para fazer tal código com a aplicação requisitada eu ficarei muito feliz em utilizar.

Podem fechar o tópico e vou aguardar até o dia em que vocês criarem Feliz
iScroll

iScroll
Membro do Fórum

Masculino
Inscrito dia : 08/03/2015
Mensagens : 1698
Pontos Ativos : 2304

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

Atendido / Resolvido Re: Script Tags

Mensagem por Luiz em 26.10.17 17:03

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 : 6625
Pontos Ativos : 7518

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