تاريخ Material

يعرض هذا المثال تكامل عنصر اختيار التاريخ material date picker الجافاسكربت الموجود بالفعل التالي https://github.com/FreddyFY/material-datepicke ويظهر كيفية استخدام جافاسكربت و CSS خارجيين للحصول على إدخال المستجيب والتحقق من صحة الإدخال مع دعم متعدد اللغات وتنسيق مستند إلى ngSurvey الحالي السمة الذي يختاره مدير الاستبيان.

class MaterialDateWidget extends NGSWidget {
    /* 
        مثال يوضح كيفية دمج امتداد مستند إلى جافاسكربت خارجي 
        كأداة (widget) في ngSurvey مع دعم للوسوم (label).
        
        يعمل هذا المثال على دمج material date picker
        https://github.com/FreddyFY/material-datepicker

        يوضح كيفية استخدام جافاسكربت و CSS خارجيين للحصول على إدخال المستجيب
        والتحقق من صحة الإدخال مع دعم متعدد اللغات
    */

    /* قالب HTML سيتم إنشاؤه قبل إنشاء فئة الأداة (widget)
        ستتم إضافة لاحقة uniqueId إلى جميع المعرفات (id's)
        المقدمة أثناء إنشاء الودجت */
    static get template() {
        return `<input class="ngs-question__answer-field ngs-question__answer-field-material-date" type="text" id="materialpicker001">`;
    }

    /* الأنماط التي ستُطبّق على هذا الودجت، لاحظ أن أسماء أصناف العناصر 
      ستُحدد نطاقها باستخدام معرف الودجت الفريد */  
    static get style() {
        return `.ngs-question__answer-field-material-date {max-width:100px;}`
    }

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

    /* الخصائص التي يمكن تعيينها من مصمم النموذج لكل
     إجابة تستخدم هذه الأداة كنوع إجابة في خصائص الإجابة*/
    static get propertiesDef() {
        return [{
                id: 'color',
                label: 'color',
                defaultValue: 'var(--ngs-accent-color)',
                type: 'text'
            },
            {
                id: 'orientation',
                label: 'Orientation',
                defaultValue: 'portrait',
                type: 'list',
                list: [{
                        name: 'portrait',
                        value: 'portrait'
                    },
                    {
                        name: 'landscape',
                        value: 'landscape'
                    }
                ]
            }
        ];
    }

    /* تبعيات كود جافاسكربت الخارجية التي سيتم تحميلها
     قبل إنشاء الأداة (widget) */
    static get jsDependencies() {
        return [{
                id: 'moments',
                url: 'https://momentjs.com/downloads/moment-with-locales.min.js'
            },
            {
                id: 'materialdate',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.min.js'
            }
        ];
    }

    /* تبعيات كود CSS الخارجية التي سيتم تحميلها
       قبل إنشاء الأداة (widget) */
    static get cssDependencies() {
        return [{
                id: 'googlefonts',
                url: 'https://fonts.googleapis.com/icon?family=Material+Icons'
            },
            {
                id: 'materialdatecss',
                url: 'https://cdn.rawgit.com/FreddyFY/material-datepicker/master/dist/material-datepicker.css'
            }
        ];
    }

    init() {
        var widget = this;
        // الحصول على عنصر الإدخال من القالب
        // من المهم دائمًا إضافة لاحقة إلى أي معرف 
        // في القالب باستخدام uniqueid الخاص بالودجت
        this.inputField = this.getWidgetElementById('materialpicker001');

        this.getLanguage$(lang => {
            // إعداد منتقي التاريخ، من المهم دائمًا إضافة لاحقة لأي معرف (id) 
            // في القالب باستخدام uniqueid الخاص بالودجت
            this.materialPicker001 = new MaterialDatepicker('#materialpicker001' + this.uniqueId, {
                lang: lang.languageCode,
                color: this.properties.color,
                orientation: this.properties.orientation,
                onNewDate: function(date) {
                    // إذا اختار المستخدم تاريخًا، أرسل القيمة إلى النموذج
                    widget.setAnswer(widget.inputField.value);
                }
            });

            if (this.materialPicker001) {

                // الحصول على وضع العرض الحالي لمعرفة كيفية
                // إعداد الحالة هنا وجعلها معطلة إذا كان 
                // الودجت في وضع القراءة فقط 
                this.isDisabled$(disabled => {
                    this.inputField.disabled = disabled;
                });

                // تعيين القيمة الابتدائية عند إنشاء الأداة
                if (this.answerContext.initialValue) {
                    this.inputField.value = this.answerContext.initialValue;
                } else if (this.inputField.value) {
                    this.setAnswer(this.inputField.value);
                }

                // إذا قام المستخدم بتغيير النص تأكد من حفظ القيمة
                // في النموذج   
                this.inputField.addEventListener('input', (event) => {
                    this.textChange(this.inputField.value, this);
                });
            }
        });
    }

    // إرسال القيمة إلى النموذج
    textChange(value, widget) {
        widget.setAnswer(this.inputField.value);
    }

    // سيتم استدعاؤها بواسطة النموذج
    // لمعرفة ما إذا كانت القيمة صالحة
    // إذا لم تكن صالحة يجب إرجاع '' (لا تظهر رسالة خطأ) أو رسالة الخطأ لعرضها
    // إذا كانت صالحة أرجع null 
    isValid() {
        var date = new Date(this.inputField.value);
        if ((this.inputField.value && !(date instanceof Date && !isNaN(date.valueOf())))) {
            return 'InvalidDateDataTypeMessage';
        } else {
            return null;
        }
    }
}