Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add ability to define new values on the fly.

  • Loading branch information...
commit de5a6b2d3e5edc55785813a008730b206bd308ea 1 parent 803a5a6
@hlship authored
View
18 tapx-core/src/main/resources/com/howardlewisship/tapx/core/tapx-core.css
@@ -169,4 +169,22 @@ DIV.tx-multiselect .tx-disabled {
filter: alpha(opacity = 25); /* IE 7 */
opacity: .25; /* FireFox, Chrome, Safari */
cursor: default;
+}
+
+DIV.tx-multiselect .tx-input {
+ clear: left;
+ padding-top: 5px;
+}
+
+DIV.tx-multiselect .tx-error {
+ clear: left;
+ display: inline-block;
+ font-weight: bold;
+ font-color: red;
+ padding: 2px 18px 2px 2px;
+ margin-right: 16px;
+ background-color: ead38c;
+ background-image: url(silk/cancel.png);
+ background-repeat: no-repeat;
+ background-position: right center;
}
View
76 tapx-core/src/main/resources/com/howardlewisship/tapx/core/tapx-multiselect.js
@@ -106,6 +106,14 @@ Tapx.extendInitializer(function() {
+ "<div class='tx-title'>Selected:</div>"
+ "<select multiple='multiple'></select></div>");
+ inputDiv = new Element("div", {
+ class : "tx-input"
+ });
+ outerDiv.insert(inputDiv);
+
+ inputDiv.update("<label>Add: <input type='text' size='40'>"
+ + "<span class='tx-error'></div></label>");
+
var availableSelect = mainDiv.down(".tx-available > select");
var selectedSelect = mainDiv.down(".tx-selected > select");
@@ -113,7 +121,7 @@ Tapx.extendInitializer(function() {
var valueId = row[0];
var selected = (spec.values || []).include(valueId);
- var divToUpdate = selected ? selectedSelect : availableSelect;
+ var selectElement = selected ? selectedSelect : availableSelect;
var option = new Element("option").update(row[1]);
@@ -121,13 +129,13 @@ Tapx.extendInitializer(function() {
clientValue : valueId
};
- divToUpdate.insert(option);
+ selectElement.insert(option);
});
function rebuildHiddenFieldValue() {
- // First array is the list of selected values (for values defined by
- // the model) Second array is the list of selected labels (for
- // values added on the client)
+ // First array is the list of selected values (for values
+ // defined by the model at initial render). Second array is the list
+ // of selected labels (for values added on the client)
var hiddenFieldValue = [ [], [] ];
@@ -156,6 +164,64 @@ Tapx.extendInitializer(function() {
rebuildHiddenFieldValue();
});
+ var errorDiv = inputDiv.down('.tx-error');
+
+ errorDiv.hide();
+
+ var inputField = inputDiv.down('input');
+
+ function error(message) {
+ inputField.addClassName("t-error").select();
+ errorDiv.update(message).show();
+ }
+
+ function addNewOption() {
+ var newLabel = inputField.value;
+
+ inputField.removeClassName("t-error");
+ errorDiv.hide().update();
+
+ if (newLabel === "")
+ return;
+
+ var allOptions = $A(availableSelect.options).concat(
+ $A(selectedSelect.options));
+
+ if (allOptions.any(function(opt) {
+ return opt.innerHTML === newLabel
+ })) {
+ error("Value already exists.");
+ return;
+ }
+
+ deselectAllOptions(selectedSelect);
+
+ var option = new Element("option", {
+ selected : true
+ }).update(newLabel);
+
+ option.txValue = {
+ label : newLabel
+ };
+
+ moveOption(option, selectedSelect);
+
+ rebuildHiddenFieldValue();
+
+ inputField.value = '';
+ inputField.focus();
+ }
+
+ inputField.observe("change", addNewOption);
+
+ inputField.observe("keypress", function(event) {
+ if (event.keyCode != Event.KEY_RETURN)
+ return;
+
+ event.stop();
+
+ addNewOption();
+ });
}
return {
Please sign in to comment.
Something went wrong with that request. Please try again.