تعريفات الودجت

في هذه الصفحة ستجد جميع تعريفات الفئة الأصلية التي يمكن للفئات الفرعية أن ترث منها لتصبح ويدجت ngSurvey.

class NGSWidget {
  static get type() {
    return "NGSWidget"
  }

  /* قالب HTML سيتم توليده قبل إنشاء الفئة
     سيتم إضافة لاحقة uniqueId إلى جميع معرفات وأسماء فئات CSS
     المقدمة أثناء إنشاء عنصر الواجهة */
  static get template() {}

  /* قالب HTML يُستخدم أثناء وقت تصميم النموذج
     إذا كان null فسيتم عرض قالب الوديجت الفعلي */
  static get designTimeTemplate() {}

  /* قالب HTML يُستخدم عندما يُعرض النموذج للطباعة */
  static get printTemplate() {}

  /* نمط CSS مضمّن سيضاف إلى الصفحة
     لاحظ أن أسماء فئات النمط ستكون مقيدة النطاق
     إلى معرّف الوديجت الفريد 
  */
  static get style() {}

  /* شفرة جافاسكربت مضمّنة ستُضاف إلى 
     الصفحة طالما الوديجت موجود */
  static get script() {}

  static get selectionWidget() {
    return true;
  }

  /* هل تدعم هذه الودجة التسمية؛ التسمية هي النص الذي
  يمكن للمسؤول الدخول باستخدام مصمم الاستمارة والذي سيُعرض
  قبل قالب الوديجت */
  static get hasLabel() {
    return true;
  }

  /* يعرض صندوق رسالة الخطأ الأصلي الخاص بـ ngsurvey 
     تحت التحكم
  */
  static get displayErrorMessage() {
    return true;
  }

  /* سيُسبق جميع فئات CSS من نمط الوديجت
     بقيمة فريدة لتجنب التضارب إذا كانت مكونات أخرى 
     قد سجلت هذه الفئات بنفس الاسم.
     لاحظ أنه لن يحلل تبعيات CSS الخارجية.
     0 : لا تغليف
     1 : Shadow CSS - معالج البادئة الأصلي لـ ngSurvey
  */
  static get encapsulationMode() {
    return 1;
  }

  /* يسمح بتعيين الإجابة كمطلوبة أو لا
   من صفحة إعدادات الإجابة لجعل
   إجابة الأداة مطلوبة أثناء الاستبيان
  */
  static get required() {
    return false;
  }

  /* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
   استخدام هذا الوديجت كنوع إجابة في إعدادات الإجابة */
  static get propertiesDef() {}

  /* تبعيات كود جافاسكربت الخارجية التي سيتم تحميلها
   قبل إنشاء الأداة (widget) */
  static get jsDependencies() {}

  /* تبعيات كود CSS الخارجية التي سيتم تحميلها
   قبل إنشاء الأداة (widget) */
  static get cssDependencies() {}

  /*
    setAnswer; // callback function لنشر قيمة من الوديجت مثال: answerPosted(widgetAnswerValue)
    valueChanges$; // Observable الذي يعيد قيمة الوديجت
      containerElement;
      labelElement;
      respondentAnswers = [];
      uniqueId;
      answerContext;
      formContext;
      sectionIndex;
      properties;
      initialValue;
      label;
    */

  /* containerElement : عنصر DOM الذي يحمل القالب
     labelElement: عنصر DOM الذي يحمل التسمية
     answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
     formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
     uniqueId: يجب استخدامه للاستعلام كلاحقة على معرفات عناصر القالب أو فئات CSS
     properties : قيم الخصائص الخاصة بالنسخة
     setAnswer: دالة ستضبط القيمة النصية المعطاة للوديجت setAnswer(textVal) 
     valueChanges: مراقبة أي تغييرات في قيمة الوديجت
     */
  constructor(containerElement, labelElement, answerContext, formContext,
    sectionIndex, uniqueId, properties, setAnswerCallback, valueChanges$) {
    this._value = null;
    this._subscribers = [];
    this.containerElement = containerElement;
    this.labelElement = labelElement;
    this.uniqueId = uniqueId;
    this.formContext = formContext;
    this.sectionIndex = sectionIndex;
    this.properties = properties;
    this.answerContext = answerContext;
    this.initialValue = answerContext.initialValue;
    this.valueChanges$ = valueChanges$;
    this.setAnswer = (value) => {
      // يحتفظ بنسخة محلية من القيمة التي يتم تعيينها
      this._value = value;

      setAnswerCallback(value);
    };

    this.getLabel$(label => {
      this.label = label;
    })

    this.getRespondentAnswers$(respondentAnswers => {
      this.respondentAnswers = respondentAnswers;
    });

    this.getAnswers$(answers => {
      this.answers = answers;
    });

    this.getQuestions$(questions => {
      this.questions = questions;
    });

  }

