mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-13 00:58:12 +00:00
596 lines
20 KiB
JavaScript
596 lines
20 KiB
JavaScript
// 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; //working on
|
|
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; //working on
|
|
var __TEXTAREA = 0;
|
|
|
|
var __FORM = 0;
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
// need to work on submit
|
|
function Form(display_element, opt = {}) {
|
|
this.type = "form";
|
|
this.display_element = display_element || "body";
|
|
this.id = opt.id || "{0}_{1}".format(this.type, __FORM++);
|
|
|
|
this.layout_color = opt.layout_color || "grey-300";
|
|
|
|
this.ribbon_color = opt.ribbon_color || '#3F51B5';
|
|
this.ribbon_height = opt.ribbon_height || '40vh';
|
|
this.ribbon_bg = (opt.ribbon_bg) ? "background: url({0});".format(opt.ribbon_bg) : "";
|
|
this.ribbon_bg_size = opt.ribbon_bg_size || "background-size: contain cover;";
|
|
|
|
this.ribbon = '<div style="height: {0};-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;background-color: {1};{2}{3}"></div>'.format(
|
|
this.ribbon_height, this.ribbon_color, this.ribbon_bg, this.ribbon_bg_size);
|
|
|
|
this.content_bg_color = opt.content_bg_color || "grey-100";
|
|
this.context_text_color = opt.context_text_color || "black-800";
|
|
this.form_title = opt.form_title || "Untitled Form";
|
|
|
|
this.form_title_size = opt.form_title_size || "40px";
|
|
this.form_title_color = opt.form_title_color || "black-800";
|
|
this.form_title = '<label style="font-size: {0};padding-bottom: 40px; font-weight: bolder;" class="mdl-layout-title mdl-color-text--{1}">{2}</label>'.format(
|
|
this.form_title_size, this.form_title_color, this.form_title)
|
|
|
|
this.content = '<main class="mdl-layout__content" style="margin-top: -35vh;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;">\
|
|
<div class="mdl-grid" style="max-width: 1600px;width: calc(100% - 16px);margin: 0 auto;margin-top: 10vh;">\
|
|
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>\
|
|
<div class="mdl-color--{0} mdl-shadow--4dp mdl-cell mdl-cell--8-col" style="border-radius: 2px;padding: 80px 56px;margin-bottom: 80px;">\
|
|
<div class="mdl-color-text--{1}" id="{2}" style="width: 512px;">{3}</div></div>\
|
|
<div class="mdl-layout mdl-color-text--grey-600" style="text-align: center; font-size: 12px; margin-top: -60px">\
|
|
This content is neither created nor endorsed by jsPsych.\
|
|
</div><div class="mdl-layout mdl-color-text--grey-700" style="text-align: center; font-size: 19px; margin-top: -30px">\
|
|
jsPsych Forms</div></div></main>'.format(
|
|
this.content_bg_color, this.context_text_color, this.id, this.form_title);
|
|
|
|
|
|
this.html = '<form><div class="mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--{0}">{1}{2}</div></form>'.format(
|
|
this.layout_color, this.ribbon, this.content);
|
|
|
|
this.render();
|
|
}
|
|
Form.prototype.render = function() {
|
|
$(this.display_element).html(this.html);
|
|
}
|
|
|
|
|
|
function Tag(parent_id, item) {
|
|
// standard attributs
|
|
this.parent_id = parent_id;
|
|
|
|
this.label = item.label || "";
|
|
this.value = item.value || "";
|
|
this.name = item.name || "";
|
|
this.type = item.type || "";
|
|
this.id = item.id || "";
|
|
this.name = item.name || this.id;
|
|
this.question_color = item.question_color || "black-800";
|
|
this.question = "";
|
|
if (item.needQuestion) {
|
|
this.question = item.question || "Untitled Question";
|
|
this.question = '<label class="mdl-layout-title mdl-color-text--{0}" style="font-weight: bold;" >{1}</label>'.format(this.question_color, this.question);
|
|
}
|
|
|
|
//default settings
|
|
// this.newline = (item.newline == false) ? false : true;
|
|
this.newline = item.newline || false;
|
|
this.disabled = (item.disabled) ? 'disabled="disabled"' : "";
|
|
this.maxlength = item.maxlength || "";
|
|
this.readonly = (item.readonly) ? 'readonly="readonly"' : "";
|
|
this.required = (item.required) ? 'required="required"' : "";
|
|
this.autofocus = (item.autofocus) ? 'autofocus="autofocus"' : "";
|
|
this.size = item.size || "";
|
|
|
|
this.html = "";
|
|
}
|
|
Tag.prototype = {
|
|
render: function() {
|
|
if (this.newline)
|
|
this.html = "<br>" + this.html;
|
|
$("#{0}".format(this.parent_id)).append(this.html);
|
|
}
|
|
}
|
|
|
|
|
|
function Button(parent_id, item = {}) {
|
|
item.id = item.id || "{0}_{1}".format(item.type, __BUTTON++);
|
|
item.type = item.type || "button";
|
|
Tag.call(this, parent_id, item);
|
|
|
|
//MDL style
|
|
this.addon = ""
|
|
this.buttonStyle = item.buttonStyle || "raise";
|
|
switch (this.buttonStyle) {
|
|
case "raise":
|
|
this.addon += " mdl-button--raised";
|
|
break;
|
|
case "fab":
|
|
this.addon += " mdl-button--fab";
|
|
break;
|
|
case "minifab":
|
|
this.addon += " mdl-button--mini-fab";
|
|
break;
|
|
case "icon":
|
|
this.addon += " mdl-button--icon";
|
|
break;
|
|
}
|
|
|
|
this.color = (item.color == false) ? false : true;
|
|
this.addon += ((this.color) ? " mdl-button--colored" : "");
|
|
this.primary = item.primary || false;
|
|
this.addon += ((this.primary) ? " mdl-button--primary" : "");
|
|
this.accent = item.accent || false;
|
|
this.addon += ((this.accent) ? " mdl-button--accent" : "");
|
|
this.ripple = (item.ripple == false) ? false : true;
|
|
this.addon += ((this.ripple) ? " mdl-js-ripple-effect" : "");
|
|
|
|
this.style = "mdl-button mdl-js-button" + this.addon;
|
|
|
|
this.label = item.label || "Button";
|
|
this.value = item.value || "";
|
|
this.onclick = item.onclick || "";
|
|
|
|
|
|
this.icon = item.icon || "";
|
|
if (this.icon != "")
|
|
this.icon = '<i class="material-icons">{0}</i>'.format(this.icon);
|
|
|
|
this.html = '<div><button class="{0}" id="{1}" type="{2}" value="{3}" {4} form="{5}" onclick="{6}" name="{9}">{7}{8}</button></div>'.format(
|
|
this.style, this.id, this.type, this.value, this.disabled, this.parent_id, this.onclick, this.icon, this.label, this.name);
|
|
|
|
this.render();
|
|
}
|
|
Button.prototype = inherit(Tag.prototype);
|
|
|
|
function UploadFile(parent_id, item = {}) {
|
|
item.type = "file";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_FILE++);
|
|
Tag.call(this, parent_id, item);
|
|
|
|
this.label_id = "label_{0}".format(this.id);
|
|
this.fileType = item.fileType || "Upload a file from here";
|
|
this.icon = item.icon || "cloud_upload";
|
|
this._style = 'style="position:absolute;top: 0;right: 0;width: 300px;height: 100%;z-index: 4;cursor: pointer;opacity: 0"';
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
|
|
var label_id = this.label_id;
|
|
$("#{0}".format(this.id)).change(function() {
|
|
$("#{0}".format(label_id)).val(this.files[0].name);
|
|
$("#{0}".format(label_id)).text(this.files[0].name);
|
|
});
|
|
};
|
|
UploadFile.prototype = inherit(Tag.prototype);
|
|
UploadFile.prototype._generate = function() {
|
|
var html = '<div class="mdl-textfield mdl-js-textfield" style="box-sizing: border-box;">\
|
|
<input id="{3}" class="mdl-textfield__input" readonly placeholder="{4}">\
|
|
<label class="mdl-textfield__label" for="{3}"></label></div>\
|
|
<div class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon" style="right: 0;">\
|
|
<i class="material-icons">{0}</i>\
|
|
<input type="file" id="{1}" {2} style="padding-botton: 36px"></div>'.format(
|
|
this.icon, this.id, this._style, this.label_id, this.fileType
|
|
)
|
|
|
|
return html
|
|
}
|
|
|
|
function InputTextField(parent_id, item) {
|
|
item.needQuestion = (item.needQuestion == false) ? false : true;
|
|
Tag.call(this, parent_id, item);
|
|
|
|
//MDL style
|
|
this.expandable = item.expandable || false;
|
|
this.expandable = (this.expandable) ? " mdl-textfield--expandable" : "";
|
|
this.floating = item.floating || false;
|
|
this.floating = (this.floating) ? " mdl-textfield--floating-label" : "";
|
|
this.style = "mdl-textfield mdl-js-textfield{0}{1}".format(this.expandable, this.floating);
|
|
|
|
this.icon = item.icon || "";
|
|
this.pattern = item.pattern || ".*";
|
|
this.errorInfo = item.errorInfo || "Your input is not as required!";
|
|
|
|
//attributes
|
|
this.accessKey = item.accessKey || "";
|
|
this.defaultValue = item.defaultValue || "";
|
|
this.alt = item.alt || "";
|
|
this.tabIndex = item.tabIndex || "";
|
|
}
|
|
InputTextField.prototype = inherit(Tag.prototype);
|
|
InputTextField.prototype._generate = function() {
|
|
var component = '<input class="mdl-textfield__input" type="{0}" id="{1}" maxlength="{2}" size="{3}"\
|
|
{4} {5} pattern="{6}" {7} {8} {9} {10} {11} {12} value="{13}" form="{14}">'.format(
|
|
this.type, this.id, this.maxlength, this.size,
|
|
this.required, this.readonly, this.pattern,
|
|
this.disabled, this.autofocus, this.accessKey,
|
|
this.alt, this.defaultValue, this.tabIndex,
|
|
this.value, this.parent_id) +
|
|
'<label class="mdl-textfield__label" for="{0}">{1}</label>'.format(this.id, this.label) +
|
|
'<span class="mdl-textfield__error">{0}</span>'.format(this.errorInfo);
|
|
|
|
if (this.expandable != "")
|
|
component = '<div class="mdl-textfield__expandable-holder">' + component + '</div>';
|
|
|
|
if (this.icon != "")
|
|
component = '<label class="mdl-button mdl-js-button mdl-button--icon" for="{0}"><i class="material-icons">{1}</i></label>'.format(this.id, this.icon) + component;
|
|
|
|
return '<div class="{0}">{1}<div>'.format(this.style, component);
|
|
};
|
|
InputTextField.prototype.render = function() {
|
|
this.html = this.question + this.html;
|
|
if (this.newline)
|
|
this.html = "<br>" + this.html;
|
|
$("#{0}".format(this.parent_id)).append(this.html);
|
|
}
|
|
|
|
function InputDate(parent_id, item = {}) {
|
|
item.type = "date";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_DATE++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputDate.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputDatetime(parent_id, item = {}) {
|
|
item.type = "datetime";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_DATETIME++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputDatetime.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputDatetimeLocal(parent_id, item = {}) {
|
|
item.type = "datetime-local";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_DATETIME_LOCAL++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputDatetimeLocal.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputEmail(parent_id, item = {}) {
|
|
item.type = "email";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_EMAIL++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter you email...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputEmail.prototype = inherit(InputTextField.prototype);
|
|
|
|
|
|
function InputMonth(parent_id, item = {}) {
|
|
item.type = "month";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_MONTH++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputMonth.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputNumber(parent_id, item = {}) {
|
|
item.type = "number";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_NUMBER++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter a number...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputNumber.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputPassword(parent_id, item = {}) {
|
|
item.type = "password";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_PASSWORD++);
|
|
item.needQuestion = item.needQuestion || false;
|
|
item.floating = (item.floating == false) ? false : true;
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter your password...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputPassword.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputSearch(parent_id, item = {}) {
|
|
item.type = "search";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_SEARCH++);
|
|
item.expandable = (item.expandable == false) ? false : true;
|
|
item.floating = (item.expandable) ? false : true;
|
|
item.icon = item.icon || "search";
|
|
item.needQuestion = false;
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputSearch.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputTel(parent_id, item = {}) {
|
|
item.type = "tel";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_TEL++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter your telephone number...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputTel.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputText(parent_id, item = {}) {
|
|
item.type = "text";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_TEXT++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter some texts...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputText.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputTime(parent_id, item = {}) {
|
|
item.type = "time";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_TIME++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.name = item.name || this.id;
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputTime.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputUrl(parent_id, item = {}) {
|
|
item.type = "url";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_URL++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.label = item.label || "Please enter the url...";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputUrl.prototype = inherit(InputTextField.prototype);
|
|
|
|
function InputWeek(parent_id, item = {}) {
|
|
item.type = "week";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_WEEK++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
InputWeek.prototype = inherit(InputTextField.prototype);
|
|
|
|
|
|
function Textarea(parent_id, item = {}) {
|
|
item.type = "textarea";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __TEXTAREA++);
|
|
InputTextField.call(this, parent_id, item);
|
|
|
|
this.name = item.name || this.id;
|
|
this.placeholder = item.placeholder || "Text lines";
|
|
this.cols = item.cols || "30";
|
|
this.rows = item.rows || "10";
|
|
this.wrap = (item.wrap) ? 'wrap="' + item.wrap + '" ' : "";
|
|
|
|
this.html = this._generate();
|
|
this.render();
|
|
}
|
|
Textarea.prototype = inherit(Tag.prototype);
|
|
Textarea.prototype._generate = function() {
|
|
var component = '<textarea class="mdl-textfield__input" id="{0}" rows={1} columns={2} form="{4}" maxlength="{4}" {5} {6} {7} {8} {9} name="{10}"></textarea>'.format(
|
|
this.id, this.rows, this.cols, this.parent_id, this.maxlength, this.readonly, this.required, this.disabled, this.autofocus, this.wrap, this.name) +
|
|
'<label class="mdl-textfield__label" for="{0}">{1}</label>'.format(this.id, this.placeholder);
|
|
|
|
return this.question + '<div class="{0}">{1}<div>'.format(this.style, component);
|
|
}
|
|
|
|
function Toggle(parent_id, item = {}) {
|
|
item.newline = item.newline || false;
|
|
Tag.call(this, parent_id, item);
|
|
|
|
// settings for mdl
|
|
// this.type --> type as a <input> tag
|
|
// this.type_class --> template of different type class in mdl i.e. checkbox switch...
|
|
// this.content_class --> template of different content class in mdl
|
|
this.ripple = (item.ripple == false) ? false : true;
|
|
this.toggle_type = item.toggle_type;
|
|
|
|
this.value = item.value || this.label;
|
|
|
|
this.checked = (item.checked) ? 'checked="checked"' : "";
|
|
}
|
|
Toggle.prototype = inherit(Tag.prototype);
|
|
Toggle.prototype._generate = function() {
|
|
var addon = "";
|
|
addon += ((this.ripple) ? " mdl-js-ripple-effect" : "");
|
|
|
|
var html = '<label for="{0}" class="mdl-{1} mdl-js-{1}{2}">'.format(
|
|
this.id, this.toggle_type, addon
|
|
);
|
|
html += '<input type="{0}" id="{1}" class="{2}" form="{3}" {4} {5} {6} value="{7}" name="{8}">'.format(
|
|
this.type, this.id, this.type_class, this.parent_id, this.checked, this.autofocus, this.required, this.value, this.name
|
|
);
|
|
html += this.content_class + '</label>'
|
|
|
|
return html;
|
|
};
|
|
|
|
function Checkbox(parent_id, item = {}) {
|
|
item.type = "checkbox";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_CHECKBOX++);
|
|
item.toggle_type = "checkbox";
|
|
item.label = item.label || "Checkbox #{0}".format(__INPUT_CHECKBOX - 1);
|
|
Toggle.call(this, parent_id, item);
|
|
|
|
this.type_class = 'mdl-checkbox__input';
|
|
var isImage = this.label.startsWith("<div") && this.label.endsWith("</div>")
|
|
if (!isImage)
|
|
this.content_class = '<span class="mdl-checkbox__label">{0}</span>'.format(this.label);
|
|
else
|
|
this.content_class = '<span class="mdl-checkbox__label">{0}</span>'.format(this.value);
|
|
|
|
this.html = this._generate();
|
|
if (isImage)
|
|
this.html += this.label;
|
|
}
|
|
Checkbox.prototype = inherit(Toggle.prototype);
|
|
|
|
function Switch(parent_id, item = {}) {
|
|
item.type = "checkbox";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_CHECKBOX++);
|
|
item.toggle_type = "switch";
|
|
item.label = item.label || "Switch #{0}".format(__INPUT_CHECKBOX - 1);
|
|
Toggle.call(this, parent_id, item);
|
|
|
|
this.type_class = 'mdl-switch__input';
|
|
var isImage = this.label.startsWith("<div") && this.label.endsWith("</div>")
|
|
if (!isImage)
|
|
this.content_class = '<span class="mdl-switch__label">{0}</span>'.format(this.label);
|
|
else
|
|
this.content_class = '<span class="mdl-switch__label">{0}</span>'.format(this.value);
|
|
|
|
this.html = this._generate();
|
|
if (isImage)
|
|
this.html += this.label;
|
|
}
|
|
Switch.prototype = inherit(Toggle.prototype);
|
|
|
|
function Radio(parent_id, item = {}) {
|
|
item.type = "radio";
|
|
item.id = item.id || "{0}_{1}".format(item.type, __INPUT_RADIO++);
|
|
item.toggle_type = "radio";
|
|
item.label = item.label || "Radio #{0}".format(__INPUT_RADIO - 1);
|
|
Toggle.call(this, parent_id, item);
|
|
|
|
this.type_class = 'mdl-radio__button';
|
|
var isImage = this.label.startsWith("<div") && this.label.endsWith("</div>")
|
|
if (!isImage)
|
|
this.content_class = '<span class="mdl-radio__label">{0}</span>'.format(this.label);
|
|
else
|
|
this.content_class = '<span class="mdl-radio__label">{0}{1}</span>'.format(this.value, this.label);
|
|
|
|
this.html = this._generate();
|
|
}
|
|
Radio.prototype = inherit(Toggle.prototype);
|
|
|
|
function ToggleGroup(parent_id, item) {
|
|
item.id = item.id || "Toggle group_{0}".format(__TOGGLE_GROUP++);
|
|
item.type = item.type || "checkbox";
|
|
item.name = item.name || item.id;
|
|
item.needQuestion = (item.needQuestion == false) ? false : true;
|
|
item.images = item.images || [];
|
|
item.labels = item.labels || [];
|
|
item.values = item.values || [];
|
|
Tag.call(this, parent_id, item);
|
|
|
|
for (var i in item.labels) {
|
|
if (item.values.length < item.labels.length)
|
|
item.values.push(item.labels[i]);
|
|
}
|
|
if (item.images.length > 0) {
|
|
for (var i in item.images) {
|
|
item.labels.push('<div class="mdl-card mdl-shadow--2dp" \
|
|
style="width: 256px;height: 256px;background: url({0}) center/cover;"></div>'.format(item.images[i]));
|
|
if (item.values.length < item.labels.length)
|
|
item.values.push(item.images[i]);
|
|
}
|
|
}
|
|
this.values = item.values;
|
|
this.labels = item.labels;
|
|
|
|
this.html = "";
|
|
var factory = this._selector();
|
|
|
|
for (var i in this.labels) {
|
|
item.label = this.labels[i];
|
|
item.value = this.values[i];
|
|
item.id = ""; // initialize item.id
|
|
this.html += factory(this.parent_id, item).html + "\n";
|
|
}
|
|
this.html = this.question + "<br><div>" + this.html + "</div><br>"
|
|
this.render();
|
|
}
|
|
ToggleGroup.prototype = inherit(Tag.prototype);
|
|
ToggleGroup.prototype._selector = function() {
|
|
switch (this.type) {
|
|
case "checkbox":
|
|
return function(parent_id, item) {
|
|
return new Checkbox(parent_id, item);
|
|
}
|
|
case "switch":
|
|
return function(parent_id, item) {
|
|
return new Switch(parent_id, item);
|
|
}
|
|
case "radio":
|
|
return function(parent_id, item) {
|
|
return new Radio(parent_id, item);
|
|
}
|
|
}
|
|
}
|
|
|