[TUTORIAL] Criar campos na criação do tópico

Ir para baixo

[TUTORIAL] Criar campos na criação do tópico Empty [TUTORIAL] Criar campos na criação do tópico

Mensagem por RafaelS. 22.09.18 12:19

Adicionar campos na criação de um tópico
Com este tutorial, será possível adicionar mais campos de preenchimento na criação de um novo tópico.
Adicionar campos na criação de um tópico


TUTORIAIS, DICAS E ASTÚCIAS

Instalação do código Javascript

As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle Seta Branca Módulos Seta Branca HTML e Javascript Seta Branca Gestão dos códigos Javascript Seta Branca Criar um novo javascript
[TUTORIAL] Criar campos na criação do tópico Javaac10
[TUTORIAL] Criar campos na criação do tópico 110111Seta Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.
[TUTORIAL] Criar campos na criação do tópico 110210Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
[TUTORIAL] Criar campos na criação do tópico 110310Seta Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas.
[TUTORIAL] Criar campos na criação do tópico 110410Seta Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:
Código:
/*globals jQuery, FA*/
 
/**
 * Criar inputs na criação do tópico.
 *
 * @author lffg <https://github.com/lffg>
 * @version 1.0
 */
 
(function($) {
  'use strict';
 
  var inputs = [{
    label: 'Label do Input 1',
    placeholder: 'Placeholder do Input 1',
    insert: '[b]Valor do Input 1:[/b] {{CONTENT}}. \n\n', // {{CONTENT}} = O que o usuário colocou.
    required: true
  }, {
    label: 'Label do Input 2',
    placeholder: 'Placeholder do Input 2',
    insert: '[b]Valor do Input 2:[/b] {{CONTENT}}. \n\n', // O caractere especial \n é o mesmo que uma quebra de linha.
    required: true
  }, {
    label: 'Label do Input 3',
    insert: '[b]Valor do Input 3:[/b] {{CONTENT}}. \n\n',
    required: false
  }];
 
  inputs.reverse();
 
  window.FA = window.FA || {};
  FA.Posting = FA.Posting || {};
 
  var Inputs;
  FA.Posting.Inputs = Inputs = function(userConfig) {
    var self = this;
 
    self.defaults = {
      label: undefined,
      placeholder: undefined,
      insert: undefined,
      forums: ['*'],
      required: false
    };
 
    self.userConfig = userConfig;
 
    self.config = $.extend({}, self.defaults, self.userConfig);
  };
 
  Inputs.prototype.init = function() {
    var self = this;
 
    if (!$.sceditor) {
      return false;
    }
 
    if (self.config.forums.indexOf('*') === -1) {
      var hrefId = parseInt(location.href.replace(/^.*\/post\?f=(\d+)&.*$/g, '$1'));
 
      if (self.config.forums.indexOf(hrefId) === -1) {
        return false;
      }
    }
 
    self.generate();
    self.listen(function() {
      self.parse();
    });
  };
 
  Inputs.prototype.generate = function() {
    var self = this;
 
    self.$wrapper = $([
      '<dl>',
      '  <dt>',
      '    ' + $('<label>', { 'text': self.config.label }).prop('outerHTML'),
      '  </dt>',
      '  <dd>',
      '    ' + $('<input />', { 'type': 'text' }).prop('outerHTML'),
      '  </dd>',
      '</dl>'
    ].join('\n'));
 
    self.$input = self.$wrapper.find('input');
 
    self.$input
      .attr('class', 'inputbox medium fa-generated-input')
      .attr('data-content', self.config.insert)
      .attr('placeholder', self.config.placeholder || '')
    ;
 
    if (self.config.required) {
      self.$input.attr('required', 'required');
    }
 
    $('input[name="subject"]')
      .parents('dl')
      .after(self.$wrapper)
    ;
  };
 
  Inputs.prototype.listen = function(fn) {
    var selectors = [
      '[required]',
      '[required="required"]',
      '[name="subject"]'
    ];
 
    $('[type="submit"]').on('click', function() {
      if ($(selectors.join(',')).val() === '') {
        return;
      }
 
      fn();
    });
  };
 
  Inputs.prototype.parse = function() {
    var self = this;
 
    var $sceditor = $('#text_editor_textarea').sceditor('instance');
 
    var content = self.config.insert;
    var value = $.trim(self.$input.val());
 
    content = content.replace(/{{CONTENT}}/gi, value);
 
    $sceditor.val(content + $sceditor.val());
  };
 
  $(function() {
    $.each(inputs, function() {
      var self = this;
 
      (new FA.Posting.Inputs(self)).init();
    });
  });
}(jQuery));

Após a instalação, o código já estará a resultar.

Resultado do tutorial

[TUTORIAL] Criar campos na criação do tópico BZkWUUf
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos