Skip to content

Commit a4cf9b3

Browse files
dmitry-kurmanovdmitry-kurmanov
committed
added readOnly mode (readOnlyChangedCallback )
1 parent c45c88e commit a4cf9b3

File tree

6 files changed

+68
-66
lines changed

6 files changed

+68
-66
lines changed

‎src/emotionsratings.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function init(Survey, $) {
1515
return question.getType() === "emotionsratings";
1616
},
1717
isDefaultRender: false,
18-
htmlTemplate: "<div><div></div></div>",
18+
htmlTemplate: "<div></div>",
1919
activatedByChanged: function(activatedBy) {
2020
Survey.JsonObject.metaData.addClass(
2121
"emotionsratings",
@@ -57,26 +57,29 @@ function init(Survey, $) {
5757
bgEmotion: "happy",
5858
emotions: emotionsArray,
5959
color: "#FF0066",
60-
initialRating: question.value || 0,
61-
disabled: question.isReadOnly,
6260
onUpdate: function(value) {
6361
question.value = value;
6462
}
6563
};
66-
$(el)
67-
.find("div")
68-
.emotionsRating(options);
69-
question.valueChangedCallback = function() {
64+
initWidget();
65+
66+
question.valueChangedCallback = initWidget;
67+
question.readOnlyChangedCallback = initWidget;
68+
69+
function initWidget() {
7070
el.innerHTML = "<div></div>";
71-
options.initialRating = question.value;
71+
$(el).off();
72+
options.initialRating = question.value || 0;
73+
options.disabled = question.isReadOnly;
7274
$(el)
7375
.find("div")
7476
.emotionsRating(options);
75-
};
77+
}
7678
},
7779
willUnmount: function(question, el) {
7880
el.innerHTML = null;
7981
$(el).off();
82+
question.readOnlyChangedCallback = null;
8083
}
8184
};
8285

‎src/nouislider.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,19 @@ function init(Survey) {
5858
el.setAttribute("disabled", true);
5959
}
6060
question.noUiSlider = slider;
61-
question.noUiSliderEl = el;
6261
question.valueChangedCallback = updateValueHandler;
63-
},
64-
onReadOnlyChanged: function(question) {
65-
var el = question.noUiSliderEl;
66-
if (!el) return;
67-
if (question.isReadOnly) {
68-
el.setAttribute("disabled", true);
69-
} else {
70-
el.removeAttribute("disabled");
62+
question.readOnlyChangedCallback = function() {
63+
if (question.isReadOnly) {
64+
el.setAttribute("disabled", true);
65+
} else {
66+
el.removeAttribute("disabled");
67+
}
7168
}
7269
},
7370
willUnmount: function(question, el) {
7471
question.noUiSlider.destroy();
7572
question.noUiSlider = null;
76-
question.noUiSliderEl = null;
73+
question.readOnlyChangedCallback = null;
7774
}
7875
};
7976

‎src/select2-tagbox.js‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,9 @@ function init(Survey, $) {
7171
updateValueHandler();
7272
};
7373

74-
var readOnlyUpdater = function(sender, options) {
75-
if (options.name === "isReadOnly") {
76-
$el.prop("disabled", question.isReadOnly);
77-
}
74+
question.readOnlyChangedCallback = function() {
75+
$el.prop("disabled", question.isReadOnly);
7876
};
79-
question._readOnlyUpdater = readOnlyUpdater;
80-
question.onPropertyChanged.add(readOnlyUpdater);
8177

8278
question.choicesChangedCallback = updateChoices;
8379
question.valueChangedCallback = updateValueHandler;
@@ -99,10 +95,7 @@ function init(Survey, $) {
9995
.find("select")
10096
.off("select2:select")
10197
.select2("destroy");
102-
if (!!question._readOnlyUpdater) {
103-
question.onPropertyChanged.remove(question._readOnlyUpdater);
104-
question._readOnlyUpdater = undefined;
105-
}
98+
question.readOnlyChangedCallback = null;
10699
}
107100
};
108101

