/*
Dependency: jQuery, Material Design Lite
*/
// track unique ids for each element
var __INPUT_CHECKBOX = 0;
var __INPUT_DATE = 0;
var __INPUT_DATETIME = 0;
var __INPUT_DATETIME_LOCAL = 0;
var __INPUT_EMAIL = 0;
var __INPUT_FILE = 0;
var __INPUT_MONTH = 0;
var __INPUT_NUMBER = 0;
var __INPUT_PASSWORD = 0;
var __INPUT_RADIO = 0;
var __INPUT_RANGE = 0;
var __INPUT_SEARCH = 0;
var __INPUT_TEL = 0;
var __INPUT_TEXT = 0;
var __INPUT_TIME = 0;
var __INPUT_URL = 0;
var __INPUT_WEEK = 0;
var __TOGGLE_GROUP = 0;
var __BUTTON = 0;
var __SELECT = 0;
var __OPTION = 0;
var __TEXTAREA = 0;
var __FORM = 0;
// Help functions
if (!String.prototype.format) {
String.prototype.format = function() {
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
}
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(prefix) {
return this.slice(0, prefix.length) === prefix;
};
}
if (!String.prototype.endsWith) {
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
}
if (!String.prototype.capitalize) {
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
}
function inherit(proto) {
function F() {}
F.prototype = proto;
return new F;
}
/*
e.g.
var schema = {
form: {form_title: "Test #1", ribbon_bg: "somePicture", form_description: ""},
// for more avaliable settings, check the attributes of classes for each type
"Question #1": {type: "short answer", label: ""},
"Question #2": {type: "password"},
"Question #3": {type: "checkbox", labels: ["option1", "option2"], images:[1, 2], values:[1, 2, 3, 4]},
"Question #4": {type: "radio", labels: ["option1", "option2"]}, // will automatically fill valuse
"Question #5": {type: "range"},
// not display question
"Question #6": {type: "dropdown", needQuestion: false},
// insert paragraph (similar for form)
"Question #7": {type: "long answer", question_description: ""}, // better styled
"Question #8
Contents
": {type: "long answer"},
onSubmit: {label: "Next"}
};
*/
function createForm(display_element, opt) {
opt.form = opt.form || {};
var form = new Form(display_element, opt.form);
var form_id = form.id;
var tags = [];
tags.push(form);
for (var i in Object.keys(opt)) {
i = Object.keys(opt)[i]
if (i == "form" || i == "onSubmit")
continue;
item = opt[i]
item.question = item.question || i;
var type = item.type;
var tag;
switch(type) {
// major uses
case "short answer":
item.type = "text";
case "text":
tag = new InputText(form_id, item);
break;
case "long answer":
item.type = "textarea";
case "textarea":
tag = new Textarea(form_id, item);
break;
case "dropdown":
tag = new Dropdown(form_id, item);
break;
case "checkbox":
case "switch":
case "radio":
tag = new ToggleGroup(form_id, item);
break;
case "range":
tag = new Range(form_id, item);
break;
// minor features
case "date":
tag = new InputDate(form_id, item);
break;
case "datetime":
tag = new InputDatetime(form_id, item);
break;
case "datetime-local":
tag = new InputDatetimeLocal(form_id, item);
break;
case "email":
tag = new InputEmail(form_id, item);
break;
case "file":
tag = new UploadFile(form_id, item);
break;
case "month":
tag = new InputMonth(form_id, item);
break;
case "password":
tag = new InputPassword(form_id, item);
break;
case "search":
tag = new InputSearch(form_id, item);
break;
case "telephone":
tag = new InputTel(form_id, item);
break;
case "time":
tag = new InputTime(form_id, item);
break;
case "url":
tag = new InputUrl(form_id, item);
break;
case "week":
tag = new InputWeek(form_id, item);
break;
}
tags.push(tag);
}
var button = new Button(form_id, opt.onSubmit);
tags.push(button);
return tags;
}
/*
############################################################
# Form
# Form does the following: render a MDL style form
#
# Arbitrary settings:
# item.type <-- automatically assigned
# item.id <-- automatically assigned
#
# @param parent_id --> the id of its parent element
# @param item --> a set of values for setting
# @param item.form_title
# @param item.form_title_size
# @param item.form_title_color
# @param item.form_description
# @param item.form_description_color
# @param item.form_description_size
# layout settings:
# @param item.layout_color
# @param item.ribbon_color
# @param item.ribbon_height
# @param item.ribbon_bg
# @param item.ribbon_bg_size
# @param item.content_bg_color
# @param item.content_text_color
############################################################
# @return
#
############################################################
*/
function Form(display_element, item = {}) {
this.type = "form";
this.display_element = display_element || "body";
this.id = item.id || "{0}_{1}".format(this.type, __FORM++);
this.layout_color = item.layout_color || "grey-300";
this.ribbon_color = item.ribbon_color || '#3F51B5';
this.ribbon_height = item.ribbon_height || '40vh';
this.ribbon_bg = (item.ribbon_bg) ? "background: url({0});".format(item.ribbon_bg) : "";
this.ribbon_bg_size = item.ribbon_bg_size || "background-size: contain cover;";
this.ribbon = ''.format(
this.ribbon_height, this.ribbon_color, this.ribbon_bg, this.ribbon_bg_size);
this.content_bg_color = item.content_bg_color || "grey-100";
this.context_text_color = item.context_text_color || "black-800";
this.form_title = item.form_title || "Untitled Form";
this.form_title_size = item.form_title_size || "40px";
this.form_title_color = item.form_title_color || "black-800";
this.form_description = item.form_description || "";
this.form_description_size = item.form_description_size || "12px";
this.form_description_color = item.form_description_color || "grey-600";
if (this.form_description)
this.form_description = '