convForm
1.0.0
私はこれをサイド プロジェクトとして始めましたが、多くの人々がこれを本来の目的とはまったく異なる方法でさまざまな用途に活用することで命を吹き込みました。不確実な将来、それらの可能性を達成するためにこれを最初からやり直すかもしれませんが、現時点ではこれに取り組む十分な時間がありません、申し訳ありません。何か手助けしたいことがあれば、お気軽にプルリクエストを開いてください。
フォームを対話型チャットに変換するプラグイン。
特徴：
チャットを構築するには、要素内でフォームをラップし、その jquery セレクターで .convform() を呼び出すだけです。
例：
$ ( 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 >必要に応じて、pipe | を使用してタグごとに複数の質問を書くことができます。それらを分離するために。プラグインは、チャットが生成されるたびに、使用するプラグインをランダムに選択します。例：
< 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 内で、会話をその子要素に分岐させる回答を参照する data-conv-case 属性を持つ div タグを作成する必要があります。
< 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 >質問に対するユーザーの回答を使用するには、data-conv-question タグ内で {inputname} を使用します。inputname は、回答が必要な質問を参照します。必要に応じて、: selector (0 から始まるインデックス) を使用して、回答から特定の単語を取得できます。たとえば、ユーザーの名が必要な場合、{name}:0 を使用すると、プラグインは「name」の質問の回答から最初の単語を取得します。例：
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >チャットフローにメッセージを入れることができます。これらはユーザーからの回答を期待していない質問であるため、プラグインは即座に次の質問に進みます。これを行うには、input タグに data-no-answer="true" 属性を設定します。例：
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >ユーザーが選択した回答をクリックしたとき、または質問の最後に呼び出されるカスタム関数を使用できます (質問が回答を期待している場合は、ユーザー入力後にコールバックが呼び出されます。そうでない場合は、コールバックが呼び出されます)。メッセージの出力後に呼び出されます。)。これを行うには、呼び出される関数の名前をオプション タグの "data-callback" 属性または 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 >コールバック関数は、パラメータstateWrapperおよびコールバック関数readyを使用して呼び出されます。 State ラッパーは convForm オブジェクトで、ready は次の質問に進むために呼び出す必要がある関数です。
以下を含むオプション オブジェクトをパラメータとして convForm 関数に追加できます。
placeHolder : ユーザーの入力に表示するプレースホルダーtypeInputUi : 'input' または 'textarea'、ユーザーの入力として使用する HTML 要素のタイプを選択しますtimeOutFirstQuestion : 最初の質問の前のロードアップ アニメーションの継続時間としての時間 (ミリ秒)buttonClassStyle : ユーザーの回答送信ボタンのクラスeventList : 特定の時間に呼び出される関数を含むオブジェクト。現時点でサポートされているのは、 onSubmitForm (convState をパラメーターとして使用して呼び出される関数) とonInputSubmit (convState を最初のパラメーターとして使用して呼び出される関数、および準備完了のコールバック関数) だけです。次の質問を 2 番目のパラメータとして出力します)formIdName : フォームの HTML IDinputIdName : ユーザー入力の HTML IDloadSpinnerVisible :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);を使用して呼び出してください。 window[convState.current.input.callback](convState, readyCallback);
