Skip to content

Commit 266e891

Browse files
merge
2 parents ede230d + 228d31a commit 266e891

File tree

7 files changed

+257
-6
lines changed

7 files changed

+257
-6
lines changed

src/datepicker.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ var widget = {
1111
},
1212
afterRender: function(question, el) {
1313
var $el = $(el).is(".widget-datepicker") ? $(el) : $(el).find(".widget-datepicker");
14-
var widget = $el.datepicker({
14+
var pickerWidget = $el.datepicker({
1515
dateFormat: question.dateFormat,
1616
onSelect: function(dateText) {
1717
question.value = dateText;
1818
}
1919
});
2020
question.valueChangedCallback = function() {
21-
widget.datepicker('setDate', new Date(question.value));
21+
pickerWidget.datepicker('setDate', new Date(question.value));
2222
}
2323
question.valueChangedCallback();
2424
if(!question.value) question.value = new Date();

src/icheck.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ var widget = {
66
isFit : function(question) { var t = question.getType(); return t === 'radiogroup' || t === 'checkbox' || t === 'matrix'; },
77
isDefaultRender: true,
88
afterRender: function(question, el) {
9+
var rootWidget = this;
910
var $el = $(el);
10-
$(el).find('input').data({"iCheck": undefined});
11+
$el.find('input').data({"iCheck": undefined});
12+
1113
$el.find('input').iCheck({
12-
checkboxClass: widget.className,
13-
radioClass: widget.className
14+
checkboxClass: rootWidget.className,
15+
radioClass: rootWidget.className
1416
});
1517
var select = function() {
1618
if(question.getType() != "matrix") {

src/inputmask.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import "./surveyjs_importer.js";
2+
3+
var widget = {
4+
name: "maskedit",
5+
numericGroupSeparator: ',',
6+
numericAutoGroup: true,
7+
numericDigits: 2,
8+
numericDigitsOptional: false,
9+
numericPrefix: '$',
10+
numericPlaceholder: '0',
11+
isFit : function(question) {
12+
if(question.getType() == "multipletext") return true;
13+
return question.getType() == "text" && (question.inputMask != "none" || question.inputFormat);
14+
},
15+
isDefaultRender: true,
16+
activatedByChanged: function(activatedBy) {
17+
if(Survey.JsonObject.metaData.findProperty("text", "inputMask")) return;
18+
var properties = ["inputFormat", {name: "inputMask", default: "none", choices: ["none", "datetime", "currency", "decimal", "email", "phone", "ip"]}];
19+
Survey.JsonObject.metaData.addProperties("text", properties);
20+
Survey.JsonObject.metaData.addProperties("matrixdropdowncolumn", properties);
21+
Survey.JsonObject.metaData.addProperties("multipletextitem", properties);
22+
},
23+
applyInputMask: function(surveyElement, $el) {
24+
var rootWidget = this;
25+
var mask = surveyElement.inputMask != "none" ? surveyElement.inputMask : surveyElement.inputFormat;
26+
var options = {};
27+
if(surveyElement.inputMask != "none") options.inputFormat = surveyElement.inputFormat;
28+
if(surveyElement.inputmask == "currency" || surveyElement.inputmask == "decimal") {
29+
options.groupSeparator = rootWidget.numericGroupSeparator;
30+
options.autoGroup = rootWidget.numericAutoGroup;
31+
}
32+
if(surveyElement.inputmask == "currency") {
33+
options.digits = rootWidget.numericDigits;
34+
options.digitsOptional = rootWidget.numericDigitsOptional;
35+
options.prefix = rootWidget.numericPrefix;
36+
options.placeholder = rootWidget.numericPlaceholder;
37+
}
38+
$el.inputmask(mask, options);
39+
40+
var updateHandler = function() {
41+
$el.inputmask({ setvalue: surveyElement.value });
42+
};
43+
surveyElement.valueChangedCallback = updateHandler;
44+
updateHandler();
45+
},
46+
afterRender: function(question, el) {
47+
if(question.getType() != "multipletext") {
48+
var $el = $(el).is("input") ? $(el) : $(el).find("input");
49+
this.applyInputMask(question, $el);
50+
} else {
51+
for(var i = 0; i < question.items.length; i ++) {
52+
var item = question.items[i];
53+
if(item.inputMask != "none" || item.inputFormat) {
54+
var $el = $(el).find("#" + item.id);
55+
if($el) {
56+
this.applyInputMask(item, $el);
57+
}
58+
}
59+
}
60+
}
61+
},
62+
willUnmount: function(question, el) {
63+
$(el).find("input").inputmask('remove');
64+
}
65+
}
66+
67+
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);

src/nouislider.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import "./surveyjs_importer.js";
2+
3+
var widget = {
4+
name: "nouislider",
5+
isFit : function(question) { return question.getType() === 'nouislider'; },
6+
htmlTemplate: "<div></div>",
7+
activatedByChanged: function(activatedBy) {
8+
Survey.JsonObject.metaData.addClass("nouislider", [], null, "empty");
9+
Survey.JsonObject.metaData.addProperties("nouislider", [{name: "rangeMin:number", default: 0}, {name: "rangeMax:number", default: 100},
10+
{name: "defaultRangeMin:number", default: 30}, {name: "defaultRangeMax:number", default: 70}]);
11+
},
12+
afterRender: function(question, el) {
13+
var startValue = question.value;
14+
if(!startValue || startValue.length != 2) {
15+
startValue = [question.defaultRangeMin, question.defaultRangeMax];
16+
}
17+
if(startValue[0] < question.rangeMin) startValue[0] = question.rangeMin;
18+
if(startValue[0] > question.rangeMax) startValue[0] = question.rangeMax;
19+
if(startValue[1] < startValue[0]) startValue[1] = startValue[0];
20+
if(startValue[1] > question.rangeMax) startValue[1] = question.rangeMax;
21+
question.value = startValue;
22+
23+
el.style.marginBottom = "50px";
24+
var slider = noUiSlider.create(el, {
25+
start: startValue,
26+
connect: true,
27+
pips: {
28+
mode: 'steps',
29+
stepped: true,
30+
density: 4
31+
},
32+
range: {
33+
'min': question.rangeMin,
34+
'max': question.rangeMax
35+
}
36+
});
37+
slider.on('set', function(){
38+
question.value = slider.get();
39+
});
40+
var updateValueHandler = function() {
41+
slider.set(question.value);
42+
};
43+
question.noUiSlider = slider;
44+
question.valueChangedCallback = updateValueHandler;
45+
},
46+
willUnmount: function(question, el) {
47+
question.noUiSlider.destroy();
48+
question.noUiSlider = null;
49+
}
50+
}
51+
52+
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

src/signaturepad.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import "./surveyjs_importer.js";
2+
3+
var widget = {
4+
name: "signaturepad",
5+
penColor: "1ab394",
6+
isFit : function(question) { return question.getType() === 'signaturepad'; },
7+
activatedByChanged: function(activatedBy) {
8+
Survey.JsonObject.metaData.addClass("signaturepad", [], null, "empty");
9+
Survey.JsonObject.metaData.addProperties("signaturepad", [{name: "width:number", default: 300}, {name: "height:number", default: 200}]);
10+
},
11+
afterRender: function(question, el) {
12+
var rootWidget = this;
13+
var canvas = document.createElement('canvas');
14+
canvas.width = question.width;
15+
canvas.height = question.height;
16+
el.appendChild(canvas);
17+
var signaturePad = new SignaturePad(canvas);
18+
if(question.isReadOnly) {
19+
signaturePad.off();
20+
}
21+
signaturePad.penColor = rootWidget.penColor;
22+
signaturePad.onEnd = function() {
23+
var data = signaturePad.toDataURL();
24+
question.value = data;
25+
}
26+
var updateValueHandler = function() {
27+
signaturePad.fromDataURL(question.value);
28+
};
29+
question.valueChangedCallback = updateValueHandler;
30+
updateValueHandler();
31+
question.signaturePad = signaturePad;
32+
},
33+
willUnmount: function(question, el) {
34+
if(question.signaturePad) {
35+
question.signaturePad.off();
36+
}
37+
question.signaturePad = null;
38+
}
39+
}
40+
41+
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

src/sortablelist.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import "./utils/surveyjs_importer.js";
2+
3+
var widget = {
4+
areaStyle: "border: 1px solid #1ab394; width:100%; minHeight:50px",
5+
itemStyle: "background-color:#1ab394;color:#fff;margin:5px;padding:10px;",
6+
name: "sortablelist",
7+
isFit : function(question) { return question.getType() === 'sortablelist'; },
8+
htmlTemplate: "<div></div>",
9+
activatedByChanged: function(activatedBy) {
10+
Survey.JsonObject.metaData.addClass("sortablelist", [{name:"hasOther", visible: false}], null, "checkbox");
11+
Survey.JsonObject.metaData.addProperty("sortablelist", {name: "emptyText", default: "Move items here."});
12+
},
13+
afterRender: function(question, el) {
14+
var rootWidget = this;
15+
el.style.width = "100%";
16+
var resultEl = document.createElement("div");
17+
var emptyEl = document.createElement("span");
18+
var sourceEl = document.createElement("div");
19+
resultEl.style.cssText = rootWidget.areaStyle;
20+
emptyEl.innerHTML = question.emptyText;
21+
resultEl.appendChild(emptyEl);
22+
sourceEl.style.cssText = rootWidget.areaStyle;
23+
sourceEl.style.marginTop = "10px";
24+
el.appendChild(resultEl);
25+
el.appendChild(sourceEl);
26+
var hasValueInResults = function(val) {
27+
res = question.value;
28+
if(!Array.isArray(res)) return false;
29+
for(var i = 0; i < res.length; i ++){
30+
if(res[i] == val) return true;
31+
}
32+
return false;
33+
};
34+
var isUpdatingQuestionValue = false;
35+
var updateValueHandler = function() {
36+
if(isUpdatingQuestionValue) return;
37+
resultEl.innerHTML = "";
38+
resultEl.appendChild(emptyEl);
39+
sourceEl.innerHTML = "";
40+
var wasInResults = false;
41+
question.activeChoices.forEach(function(choice) {
42+
var inResutls = hasValueInResults(choice.value);
43+
wasInResults = wasInResults || inResutls;
44+
var srcEl = inResutls ? resultEl : sourceEl;
45+
var newEl = document.createElement("div");
46+
newEl.innerHTML = "<div style='" + rootWidget.itemStyle + "'>" + choice.text + "</div>";
47+
newEl["data-value"] = choice.value;
48+
srcEl.appendChild(newEl);
49+
});
50+
emptyEl.style.display = wasInResults ? "none" : "";
51+
};
52+
Sortable.create($(resultEl)[0], {
53+
animation: 150,
54+
group: {
55+
name: 'top3',
56+
pull: true,
57+
put: true
58+
},
59+
onSort: function (evt) {
60+
var result = [];
61+
if (evt.to.children.length === 1) {
62+
emptyEl.style.display = "";
63+
} else {
64+
emptyEl.style.display = "none";
65+
for (var i = 1; i < evt.to.children.length; i++) {
66+
result.push(evt.to.children[i].dataset.value)
67+
}
68+
}
69+
isUpdatingQuestionValue = true;
70+
question.value = result;
71+
isUpdatingQuestionValue = false;
72+
}
73+
});
74+
Sortable.create($(sourceEl)[0], {
75+
animation: 150,
76+
group: {
77+
name: 'top3',
78+
pull: true,
79+
put: true
80+
}
81+
});
82+
question.valueChangedCallback = updateValueHandler;
83+
updateValueHandler();
84+
},
85+
willUnmount: function(question, el) {
86+
}
87+
}
88+
89+
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

src/tagbox.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var widget = {
99
},
1010
afterRender: function(question, el) {
1111
var $el = $(el).is("select") ? $(el) : $(el).find("select");
12-
var widget = $el.select2({
12+
$el.select2({
1313
tags: "true",
1414
theme: "classic"
1515
});

0 commit comments

Comments
 (0)