‎src/select2.js‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ function init(Survey, $) {
44
activatedBy: "property",
55
name: "select2",
66
htmlTemplate: "<select style='width: 100%;'></select>",
7-
widgetIsLoaded: function () {
7+
widgetIsLoaded: function() {
88
return typeof $ == "function" && !!$.fn.select2;
99
},
10-
isFit: function (question) {
10+
isFit: function(question) {
1111
if (widget.activatedBy == "property")
1212
return (
1313
question["renderAs"] === "select2" &&
@@ -19,7 +19,7 @@ function init(Survey, $) {
1919
return question.getType() === "select2";
2020
return false;
2121
},
22-
activatedByChanged: function (activatedBy) {
22+
activatedByChanged: function(activatedBy) {
2323
if (!this.widgetIsLoaded()) return;
2424
widget.activatedBy = activatedBy;
2525
Survey.JsonObject.metaData.removeProperty("dropdown", "renderAs");
@@ -42,7 +42,7 @@ function init(Survey, $) {
4242
});
4343
}
4444
},
45-
afterRender: function (question, el) {
45+
afterRender: function(question, el) {
4646
var settings = question.select2Config;
4747
var $el = $(el).is("select") ? $(el) : $(el).find("select");
4848
var othersEl = document.createElement("input");
@@ -55,24 +55,24 @@ function init(Survey, $) {
5555
.get(0)
5656
.appendChild(othersEl);
5757

58-
var updateValueHandler = function () {
58+
var updateValueHandler = function() {
5959
$el.val(question.value).trigger("change");
6060
othersEl.style.display = !question.isOtherSelected ? "none" : "";
6161
};
62-
var updateCommentHandler = function () {
62+
var updateCommentHandler = function() {
6363
othersEl.value = question.comment ? question.comment : "";
6464
};
65-
var othersElChanged = function () {
65+
var othersElChanged = function() {
6666
question.comment = othersEl.value;
6767
};
68-
var updateChoices = function () {
68+
var updateChoices = function() {
6969
$el.select2().empty();
7070

7171
if (settings) {
7272
if (settings.ajax) {
7373
$el.select2(settings);
7474
} else {
75-
settings.data = question.visibleChoices.map(function (choice) {
75+
settings.data = question.visibleChoices.map(function(choice) {
7676
return {
7777
id: choice.value,
7878
text: choice.text
@@ -84,7 +84,7 @@ function init(Survey, $) {
8484
$el.select2({
8585
theme: "classic",
8686
disabled: question.isReadOnly,
87-
data: question.visibleChoices.map(function (choice) {
87+
data: question.visibleChoices.map(function(choice) {
8888
return {
8989
id: choice.value,
9090
text: choice.text
@@ -97,20 +97,16 @@ function init(Survey, $) {
9797
updateCommentHandler();
9898
};
9999

100-
var readOnlyUpdater = function (sender, options) {
101-
if (options.name === "isReadOnly") {
102-
$el.prop("disabled", question.isReadOnly);
103-
}
104-
}
105-
question._readOnlyUpdater = readOnlyUpdater;
106-
question.onPropertyChanged.add(readOnlyUpdater);
100+
question.readOnlyChangedCallback = function() {
101+
$el.prop("disabled", question.isReadOnly);
102+
};
107103

108104
question.choicesChangedCallback = updateChoices;
109105
updateChoices();
110-
$el.on("select2:select", function (e) {
106+
$el.on("select2:select", function(e) {
111107
question.value = e.target.value;
112108
});
113-
$el.on("select2:unselecting", function (e) {
109+
$el.on("select2:unselecting", function(e) {
114110
question.value = null;
115111
});
116112
othersEl.onchange = othersElChanged;
@@ -119,15 +115,12 @@ function init(Survey, $) {
119115
updateValueHandler();
120116
updateCommentHandler();
121117
},
122-
willUnmount: function (question, el) {
118+
willUnmount: function(question, el) {
123119
$(el)
124120
.find("select")
125121
.off("select2:select")
126122
.select2("destroy");
127-
if (!!question._readOnlyUpdater) {
128-
question.onPropertyChanged.remove(question._readOnlyUpdater);
129-
question._readOnlyUpdater = undefined;
130-
}
123+
question.readOnlyChangedCallback = null;
131124
}
132125
};
133126

@@ -138,4 +131,4 @@ if (typeof Survey !== "undefined") {
138131
init(Survey, window.$);
139132
}
140133

141-
export default init;
134+
export default init;

‎src/signature_pad.js‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,19 @@ function init(Survey) {
3030
name: "signaturepad",
3131
title: "Signature pad",
3232
iconName: "icon-signaturepad",
33-
widgetIsLoaded: function () {
33+
widgetIsLoaded: function() {
3434
return typeof SignaturePad != "undefined";
3535
},
3636
penColor: "#1ab394",
37-
isFit: function (question) {
37+
isFit: function(question) {
3838
return question.getType() === "signaturepad";
3939
},
40-
htmlTemplate: "<div class='sjs_sp_container'><div><canvas></canvas></div><div class='sjs_sp_controls'><button type='button' class='sjs_sp_clear' title='Clear'>✖</button></div></div><style>.sjs_sp_container { position: relative; } .sjs_sp_controls { position: absolute; left: 0; bottom: 0; } .sjs_sp_controls > button { user-select: none; }</style>",
41-
activatedByChanged: function (activatedBy) {
40+
htmlTemplate:
41+
"<div class='sjs_sp_container'><div><canvas></canvas></div><div class='sjs_sp_controls'><button type='button' class='sjs_sp_clear' title='Clear'>✖</button></div></div><style>.sjs_sp_container { position: relative; } .sjs_sp_controls { position: absolute; left: 0; bottom: 0; } .sjs_sp_controls > button { user-select: none; }</style>",
42+
activatedByChanged: function(activatedBy) {
4243
Survey.JsonObject.metaData.addClass("signaturepad", [], null, "empty");
43-
Survey.JsonObject.metaData.addProperties("signaturepad", [{
44+
Survey.JsonObject.metaData.addProperties("signaturepad", [
45+
{
4446
name: "allowClear:boolean",
4547
default: true
4648
},
@@ -54,19 +56,30 @@ function init(Survey) {
5456
}
5557
]);
5658
},
57-
afterRender: function (question, el) {
59+
afterRender: function(question, el) {
5860
var rootWidget = this;
5961
var canvas = el.getElementsByTagName("canvas")[0];
6062
var signaturePad = new SignaturePad(canvas);
6163
if (question.isReadOnly) {
6264
signaturePad.off();
6365
}
66+
67+
question.readOnlyChangedCallback = function() {
68+
if (question.isReadOnly) {
69+
signaturePad.off();
70+
document.querySelector(".sjs_sp_clear").disabled = true;
71+
} else {
72+
signaturePad.on();
73+
document.querySelector(".sjs_sp_clear").disabled = false;
74+
}
75+
};
76+
6477
signaturePad.penColor = rootWidget.penColor;
65-
signaturePad.onEnd = function () {
78+
signaturePad.onEnd = function() {
6679
var data = signaturePad.toDataURL();
6780
question.value = data;
6881
};
69-
var updateValueHandler = function () {
82+
var updateValueHandler = function() {
7083
var data = question.value;
7184
canvas.width = question.width;
7285
canvas.height = question.height;
@@ -78,7 +91,7 @@ function init(Survey) {
7891
question.valueChangedCallback = updateValueHandler;
7992
updateValueHandler();
8093
question.signaturePad = signaturePad;
81-
var propertyChangedHandler = function (sender, options) {
94+
var propertyChangedHandler = function(sender, options) {
8295
if (options.name === "width" || options.name === "height") {
8396
updateValueHandler();
8497
}
@@ -87,21 +100,23 @@ function init(Survey) {
87100
question.signaturePad.propertyChangedHandler = propertyChangedHandler;
88101
var buttonEl = el.getElementsByTagName("button")[0];
89102
if (question.allowClear && !question.isReadOnly) {
90-
buttonEl.onclick = function () {
103+
buttonEl.onclick = function() {
91104
question.value = undefined;
92105
};
93106
} else {
94107
buttonEl.parentNode.removeChild(buttonEl);
95108
}
96109
},
97-
willUnmount: function (question, el) {
110+
willUnmount: function(question, el) {
98111
if (question.signaturePad) {
99112
question.onPropertyChanged.remove(
100113
question.signaturePad.propertyChangedHandler
101114
);
102115
question.signaturePad.off();
103116
}
117+
question.readOnlyChangedCallback = null;
104118
question.signaturePad = null;
119+
question.readOnlyChangedCallback = null;
105120
}
106121
};
107122

@@ -112,4 +127,4 @@ if (typeof Survey !== "undefined") {
112127
init(Survey);
113128
}
114129

115-
export default init;
130+
export default init;

‎src/surveyjs-widgets.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ export { default as autocomplete } from "./easy-autocomplete.js";
1313
export { default as prettycheckbox } from "./pretty-checkbox.js";
1414
export { default as bootstrapslider } from "./bootstrap-slider.js";
1515
export { default as microphone } from "./microphone.js";
16+
export { default as emotionsratings } from "./emotionsratings.js";

0 commit comments

Comments
 (0)