var Button = exports.Button = NativeControl.specialize(/** @lends module:"montage/ui/native/button.reel".Button# */ {
/**
Dispatched when the button is activated through a mouse click, finger tap,
or when focused and the spacebar is pressed.
@event action
@memberof module:"montage/ui/native/button.reel".Button
@param {Event} event
*/
/**
Dispatched when the button is pressed for a period of time, set by
{@link holdThreshold}.
@event hold
@memberof module:"montage/ui/native/button.reel".Button
@param {Event} event
*/
_preventFocus: {
enumerable: false,
value: false
},
/**
Specifies whether the button should receive focus or not.
@type {boolean}
@default false
@event longpress
*/
preventFocus: {
get: function () {
return this._preventFocus;
},
set: function (value) {
if (value === true) {
this._preventFocus = true;
} else {
this._preventFocus = false;
}
}
},
/**
Enables or disables the Button from user input. When this property is set to <code>false</code>, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to <code>true</code> the "disabled" CSS class is removed from the element's class list.
*/
//TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
enabled: {
dependencies: ["disabled"],
get: function () {
return !this._disabled;
},
set: function (value) {
this.disabled = !value;
}
},
/**
A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to <code>label</code>, the converter object's <code>convert()</code> method is invoked, passing it the newly assigned label value.
@type {Property}
@default null
*/
converter: {
value: null
},
/**
Stores the node that contains this button's value. Only used for
non-`<input>` elements.
@private
*/
_labelNode: {value:undefined, enumerable: false},
_label: { value: undefined, enumerable: false },
/**
The displayed text on the button. In an <input> element this is taken from the element's <code>value</code> attribute. On any other element (including <button>) this is the first child node which is a text node. If one isn't found then it will be created.
If the button has a non-null <code>converter</code> property, the converter object's <code>convert()</code> method is called on the value before being assigned to the button instance.
@type {string}
@default undefined
*/
label: {
get: function() {
return this._label;
},
set: function(value) {
if (value && value.length > 0 && this.converter) {
try {
value = this.converter.convert(value);
if (this.error) {
this.error = null;
}
} catch(e) {
// unable to convert - maybe error
this.error = e;
}
}
this._label = value;
if (this._isInputElement) {
this._value = value;
}
this.needsDraw = true;
}
},
setLabelInitialValue: {
value: function(value) {
if (this._label === undefined) {
this._label = value;
}
}
},
/**
The amount of time in milliseconds the user must press and hold the button a <code>hold</code> event is dispatched. The default is 1 second.
@type {number}
@default 1000
*/
holdThreshold: {
get: function() {
return this._pressComposer.longPressThreshold;
},
set: function(value) {
this._pressComposer.longPressThreshold = value;
}
},
_pressComposer: {
enumberable: false,
value: null
},
_active: {
enumerable: false,
value: false
},
/**
This property is true when the button is being interacted with, either through mouse click or touch event, otherwise false.
@type {boolean}
@default false
*/
active: {
get: function() {
return this._active;
},
set: function(value) {
this._active = value;
this.needsDraw = true;
}
},
// HTMLInputElement/HTMLButtonElement methods
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// click() deliberately omitted (it isn't available on <button> anyways)
constructor: {
value: function NativeButton () {
this.super();
this._pressComposer = new PressComposer();
this._pressComposer.longPressThreshold = this.holdThreshold;
this.addComposer(this._pressComposer);
}
},
prepareForActivationEvents: {
value: function() {
this._pressComposer.addEventListener("pressStart", this, false);
this._pressComposer.addEventListener("press", this, false);
this._pressComposer.addEventListener("pressCancel", this, false);
}
},
// Optimisation
addEventListener: {
value: function(type, listener, useCapture) {
this.super(type, listener, useCapture);
if (type === "hold") {
this._pressComposer.addEventListener("longPress", this, false);
}
}
},
// Handlers
/**
Called when the user starts interacting with the component.
*/
handlePressStart: {
value: function(event) {
this.active = true;
if (event.touch) {
// Prevent default on touchmove so that if we are inside a scroller,
// it scrolls and not the webpage
document.addEventListener("touchmove", this, false);
}
if (!this._preventFocus) {
this._element.focus();
}
}
},
/**
Called when the user has interacted with the button.
*/
handlePress: {
value: function(event) {
this.active = false;
this._dispatchActionEvent();
document.removeEventListener("touchmove", this, false);
}
},
handleKeyup: {
value: function(event) {
// action event on spacebar
if (event.keyCode === 32) {
this.active = false;
this._dispatchActionEvent();
}
}
},
handleLongPress: {
value: function(event) {
// When we fire the "hold" event we don't want to fire the
// "action" event as well.
this._pressComposer.cancelPress();
var holdEvent = document.createEvent("CustomEvent");
holdEvent.initCustomEvent("hold", true, true, null);
this.dispatchEvent(holdEvent);
}
},
/**
Called when all interaction is over.
@private
*/
handlePressCancel: {
value: function(event) {
this.active = false;
document.removeEventListener("touchmove", this, false);
}
},
handleTouchmove: {
value: function(event) {
event.preventDefault();
}
},
/**
If this is an input element then the label is handled differently.
@private
*/
_isInputElement: {
value: false,
enumerable: false
},
enterDocument: {
value: function(firstDraw) {
if (NativeControl.enterDocument) {
NativeControl.enterDocument.apply(this, arguments);
}
if(firstDraw) {
this._isInputElement = (this.originalElement.tagName === "INPUT");
// Only take the value from the element if it hasn't been set
// elsewhere (i.e. in the serialization)
if (this._isInputElement) {
// NOTE: This might not be the best way to do this
// With an input element value and label are one and the same
Object.defineProperty(this, "value", {
get: function() {
return this._label;
},
set: function(value) {
this.label = value;
}
});
if (this._label === undefined) {
this._label = this.originalElement.value;
}
} else {
if (!this.originalElement.firstChild) {
this.originalElement.appendChild(document.createTextNode(""));
}
this._labelNode = this.originalElement.firstChild;
this.setLabelInitialValue(this._labelNode.data)
if (this._label === undefined) {
this._label = this._labelNode.data;
}
}
//this.classList.add("montage-Button");
this.element.setAttribute("role", "button");
this.element.addEventListener("keyup", this, false);
}
}
},
/**
Draws the label to the DOM.
@function
@private
*/
_drawLabel: {
enumerable: false,
value: function(value) {
if (this._isInputElement) {
this._element.setAttribute("value", value);
} else {
this._labelNode.data = value;
}
}
},
draw: {
value: function() {
this.super();
if (this._disabled) {
this._element.classList.add("disabled");
} else {
this._element.classList.remove("disabled");
}
if (this._active) {
this._element.classList.add("active");
} else {
this._element.classList.remove("active");
}
this._drawLabel(this.label);
}
},
_detail: {
value: null
},
/**
The data property of the action event.
example to toggle the complete class: "detail.selectedItem" : { "<-" : "@repetition.objectAtCurrentIteration"}
@type {Property}
@default null
*/
detail: {
get: function() {
if (this._detail === null) {
this._detail = new Dict();
}
return this._detail;
}
},
createActionEvent: {
value: function() {
var actionEvent = document.createEvent("CustomEvent"),
eventDetail;
eventDetail = this._detail;
actionEvent.initCustomEvent("action", true, true, eventDetail);
return actionEvent;
}
}
});
exports.CheckInput = NativeControl.specialize({
// HTMLInputElement methods
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// click() deliberately omitted, use checked = instead
// Callbacks
draw: {
value: function() {
this.super();
this._element.setAttribute("aria-checked", this._checked);
}
},
_pressComposer: {
enumerable: false,
value: null
},
prepareForActivationEvents: {
value: function() {
var pressComposer = this._pressComposer = new PressComposer();
this.addComposer(pressComposer);
pressComposer.addEventListener("pressStart", this, false);
pressComposer.addEventListener("press", this, false);
}
},
enterDocument: {
value: function(firstTime) {
if (firstTime) {
this._element.addEventListener('change', this);
}
}
},
/**
Fake the checking of the element.
Changes the checked property of the element and dispatches a change event.
Radio button overrides this.
@private
*/
_fakeCheck: {
enumerable: false,
value: function() {
var changeEvent;
// NOTE: this may be BAD, modifying the element outside of
// the draw loop, but it's what a click/touch would
// actually have done
this._element.checked = !this._element.checked;
changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
this._element.dispatchEvent(changeEvent);
}
},
/**
Stores if we need to "fake" checking of the input element.
When preventDefault is called on touchstart and touchend events (e.g. by
the scroller component) the checkbox doesn't check itself, so we need
to fake it later.
@default false
@private
*/
_shouldFakeCheck: {
enumerable: false,
value: false
},
// Handlers
handlePressStart: {
value: function(event) {
this._shouldFakeCheck = event.defaultPrevented;
}
},
handlePress: {
value: function(event) {
if (this._shouldFakeCheck) {
this._shouldFakeCheck = false;
this._fakeCheck();
}
}
},
handleChange: {
enumerable: false,
value: function(event) {
if (!this._pressComposer || this._pressComposer.state !== PressComposer.CANCELLED) {
Object.getPropertyDescriptor(this, "checked").set.call(this,
this.element.checked, true);
this._dispatchActionEvent();
}
}
}
});
montageDefine("5bf8252","ui/button.reel/button",{dependencies:["ui/native-control","montage/composer/press-composer","montage/collections/dict"],factory:function(require,exports,module){ /*global require, exports*/
/**
@module "montage/ui/native/button.reel"
*/
var NativeControl = require("ui/native-control").NativeControl,
PressComposer = require("montage/composer/press-composer").PressComposer,
Dict = require("montage/collections/dict");
// TODO migrate away from using undefinedGet and undefinedSet
/**
Wraps a native <code><button></code> or <code><input[type="button"]></code> HTML element. The element's standard attributes are exposed as bindable properties.
@class module:"montage/ui/native/button.reel".Button
@extends module:montage/ui/native-control.NativeControl
@fires action
@fires hold
@example
<caption>JavaScript example</caption>
var b1 = new Button();
b1.element = document.querySelector("btnElement");
b1.addEventListener("action", function(event) {
console.log("Got event 'action' event");
});
@example
<caption>Serialized example</caption>
{
"aButton": {
"prototype": "montage/ui/native/button.reel",
"properties": {
"element": {"#": "btnElement"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "appListener"}
}
]
},
"listener": {
"prototype": "appListener"
}
}
<button data-montage-id="btnElement"></button>
*/
var Button = exports.Button = NativeControl.specialize(/** @lends module:"montage/ui/native/button.reel".Button# */ {
/**
Dispatched when the button is activated through a mouse click, finger tap,
or when focused and the spacebar is pressed.
@event action
@memberof module:"montage/ui/native/button.reel".Button
@param {Event} event
*/
/**
Dispatched when the button is pressed for a period of time, set by
{@link holdThreshold}.
@event hold
@memberof module:"montage/ui/native/button.reel".Button
@param {Event} event
*/
_preventFocus: {
enumerable: false,
value: false
},
/**
Specifies whether the button should receive focus or not.
@type {boolean}
@default false
@event longpress
*/
preventFocus: {
get: function () {
return this._preventFocus;
},
set: function (value) {
if (value === true) {
this._preventFocus = true;
} else {
this._preventFocus = false;
}
}
},
/**
Enables or disables the Button from user input. When this property is set to <code>false</code>, the "disabled" CSS style is applied to the button's DOM element during the next draw cycle. When set to <code>true</code> the "disabled" CSS class is removed from the element's class list.
*/
//TODO we should prefer positive properties like enabled vs disabled, get rid of disabled
enabled: {
dependencies: ["disabled"],
get: function () {
return !this._disabled;
},
set: function (value) {
this.disabled = !value;
}
},
/**
A Montage converter object used to convert or format the label displayed by the Button instance. When a new value is assigned to <code>label</code>, the converter object's <code>convert()</code> method is invoked, passing it the newly assigned label value.
@type {Property}
@default null
*/
converter: {
value: null
},
/**
Stores the node that contains this button's value. Only used for
non-`<input>` elements.
@private
*/
_labelNode: {value:undefined, enumerable: false},
_label: { value: undefined, enumerable: false },
/**
The displayed text on the button. In an <input> element this is taken from the element's <code>value</code> attribute. On any other element (including <button>) this is the first child node which is a text node. If one isn't found then it will be created.
If the button has a non-null <code>converter</code> property, the converter object's <code>convert()</code> method is called on the value before being assigned to the button instance.
@type {string}
@default undefined
*/
label: {
get: function() {
return this._label;
},
set: function(value) {
if (value && value.length > 0 && this.converter) {
try {
value = this.converter.convert(value);
if (this.error) {
this.error = null;
}
} catch(e) {
// unable to convert - maybe error
this.error = e;
}
}
this._label = value;
if (this._isInputElement) {
this._value = value;
}
this.needsDraw = true;
}
},
setLabelInitialValue: {
value: function(value) {
if (this._label === undefined) {
this._label = value;
}
}
},
/**
The amount of time in milliseconds the user must press and hold the button a <code>hold</code> event is dispatched. The default is 1 second.
@type {number}
@default 1000
*/
holdThreshold: {
get: function() {
return this._pressComposer.longPressThreshold;
},
set: function(value) {
this._pressComposer.longPressThreshold = value;
}
},
_pressComposer: {
enumberable: false,
value: null
},
_active: {
enumerable: false,
value: false
},
/**
This property is true when the button is being interacted with, either through mouse click or touch event, otherwise false.
@type {boolean}
@default false
*/
active: {
get: function() {
return this._active;
},
set: function(value) {
this._active = value;
this.needsDraw = true;
}
},
// HTMLInputElement/HTMLButtonElement methods
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// click() deliberately omitted (it isn't available on <button> anyways)
constructor: {
value: function NativeButton () {
this.super();
this._pressComposer = new PressComposer();
this._pressComposer.longPressThreshold = this.holdThreshold;
this.addComposer(this._pressComposer);
}
},
prepareForActivationEvents: {
value: function() {
this._pressComposer.addEventListener("pressStart", this, false);
this._pressComposer.addEventListener("press", this, false);
this._pressComposer.addEventListener("pressCancel", this, false);
}
},
// Optimisation
addEventListener: {
value: function(type, listener, useCapture) {
this.super(type, listener, useCapture);
if (type === "hold") {
this._pressComposer.addEventListener("longPress", this, false);
}
}
},
// Handlers
/**
Called when the user starts interacting with the component.
*/
handlePressStart: {
value: function(event) {
this.active = true;
if (event.touch) {
// Prevent default on touchmove so that if we are inside a scroller,
// it scrolls and not the webpage
document.addEventListener("touchmove", this, false);
}
if (!this._preventFocus) {
this._element.focus();
}
}
},
/**
Called when the user has interacted with the button.
*/
handlePress: {
value: function(event) {
this.active = false;
this._dispatchActionEvent();
document.removeEventListener("touchmove", this, false);
}
},
handleKeyup: {
value: function(event) {
// action event on spacebar
if (event.keyCode === 32) {
this.active = false;
this._dispatchActionEvent();
}
}
},
handleLongPress: {
value: function(event) {
// When we fire the "hold" event we don't want to fire the
// "action" event as well.
this._pressComposer.cancelPress();
var holdEvent = document.createEvent("CustomEvent");
holdEvent.initCustomEvent("hold", true, true, null);
this.dispatchEvent(holdEvent);
}
},
/**
Called when all interaction is over.
@private
*/
handlePressCancel: {
value: function(event) {
this.active = false;
document.removeEventListener("touchmove", this, false);
}
},
handleTouchmove: {
value: function(event) {
event.preventDefault();
}
},
/**
If this is an input element then the label is handled differently.
@private
*/
_isInputElement: {
value: false,
enumerable: false
},
enterDocument: {
value: function(firstDraw) {
if (NativeControl.enterDocument) {
NativeControl.enterDocument.apply(this, arguments);
}
if(firstDraw) {
this._isInputElement = (this.originalElement.tagName === "INPUT");
// Only take the value from the element if it hasn't been set
// elsewhere (i.e. in the serialization)
if (this._isInputElement) {
// NOTE: This might not be the best way to do this
// With an input element value and label are one and the same
Object.defineProperty(this, "value", {
get: function() {
return this._label;
},
set: function(value) {
this.label = value;
}
});
if (this._label === undefined) {
this._label = this.originalElement.value;
}
} else {
if (!this.originalElement.firstChild) {
this.originalElement.appendChild(document.createTextNode(""));
}
this._labelNode = this.originalElement.firstChild;
this.setLabelInitialValue(this._labelNode.data)
if (this._label === undefined) {
this._label = this._labelNode.data;
}
}
//this.classList.add("montage-Button");
this.element.setAttribute("role", "button");
this.element.addEventListener("keyup", this, false);
}
}
},
/**
Draws the label to the DOM.
@function
@private
*/
_drawLabel: {
enumerable: false,
value: function(value) {
if (this._isInputElement) {
this._element.setAttribute("value", value);
} else {
this._labelNode.data = value;
}
}
},
draw: {
value: function() {
this.super();
if (this._disabled) {
this._element.classList.add("disabled");
} else {
this._element.classList.remove("disabled");
}
if (this._active) {
this._element.classList.add("active");
} else {
this._element.classList.remove("active");
}
this._drawLabel(this.label);
}
},
_detail: {
value: null
},
/**
The data property of the action event.
example to toggle the complete class: "detail.selectedItem" : { "<-" : "@repetition.objectAtCurrentIteration"}
@type {Property}
@default null
*/
detail: {
get: function() {
if (this._detail === null) {
this._detail = new Dict();
}
return this._detail;
}
},
createActionEvent: {
value: function() {
var actionEvent = document.createEvent("CustomEvent"),
eventDetail;
eventDetail = this._detail;
actionEvent.initCustomEvent("action", true, true, eventDetail);
return actionEvent;
}
}
});
Button.addAttributes( /** @lends module:"montage/ui/native/button.reel".Button# */{
/**
Specifies whether the button should be focused as soon as the page is loaded.
@type {boolean}
@default false
*/
autofocus: {value: false, dataType: 'boolean'},
/**
When true, the button is disabled to user input and "disabled" is added to its CSS class list.
@type {boolean}
@default false
*/
disabled: {value: false, dataType: 'boolean'},
/**
The value of the id attribute of the form with which to associate the component's element.
@type {string}
@default null
*/
form: null,
/**
The URL to which the form data will be sumbitted.
@type {string}
@default null
*/
formaction: null,
/**
The content type used to submit the form to the server.
@type {string}
@default null
*/
formenctype: null,
/**
The HTTP method used to submit the form.
@type {string}
@default null
*/
formmethod: null,
/**
Indicates if the form should be validated upon submission.
@type {boolean}
@default null
*/
formnovalidate: {dataType: 'boolean'},
/**
The target frame or window in which the form output should be rendered.
@type string}
@default null
*/
formtarget: null,
/**
A string indicating the input type of the component's element.
@type {string}
@default "button"
*/
type: {value: 'button'},
/**
The name associated with the component's DOM element.
@type {string}
@default null
*/
name: null,
/**
<strong>Use <code>label</code> to set the displayed text on the button</strong>
The value associated with the element. This sets the value attribute of
the button that gets sent when the form is submitted.
@type {string}
@default null
@see label
*/
value: null
});
}})
montageDefine("5bf8252","ui/text-input",{dependencies:["ui/native-control"],factory:function(require,exports,module){/**
@module montage/ui/text-input
*/
var NativeControl = require("ui/native-control").NativeControl;
/**
The base class for all text-based input components. You typically won't create instances of this prototype.
@class module:montage/ui/text-input.TextInput
@extends module:montage/ui/native-control.NativeControl
@see {module:"montage/ui/input-date.reel".DateInput}
@see module:"montage/ui/input-text.reel".InputText
@see module:"montage/ui/input-number.reel".InputNumber
@see module:"montage/ui/input-range.reel".RangeInput
@see module:"montage/ui/textarea.reel".TextArea
*/
var TextInput = exports.TextInput = NativeControl.specialize(/** @lends module:montage/ui/text-input.TextInput# */ {
_hasFocus: {
enumerable: false,
value: false
},
_value: {
enumerable: false,
value: null
},
_valueSyncedWithInputField: {
enumerable: false,
value: false
},
/**
The "typed" data value associated with the input element. When this
property is set, if the component's <code>converter</code> property is
non-null then its <code>revert()</code> method is invoked, passing it
the newly assigned value. The <code>revert()</code> function is
responsible for validating and converting the user-supplied value to
its typed format. For example, in the case of a DateInput component
(which extends TextInput) a user enters a string for the date (for
example, "10-12-2005"). A <code>DateConverter</code> object is assigned
to the component's <code>converter</code> property.
If the comopnent doesn't specify a converter object then the raw value
is assigned to <code>value</code>.
@type {string}
@default null
*/
value: {
get: function() {
return this._value;
},
set: function(value, fromInput) {
if(value !== this._value) {
if(this.converter) {
var convertedValue;
try {
convertedValue = this.converter.revert(value);
this.error = null;
this._value = convertedValue;
} catch(e) {
// unable to convert - maybe error
this._value = value;
this.error = e;
}
} else {
this._value = value;
}
if (fromInput) {
this._valueSyncedWithInputField = true;
} else {
this._valueSyncedWithInputField = false;
this.needsDraw = true;
}
}
}
},
// set value from user input
/**
@private
*/
_setValue: {
value: function() {
var newValue = this.element.value;
Object.getPropertyDescriptor(this, "value").set.call(this, newValue, true);
}
},
/**
A reference to a Converter object whose <code>revert()</code> function is invoked when a new value is assigned to the TextInput object's <code>value</code> property. The revert() function attempts to transform the newly assigned value into a "typed" data property. For instance, a DateInput component could assign a DateConverter object to this property to convert a user-supplied date string into a standard date format.
@type {Converter}
@default null
@see {@link module:montage/core/converter.Converter}
*/
converter:{
value: null
},
_error: {
value: null
},
/**
If an error is thrown by the converter object during a new value assignment, this property is set to <code>true</code>, and schedules a new draw cycle so the the UI can be updated to indicate the error state. the <code>montage--invalidText</code> CSS class is assigned to the component's DOM element during the next draw cycle.
@type {boolean}
@default false
*/
error: {
get: function() {
return this._error;
},
set: function(v) {
this._error = v;
this.errorMessage = this._error ? this._error.message : null;
this.needsDraw = true;
}
},
_errorMessage: {value: null},
/**
The message to display when the component is in an error state.
@type {string}
@default null
*/
errorMessage: {
get: function() {
return this._errorMessage;
},
set: function(v) {
this._errorMessage = v;
}
},
_updateOnInput: {
value: true
},
/**
When this property and the converter's <code>allowPartialConversion</code> are both true, as the user enters text in the input element each new character is added to the component's <code>value</code> property, which triggers the conversion. Depending on the type of input element being used, this behavior may not be desirable. For instance, you likely would not want to convert a date string as a user is entering it, only when they've completed their input.
Specifies whether
@type {boolean}
@default true
*/
updateOnInput: {
get: function() {
return !!this._updateOnInput;
},
set: function(v) {
this._updateOnInput = v;
}
},
// HTMLInputElement methods
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// select() defined where it's allowed
// click() deliberately omitted, use focus() instead
// Callbacks
enterDocument: {
value: function(firstTime) {
if (firstTime) {
var el = this.element;
el.addEventListener("focus", this);
el.addEventListener('input', this);
el.addEventListener('change', this);
el.addEventListener('blur', this);
}
}
},
_setElementValue: {
value: function(value) {
this.element.value = (value == null ? '' : value);
}
},
draw: {
enumerable: false,
value: function() {
this.super();
var el = this.element;
if (!this._valueSyncedWithInputField) {
this._setElementValue(this.converter ? this.converter.convert(this._value) : this._value);
}
if (this.error) {
el.classList.add('montage--invalidText');
el.title = this.error.message || '';
} else {
el.classList.remove("montage--invalidText");
el.title = '';
}
}
},
didDraw: {
enumerable: false,
value: function() {
if (this._hasFocus && this._value != null) {
var length = this._value.toString().length;
this.element.setSelectionRange(length, length);
}
// The value might have been changed during the draw if bindings
// were reified, and another draw will be needed.
if (!this.needsDraw) {
this._valueSyncedWithInputField = true;
}
}
},
// Event handlers
handleInput: {
enumerable: false,
value: function() {
if (this.converter) {
if (this.converter.allowPartialConversion === true && this.updateOnInput === true) {
this._setValue();
}
} else {
this._setValue();
}
}
},
/**
Description TODO
@function
@param {Event Handler} event TODO
*/
handleChange: {
enumerable: false,
value: function(event) {
this._setValue();
this._hasFocus = false;
}
},
/**
Description TODO
@function
@param {Event Handler} event TODO
*/
handleBlur: {
enumerable: false,
value: function(event) {
this._hasFocus = false;
}
},
/**
Description TODO
@function
@param {Event Handler} event TODO
*/
handleFocus: {
enumerable: false,
value: function(event) {
this._hasFocus = true;
}
}
});
// Standard <input> tag attributes - http://www.w3.org/TR/html5/the-input-element.html#the-input-element
TextInput.addAttributes({
accept: null,
alt: null,
autocomplete: null,
autofocus: {dataType: "boolean"},
checked: {dataType: "boolean"},
dirname: null,
disabled: {dataType: 'boolean'},
form: null,
formaction: null,
formenctype: null,
formmethod: null,
formnovalidate: {dataType: 'boolean'},
formtarget: null,
height: null,
list: null,
maxlength: null,
multiple: {dataType: 'boolean'},
name: null,
pattern: null,
placeholder: null,
readonly: {dataType: 'boolean'},
required: {dataType: 'boolean'},
size: null,
src: null,
width: null
// "type" is not bindable and "value" is handled as a special attribute
});
}})
var NativeControl=require("ui/native-control").NativeControl,Image=exports.Image=NativeControl.specialize({});Image.addAttributes({alt:null,height:null,src:null,width:null});
var NativeControl=require("ui/native-control").NativeControl,PressComposer=require("montage/composer/press-composer").PressComposer,Dict=require("montage/collections/dict"),Button=exports.Button=NativeControl.specialize({_preventFocus:{enumerable:!1,value:!1},preventFocus:{get:function(){return this._preventFocus},set:function(e){this._preventFocus=e===!0?!0:!1}},enabled:{dependencies:["disabled"],get:function(){return!this._disabled},set:function(e){this.disabled=!e}},converter:{value:null},_labelNode:{value:void 0,enumerable:!1},_label:{value:void 0,enumerable:!1},label:{get:function(){return this._label},set:function(e){if(e&&e.length>0&&this.converter)try{e=this.converter.convert(e),this.error&&(this.error=null)}catch(t){this.error=t}this._label=e,this._isInputElement&&(this._value=e),this.needsDraw=!0}},setLabelInitialValue:{value:function(e){void 0===this._label&&(this._label=e)}},holdThreshold:{get:function(){return this._pressComposer.longPressThreshold},set:function(e){this._pressComposer.longPressThreshold=e}},_pressComposer:{enumberable:!1,value:null},_active:{enumerable:!1,value:!1},active:{get:function(){return this._active},set:function(e){this._active=e,this.needsDraw=!0}},blur:{value:function(){this._element.blur()}},focus:{value:function(){this._element.focus()}},constructor:{value:function(){this.super(),this._pressComposer=new PressComposer,this._pressComposer.longPressThreshold=this.holdThreshold,this.addComposer(this._pressComposer)}},prepareForActivationEvents:{value:function(){this._pressComposer.addEventListener("pressStart",this,!1),this._pressComposer.addEventListener("press",this,!1),this._pressComposer.addEventListener("pressCancel",this,!1)}},addEventListener:{value:function(e,t,n){this.super(e,t,n),"hold"===e&&this._pressComposer.addEventListener("longPress",this,!1)}},handlePressStart:{value:function(e){this.active=!0,e.touch&&document.addEventListener("touchmove",this,!1),this._preventFocus||this._element.focus()}},handlePress:{value:function(){this.active=!1,this._dispatchActionEvent(),document.removeEventListener("touchmove",this,!1)}},handleKeyup:{value:function(e){32===e.keyCode&&(this.active=!1,this._dispatchActionEvent())}},handleLongPress:{value:function(){this._pressComposer.cancelPress();var e=document.createEvent("CustomEvent");e.initCustomEvent("hold",!0,!0,null),this.dispatchEvent(e)}},handlePressCancel:{value:function(){this.active=!1,document.removeEventListener("touchmove",this,!1)}},handleTouchmove:{value:function(e){e.preventDefault()}},_isInputElement:{value:!1,enumerable:!1},enterDocument:{value:function(e){NativeControl.enterDocument&&NativeControl.enterDocument.apply(this,arguments),e&&(this._isInputElement="INPUT"===this.originalElement.tagName,this._isInputElement?(Object.defineProperty(this,"value",{get:function(){return this._label},set:function(e){this.label=e}}),void 0===this._label&&(this._label=this.originalElement.value)):(this.originalElement.firstChild||this.originalElement.appendChild(document.createTextNode("")),this._labelNode=this.originalElement.firstChild,this.setLabelInitialValue(this._labelNode.data),void 0===this._label&&(this._label=this._labelNode.data)),this.element.setAttribute("role","button"),this.element.addEventListener("keyup",this,!1))}},_drawLabel:{enumerable:!1,value:function(e){this._isInputElement?this._element.setAttribute("value",e):this._labelNode.data=e}},draw:{value:function(){this.super(),this._disabled?this._element.classList.add("disabled"):this._element.classList.remove("disabled"),this._active?this._element.classList.add("active"):this._element.classList.remove("active"),this._drawLabel(this.label)}},_detail:{value:null},detail:{get:function(){return null===this._detail&&(this._detail=new Dict),this._detail}},createActionEvent:{value:function(){var e,t=document.createEvent("CustomEvent");return e=this._detail,t.initCustomEvent("action",!0,!0,e),t}}});Button.addAttributes({autofocus:{value:!1,dataType:"boolean"},disabled:{value:!1,dataType:"boolean"},form:null,formaction:null,formenctype:null,formmethod:null,formnovalidate:{dataType:"boolean"},formtarget:null,type:{value:"button"},name:null,value:null});
var Select = exports.Select = NativeControl.specialize(/** @lends module:"montage/ui/native/select.reel".Select */ {
_fromInput: {value: null},
_synching: {value: null},
//_internalSet: {value: null},
_selectedIndexes: {
value: null
},
selectedIndexes: {
get: function() {
return this._selectedIndexes;
},
set: function(selectedIndexes) {
var content = this.content,
values = [];
for (var i = 0, ii = selectedIndexes.length; i < ii; i++) {
values.push(content[selectedIndexes[i]][this.valuePropertyPath || 'value']);
}
// values should be automatically created by a binding
if (selectedIndexes.length <= 1) {
this.value = values[0];
} else {
this.values = values;
}
}
},
constructor: {
value: function Select() {
this.super();
this._selectedIndexes = [];
this._selectedIndexes.addRangeChangeListener(this, "selectedIndexes");
}
},
handleSelectedIndexesRangeChange: {
value: function() {
if(this.needsDraw === false) {
this.needsDraw = this._synching || !this._fromInput;
}
}
},
_setContentControllerSelectedIndexes: {
value: function(selectedIndexes) {
var content = this.content,
selection = this._contentController.selection,
ix;
for (var i = 0, ii = content.length; i < ii; i++) {
if (selectedIndexes.indexOf(i) >= 0) {
// If the item was selected in the Select then add it
// to the controller selection if it isn't there.
if (selection.indexOf(content[i]) === -1) {
selection.push(content[i]);
}
} else {
ix = selection.indexOf(content[i]);
// If the item is deselected in the Select then remove it
// from the controller selection if it is there.
if (ix >= 0) {
selection.splice(ix, 1);
}
}
}
}
},
//-----------------------
// Public API
//-----------------------
_content: {value: null, enumerable: false},
/**
An array of items to to assign to the component's
<code>contentController</code> property, which is a RangeController.
*/
content: {
set: function(value) {
//if(!Array.isArray(value)) {
// value = [value];
//}
this._content = value;
if(!this.contentController) {
var contentController = new RangeController();
contentController.content = value;
contentController.selection = [];
this.contentController = contentController;
}
this.needsDraw = true;
},
get: function() {
return this._content;
}
},
// If a <code>contentController</code> is provided, this allows the developer to specify
// which property in each element provides the "value" part of <option>
/**
Specifies the property belonging to the component's <code>contentController</code> to use as the "value" part of the <option>.
*/
valuePropertyPath: {
value: null
},
/**
Specifies the property belonging to the component's <code>contentController</code> to use as the text content of the <option>.
*/
textPropertyPath: {
value: null
},
_contentController: {
value: null
},
/**
An ArrayController instance used to manage the content and selection of the select input control.
@default null
*/
contentController: {
get: function() {
return this._contentController;
},
set: function(value) {
if (this._contentController === value) {
return;
}
this._contentController = value;
value.multiSelect = this.multiple;
Bindings.defineBindings(this, {
"content": {"<-": "_contentController.organizedContent"},
"_selection": {"<-": "_contentController.selection"},
"_selectedIndexes.rangeContent()": {
"<-": "content.enumerate().filter{$_selection.has(.1)}.map{.0}"
}
});
}
},
_getSelectedValuesFromIndexes: {
value: function() {
var selectedIndexes = this._selectedIndexes,
content = this._content,
arr,
length = selectedIndexes.length,
valuePath;
if(length > 0) {
arr = [];
valuePath = this.valuePropertyPath || 'value';
for (var i = 0; i < length; i++) {
if (content[selectedIndexes[i]][valuePath]) {
arr.push(content[selectedIndexes[i]][valuePath]);
}
}
}
return arr;
}
},
_synchValues: {
value: function() {
if(!this._synching) {
this._synching = true;
this.values = this._getSelectedValuesFromIndexes();
this.value = ((this.values && this.values.length > 0) ? this.values[0] : null);
this._synching = false;
}
}
},
// TODO: values could be automatically created by
// iterations.selections.map{value}
_values: {value: null},
values: {
get: function() {
return this._values;
},
set: function(valuesArray) {
var content = this.content;
if(valuesArray && content) {
this._values = valuesArray;
if(!this._synching) {
var selectedIndexes = [];
var i=0, len = this._values.length, index;
for(; i<len; i++) {
index = this._indexOf(this._values[i]);
if(index >= 0) {
selectedIndexes.push(index);
}
}
this._synching = true;
this._setContentControllerSelectedIndexes(selectedIndexes);
this._synching = false;
}
}
}
//dependencies: ["_selectedIndexes"]
},
// TODO: values could be automatically created by
// selection.0.value
_value: {value: null},
value: {
get: function() {
return this._value;
},
set: function(value) {
this._value = value;
if(!this._synching) {
if(value == null) {
this.values = [];
} else {
this.values = [value];
}
}
}
//dependencies: ["_selectedIndexes"]
},
// HTMLSelectElement methods
// add() and remove() deliberately omitted. Use the contentController instead
blur: { value: function() { this._element.blur(); } },
focus: { value: function() { this._element.focus(); } },
// -------------------
// Montage Callbacks
// --------------------
_addOptionsFromMarkup: {
value: function() {
var el = this.element, options = el.querySelectorAll('option');
// @todo: if contentController is provided, should we just ignore the <option>
// from the markup ?
// create a new RangeController if one is not provided
// add options to contentController
// look for selected options in the markup and mark these as selected
if(!this.contentController) {
var contentController = new RangeController();
var selection = [];
var content = [];
if(options && options.length > 0) {
var i=0, len = options.length, selected;
for(; i< len; i++) {
selected = options[i].getAttribute('selected');
var object = {
value: options[i].value,
text: options[i].textContent
};
if (selected) {
selection.push(object);
}
content.push(object);
}
if (selection.length === 0 && len > 0) {
// nothing is marked as selected by default. Select the
// first one (gh-122)
selection.push(content[0]);
}
this._fromInput = true;
this.contentController = contentController;
contentController.content = content;
contentController.selection = selection;
}
}
}
},
deserializedFromTemplate: {
value: function() {
/*
1) If <option> is provided in the markup but contentController is not,
fill the contentController with the options from the markup
2) If contentController is present, options from markup will be overwritten
by the values from contentController when they are available
*/
this._addOptionsFromMarkup();
}
},
_removeAll: {
value: function(elem) {
// remove all existing options
while (elem.firstChild ) {
elem.removeChild( elem.firstChild );
}
}
},
_refreshOptions: {
value: function() {
var arr = this.content||[], len = arr.length, i, option;
var text, value;
for(i=0; i< len; i++) {
option = document.createElement('option');
if(typeof arr[i] === "string") {
text = value = arr[i];
} else {
text = arr[i][this.textPropertyPath || 'text'];
value = arr[i][this.valuePropertyPath || 'value'];
}
option.value = value;
option.textContent = text || value;
if (this._selectedIndexes && this._selectedIndexes.length > 0) {
if(this._selectedIndexes.indexOf(i) >= 0) {
option.setAttribute("selected", "true");
}
}
this.element.appendChild(option);
}
// Make sure we have the model synchronized with the changes in the
// DOM.
if (this._selectedIndexes.length === 0 &&
this.element.selectedIndex >= 0) {
this._selectedIndexes[0] = this.element.selectedIndex;
}
}
},
/**
Description TODO
@function
*/
enterDocument: {
value: function(firstTime) {
if (firstTime) {
this.element.addEventListener("focus", this);
this.element.addEventListener('change', this);
}
}
},
prepareForActivationEvents: {
value: function() {
// add pressComposer to handle the claimPointer related work
var pressComposer = new PressComposer();
this.addComposer(pressComposer);
}
},
/**
Description TODO
@function
*/
draw: {
enumerable: false,
value: function() {
var elem = this.element;
this._fromInput = false;
this._synching = false;
this._removeAll(elem);
this._refreshOptions();
this.super();
}
},
didDraw: {
value: function() {
this._synchValues();
}
},
// find the index of the object with the specified value in the _content array
_indexOf: {
value: function(val) {
var arr = this.content||[], len = arr.length, i;
var text, value;
for(i=0; i< len; i++) {
if(typeof arr[i] === "string") {
value = arr[i];
} else {
value = arr[i][this.valuePropertyPath || 'value'];
}
if(value && value === val) {
return i;
}
}
return -1;
}
},
_getSelectedOptions: {
value: function(selectEl) {
var options = selectEl.querySelectorAll('option');
// TODO: looks like querySelectorAll('option[selected]') only returns the default selected
// value
var i, len = options.length, arr = [];
for(i=0; i< len; i++) {
if(options[i].selected) {
arr.push(options[i]);
}
}
return arr;
}
},
_getSelectedOptionsIndexes: {
value: function(selectEl) {
var options = selectEl.querySelectorAll('option');
// TODO: looks like querySelectorAll('option[selected]') only
// returns the default selected value
var i, len = options.length, arr = [];
for(i=0; i< len; i++) {
if(options[i].selected) {
arr.push(i);
}
}
return arr;
}
},
handleChange: {
value: function(e) {
// get selected values and set it on the contentController
//var selectedOptions = this.element.selectedOptions || [];
// select.selectedOptions does not work on Chrome !
var arr = this._getSelectedOptionsIndexes(this.element);
if(arr.length > 0) {
this._fromInput = true;
this._synching = false;
this._setContentControllerSelectedIndexes(arr);
this._synchValues();
}
this._dispatchActionEvent();
}
}
});
var NativeControl=require("ui/native-control").NativeControl,PressComposer=require("montage/composer/press-composer").PressComposer;exports.CheckInput=NativeControl.specialize({blur:{value:function(){this._element.blur()}},focus:{value:function(){this._element.focus()}},draw:{value:function(){this.super(),this._element.setAttribute("aria-checked",this._checked)}},_pressComposer:{enumerable:!1,value:null},prepareForActivationEvents:{value:function(){var e=this._pressComposer=new PressComposer;this.addComposer(e),e.addEventListener("pressStart",this,!1),e.addEventListener("press",this,!1)}},enterDocument:{value:function(e){e&&this._element.addEventListener("change",this)}},_fakeCheck:{enumerable:!1,value:function(){var e;this._element.checked=!this._element.checked,e=document.createEvent("HTMLEvents"),e.initEvent("change",!0,!0),this._element.dispatchEvent(e)}},_shouldFakeCheck:{enumerable:!1,value:!1},handlePressStart:{value:function(e){this._shouldFakeCheck=e.defaultPrevented}},handlePress:{value:function(){this._shouldFakeCheck&&(this._shouldFakeCheck=!1,this._fakeCheck())}},handleChange:{enumerable:!1,value:function(){this._pressComposer&&this._pressComposer.state===PressComposer.CANCELLED||(Object.getPropertyDescriptor(this,"checked").set.call(this,this.element.checked,!0),this._dispatchActionEvent())}}});
var NativeControl=require("ui/native-control").NativeControl,Anchor=exports.Anchor=NativeControl.specialize({blur:{value:function(){this._element.blur()}},focus:{value:function(){this._element.focus()}}});Anchor.addAttributes({textContent:null,href:null,hreflang:null,media:null,rel:null,target:null,type:null});