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

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

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

Mensagem por RafaelS. em 22/09/18, 08:19 am

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
Seta 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.
Seta Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
Seta 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.
Seta 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

avatar

RafaelS.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3915
Pontos Ativos : 4940

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

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