convForm
1.0.0
Comecei isso como um projeto paralelo e ele ganhou vida, com muitas pessoas vendo usos diferentes para isso, de maneiras completamente diferentes do que era originalmente suposto fazer. Posso em algum momento no futuro incerto refazer isso do zero para atingir essas possibilidades, mas atualmente não tenho tempo suficiente para trabalhar nisso, desculpe. Se você quiser ajudar em alguma coisa, fique à vontade para abrir pull requests.
Um plugin que transforma um formulário em um chat interativo.
Características:
Para construir o chat, basta agrupar o formulário dentro de um elemento e chamar .convform() em seu seletor jquery.
Exemplo:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;Para que o plugin saiba qual pergunta fazer, cada entrada e seleção deve ter um atributo data-conv-question. Exemplo:
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >Se desejar, você pode escrever mais de uma pergunta para cada tag, usando pipe | para separá-los. O plugin escolherá aleatoriamente um para usar cada vez que o chat for gerado. Exemplo:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >Você pode usar padrões regex nas entradas, basta usar o atributo data-pattern na tag. Quando o usuário digita uma resposta, se ela não se enquadrar no padrão, ele não poderá enviá-la e a cor de entrada ficará vermelha. Exemplo:
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >Você pode bifurcar a conversa e fazer perguntas específicas com base nas respostas do usuário. Isso só funciona ao bifurcar seleções.
Para fazer isso, você precisa colocar uma tag div após a pergunta da qual deseja bifurcar a conversa, com uma tag data-conv-fork com o nome do select nela.
Dentro dessa div, você precisa criar tags div com o atributo data-conv-case referenciando a resposta que irá bifurcar a conversa para seus elementos filhos.
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >Para usar as respostas do usuário às perguntas, você pode usar {inputname} dentro de uma tag data-conv-question, na qual inputname faz referência à pergunta da qual você precisa da resposta. Se desejar, você pode obter palavras específicas da resposta usando: seletor (indexado em 0). Por exemplo, quando precisar do primeiro nome do usuário, você pode usar {name}:0, e o plugin obterá a primeira palavra da resposta da pergunta "nome". Exemplo:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >Você pode colocar mensagens no fluxo de chat. São perguntas que não esperam resposta do usuário, então o plugin irá para a próxima pergunta instantaneamente. Para fazer isso, coloque um atributo data-no-answer="true" em uma tag de entrada. Exemplo:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >Você pode usar funções personalizadas a serem chamadas quando um usuário clica em uma resposta de uma seleção ou no final da pergunta (se a pergunta espera uma resposta, o retorno de chamada será chamado após a entrada do usuário. Caso contrário, retorno de chamada será chamado após imprimir a mensagem.). Para isso, basta colocar o nome da função a ser chamada no atributo "data-callback" da tag option, ou na tag input:
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script > Funções de retorno de chamada são chamadas com parâmetros stateWrapper e uma função de retorno de chamada ready . State wrapper é o objeto convForm e ready é uma função que você DEVE chamar para prosseguir para a próxima pergunta.
Você pode adicionar um objeto de opções como parâmetro à função convForm, contendo:
placeHolder : o espaço reservado que você deseja que apareça na entrada do usuáriotypeInputUi : 'input' ou 'textarea', para escolher o tipo de elemento html a ser usado como entrada do usuáriotimeOutFirstQuestion : tempo em ms como a duração da animação de carregamento antes da primeira perguntabuttonClassStyle : classe para o botão de envio de resposta do usuárioeventList : um objeto com funções a serem chamadas em horários específicos, os únicos suportados no momento são onSubmitForm (a função é chamada com o convState como parâmetro) e onInputSubmit (função chamada com o convState como primeiro parâmetro, e uma função de callback pronta para imprimir a próxima pergunta como segundo parâmetro)formIdName : id html do formulárioinputIdName : id html para a entrada do usuárioloadSpinnerVisible : classe para o loadSpinnerselectInputStyle : show (padrão), disable ou hide - informa ao plugin como lidar com o campo de entrada quando uma pergunta é um select .selectInputDisabledText : O texto a ser mostrado na entrada em perguntas selecionadas caso selectInputStyle esteja definido como disable . $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; Esteja ciente de que as funções de retorno de chamada são chamadas dentro da função onInputSubmit . Se você estiver alterando esta função de evento, não precisará usar funções de retorno de chamada nas tags HTML, mas se por algum motivo precisar delas, certifique-se de chamá-las aqui usando window[convState.current.input.callback](convState, readyCallback);
