devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
191 lines (159 loc) • 5.83 kB
JavaScript
"use strict";
var $ = require("../../core/renderer"),
windowUtils = require("../../core/utils/window"),
window = windowUtils.getWindow(),
navigator = windowUtils.getNavigator(),
eventsEngine = require("../../events/core/events_engine"),
devices = require("../../core/devices"),
inArray = require("../../core/utils/array").inArray,
extend = require("../../core/utils/extend").extend,
registerComponent = require("../../core/component_registrator"),
TextEditor = require("./ui.text_editor"),
eventUtils = require("../../events/utils");
var ua = navigator.userAgent,
ignoreCode = [8, 9, 13, 33, 34, 35, 36, 37, 38, 39, 40, 46],
TEXTBOX_CLASS = "dx-textbox",
SEARCHBOX_CLASS = "dx-searchbox",
ICON_CLASS = "dx-icon",
SEARCH_ICON_CLASS = "dx-icon-search";
var TextBox = TextEditor.inherit({
ctor: function ctor(element, options) {
if (options) {
this._showClearButton = options.showClearButton;
}
this.callBase.apply(this, arguments);
},
_getDefaultOptions: function _getDefaultOptions() {
return extend(this.callBase(), {
/**
* @name dxTextBoxOptions.value
* @publicName value
* @type string
* @default ""
*/
value: "",
/**
* @name dxTextBoxOptions.mode
* @publicName mode
* @type Enums.TextBoxMode
* @default "text"
*/
mode: "text",
/**
* @name dxTextBoxOptions.maxlength
* @publicName maxLength
* @type string|number
* @default null
*/
maxLength: null
});
},
_initMarkup: function _initMarkup() {
this.$element().addClass(TEXTBOX_CLASS);
this.callBase();
this.setAria("role", "textbox");
},
_renderContentImpl: function _renderContentImpl() {
this._renderMaxLengthHandlers();
this.callBase();
},
_renderInputType: function _renderInputType() {
this.callBase();
this._renderSearchMode();
},
_renderMaxLengthHandlers: function _renderMaxLengthHandlers() {
if (this._isAndroid()) {
eventsEngine.on(this._input(), eventUtils.addNamespace("keydown", this.NAME), this._onKeyDownAndroidHandler.bind(this));
eventsEngine.on(this._input(), eventUtils.addNamespace("change", this.NAME), this._onChangeAndroidHandler.bind(this));
}
},
_renderProps: function _renderProps() {
this.callBase();
this._toggleMaxLengthProp();
},
_toggleMaxLengthProp: function _toggleMaxLengthProp() {
if (this._isAndroid()) {
return;
}
var maxLength = this.option("maxLength");
if (maxLength > 0) {
this._input().attr("maxLength", maxLength);
} else {
this._input().removeAttr("maxLength");
}
},
_renderSearchMode: function _renderSearchMode() {
var $element = this._$element;
if (this.option("mode") === "search") {
$element.addClass(SEARCHBOX_CLASS);
this._renderSearchIcon();
if (this._showClearButton === undefined) {
this._showClearButton = this.option("showClearButton");
this.option("showClearButton", true);
}
} else {
$element.removeClass(SEARCHBOX_CLASS);
this._$searchIcon && this._$searchIcon.remove();
this.option("showClearButton", this._showClearButton === undefined ? this.option("showClearButton") : this._showClearButton);
delete this._showClearButton;
}
},
_renderSearchIcon: function _renderSearchIcon() {
var $searchIcon = $("<div>").addClass(ICON_CLASS).addClass(SEARCH_ICON_CLASS);
$searchIcon.prependTo(this._input().parent());
this._$searchIcon = $searchIcon;
},
_optionChanged: function _optionChanged(args) {
switch (args.name) {
case "maxLength":
this._toggleMaxLengthProp();
this._renderMaxLengthHandlers();
break;
default:
this.callBase(args);
}
},
_onKeyDownAndroidHandler: function _onKeyDownAndroidHandler(e) {
var maxLength = this.option("maxLength");
if (maxLength) {
var $input = $(e.target),
code = e.keyCode;
this._cutOffExtraChar($input);
return $input.val().length < maxLength || inArray(code, ignoreCode) !== -1 || window.getSelection().toString() !== "";
} else {
return true;
}
},
_onChangeAndroidHandler: function _onChangeAndroidHandler(e) {
var $input = $(e.target);
if (this.option("maxLength")) {
this._cutOffExtraChar($input);
}
},
_cutOffExtraChar: function _cutOffExtraChar($input) {
var maxLength = this.option("maxLength"),
textInput = $input.val();
if (textInput.length > maxLength) {
$input.val(textInput.substr(0, maxLength));
}
},
_isAndroid: function _isAndroid() {
var realDevice = devices.real();
var version = realDevice.version.join(".");
return realDevice.platform === "android" && version && /^(2\.|4\.1)/.test(version) && !/chrome/i.test(ua);
}
});
///#DEBUG
TextBox.__internals = {
uaAccessor: function uaAccessor(value) {
if (!arguments.length) {
return window.DevExpress.ui;
}
ua = value;
},
SEARCHBOX_CLASS: SEARCHBOX_CLASS,
SEARCH_ICON_CLASS: SEARCH_ICON_CLASS
};
///#ENDDEBUG
registerComponent("dxTextBox", TextBox);
module.exports = TextBox;