  /* لم يتم بعد إضافة قالب الوديجت إلى DOM
     لكن قد تم بالفعل تعيين خصائصه 
  */
  build() {}

  /* تم إضافة قالب الوديجت إلى DOM
     وقد تم تعيين خصائصه 
  */
  init() {}

  /* الاشتراك في الـ observable والاحتفاظ
     بمرجع لإلغاء الاشتراك تلقائياً
     عندما يتم التخلص من الوديجت
  */
  safeSubscribe(obs, next, error, complete) {
    // أضف إلى المصفوفة
    if (obs) {
      this._subscribers.push(obs.subscribe(next, error, complete));
    }
  }

  // بيتا غير مخصص للاستخدام الإنتاجي
  remoteValidate() {
    var validationParams = [];
    for (var key in this.properties) {
      validationParams.push(this.getValidationParam(key, this.properties[key]));
    }
    validationParams.push(this.getValidationParam('secret', '6LeFY6QUAAAAAEwJvr1FYG16rVQpJJ1RQEGV19QM'));
    validationParams.push(this.getValidationParam('response', this._value));
    var remoteValidationParams = {
      validationParams
    }
    return this.formContext.answerService.validate(this.answerContext.answer.id, remoteValidationParams).subscribe(val => {
      console.log('validate')
    });
  }

  // بيتا غير مخصص للاستخدام الإنتاجي
  remoteValidateProd() {
    var validationParams = [];
    validationParams.push(this.getValidationParam('secret', '6LeFY6QUAAAAAEwJvr1FYG16rVQpJJ1RQEGV19QM'));
    validationParams.push(this.getValidationParam('response', this._value));
    var remoteValidationParams = {
      validationParams
    }
    return this.formContext.answerService.validate(this.answerContext.answer.id, remoteValidationParams).subscribe(val => {
      console.log('validate')
    });
  }

  getValidationParam(name, value) {
    return {
      name,
      القيمة
    }
  }

  /* 
    يعيد خصائص الوديجت 
    في الدالة الراجعة
  */
  getProperties$(propsCallback) {
    this.safeSubscribe(this.answerContext.propertie$, propsCallback, null, null)
  }

  getLabel$(labelCallback) {
    this.safeSubscribe(this.answerContext.label$, labelCallback, null, null)
  }

  getValue$(valueCallback) {
    this.safeSubscribe(this.valueChanges$, (value) => {
      // استدعاء الراجعة فقط إذا تغيرت القيمة
      if (value != this._value) {
        valueCallback(value);
      }
    }, null, null)
  }

  isDisabled$(stateCallback) {
    this.safeSubscribe(this.answerContext.disabled$, stateCallback, null, null)
  }

  isSelected$(selectionCallback) {
    this.safeSubscribe(this.answerContext.isSelected$, selectionCallback, null, null)
  }

  getRenderMode$(renderModeCallback) {
    this.safeSubscribe(this.answerContext.renderMode$, renderModeCallback, null, null)
  }

  getLanguage$(languageCallback) {
    this.safeSubscribe(this.formContext.language$, languageCallback, null, null)
  }

  getRespondentAnswers$(respondentAnswersCallBack) {
    this.safeSubscribe(this.formContext.respondentAnswers$, respondentAnswersCallBack, null, null)
  }

  getAnswers$(answersCallBack) {
    this.safeSubscribe(this.formContext.answers$, answersCallBack, null, null)
  }

  getQuestions$(questionsCallBack) {
    this.safeSubscribe(this.formContext.questions$, questionsCallBack, null, null)
  }

  /* سيتم استدعاؤه من قبل النموذج لمعرفة ما إذا كانت القيمة صالحة
     إذا لم تكن صالحة يجب إرجاع '' (لا تظهر رسالة خطأ) أو رسالة الخطأ المراد عرضها
     إذا كانت صالحة أعد null */
  isValid() {
    return null;
  }

  /* يعيد عنصر HTML من DOM الذي تم توليده 
     من قالب الوديجت سيتطابق مع المعرفات المحلية الملحقة لـ 
     قالب الوديجت
  */
  getWidgetElementById(id) {
    return this.widgetQuerySelector('#' + id);
  }

  /*
    Queryselector يتم فقط على حاوية الوديجت.
    يضيف معرّف الوديجت الفريد إلى المعرفات (#) ليتطابق مع 
    المعرفات المحلية الملحقة لقالب الوديجت 
  */
  widgetQuerySelector(selector) {
    // أضف لاحقة المعرّف بمعرّف الوديجت الفريد 
    if (selector.indexOf('#') >= 0) {
      selector += this.uniqueId;
    }
    return this.containerElement.querySelector(selector);
  }

