convForm
1.0.0
Я начал это как побочный проект, и он воплотился в жизнь, и многие люди увидели в этом разные варианты использования, совершенно отличные от того, что предполагалось изначально. Возможно, когда-нибудь в неопределенном будущем я переделаю это с нуля, чтобы реализовать эти возможности, но сейчас у меня нет достаточно времени, чтобы работать над этим, извините. Если вы хотите чем-то помочь, смело открывайте запросы на включение.
Плагин, превращающий форму в интерактивный чат.
Функции:
Чтобы создать чат, просто оберните форму внутри элемента и вызовите .convform() в селекторе jquery.
Пример:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;Чтобы плагин знал, какой вопрос задавать, каждый ввод и выбор должен иметь атрибут data-conv-question. Пример:
< 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 >Если хотите, вы можете написать более одного вопроса для каждого тега, используя канал | чтобы разделить их. Плагин будет случайным образом выбирать один из них для использования каждый раз при создании чата. Пример:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >Вы можете использовать шаблоны регулярных выражений для входных данных, просто используйте атрибут data-pattern в теге. Когда пользователь вводит ответ, если он не соответствует шаблону, он не может его отправить, и цвет ввода становится красным. Пример:
< 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 " >Вы можете развернуть разговор и задать конкретные вопросы на основе ответа пользователя. Это работает только при ответвлении от выбора.
Для этого вам нужно поместить тег div после вопроса, от которого вы хотите разветвить разговор, с тегом data-conv-fork с именем выбора.
Внутри этого div вам нужно создать теги div с атрибутом data-conv-case, ссылающимся на ответ, который разветвит разговор на его дочерние элементы.
< 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 >Чтобы использовать ответы пользователя на вопросы, вы можете использовать {inputname} внутри тега data-conv-question, в котором inputname ссылается на вопрос, на который вам нужен ответ. Если хотите, вы можете получить конкретные слова из ответа, используя селектор : (индекс 0). Например, если вам нужно имя пользователя, вы можете использовать {name}:0, и плагин получит первое слово из ответа на вопрос «имя». Пример:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >Вы можете помещать сообщения в поток чата. Это вопросы, на которые не ожидается ответа от пользователя, поэтому плагин мгновенно перейдет к следующему вопросу. Для этого поместите атрибут data-no-answer="true" во входной тег. Пример:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >Вы можете использовать пользовательские функции, которые будут вызываться, когда пользователь нажимает на ответ из списка выбора или в конце вопроса (если вопрос ожидает ответа, обратный вызов будет вызван после ввода пользователя. Если это не так, обратный вызов будет вызван после печати сообщения.). Для этого просто поместите имя вызываемой функции в атрибут «data-callback» тега опции или во входной тег:
< 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 > Функции обратного вызова вызываются с параметрами stateWrapper и ready функцией обратного вызова. Обертка состояния — это объект convForm, а Ready — это функция, которую вы ДОЛЖНЫ вызвать, чтобы перейти к следующему вопросу.
Вы можете добавить объект параметров в качестве параметра функции convForm, содержащий:
placeHolder : заполнитель, который должен отображаться при вводе пользователя.typeInputUi : 'input' или 'textarea', чтобы выбрать тип HTML-элемента, который будет использоваться в качестве пользовательского ввода.timeOutFirstQuestion : время в мс как продолжительность анимации загрузки перед первым вопросом.buttonClassStyle : класс для кнопки отправки ответа пользователя.eventList : объект с функциями, которые будут вызываться в определенное время, на данный момент поддерживаются только onSubmitForm (функция вызывается с convState в качестве параметра) и onInputSubmit (функция, вызываемая с convState в качестве первого параметра, и готовая функция обратного вызова чтобы напечатать следующий вопрос в качестве второго параметра)formIdName : html-идентификатор формы.inputIdName : идентификатор HTML для ввода пользователя.loadSpinnerVisible : класс для loadSpinner.selectInputStyle : show (по умолчанию), disable или hide — сообщает плагину, как обрабатывать поле ввода, когда вопрос является select .selectInputDisabledText : Текст, который будет отображаться при вводе при выборе вопросов, если для selectInputStyle установлено значение disable . $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; Помните, что функции обратного вызова вызываются внутри функции onInputSubmit . Если вы меняете эту функцию события, вам не нужно использовать функции обратного вызова в тегах HTML, но если они вам по какой-то причине нужны, обязательно вызовите их здесь, используя window[convState.current.input.callback](convState, readyCallback);
