// COST
//
- enyo.kind({
- name: "XV.Cost",
- kind: "XV.Number",
- scale: XT.COST_SCALE
- });
-
enyo.kind({
name: "XV.CostWidget",
kind: "XV.NumberWidget",
// EXTENDED PRICE
//
- enyo.kind({
- name: "XV.ExtendedPrice",
- kind: "XV.Number",
- scale: XT.EXTENDED_PRICE_SCALE
- });
-
enyo.kind({
name: "XV.ExtendedPriceWidget",
kind: "XV.NumberWidget",
// HOURS
//
- enyo.kind({
- name: "XV.Hours",
- kind: "XV.Number",
- maxlength: 12,
- scale: XT.HOURS_SCALE
- });
-
enyo.kind({
name: "XV.HoursWidget",
kind: "XV.NumberWidget",
// PERCENT
//
- enyo.kind({
- name: "XV.Percent",
- kind: "XV.Number",
- scale: XT.PERCENT_SCALE,
- validate: function (value) {
- // this takes the string from the input field and parses it (including understanding commas, which isNaN cannot)
- // if it cannot parse the value, it returns NaN
- value = Globalize.parseFloat(value);
- // use isNaN here because parseFloat could return NaN
- // if you pass NaN into _.isNumber, it will misleadingly return true
- // only bad string and null/undefined cases do we want to fail validation
- return !isNaN(value) ? value / 100 : false;
- },
- valueChanged: function (value) {
- // use isNaN here because this value may be a number string and _isNaN requires
- // a separate falsy check.
- // In this case, it is ok for 0 to fall to the true case, just not null or a bad string
- value = !isNaN(value) ? value * 100 : value;
- XV.Number.prototype.valueChanged.call(this, value);
- }
- });
-
enyo.kind({
name: "XV.PercentWidget",
kind: "XV.NumberWidget",
// PURCHASE PRICE
//
- enyo.kind({
- name: "XV.PurchasePrice",
- kind: "XV.Number",
- scale: XT.PURCHASE_PRICE_SCALE
- });
-
enyo.kind({
name: "XV.PurchasePriceWidget",
kind: "XV.NumberWidget",
// QUANTITY
//
- enyo.kind({
- name: "XV.Quantity",
- kind: "XV.Number",
- maxlength: 12,
- scale: XT.QTY_SCALE
- });
-
enyo.kind({
name: "XV.QuantityWidget",
kind: "XV.NumberWidget",
// QUANTITY PER
//
- enyo.kind({
- name: "XV.QuantityPer",
- kind: "XV.Number",
- scale: XT.QTY_PER_SCALE
- });
-
enyo.kind({
name: "XV.QuantityPerWidget",
kind: "XV.NumberWidget",
// SALES PRICE
//
- enyo.kind({
- name: "XV.SalesPrice",
- kind: "XV.Number",
- scale: XT.SALES_PRICE_SCALE
- });
-
enyo.kind({
name: "XV.SalesPriceWidget",
kind: "XV.NumberWidget",
// UNIT RATIO
//
- enyo.kind({
- name: "XV.UnitRatio",
- kind: "XV.Number",
- scale: XT.UNIT_RATIO_SCALE
- });
-
enyo.kind({
name: "XV.UnitRatioWidget",
kind: "XV.NumberWidget",
// WEIGHT
//
- enyo.kind({
- name: "XV.Weight",
- kind: "XV.Number",
- scale: XT.WEIGHT_SCALE
- });
-
enyo.kind({
name: "XV.WeightWidget",
kind: "XV.NumberWidget",
// see if toggle is on and update params
_.each(keys, function (key) {
_.each(actTypes[key], function (obj) {
- if (that.$[_namify(obj)].getValue()) {
+ // the pluralize function in _namify is imperfect
+ if (that.$[_namify(obj)] && that.$[_namify(obj)].getValue()) {
value.push(obj.type);
}
});
enyo.kind(
/** @lends XV.CheckboxWidget# */{
name: "XV.ComboboxWidget",
- kind: "XV.Input",
+ kind: "XV.InputWidget",
published: {
collection: "",
filter: null,
disabled: false,
keyAttribute: "name",
- label: "",
- showLabel: true,
tabStop: true
},
classes: "xv-combobox xv-input",
this.inherited(arguments);
this.collectionChanged();
this.filterChanged();
- this.labelChanged();
- this.showLabelChanged();
this.tabStopChanged();
},
/**
return models;
},
/**
- @todo Document the labelChanged method.
- */
- labelChanged: function () {
- var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
- this.$.label.setContent(label);
- },
- /**
@todo Document the receiveBlur method.
*/
receiveBlur: function (inSender, inEvent) {
this.autocomplete();
},
- showLabelChanged: function () {
- this.$.label.setShowing(this.getShowLabel());
- },
tabStopChanged: function () {
this.$.input.setAttribute("tabIndex", this.getTabStop() ? null: -1);
},
(function () {
/**
- @name XV.Date
+ @name XV.DateWidget
@class An input control used to specify a date.<br />
Reformats and sets a date entered either as a date type or a string.
If a string is not a recognizable date, sets the input to null.<br />
@extends XV.Input
*/
enyo.kind(
- /** @lends XV.Date# */{
- name: "XV.Date",
- kind: "XV.Input",
+ /** @lends XV.DateWidget# */{
+ name: "XV.DateWidget",
+ kind: "XV.InputWidget",
+ classes: "xv-input xv-datewidget",
published: {
nullValue: null,
nullText: ""
},
+ components: [
+ {kind: "FittableColumns", components: [
+ {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
+ // setting the tag to "div" on the decorator
+ // so that clicks of button don't get redirected back
+ // to the input field (default behavior)
+ {kind: "onyx.InputDecorator", name: "decorator", tag: "div",
+ classes: "xv-input-decorator", components: [
+ {name: "input", kind: "onyx.Input", onchange: "inputChanged",
+ classes: "xv-subinput", onkeydown: "keyDown"},
+ {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
+ classes: "icon-calendar"}
+ ]},
+ {name: "datePickPopup", kind: "onyx.Popup", maxHeight: 400, floating: true,
+ centered: true, modal: true, components: [
+ // TODO: get rid of this inline style
+ {kind: "GTS.DatePicker", name: "datePick", style: "min-width:400px;",
+ onChange: "datePicked"}
+ ]}
+ ]}
+ ],
+
+ /**
+ This function handles a date chosen via the
+ datepicker versus text entered into the input field.
+ */
+ datePicked: function (inSender, inEvent) {
+ var date = inEvent, options = {};
+ // mimic the human-typed behavior
+ this.applyTimezoneOffset(date);
+
+ options.silent = true;
+ this.setValue(date, options);
+ this.$.datePickPopup.hide();
+ this.$.input.focus();
+ },
+ disabledChanged: function () {
+ this.inherited(arguments);
+ this.$.label.addRemoveClass("disabled", this.getDisabled());
+ },
+ /**
+ This function handles the click of the calendar icon
+ that opens the datepicker.
+ */
+ iconTapped: function (inSender, inEvent) {
+ this.$.datePickPopup.show();
+ this.$.datePick.render();
+ },
/**
Returns the value in the input field of the widget.
*/
} else {
value = nullValue;
}
- XV.Input.prototype.setValue.call(this, value, options);
+ XV.InputWidget.prototype.setValue.call(this, value, options);
},
/**
This function takes the value entered into a DateWidget and returns
} else {
value = "";
}
- return XV.Input.prototype.valueChanged.call(this, value);
- }
- });
- /**
- @name XV.DateWidget
- @class An input control consisting of fittable columns.<br />
- Use to implement a styled input field for entering a date
- including associated popup menu for selecting a date.<br />
- Creates an HTML input element.
- @extends XV.Date
- */
- enyo.kind(/** @lends XV.DateWidget# */{
- name: "XV.DateWidget",
- kind: "XV.Date",
- classes: "xv-input xv-datewidget",
- published: {
- label: "",
- showLabel: true
- },
- components: [
- {kind: "FittableColumns", components: [
- {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
- // setting the tag to "div" on the decorator
- // so that clicks of button don't get redirected back
- // to the input field (default behavior)
- {kind: "onyx.InputDecorator", name: "decorator", tag: "div",
- classes: "xv-input-decorator", components: [
- {name: "input", kind: "onyx.Input", onchange: "inputChanged",
- classes: "xv-subinput", onkeydown: "keyDown"},
- {name: "icon", kind: "onyx.Icon", ontap: "iconTapped",
- classes: "icon-calendar"}
- ]},
- {name: "datePickPopup", kind: "onyx.Popup", maxHeight: 400, floating: true,
- centered: true, modal: true, components: [
- // TODO: get rid of this inline style
- {kind: "GTS.DatePicker", name: "datePick", style: "min-width:400px;",
- onChange: "datePicked"}
- ]}
- ]}
- ],
- /**
- @todo Document create method.
- */
- create: function () {
- this.inherited(arguments);
- this.labelChanged();
- this.showLabelChanged();
- },
-
- /**
- This function handles a date chosen via the
- datepicker versus text entered into the input field.
- */
- datePicked: function (inSender, inEvent) {
- var date = inEvent, options = {};
- // mimic the human-typed behavior
- this.applyTimezoneOffset(date);
-
- options.silent = true;
- this.setValue(date, options);
- this.$.datePickPopup.hide();
- this.$.input.focus();
- },
- disabledChanged: function () {
- this.inherited(arguments);
- this.$.label.addRemoveClass("disabled", this.getDisabled());
- },
- /**
- This function handles the click of the calendar icon
- that opens the datepicker.
- */
- iconTapped: function (inSender, inEvent) {
- this.$.datePickPopup.show();
- this.$.datePick.render();
- },
- /**
- Sets the label of the Date Widget with text specified in the kind.
- */
- labelChanged: function () {
- var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
- this.$.label.setContent(label);
- },
- /**
- Sets the visibility of the label of the date widget based on
- the value specified in the kind.
- */
- showLabelChanged: function () {
- if (this.getShowLabel()) {
- this.$.label.show();
- } else {
- this.$.label.hide();
- }
- },
- /**
- Set the date value into the input field and the date picker and
- sets the value to the model.
- */
- valueChanged: function (value) {
- var dateValue = value;
- value = XV.Date.prototype.valueChanged.call(this, value);
if (!this.$.input.value && this.$.input.attributes.value) {
// XXX workaround for incident 19171. Something deep into enyo's
// setters are causing the attributes value to be updated when
// two-step of turning a inputted value into an actual date.
this.$.input.attributes.value = "";
}
- this.$.datePick.setValue(value ? dateValue : new Date());
+
+ this.$.datePick.setValue(value ? value : new Date());
this.$.datePick.render();
+
+ return XV.InputWidget.prototype.valueChanged.call(this, value);
}
});
},
/**
The disabledChanged method, and many below it, are here to deal with
- the fact that XV.Input doesvnot inherit from onyx.input or enyo.input,
+ the fact that XV.Input does not inherit from onyx.input or enyo.input,
and so insofar as it needs to support their APIs, we
have to redeclare the methods and pass through the data.
*/
disabledChanged: function () {
this.$.input.setDisabled(this.getDisabled());
+ this.$.label.addRemoveClass("disabled", this.getDisabled());
},
focus: function () {
this.$.input.focus();
}
},
/**
- @todo Document the placeholderChanged method.
+ Sets the placeholder on the input field.
*/
placeholderChanged: function () {
- var placeholder = this.getPlaceholder();
- this.$.input.setPlaceholder(placeholder);
+ if (_.isFunction(this.$.input.setPlaceholder)) {
+ this.$.input.setPlaceholder(this.placeholder);
+ }
},
/**
Webkit browsers do not always emit the proper change event,
return value;
},
/**
- Pass through attributes intended for onyx input inside.
- */
- setInputStyle: function (style) {
- this.$.input.setStyle(style);
- },
- /**
- Pass through attributes intended for onyx input inside.
+ Sets the type attribute for input field.
*/
typeChanged: function () {
this.$.input.setType(this.getType());
},
+ /**
+ Set the maxlength attribute on the input field.
+ */
maxlengthChanged: function () {
this.$.input.setAttribute("maxlength", this.maxlength);
},
},
/**
- @todo Document the showLabelChanged method.
+ Sets visibility of the widget label.
*/
showLabelChanged: function () {
- if (this.getShowLabel()) {
- this.$.label.show();
- } else {
- this.$.label.hide();
- }
+ this.$.label.setShowing(this.getShowLabel());
}
});
*/
enyo.kind(
/** @lends XV.Number# */{
- name: "XV.Number",
- kind: "XV.Input",
+ name: "XV.NumberWidget",
+ kind: "XV.InputWidget",
+ classes: "xv-numberwidget xv-input",
published: {
+ attr: null,
scale: 0,
- formatting: true
+ formatting: true,
+ type: "number",
+ label: "",
+ showLabel: true
},
/**
@todo Document the setValue method.
// use isNaN here because this value could be a number String, 0 value, or null
// only want to set value as null in cases of bad strings and null/undefined
value = value !== null && !isNaN(value) ? XT.math.round(value, this.getScale()) : null;
- XV.Input.prototype.setValue.call(this, value, options);
+ XV.InputWidget.prototype.setValue.call(this, value, options);
},
/**
Determines whether the user input is numeric.
} else {
value = "";
}
- return XV.Input.prototype.valueChanged.call(this, value);
- }
- });
-
- /**
- @name XV.NumberWidget
- @class An input control consisting of fittable columns: label, decorator, and input field.<br />
- Use to implement an input field for strings that represents a number, such as prices. This widget
- includes a style to right-justify the text entered into the input field.
- @extends XV.Number
- */
- enyo.kind(/** @lends XV.NumberWidget# */{
- name: "XV.NumberWidget",
- kind: "XV.Number",
- classes: "xv-numberwidget xv-input",
- published: {
- label: "",
- showLabel: true,
- placeholder: ""
- },
- components: [
- {kind: "FittableColumns", components: [
- {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
- {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
- components: [
- {name: "input", kind: "onyx.Input", onchange: "inputChanged", onkeydown: "keyDown", type: "number"}
- ]}
- ]}
- ],
- /**
- @todo Document the create method.
- */
- create: function () {
- this.inherited(arguments);
- this.labelChanged();
- this.showLabelChanged();
- },
- disabledChanged: function () {
- this.inherited(arguments);
- this.$.label.addRemoveClass("disabled", this.getDisabled());
- },
- /**
- @todo Document the labelChanged method.
- */
- labelChanged: function () {
- var label = (this.getLabel() || ("_" + this.attr + "").loc()) + ":";
- this.$.label.setContent(label);
- },
- /**
- @todo Document the showLabelChanged method.
- */
- showLabelChanged: function () {
- if (this.getShowLabel()) {
- this.$.label.show();
- } else {
- this.$.label.hide();
- }
+ return XV.InputWidget.prototype.valueChanged.call(this, value);
}
});
showLabel: false
},
components: [
- {name: "input", kind: "onyx.TextArea", classes: "xv-textarea-input",
- onchange: "inputChanged", onkeydown: "keyDown"}
+ {kind: "FittableColumns", components: [
+ {name: "label", content: "", fit: true, classes: "xv-flexible-label"},
+ {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
+ components: [
+ {name: "input", kind: "onyx.TextArea", classes: "xv-textarea-input",
+ onchange: "inputChanged", onkeydown: "keyDown"}
+ ]}
+ ]}
]
});
(function () {
/**
- @name XV.ToggleButton
- @class A control that looks like a switch with labels for two states.<br />
- Derived from <a href="http://enyojs.com/api/#onyx.ToggleButton">onyx.ToggleButton</a>.
- @extends onyx.ToggleButton
+ @name XV.ToggleButtonWidget
+ @class An input control consisting of fittable columns:
+ label, decorator, and toggle button.<br />
+ Use to implement a toggle button, a switch with labels for two states.<br />
+ Creates an HTML input element.
+ @extends XV.Input
*/
- enyo.kind(
- /** @lends XV.ToggleButton# */{
- name: "XV.ToggleButton",
- kind: "onyx.ToggleButton",
+ enyo.kind({
+ name: "XV.ToggleButtonWidget",
+ kind: "XV.InputWidget",
+ classes: "xv-inputwidget xv-checkboxwidget",
published: {
attr: null
},
handlers: {
onChange: "changed"
},
- /**
- @todo Document the clear method.
- */
- clear: function (options) {
- this.setValue(false, options);
- },
+ components: [
+ {kind: "FittableColumns", components: [
+ {name: "label", content: "", classes: "xv-label"},
+ {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
+ components: [
+ {name: "input", kind: "onyx.ToggleButton", onChange: "inputChanged"}
+ ]}
+ ]}
+ ],
/**
@todo Document the setValue method.
*/
inEvent.value = this.getValue();
this.doValueChange(inEvent);
}
- }
- });
-
- /**
- @name XV.ToggleButtonWidget
- @class An input control consisting of fittable columns:
- label, decorator, and toggle button.<br />
- Use to implement a toggle button, a switch with labels for two states.<br />
- Creates an HTML input element.
- @extends XV.Input
- */
- enyo.kind(/** @lends XV.ToggleButtonWidget# */{
- name: "XV.ToggleButtonWidget",
- kind: "XV.Input",
- classes: "xv-inputwidget xv-checkboxwidget",
- published: {
- label: ""
},
- components: [
- {kind: "FittableColumns", components: [
- {name: "label", content: "", classes: "xv-label"},
- {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
- components: [
- {name: "input", kind: "onyx.ToggleButton", onChange: "inputChanged"}
- ]}
- ]}
- ],
/**
@todo Document the clear method.
*/
var options = {silent: true};
this.valueChanged(this.getValue(), options);
},
- disabledChanged: function () {
- this.inherited(arguments);
- this.$.label.addRemoveClass("disabled", this.getDisabled());
- },
/**
@todo Document the inputChanged method.
*/
var input = this.$.input.getValue();
this.setValue(input);
},
- /**
- @todo Document the labelChanged method.
- */
- labelChanged: function () {
- var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
- this.$.label.setContent(label);
- },
- /**
- Not applicable in the context of a toggle button,
- even though it is available to input widgets generally.
- */
- placeholderChanged: function () {
- // Not applicable
- },
/**
@todo Document the valueChanged method.
*/
projects / xtuple / commitdiff