  /*
    QueryselectorAll يتم فقط على حاوية الوديجت.
    يضيف معرّف الوديجت الفريد إلى المعرفات (#) ليتطابق مع 
    المعرفات المحلية الملحقة لقالب الوديجت 
  */
  widgetQuerySelectorAll(selector) {
    // أضف لاحقة المعرّف بمعرّف الوديجت الفريد 
    if (selector.indexOf('#') >= 0) {
      selector += this.uniqueId;
    }
    return this.containerElement.querySelectorAll(selector);
  }


  /* ينظف كل الأشياء التي تحتاج إلى تنظيف
     قبل أن يتم تدمير الوديجت من الـ DOM */
  dispose() {}

  _disposeSubscribers() {
    if (this._subscribers) {
      this._subscribers.forEach(subscriber => {
        if (subscriber) {
          subscriber.unsubscribe();
        }
      })
      this._subscribers = [];
    }
  }

  /* يربط أحداث الوديجت للحفاظ على 
    حالتها متزامنة */
  _hookEvents() {}

  /* طريقة داخلية لا يجب تجاوزها */
  _dispose() {
    this._disposeSubscribers();
    this.dispose();
  }

  /*  _value;
    _subscribers = [];*/
}

class NGSSelectionWidget extends NGSWidget {
  static get type() {
    return "NGSSelectionWidget"
  }
  /* containerElement : عنصر DOM الذي يحمل القالب
     labelElement: عنصر DOM الذي يحمل التسمية
     answerContext: سياق الإجابة الذي يوفر طرق مساعدة للتفاعل مع الإجابة
     formContext: سياق النموذج الذي يوفر طرق مساعدة للتفاعل مع النموذج
     uniqueId: يجب استخدامه للاستعلام كلاحقة على معرفات عناصر القالب أو فئات CSS
     selectionId: هو المعرّف الفريد لمجموعة الاختيارات
     selectAnswerCallback: دالة سيتم استدعاؤها عندما يجب تحديد إجابة من الوديجت
     selected$: observable الذي يرجع true / false عندما تكون الإجابة محددة أو غير محددة
     properties : قيم الخصائص الخاصة بالنسخة
     setAnswer: دالة ستضبط القيمة النصية المعطاة للوديجت 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$)

    this.selectionId = selectionId;
    this.isSelected = selected;
    this.selected$ = selected$;

    this.selectAnswer = (selected) => {
      // إذا كانت إجابات نصية احفظ القيمة محلياً (مثال: لإجابات "other" مع حقول واختيارات)
      if ((selected !== false && selected !== true) || selected == null || selected.length == 0) {
        this._value = selected;
      }
      selectedAnswerCallback(selected);
    };

    this.isSelected$(selected => {
      this.isSelected = selected;
    });
  }

  isSelected$(selectionCallback) {
    this.safeSubscribe(this.selected$, selectionCallback, null, null)
  }
}

export class AnswerContext {
  constructor(
    // الإجابة المرتبطة بذلك الوديجت
    private answer: Answer,
    // خصائص مخصصة معرّفة من قبل المستخدم تم تعيينها لهذا الوديجت  
    private propertie$: Observable<any>,
    // وضع العرض الحالي للوديجت مثال: DesignTime (design), Standard (running)
    private renderMode$: BehaviorSubject<ControlRenderMode>,
    // هل يجب تعطيل الوديجت؟
    private disabled$: BehaviorSubject<boolean>,
    // هل التسمية مفعّلة
    private showLabel: boolean,
    // عنصر تحكم نموذج Angular الذي يحمل قيمة ال
    private formControl: FormControl,
    // القيمة الابتدائية للإجابة، قد تكون القيمة الافتراضية التي عيّنها مسؤول الاستبيان 
    // أو إجابة المستجيب السابقة إذا كان الاستبيان
    // يُستأنف من قبل المستجيب
    private initialValue: string,
    // نص التسمية للإجابة، سيبث الـ observable القيمة الجديدة
    // إذا تغيرت القيمة في استبيان متعدد اللغات
    private label$: Observable<string>) { }
}

export class FormContext {
  constructor(
    // المستجيب الفعلي للاستبيان
    private respondent$: Observable<Respondent>,
    // إجابات المستجيب الفعلية للاستبيان، الـ observable 
    // سيبث أي تحديث جديد للإجابة في الوقت الحقيقي
    private respondentAnswers$: Observable<RespondentAnswer[]>,    
    // إجابات الاستبيان
    private answers$: Observable<Answer[]>,
    // أسئلة الاستبيان
    private questions$: Observable<Question[]>,
    // لغة المستجيب الفعلية في الاستبيانات متعددة اللغات
    private language$: Observable<Language>,
    // طريقة مساعدة للوصول إلى عميل http الخاص بـ Angular
    private httpClient: HttpClient,
    // خدمات HTTP الداخلية لإجابات ngSurvey
    private answerService: AnswerService) { }
}