From 24b483db367291b72170f969de78efcb1a9b95bd Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 22:53:07 -0700 Subject: integrating the latest montage version Signed-off-by: Valerio Virgillito --- node_modules/montage/ui/native-control.js | 185 +++++++++++++++++++++++------- 1 file changed, 145 insertions(+), 40 deletions(-) (limited to 'node_modules/montage/ui/native-control.js') diff --git a/node_modules/montage/ui/native-control.js b/node_modules/montage/ui/native-control.js index 7cf65bd5..8dad5408 100644 --- a/node_modules/montage/ui/native-control.js +++ b/node_modules/montage/ui/native-control.js @@ -4,23 +4,32 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +/** + @module "montage/ui/native-control" + @requires montage/core/core + @requires montage/ui/component +*/ + var Montage = require("montage").Montage, Component = require("ui/component").Component; -var isUndefined = function(obj) { - return (typeof obj === 'undefined'); -}; - /** - * Base component for all native controls. + Base component for all native components, such as RadioButton and Checkbox. + @class module:montage/ui/native-control.NativeControl + @extends module:montage/ui/component.Component */ -var NativeControl = exports.NativeControl = Montage.create(Component, { +var NativeControl = exports.NativeControl = Montage.create(Component, /** @lends module:montage/ui/native-control.NativeControl# */ { hasTemplate: { value: false }, +/** + The HTML element associated with the NativeControl instance. + @type {element} + @default null +*/ element: { serializable: true, enumerable: true, @@ -37,18 +46,19 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { }, - /** Stores values that need to be set on the element. Cleared each draw - * cycle. + /** + Stores values that need to be set on the element. Cleared each draw cycle. + @private */ _elementAttributeValues: { value: {}, distinct: true }, - /** Stores the descriptors of the properties that can be set on this - * control + /** + Stores the descriptors of the properties that can be set on this control + @private */ - _elementAttributeDescriptors: { value: {}, distinct: true @@ -59,7 +69,7 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { value: function(attributeName) { var attributeDescriptor, instance = this; // walk up the prototype chain from the instance to NativeControl's prototype - while(instance && !isUndefined(instance._elementAttributeDescriptors)) { + while(instance && (typeof instance._elementAttributeDescriptors !== 'undefined')) { attributeDescriptor = instance._elementAttributeDescriptors[attributeName]; if(attributeDescriptor) { break; @@ -67,28 +77,28 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { instance = Object.getPrototypeOf(instance); } } - return attributeDescriptor; } }, /** - * Add a property to this Component. A default getter/setter is provided and a - * "_" property is created by default. Eg: if the property is "title", "_title" is - * automatically created and the value set to the value from the descriptor. + * Adds a property to the component with the specified name. This method is used internally by the framework convert a DOM element's standard attributes into bindable properties. It creates an accessor property (getter/setter) with the same name as the specified property, as well as a "backing" data property whose name is prepended with an underscore (_). The backing variable is assigned the value from the property descriptor. For example, if the name "title" is passed as the first parameter, a "title" accessor property is created as well a data property named "_title". + * @function + * @param {String} name The property name to add. + * @param {Object} descriptor An object that specifies the new properties default attributes such as configurable and enumerable. */ defineAttribute: { value: function(name, descriptor) { descriptor = descriptor || {}; + var _name = '_' + name; + var newDescriptor = { - configurable: isUndefined(descriptor.configurable) ? true: descriptor.configurable, - enumerable: isUndefined(descriptor.enumerable) ? true: descriptor.enumerable, - serializable: isUndefined(descriptor.serializable) ? true: descriptor.serializable, - set: (function(name) { + configurable: (typeof descriptor.configurable == 'undefined') ? true: descriptor.configurable, + enumerable: (typeof descriptor.enumerable == 'undefined') ? true: descriptor.enumerable, + serializable: (typeof descriptor.serializable == 'undefined') ? true: descriptor.serializable, + set: (function(name, attrName) { return function(value) { - var attrName = '_' + name; - var desc = this._getElementAttributeDescriptor(name, this); // if requested dataType is boolean (eg: checked, readonly etc) @@ -100,29 +110,31 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { // If the set value is different to the current one, // update it here, and set it to be updated on the // element in the next draw cycle. - if(!isUndefined(value) && this[attrName] !== value) { + if((typeof value !== 'undefined') && this[attrName] !== value) { this[attrName] = value; this._elementAttributeValues[name] = value; this.needsDraw = true; } }; - }(name)), - get: (function(name) { + }(name, _name)), + get: (function(name, attrName) { return function() { - return this['_' + name]; + return this[attrName]; }; - }(name)) + }(name, _name)) }; // Define _ property - Montage.defineProperty(this, '_' + name, {value: null}); + Montage.defineProperty(this, _name, {value: null}); // Define property getter and setter Montage.defineProperty(this, name, newDescriptor); } }, /** - * Add the specified properties as properties of this Component + * Add the specified properties as properties of this component. + * @function + * @param {object} properties An object that contains the properties you want to add. */ addAttributes: { value: function(properties) { @@ -142,7 +154,7 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { // Only add the internal property, and getter and setter if // they don't already exist. - if(isUndefined(this[property])) { + if(typeof this[property] == 'undefined') { this.defineAttribute(property, descriptor); } } @@ -150,6 +162,8 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { } }, +// callbacks + didSetElement: { value: function() { // The element is now ready, so we can read the attributes that @@ -161,9 +175,9 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { name = attributes[i].name; value = attributes[i].value; - if(isUndefined(this._elementAttributeValues[name])) { + if(typeof this._elementAttributeValues[name] == 'undefined') { this._elementAttributeValues[name] = value; - if(isUndefined(this[name]) || this[name] == null) { + if( (typeof this[name] == 'undefined') || this[name] == null) { this[name] = value; } } @@ -173,9 +187,9 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { textContent = this.element.textContent; // set textContent only if it is defined as part of element properties if(('textContent' in this) && textContent && ("" !== textContent)) { - if(isUndefined(this._elementAttributeValues['textContent'])) { + if(typeof this._elementAttributeValues['textContent'] == 'undefined') { this._elementAttributeValues['textContent'] = textContent; - if(isUndefined(this['textContent']) || this['textContent'] === null) { + if( (typeof this['textContent'] == 'undefined') || this['textContent'] === null) { this['textContent'] = textContent; } } @@ -185,8 +199,9 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { // as attributes on the element. for (attributeName in this._elementAttributeDescriptors) { descriptor = this._elementAttributeDescriptors[attributeName]; - if (this["_"+attributeName] === null && descriptor !== null && "value" in descriptor) { - this["_"+attributeName] = this._elementAttributeDescriptors[attributeName].value; + var _name = "_"+attributeName; + if (this[_name] === null && descriptor !== null && "value" in descriptor) { + this[_name] = this._elementAttributeDescriptors[attributeName].value; } } this.needsDraw = true; @@ -212,7 +227,7 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { element.removeAttribute(attributeName); } } else { - if(!isUndefined(value)) { + if(typeof value !== 'undefined') { if(attributeName === 'textContent') { element.textContent = value; } else { @@ -230,19 +245,109 @@ var NativeControl = exports.NativeControl = Montage.create(Component, { }); //http://www.w3.org/TR/html5/elements.html#global-attributes -NativeControl.addAttributes({ +NativeControl.addAttributes( /** @lends module:montage/ui/native-control.NativeControl# */ { + +/** + Specifies the shortcut key(s) that gives focuses to or activates the element. + @see {@link http://www.w3.org/TR/html5/editing.html#the-accesskey-attribute} + @type {string} + @default null +*/ accesskey: null, - contenteditable: null, // true, false, inherit + +/** + Specifies if the content is editable or not. Valid values are "true", "false", and "inherit". + @see {@link http://www.w3.org/TR/html5/editing.html#contenteditable} + @type {string} + @default null + +*/ + contenteditable: null, + +/** + Specifies the ID of a menu element in the DOM to use as the element's context menu. + @see {@link http://www.w3.org/TR/html5/interactive-elements.html#attr-contextmenu} + @type {string} + @default null +*/ contextmenu: null, + +/** + A space separated list of CSS classes to apply to the element. + @see {@link http://www.w3.org/TR/html5/elements.html#classes} + @type {string} + @default null +*/ 'class': null, + +/** + Specifies the elements element's text directionality. Valid values are "ltr", "rtl", and "auto". + @see {@link http://www.w3.org/TR/html5/elements.html#the-dir-attribute} + @type {string} + @default null +*/ dir: null, + +/** + Specifies if the element is draggable. Valid values are "true", "false", and "auto". + @type {string} + @default null + @see {@link http://www.w3.org/TR/html5/dnd.html#the-draggable-attribute} +*/ draggable: null, - dropzone: null, // copy/move/link + +/** + Specifies the behavior that's taken when an item is dropped on the element. Valid values are "copy", "move", and "link". + @type {string} + @see {@link http://www.w3.org/TR/html5/dnd.html#the-dropzone-attribute} +*/ + dropzone: null, + +/** + When specified on an element, it indicates that the element should not be displayed. + @type {boolean} + @default false +*/ hidden: {dataType: 'boolean'}, //id: null, + +/** + Specifies the primary language for the element's contents and for any of the element's attributes that contain text. + @type {string} + @default null + @see {@link http://www.w3.org/TR/html5/elements.html#attr-lang} +*/ lang: null, + +/** + Specifies if element should have its spelling and grammar checked by the browser. Valid values are "true", "false". + @type {string} + @default null + @see {@link http://www.w3.org/TR/html5/editing.html#attr-spellcheck} +*/ spellcheck: null, + +/** + The CSS styling attribute. + @type {string} + @default null + @see {@link http://www.w3.org/TR/html5/elements.html#the-style-attribute} +*/ style: null, + +/** + Specifies the relative order of the element for the purposes of sequential focus navigation. + @type {number} + @default null + @see {@link http://www.w3.org/TR/html5/editing.html#attr-tabindex} +*/ tabindex: null, + +/** + Specifies advisory information about the element, used as a tooltip when hovering over the element, and other purposes. + @type {string} + @default null + @see {@link http://www.w3.org/TR/html5/elements.html#the-title-attribute} +*/ title: null }); -- cgit v1.2.3