convForm
1.0.0
لقد بدأت هذا كمشروع جانبي وجلب نفسه إلى الحياة، حيث رأى العديد من الأشخاص استخدامات مختلفة له، بطرق مختلفة تمامًا عما كان من المفترض أن يفعله في الأصل. قد أقوم في وقت ما في المستقبل غير المؤكد بإعادة القيام بذلك من الألف إلى الياء للوصول إلى تلك الاحتمالات، لكن حاليًا ليس لدي الوقت الكافي للعمل على هذا، آسف. إذا كنت تريد المساعدة في أي شيء، فلا تتردد في فتح طلبات السحب.
مكون إضافي يحول النموذج إلى دردشة تفاعلية.
سمات:
لإنشاء الدردشة، كل ما عليك فعله هو تغليف النموذج داخل عنصر، ثم استدعاء .convform() في محدد jquery الخاص به.
مثال:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;لكي يعرف المكون الإضافي السؤال الذي يجب طرحه، يجب أن يحتوي كل إدخال واختيار على سمة سؤال تحويل بيانات إليه. مثال:
< 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. " >يمكنك استخدام أنماط التعبير العادي على المدخلات، فقط استخدم سمة نمط البيانات في العلامة. عندما يكتب المستخدم إجابة، إذا كانت لا تتناسب مع النمط، فلن يتمكن من إرسالها ويتحول لون الإدخال إلى اللون الأحمر. مثال:
< 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 " >يمكنك استخدام وظائف مخصصة ليتم استدعاؤها عندما ينقر المستخدم على إجابة من التحديد، أو في نهاية السؤال (إذا كان السؤال يتوقع إجابة، فسيتم استدعاء رد الاتصال بعد إدخال المستخدم. وإذا لم يحدث ذلك، فسيتم استدعاء رد الاتصال سيتم الاتصال به بعد طباعة الرسالة). للقيام بذلك، ما عليك سوى وضع اسم الوظيفة المطلوب استدعاؤها في سمة "رد الاتصال بالبيانات" لعلامة الخيار، أو في علامة الإدخال:
< 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، والجاهزية هي دالة يجب عليك الاتصال بها للانتقال إلى السؤال التالي.
يمكنك إضافة كائن خيارات كمعلمة إلى وظيفة convForm، والذي يحتوي على:
placeHolder : العنصر النائب الذي تريد ظهوره عند إدخال المستخدمtypeInputUi : 'input' أو 'textarea'، لاختيار نوع عنصر html الذي سيتم استخدامه كمدخل للمستخدمtimeOutFirstQuestion : الوقت بالمللي ثانية باعتباره مدة الرسوم المتحركة للتحميل قبل السؤال الأولbuttonClassStyle : فئة زر إرسال الإجابة الخاص بالمستخدمeventList : كائن ذو وظائف يتم استدعاؤها في أوقات محددة، الوحيد المعتمد في الوقت الحالي هو onSubmitForm (يتم استدعاء الوظيفة باستخدام convState كمعلمة) و onInputSubmit (وظيفة يتم استدعاؤها باستخدام convState كمعلمة أولى، ووظيفة رد اتصال جاهزة) لطباعة السؤال التالي كمعلمة ثانية)formIdName : معرف html للنموذجinputIdName : معرف html لإدخال المستخدمloadSpinnerVisible : فئة لloadSpinnerselectInputStyle : 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);
