/**
* Copyright (c) 2014, Oracle and/or its affiliates.
* All rights reserved.
*/
/**
* @ojcomponent oj.ojTextArea
* @augments oj.inputBase
* @since 0.6
*
* @classdesc
* <h3 id="textAreaOverview-section">
* JET ojTextArea Component
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#textAreaOverview-section"></a>
* </h3>
*
* <p>Description: The ojTextArea component enhances a browser textarea element.
* <h3 id="pseudos-section">
* Pseudo-selectors
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#pseudos-section"></a>
* </h3>
*
* <pre class="prettyprint">
* <code>$( ":oj-textarea" ) // selects all JET textarea on the page
* </code>
* </pre>
* <h3 id="a11y-section">
* Accessibility
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#a11y-section"></a>
* </h3>
* <p>
* It is up to the application developer to associate the label to the textarea
* component. For textarea, you should put an <code>id</code> on the textarea,
* and then set the <code>for</code> attribute on the label to be the textarea's id.
* </p>
* <h3 id="label-section">
* Label and TextArea
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#label-section"></a>
* </h3>
* <p>
* For accessibility, you should associate a label element with the textarea
* by putting an <code>id</code> on the textarea, and then setting the
* <code>for</code> attribute on the label to be the textarea's id.
* </p>
* <p>
* The component will decorate its associated label with required and help
* information, if the <code>required</code> and <code>help</code> options are set.
* </p>
* <h3 id="binding-section">
* Declarative Binding
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#binding-section"></a>
* </h3>
*
* <pre class="prettyprint">
* <code>
* <textarea id="textAreaId" data-bind="ojComponent: {component: 'ojTextArea'}" ></textarea>
* </code>
* </pre>
*
* @desc Creates or re-initializes a JET ojTextArea.
*
* @param {Object=} options a map of option-value pairs to set on the component
*
* @example <caption>Initialize the textarea with no options specified:</caption>
* $( ".selector" ).ojTextArea();
*
* * @example <caption>Initialize the textarea with some options:</caption>
* $( ".selector" ).ojTextArea( { "disabled": true } );
*
* @example <caption>Initialize the textarea via the JET <code class="prettyprint">ojComponent</code> binding:</caption>
* <textarea id="textAreaId" data-bind="ojComponent: {component: 'ojTextArea'}" ></textarea>
*/
oj.__registerWidget("oj.ojTextArea", $['oj']['inputBase'],
{
version : "1.0.0",
defaultElement : "<textarea>",
widgetEventPrefix : "oj",
/**
* @expose
* @private
*/
_ATTR_CHECK : [],
/**
* @expose
* @private
*/
_CLASS_NAMES : "oj-textarea-input",
/**
* @expose
* @private
*/
_WIDGET_CLASS_NAMES : "oj-textarea oj-form-control oj-component",
options :
{
/**
* Regular expression pattern which will be used to validate the component's value. Note that
* option value always supercedes element's attribute value and it is best practice to pass the
* value as an option than to set it as an element's attribute.
* <p>
* When pattern is set to true, an implicit regExp validator is created using the validator
* factory -
* <code class="prettyprint">oj.Validation.validatorFactory(oj.ValidatorFactory.VALIDATOR_TYPE_REGEXP).createValidator()</code>.
* </p>
*
*
* @example <caption>Initialize the component with the <code class="prettyprint">pattern</code> option:</caption>
* $(".selector").ojTextArea({pattern: "[a-zA-Z0-9]{3,}"});<br/>
* @example <caption>Initialize <code class="prettyprint">pattern</code> option from the html attribute 'pattern':</caption>
* <input type="text" id="username" value= "" pattern="[a-zA-Z0-9]{3,}"
* title="Enter at least 3 alphanumeric characters"/><br/>
* // reading the pattern option will return "[a-zA-Z0-9]{3,}"
* $(".selector").ojTextArea("option", "pattern");<br/>
*
* @expose
* @instance
* @memberof! oj.ojTextArea
* @type {string|undefined}
*/
pattern: undefined
},
/**
* Return the subcomponent node represented by the documented locator attribute values. <br/>
* If the locator is null or no subId string is provided then this method returns the element that
* this component was initalized with. <br/>
* If a subId was provided but a subcomponent node cannot be located this method returns null.
*
* <p>If the <code class="prettyprint">locator</code> or its <code class="prettyprint">subId</code> is
* <code class="prettyprint">null</code>, then this method returns the element on which this component was initalized.
*
* <p>If a <code class="prettyprint">subId</code> was provided but no corresponding node
* can be located, then this method returns <code class="prettyprint">null</code>.
*
* @expose
* @override
* @memberof oj.ojInputText
* @instance
*
* @param {Object} locator An Object containing, at minimum, a <code class="prettyprint">subId</code>
* property. See the table for details on its fields.
*
* @property {string=} locator.subId - A string that identifies a particular DOM node in this component.
*
* <p>The supported sub-ID's are documented in the <a href="#subids-section">Sub-ID's</a> section of this document.
*
* @property {number=} locator.index - A zero-based index, used to locate a message content node
* or a hint node within the popup.
* @returns {Element|null} The DOM node located by the <code class="prettyprint">subId</code> string passed in
* <code class="prettyprint">locator</code>, or <code class="prettyprint">null</code> if none is found.
*
* @example <caption>Get the node for a certain subId:</caption>
* var node = $( ".selector" ).ojTextArea( "getNodeBySubId", {'subId': 'oj-some-sub-id'} );
*/
getNodeBySubId: function(locator)
{
var node = this._superApply(arguments), subId;
if (!node)
{
subId = locator['subId'];
if (subId === "oj-textarea-input") {
node = this.element ? this.element[0] : null;
}
}
// Non-null locators have to be handled by the component subclasses
return node || null;
},
/**
* @instance
* @memberof! oj.ojTextArea
* @override
* @protected
* @return {string}
*/
_GetDefaultStyleClass : function ()
{
return "oj-textarea";
},
/**
* @protected
* @override
* @instance
* @memberof! oj.ojTextArea
*/
_GetTranslationsSectionName: function()
{
return "oj-inputBase";
}
});
////////////////// SUB-IDS //////////////////
/**
* <p>Sub-ID for the ojTextArea component's textarea element.
*
* <p>See the <a href="#getNodeBySubId">getNodeBySubId</a> and
* <a href="#getSubIdByNode">getSubIdByNode</a> methods for details.
*
* @ojsubid
* @member
* @name oj-textarea-input
* @memberof oj.ojTextArea
* @instance
*
* @example <caption>Get the node for the input element:</caption>
* var node = $( ".selector" ).ojTextArea( "getNodeBySubId", {'subId': 'oj-textarea-input'} );
*/Source: src/main/javascript/oracle/oj/ojinputtext/ojtextarea.js
Oracle® JavaScript Extension Toolkit (JET)
1.1.2
E65298-01