convForm
1.0.0
Ich habe das als Nebenprojekt begonnen und es hat sich von selbst zum Leben erweckt, und viele Leute haben gesehen, wie es anders genutzt werden kann, und zwar auf völlig andere Art und Weise, als es ursprünglich gedacht war. Vielleicht werde ich das irgendwann in der ungewissen Zukunft noch einmal von Grund auf wiederholen, um diese Möglichkeiten auszuschöpfen, aber im Moment habe ich nicht genug Zeit, um daran zu arbeiten, tut mir leid. Wenn Sie bei irgendetwas helfen möchten, können Sie jederzeit Pull-Anfragen öffnen.
Ein Plugin, das ein Formular in einen interaktiven Chat umwandelt.
Merkmale:
Um den Chat zu erstellen, schließen Sie das Formular einfach in ein Element ein und rufen Sie .convform() in seinem JQuery-Selektor auf.
Beispiel:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;Damit das Plugin weiß, welche Frage es stellen muss, muss jede Eingabe und Auswahl über ein data-conv-question-Attribut verfügen. Beispiel:
< 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 >Wenn Sie möchten, können Sie mit der Pipe | mehr als eine Frage für jedes Tag schreiben um sie zu trennen. Das Plugin wählt bei jeder Generierung des Chats zufällig eines aus, das verwendet werden soll. Beispiel:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >Sie können Regex-Muster für Eingaben verwenden. Verwenden Sie einfach das data-pattern-Attribut für das Tag. Wenn der Benutzer eine Antwort eingibt und diese nicht in das Muster passt, kann er sie nicht senden und die Eingabefarbe wird rot. Beispiel:
< 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 " >Sie können das Gespräch aufteilen und basierend auf der Antwort des Benutzers spezifische Fragen stellen. Dies funktioniert nur beim Forken von Selects.
Dazu müssen Sie nach der Frage, von der aus Sie die Konversation forken möchten, ein div-Tag mit einem data-conv-fork-Tag mit dem Namen des Auswählers einfügen.
Innerhalb dieses Div müssen Sie Div-Tags mit dem Attribut data-conv-case erstellen, die auf die Antwort verweisen, die die Konversation auf ihre untergeordneten Elemente aufteilt.
< 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 >Um Benutzerantworten auf Fragen zu verwenden, können Sie {inputname} innerhalb eines data-conv-question-Tags verwenden, in dem inputname auf die Frage verweist, von der Sie die Antwort benötigen. Wenn Sie möchten, können Sie mithilfe des Selektors (0-indiziert) bestimmte Wörter aus der Antwort abrufen. Wenn Sie beispielsweise den Vornamen des Benutzers benötigen, können Sie {name}:0 verwenden und das Plugin ruft das erste Wort aus der Antwort auf die Frage „Name“ ab. Beispiel:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >Sie können Nachrichten in den Chatablauf einfügen. Da es sich um Fragen handelt, die vom Benutzer keine Antwort erwarten, geht das Plugin sofort zur nächsten Frage über. Fügen Sie dazu ein data-no-answer="true"-Attribut zu einem Eingabe-Tag hinzu. Beispiel:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >Sie können benutzerdefinierte Funktionen verwenden, die aufgerufen werden, wenn ein Benutzer in einer Auswahl auf eine Antwort klickt oder am Ende der Frage (Wenn die Frage eine Antwort erwartet, wird der Rückruf nach der Benutzereingabe aufgerufen. Wenn dies nicht der Fall ist, erfolgt ein Rückruf wird nach dem Drucken der Nachricht aufgerufen.). Geben Sie dazu einfach den Namen der aufzurufenden Funktion in das „data-callback“-Attribut des Option-Tags oder in das Input-Tag ein:
< 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 > Callback-Funktionen werden mit den Parametern stateWrapper und einer Callback-Funktion ready aufgerufen. State Wrapper ist das convForm-Objekt und ready ist eine Funktion, die Sie aufrufen MÜSSEN, um mit der nächsten Frage fortzufahren.
Sie können der convForm-Funktion ein Optionsobjekt als Parameter hinzufügen, das Folgendes enthält:
placeHolder : Der Platzhalter, der in der Benutzereingabe angezeigt werden solltypeInputUi : „input“ oder „textarea“, um den Typ des HTML-Elements auszuwählen, das als Eingabe des Benutzers verwendet werden solltimeOutFirstQuestion : Zeit in ms als Dauer für die Ladeanimation vor der ersten FragebuttonClassStyle : Klasse für die Schaltfläche „Antwort senden“ des BenutzerseventList : ein Objekt mit Funktionen, die zu bestimmten Zeiten aufgerufen werden sollen. Die einzigen derzeit unterstützten Funktionen sind onSubmitForm (Funktion wird mit convState als Parameter aufgerufen) und onInputSubmit (Funktion wird mit convState als erstem Parameter aufgerufen und eine fertige Rückruffunktion um die nächste Frage als zweiten Parameter auszugeben)formIdName : HTML-ID für das FormularinputIdName : HTML-ID für die BenutzereingabeloadSpinnerVisible : Klasse für den LoadSpinnerselectInputStyle : show (Standard), disable oder hide – teilt dem Plugin mit, wie es mit dem Eingabefeld umgehen soll, wenn es sich bei einer Frage um eine select handelt.selectInputDisabledText : Der Text, der in der Eingabe ausgewählter Fragen angezeigt werden soll, falls der selectInputStyle auf disable eingestellt ist. $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ; Beachten Sie, dass die Rückruffunktionen innerhalb der onInputSubmit -Funktion aufgerufen werden. Wenn Sie diese Ereignisfunktion ändern, sollten Sie in den HTML-Tags keine Rückruffunktionen verwenden müssen. Wenn Sie diese jedoch aus irgendeinem Grund benötigen, rufen Sie sie unbedingt hier mit window[convState.current.input.callback](convState, readyCallback); auf window[convState.current.input.callback](convState, readyCallback);
