User:Adrian Greeve/form comparison

< User:Adrian Greeve
Revision as of 01:08, 26 November 2015 by Adrian Greeve (talk | contribs) (Library for both types)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Library
Type A Type B
define(['jquery', 'core/templates'], function($, templates) {
 
    var Form = function() {
        this._fieldsets = {};
        this.elements = {};
        this.formPage = '';
 
    };
 
    // These two methods would actually be using classes for the form.
    Form.prototype.add_top = function() {
        this.formPage += '<div class="mod_lesson_page_editor"><form action="">';
    };
 
    Form.prototype.add_bottom = function() {
        this.formPage += '<div><button type="button" id="mod_lesson_editor_save_btn">Save</button>';
        this.formPage += '<button type="button" id="mod_lesson_editor_cancel_btn">Cancel</button></div></form></div>';
    };
 
 
 
    Form.prototype.addFieldset = function(key, title) {
        this._fieldsets[key] = title;
    };
 
    Form.prototype.handleError = function(errorname, errorelement, elementtype, errormessage) {
        var index = elementtype + "-" + errorname;
        this.elements[index].set_error(errormessage);
        var htmlpromise = templates.render(this.elements[index].template, this.elements[index]);
        $.when(htmlpromise).then(function(newhtml) {
            templates.replaceNode(errorelement, newhtml);
        });
    }
 
    Form.prototype.handleErrors = function(errors) {
 
        // Need to loop through all potential errors.
 
        var errorname = errors.errors.name;
        var errorelementid = $(":input[name=" + errorname + "]").attr("id");
        // console.log(errorelementid);
        var errorelement = $("#fitem_" + errorelementid);
        // console.log(errorelement);
        // Get the form element type.
        var elementtype = errorelement.attr("data-field-type");
        Form.prototype.handleError.call(this, errorname, errorelement, elementtype, errors.errors.message);
    }
 
 
    Form.prototype.addElement = function(element) {
        var index = element.type + "-" + element.name;
        this.elements[index] = element;
    };
 
    Form.prototype.showElements = function() {
        console.log(this.elements);
    };
 
    Form.prototype.printForm = function() {
 
        var allpromises = [];
        for (index in this.elements) {
            allpromises.push(this.elements[index].show());
        }
 
        return $.when.apply($.when, allpromises).then(function() {
            Form.prototype.add_top.call(this);
            var schema = arguments;
            for (index in schema) {
                this.formPage += schema[index][0];
            }
            Form.prototype.add_bottom.call(this);
            return this.formPage;
        }, function() {
           return 'default html'; 
        });
    }
 
    return Form;
 
});
define(['jquery', 'core/templates'], function($, templates) {
 
    var formData;
 
    return {
 
        handleErrors: function(errors, formdata) {
            // name attribute of the error.
            var errorname = errors.errors.name;
            var templatedata;
            for (index in formdata) {
                if (typeof formdata[index] == "object") {
                    if (formdata[index].name == errorname) {
                        formdata[index].error = errors.errors.message;
                        templatedata = formdata[index];
                    }
                }
            }
            // for (index in errors.errors) {
 
            //     console.log(errors.errors["name"]);
            // }
 
            // Need to loop through all potential errors.
 
            var errorelementid = $(":input[name=" + errorname + "]").attr("id");
            // console.log(errorelementid);
            var errorelement = $("#fitem_" + errorelementid);
            // console.log(errorelement);
            // Get the form element type.
            var elementtype = errorelement.attr("data-field-type");
            // console.log(elementtype);
            var template = 'core/form-element-' + elementtype;
            var templatepromise = templates.render(template, templatedata);
            $.when(templatepromise).then(function(newhtml) {
                templates.replaceNode(errorelement, newhtml);
            });
        },
 
        getFormData: function() {
            formData = $('form').serializeArray();
            var tempstorage = {};
            for (index in formData) {
                var name = formData[index].name;
                if (name !== 'query') {
                    tempstorage[name] = formData[index].value;
                }
            }
            return tempstorage;
        },
 
        /**
         * Format a normal array into an object for a select form element.
         *
         * @param {array} options An array of options.
         * @param {string} selected The selected option. Needs to match the array index.
         * @return {object} An options object that can be used with a select form element.
         */
        formatOptions: function(options, selected) {
            var returnoptions = [];
            var select = 0;
            if (selected !== 'undefined') {
                select = selected
            }
            for (index in options) {
                if (index == selected) {
                    returnoptions.push({
                        value: index,
                        text: options[index],
                        selected: select
                    });
                } else {
                    returnoptions.push({
                        value: index,
                        text: options[index],
                    });
                }
            }
            return returnoptions;
        }
    };
});