From 20b8f97d3bc7ae4cd3a2b2131e9059cfb933cfc6 Mon Sep 17 00:00:00 2001
From: Rafael Ostertag <rafael.ostertag@math.uzh.ch>
Date: Mon, 2 May 2016 17:26:13 +0200
Subject: [PATCH] FormGroup.js: readonly and and disabled html form elements
are the same in our problem domain.
---
javascript/src/Element/FormGroup.js | 87 +++++++----------------------
javascript/src/QfqForm.js | 4 +-
mockup/readonly.html | 2 +-
3 files changed, 23 insertions(+), 70 deletions(-)
diff --git a/javascript/src/Element/FormGroup.js b/javascript/src/Element/FormGroup.js
index 0d893d32e..622b9331f 100644
--- a/javascript/src/Element/FormGroup.js
+++ b/javascript/src/Element/FormGroup.js
@@ -86,88 +86,39 @@ QfqNS.Element = QfqNS.Element || {};
return this.$helpBlock.length > 0;
};
+ /**
+ * @deprecated
+ *
+ * Read-only is mapped onto setEnabled(). We do not distinguish between those two.
+ *
+ * @param readonly
+ */
+ n.FormGroup.prototype.setReadOnly = function (readonly) {
+ this.setEnabled(!readonly);
+ };
+
n.FormGroup.prototype.setEnabled = function (enabled) {
- this.$formGroup.data("enabled", enabled);
this.$element.prop('disabled', !enabled);
- // Test if we're not readonly, if so set classes. This is required because we share `text-muted` with the
- // readonly-state
- if (this.$formGroup.data("readonly") !== true) {
- if (enabled) {
- this.$formGroup.removeClass("text-muted");
- } else {
- this.$formGroup.addClass("text-muted");
- }
- }
-
if (enabled) {
+ this.$formGroup.removeClass("text-muted");
this.$label.removeClass("disabled");
- this.$element.parents("div[class=radio]").removeClass("disabled");
+ this.$element.parents("div.radio").removeClass("disabled");
} else {
+ this.$formGroup.addClass("text-muted");
this.$label.addClass("disabled");
- this.$element.parents("div[class=radio]").addClass("disabled");
- }
- };
-
- n.FormGroup.prototype.setReadOnly = function (readonly) {
- this.$formGroup.data("readonly", readonly);
- this.$element.prop('readonly', readonly);
- this.handleReadOnlyEmulationIfRequired(readonly);
-
- // Test if we're enabled, if so set classes. This is required because we share `text-muted` with the
- // enabled-state
- if (this.$formGroup.data("enabled") !== false) {
- if (readonly) {
- this.$formGroup.addClass("text-muted");
- } else {
- this.$formGroup.removeClass("text-muted");
- }
- }
-
- if (readonly) {
- this.$label.addClass("readonly");
- } else {
- this.$formGroup.removeClass("readonly");
+ this.$element.parents("div.radio").addClass("disabled");
}
};
- /**
- * @private
- * @param readonlyState
- */
- n.FormGroup.prototype.handleReadOnlyEmulationIfRequired = function (readonlyState) {
- if (!this.readOnlyEmulationRequired()) {
- return;
- }
-
- if (readonlyState) {
- // In case we're called with readonlyState===true twice in a row, make sure only one handler will be
- // active at a time
- this.$element.off('click', this.readOnlyHandler);
- this.$element.on('click', this.readOnlyHandler);
+ n.FormGroup.prototype.setHidden = function (hidden) {
+ if (hidden) {
+ this.$formGroup.addClass("hidden");
} else {
- this.$element.off('click', this.readOnlyHandler);
+ this.$formGroup.removeClass("hidden");
}
};
- n.FormGroup.prototype.readOnlyEmulationRequired = function () {
- // Keep this at top, since select does not feature the type attribute.
- if (n.readOnlyIgnored.indexOf(this.$element[0].nodeName.toLowerCase())) {
- return true;
- }
-
- if (!this.$element[0].hasAttribute('type')) {
- // if there is no type attribute, browsers default to text, which is `properly implements` read only.
- return false;
- }
- if (n.readOnlyIgnored.indexOf(this.$element[0].getAttribute('type').toLowerCase())) {
- return true;
- }
-
-
- return false;
- };
-
/**
* Read Only click handler.
diff --git a/javascript/src/QfqForm.js b/javascript/src/QfqForm.js
index 2a48e4572..b91135cb5 100644
--- a/javascript/src/QfqForm.js
+++ b/javascript/src/QfqForm.js
@@ -634,10 +634,12 @@ var QfqNS = QfqNS || {};
}
if (configurationItem.readonly !== undefined) {
- element.setReadOnly(configurationItem.readonly);
+ // Readonly and disabled is the same in our domain
+ element.setEnabled(!configurationItem.readonly);
}
if (configurationItem.disabled !== undefined) {
+ // Readonly and disabled is the same in our domain
element.setEnabled(!configurationItem.disabled);
}
diff --git a/mockup/readonly.html b/mockup/readonly.html
index 0ac97f673..8ac01fe08 100644
--- a/mockup/readonly.html
+++ b/mockup/readonly.html
@@ -110,7 +110,7 @@
$(function () {
var textInput, select, radio, checkbox;
- textInput = new QfqNS.Element.Text($('#text'));
+ textInput = new QfqNS.Element.Textual($('#text'));
select = new QfqNS.Element.Select($('#select'));
radio = new QfqNS.Element.Radio($('input[type=radio]'));
checkbox = new QfqNS.Element.Checkbox($('#checkbox'));
--
GitLab