تعريفات العناصر المصغرة
class NGSWidget {
static get type() {
return "NGSWidget"
}
/* قالب Html سيتم إنشاؤه قبل إنشاء الفئة
سيتم إضافة uniqueId لاحقة إلى جميع المعرفات وأسماء فئات css
المقدمة أثناء إنشاء widget */
static get template() {}
/* يُستخدم قالب Html أثناء وقت تصميم النموذج
إذا كانت القيمة null فسيتم عرض قالب widget الفعلي */
static get designTimeTemplate() {}
/* قالب Html يُستخدم عند عرض النموذج للطباعة */
static get printTemplate() {}
/* نمط css مضمن سيُضاف إلى الصفحة
ملاحظة أن أسماء فئات النمط ستخضع للنطاق
إلى المعرف الفريد لـ widget
*/
static get style() {}
/* كود javascript مضمن سيُضاف إلى
الصفحة طالما أن widget */
static get script() {}
static get selectionWidget() {
return true;
}
/* هل يدعم هذا widget التسمية، فالتسمية هي النص الذي يمكن لمسؤول
النموذج إدخاله باستخدام تصميم النموذج والذي سيتم عرضه
قبل قالب widget */
static get hasLabel() {
return true;
}
/* يعرض مربع رسالة الخطأ الأصلي في ngsurvey
أسفل العنصر التحكم
*/
static get displayErrorMessage() {
return true;
}
/* سيضع بادئة على جميع فئات CSS من نمط widget
بقيمة فريدة لتجنب التعارضات إذا كانت مكونات أخرى
قد سجلت هذه الفئات بالاسم نفسه.
ملاحظة أنه لن يقوم بتحليل تبعيات CSS الخارجية.
0 : بدون encapsulation
1 : Shadow CSS - معالج البادئة الأصلي في ngSurvey
*/
static get encapsulationMode() {
return 1;
}
/* يتيح تعيين الإجابة كإجابة مطلوبة أو غير مطلوبة
من صفحة إعدادات الإجابة لجعل
إجابة widget مطلوبة أثناء الاستبيان
*/
static get required() {
return false;
}
/* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
إجابة باستخدام هذا widget كنوع إجابة في إعدادات الإجابة */
static get propertiesDef() {}
/* تبعيات كود javascript الخارجية التي سيتم تحميلها
قبل إنشاء widget */
static get jsDependencies() {}
/* تبعيات كود css الخارجية التي سيتم تحميلها
قبل إنشاء widget */
static get cssDependencies() {}
/*
setAnswer; // دالة callback لنشر قيمة من widget مثل: answerPosted(widgetAnswerValue)
valueChanges$; // Observable يعيد قيمة widget
containerElement;
labelElement;
respondentAnswers = [];
uniqueId;
answerContext;
formContext;
sectionIndex;
properties;
initialValue;
label;
*/
/* containerElement : عنصر DOM يحتفظ بالقالب
labelElement: عنصر DOM يحتفظ بالتسمية
answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
uniqueId: يجب استخدامه مع query كلاحقة لمعرفة معرفات عناصر القالب أو فئات css
properties : قيم خصائص خاصة بكل instance
setAnswer: دالة ستعيّن قيمة النص المعطاة لـ widget setAnswer(textVal)
valueChanges: مراقبة أي تغييرات في قيمة widget
*/
constructor(containerElement, labelElement, answerContext, formContext,
sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$) {
}
/* تم إنشاء widget بالقالب لكنه لم يُضف بعد إلى DOM
ولكن خصائصه تم تعيينها بالفعل
*/
build() {}
/* تم إنشاء widget بالقالب وقد أُضيف إلى DOM
وتم تعيين خصائصه
*/
init() {}
/* اشترك في observable واحتفظ
بمرجع لإلغاء الاشتراك تلقائيًا
عند التخلص من widget
*/
safeSubscribe(obs, next, error, complete);
// Beta غير مخصص للإنتاج
remoteValidate();
// Beta غير مخصص للإنتاج
remoteValidateProd();
getValidationParam(name, value);
/*
يعيد خصائص widget
في دالة callback
*/
getProperties$(propsCallback);
getLabel$(labelCallback);
getValue$(valueCallback);
isDisabled$(stateCallback);
isSelected$(selectionCallback);
getRenderMode$(renderModeCallback);
getLanguage$(languageCallback);
getRespondentAnswers$(respondentAnswersCallBack);
getAnswers$(answersCallBack);
getQuestions$(questionsCallBack);
/* سيتم استدعاؤها بواسطة النموذج لمعرفة ما إذا كانت القيمة صحيحة
إذا لم تكن صحيحة، يجب أن تُرجع '' (لن تظهر رسالة خطأ) أو رسالة الخطأ المراد عرضها
إذا كانت صحيحة، أرجع null */
isValid();
/* يعيد عنصر html من dom تم إنشاؤه
من قالب widget وسيطابق المعرفات ذات اللاحقة الخاصة بـ
قالب widget
*/
getWidgetElementById(id);
/*
Queryselector فقط على حاوية widget.
يضيف المعرف الفريد لـ widget إلى المعرفات (#) للمطابقة مع
المعرفات المحلية ذات اللاحقة في قالب widget
*/
widgetQuerySelector(selector);
/*
QueryselectorAll فقط على حاوية widget.
يضيف المعرف الفريد لـ widget إلى المعرفات (#) للمطابقة مع
المعرفات المحلية ذات اللاحقة في قالب widget
*/
widgetQuerySelectorAll(selector);
}
submitForm();
nextPage();
previousPage();
nextQuestion();
previousQuestion();
saveProgress(silent);
/* ينظّف كل ما يحتاج إلى تنظيف
قبل تدمير widget من DOM */
dispose() {}
_disposeSubscribers() {
if (this._subscribers) {
this._subscribers.forEach(subscriber => {
if (subscriber) {
subscriber.unsubscribe();
}
})
this._subscribers = [];
}
}
/* يربط أحداث widget للحفاظ على
تزامن حالتها */
_hookEvents() {}
/* طريقة داخلية يجب عدم تجاوزها */
_dispose() {}
/* _value;
_subscribers = [];*/
}
class NGSSelectionWidget extends NGSWidget {
static get type() {
return "NGSSelectionWidget"
}
/* containerElement : عنصر DOM يحتفظ بالقالب
labelElement: عنصر DOM يحتفظ بالتسمية
answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
uniqueId: يجب استخدامه مع query كلاحقة لمعرفة معرفات عناصر القالب أو فئات css
selectionId: هو المعرف الفريد لمجموعة التحديد
selectAnswerCallback: دالة سيتم استدعاؤها عندما يجب اختيار إجابة من widget
selected$: observable يعيد true / false عندما يتم تحديد الإجابة أو إلغاء تحديدها
properties : قيم خصائص خاصة بكل instance
setAnswer: دالة ستعيّن قيمة النص المعطاة لـ widget setAnswer(textVal) */
constructor(containerElement, labelElement, answerContext, formContext,
sectionIndex, uniqueId, selectionId, selected, selectedAnswerCallback,
selected$, properties, setAnswerCallback, valueChanges$) {
super(containerElement, labelElement, answerContext,
formContext, sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$)
}آخر تحديث
هل كان هذا مفيدا؟