UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

191 lines (159 loc) 5.83 kB
"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;