/lib/source/js/kendo.numerictextbox.js

http://luckyloot.codeplex.com · JavaScript · 867 lines · 447 code · 113 blank · 307 comment · 102 complexity · 1a15560d63daa2b08d2b7d6788d8e8e4 MD5 · raw file 

    

  1. /*

    2. 

  2. * Kendo UI Web v2012.2.710 (http://kendoui.com)

    3. 

  3. * Copyright 2012 Telerik AD. All rights reserved.

    4. 

  4. *

    5. 

  5. * Kendo UI Web commercial licenses may be obtained at http://kendoui.com/web-license

    6. 

  6. * If you do not own a commercial license, this file shall be governed by the

    7. 

  7. * GNU General Public License (GPL) version 3.

    8. 

  8. * For GPL requirements, please review: http://www.gnu.org/copyleft/gpl.html

    9. 

  9. */

    10. 

  10. (function($, undefined) {

    11. 

  11.     /**

    12. 

  12.      * @name kendo.ui.NumericTextBox.Description

    13. 

  13.      *

    14. 

  14.      * @section

    15. 

  15.      * <p>

    16. 

  16.      *    The NumericTextBox widget can convert an INPUT element into a numeric, percentage or currency textbox.

    17. 

  17.      *    The type is defined depending on the specified format. The widget renders spin buttons and with their help you can

    18. 

  18.      *    increment/decrement the value with a predefined step. The NumericTextBox widget accepts only numeric entries.

    19. 

  19.      *    The widget uses <em>kendo.culture.current</em> culture in order to determine number precision and other culture

    20. 

  20.      *    specific properties.

    21. 

  21.      * </p>

    22. 

  22.      *

    23. 

  23.      * <h3>Getting Started</h3>

    24. 

  24.      *

    25. 

  25.      * @exampleTitle Creating a NumericTextBox from existing INPUT element

    26. 

  26.      * @example

    27. 

  27.      * <input id="textBox" />

    28. 

  28.      *

    29. 

  29.      * @exampleTitle NumericTextBox initialization

    30. 

  30.      * @example

    31. 

  31.      * $(document).ready(function(){

    32. 

  32.      *  $("#textBox").kendoNumericTextBox();

    33. 

  33.      * });

    34. 

  34.      *

    35. 

  35.      * @section

    36. 

  36.      * <p>

    37. 

  37.      *  When a <b>NumericTextBox</b> is initialized, it will automatically

    38. 

  38.      *  wraps the input element with span element and will render spin

    39. 

  39.      *  buttons.

    40. 

  40.      * </p>

    41. 

  41.      * <h3>Configuring NumericTextBox behaviors</h3>

    42. 

  42.      * <p>

    43. 

  43.      *  The <b>NumericTextBox</b> provides configuration options that can be

    44. 

  44.      *  easily set during initialization. Among the properties that can be

    45. 

  45.      *  controlled:

    46. 

  46.      * </p>

    47. 

  47.      * <ul>

    48. 

  48.      *  <li>Value of the <b>NumericTextBox</b></li>

    49. 

  49.      *  <li>Minimum and/or maximum values</li>

    50. 

  50.      *  <li>Increment step</li>

    51. 

  51.      *  <li>Precision of the number</li>

    52. 

  52.      *  <li>Number format (any valid number format is allowed)</li>

    53. 

  53.      * </ul>

    54. 

  54.      * <p>

    55. 

  55.      *  To see a full list of available properties and values, review the

    56. 

  56.      *  Slider Configuration API documentation tab.

    57. 

  57.      * </p>

    58. 

  58.      * @exampleTitle Customizing NumericTextBox defaults

    59. 

  59.      * @example

    60. 

  60.      *  $("#textbox").kendoNumericTextBox({

    61. 

  61.      *      value: 10,

    62. 

  62.      *      min: -10,

    63. 

  63.      *      max: 100,

    64. 

  64.      *      step: 0.75,

    65. 

  65.      *      format: "n",

    66. 

  66.      *      decimals: 3

    67. 

  67.      *  });

    68. 

  68.      * @section

    69. 

  69.      * @exampleTitle Create Currency NumericTextBox widget

    70. 

  70.      * @example

    71. 

  71.      *  $("#textbox").kendoNumericTextBox({

    72. 

  72.      *      format: "c2" //Define currency type and 2 digits precision

    73. 

  73.      *  });

    74. 

  74.      * @section

    75. 

  75.      * @exampleTitle Create Percentage NumericTextBox widget

    76. 

  76.      * @example

    77. 

  77.      *  $("#textbox").kendoNumericTextBox({

    78. 

  78.      *      format: "p",

    79. 

  79.      *      value: 0.15 // 15 %

    80. 

  80.      *  });

    81. 

  81.      *

    82. 

  82.      * @section

    83. 

  83.      * <h3>Accessing an Existing NumericTextBox</h3>

    84. 

  84.      * <p>

    85. 

  85.      *  You can reference an existing <b>NumericTextBox</b> instance via

    86. 

  86.      *  <a href="http://api.jquery.com/jQuery.data/">jQuery.data()</a>.

    87. 

  87.      *  Once a reference has been established, you can use the API to control

    88. 

  88.      *  its behavior.

    89. 

  89.      * </p>

    90. 

  90.      *

    91. 

  91.      * @exampleTitle Accessing an existing NumericTextBox instance

    92. 

  92.      * @example

    93. 

  93.      * var numericTextBox = $("#numericTextBox").data("kendoNumericTextBox");

    94. 

  94.      *

    95. 

  95.      */

    96. 

  96.     var kendo = window.kendo,

    97. 

  97.         keys = kendo.keys,

    98. 

  98.         ui = kendo.ui,

    99. 

  99.         Widget = ui.Widget,

    100. 

  100.         parse = kendo.parseFloat,

    101. 

  101.         placeholderSupported = kendo.support.placeholder,

    102. 

  102.         touch = kendo.support.touch,

    103. 

  103.         getCulture = kendo.getCulture,

    104. 

  104.         CHANGE = "change",

    105. 

  105.         DISABLED = "disabled",

    106. 

  106.         INPUT = "k-input",

    107. 

  107.         SPIN = "spin",

    108. 

  108.         TOUCHEND = "touchend",

    109. 

  109.         MOUSEDOWN = touch ? "touchstart" : "mousedown",

    110. 

  110.         MOUSEUP = touch ? "touchmove " + TOUCHEND : "mouseup mouseleave",

    111. 

  111.         DEFAULT = "k-state-default",

    112. 

  112.         FOCUSED = "k-state-focused",

    113. 

  113.         HOVER = "k-state-hover",

    114. 

  114.         HOVEREVENTS = "mouseenter mouseleave",

    115. 

  115.         POINT = ".",

    116. 

  116.         SELECTED = "k-state-selected",

    117. 

  117.         STATEDISABLED = "k-state-disabled",

    118. 

  118.         TYPE = touch ? "number" : "text",

    119. 

  119.         NULL = null,

    120. 

  120.         proxy = $.proxy,

    121. 

  121.         decimals = {

    122. 

  122.             190 : ".",

    123. 

  123.             188 : ","

    124. 

  124.         };

    125. 

  125. 

    126. 

  126.     var NumericTextBox = Widget.extend(/** @lends kendo.ui.NumericTextBox.prototype */{

    127. 

  127.         /**

    128. 

  128.          * @constructs

    129. 

  129.          * @extends kendo.ui.Widget

    130. 

  130.          * @param {Element} element DOM element

    131. 

  131.          * @param {Object} options Configuration options

    132. 

  132.          * @option {Number} [value] <null> Specifies the value of the NumericTextBox widget.

    133. 

  133.          * _example

    134. 

  134.          *  // specify in the HTML

    135. 

  135.          * <input id="numeric" value="10" type="number" min="-100" max="100" step="10"/>

    136. 

  136.          *

    137. 

  137.          * // specify on widget initialization

    138. 

  138.          * $("#numeric").kendoNumericTextBox({

    139. 

  139.          *     min: 0,

    140. 

  140.          *     max: 100,

    141. 

  141.          *     value: 50

    142. 

  142.          * });

    143. 

  143.          * @option {Number} [min] <null> Specifies the smallest value the user can enter.

    144. 

  144.          * _example

    145. 

  145.          *  // specify in the HTML

    146. 

  146.          * <input id="numeric" value="10" type="number" min="-100" max="100" step="10"/>

    147. 

  147.          * <br />

    148. 

  148.          * // specify on widget initialization

    149. 

  149.          * $("#numeric").kendoNumericTextBox({

    150. 

  150.          *     min: 0,

    151. 

  151.          *     max: 100,

    152. 

  152.          *     value: 50

    153. 

  153.          * });

    154. 

  154.          * @option {Number} [max] <null> Specifies the largest value the user can enter.

    155. 

  155.          * _example

    156. 

  156.          *  // specify in the HTML

    157. 

  157.          * <input id="numeric" value="10" type="number" min="-100" max="100" step="10"/>

    158. 

  158.          * <br />

    159. 

  159.          * // specify on widget initialization

    160. 

  160.          * $("#numeric").kendoNumericTextBox({

    161. 

  161.          *     min: 0,

    162. 

  162.          *     max: 100,

    163. 

  163.          *     value: 50

    164. 

  164.          * });

    165. 

  165.          * @option {Number} [decimals] <null> Specifies the number precision. If not set precision defined by current culture is used.

    166. 

  166.          * _example

    167. 

  167.          * // specify on widget initialization

    168. 

  168.          * $("#numeric").kendoNumericTextBox({

    169. 

  169.          *     min: 0,

    170. 

  170.          *     max: 1,

    171. 

  171.          *     step: 0.1,

    172. 

  172.          *     decimals: 1

    173. 

  173.          * });

    174. 

  174.          * @option {Number} [step] <1> Specifies the increment/decrement step.

    175. 

  175.          * _example

    176. 

  176.          *  // specify in the HTML

    177. 

  177.          * <input id="numeric" value="10" type="number" />

    178. 

  178.          * <br />

    179. 

  179.          * // specify on widget initialization

    180. 

  180.          * $("#numeric").kendoNumericTextBox({

    181. 

  181.          *     min: 0,

    182. 

  182.          *     max: 1,

    183. 

  183.          *     step: 0.1

    184. 

  184.          * });

    185. 

  185.          * @option {String} [format] <n> Specifies the format of the number. Any valid number format is allowed.

    186. 

  186.          * _example

    187. 

  187.          * $("#numeric").kendoNumericTextBox({

    188. 

  188.          *    format: "p0", // format as percentage with % sign

    189. 

  189.          *    min: 0,

    190. 

  190.          *    max: 1,

    191. 

  191.          *    step: 0.01

    192. 

  192.          * });

    193. 

  193.          * @option {String} [placeholder] <""> Specifies the text displayed when the input is empty.

    194. 

  194.          * _example

    195. 

  195.          * // specify on widget initialization

    196. 

  196.          * $("#numeric").kendoNumericTextBox({

    197. 

  197.          *     min: 0,

    198. 

  198.          *     max: 100,

    199. 

  199.          *     value: 50,

    200. 

  200.          *     placeholder: "Select A Value"

    201. 

  201.          * });

    202. 

  202.          * @option {String} [upArrowText] <Increase value> Specifies the text of the tooltip on the up arrow.

    203. 

  203.          * _example

    204. 

  204.          * // specify on widget initialization

    205. 

  205.          * $("#numeric").kendoNumericTextBox({

    206. 

  206.          *     min: 0,

    207. 

  207.          *     max: 100,

    208. 

  208.          *     value: 50,

    209. 

  209.          *     upArrowText: "More",

    210. 

  210.          *     downArrowText: "Less"

    211. 

  211.          * });

    212. 

  212.          * @option {String} [downArrowText] <Decrease value> Specifies the text of the tooltip on the down arrow.

    213. 

  213.          * _example

    214. 

  214.          * // specify on widget initialization

    215. 

  215.          * $("#numeric").kendoNumericTextBox({

    216. 

  216.          *     min: 0,

    217. 

  217.          *     max: 100,

    218. 

  218.          *     value: 50,

    219. 

  219.          *     upArrowText: "More",

    220. 

  220.          *     downArrowText: "Less"

    221. 

  221.          * });

    222. 

  222.          * @option {String} [culture] <en-US> Specifies the culture info used by the NumericTextBox widget.

    223. 

  223.          * _example

    224. 

  224.          *

    225. 

  225.          * // specify on widget initialization

    226. 

  226.          * $("#numeric").kendoNumericTextBox({

    227. 

  227.          *     culture: "de-DE"

    228. 

  228.          * });

    229. 

  229.          */

    230. 

  230.          init: function(element, options) {

    231. 

  231.              var that = this,

    232. 

  232.              isStep = options && options.step !== undefined,

    233. 

  233.              min, max, step, value, format;

    234. 

  234. 

    235. 

  235.              Widget.fn.init.call(that, element, options);

    236. 

  236. 

    237. 

  237.              options = that.options;

    238. 

  238.              element = that.element.addClass(INPUT)

    239. 

  239.                            .bind({

    240. 

  240.                                keydown: proxy(that._keydown, that),

    241. 

  241.                                paste: proxy(that._paste, that),

    242. 

  242.                                blur: proxy(that._focusout, that)

    243. 

  243.                            });

    244. 

  244. 

    245. 

  245.              element.closest("form")

    246. 

  246.                     .bind("reset", function() {

    247. 

  247.                         setTimeout(function() {

    248. 

  248.                             that.value(element[0].value);

    249. 

  249.                         });

    250. 

  250.                     });

    251. 

  251. 

    252. 

  252.              options.placeholder = options.placeholder || element.attr("placeholder");

    253. 

  253. 

    254. 

  254.              that._wrapper();

    255. 

  255.              that._arrows();

    256. 

  256.              that._input();

    257. 

  257. 

    258. 

  258.              that._text.focus(proxy(that._click, that));

    259. 

  259. 

    260. 

  260.              min = that.min(element.attr("min"));

    261. 

  261.              max = that.max(element.attr("max"));

    262. 

  262.              step = that._parse(element.attr("step"));

    263. 

  263. 

    264. 

  264.              if (options.min === NULL && min !== NULL) {

    265. 

  265.                  options.min = min;

    266. 

  266.              }

    267. 

  267. 

    268. 

  268.              if (options.max === NULL && max !== NULL) {

    269. 

  269.                  options.max = max;

    270. 

  270.              }

    271. 

  271. 

    272. 

  272.              if (!isStep && step !== NULL) {

    273. 

  273.                  options.step = step;

    274. 

  274.              }

    275. 

  275. 

    276. 

  276.              format = options.format;

    277. 

  277.              if (format.slice(0,3) === "{0:") {

    278. 

  278.                  options.format = format.slice(3, format.length - 1);

    279. 

  279.              }

    280. 

  280. 

    281. 

  281.              value = options.value;

    282. 

  282.              that.value(value !== NULL ? value : element.val());

    283. 

  283. 

    284. 

  284.              that.enable(!element.is('[disabled]'));

    285. 

  285. 

    286. 

  286.              kendo.notify(that);

    287. 

  287.          },

    288. 

  288. 

    289. 

  289.         options: {

    290. 

  290.             name: "NumericTextBox",

    291. 

  291.             decimals: NULL,

    292. 

  292.             min: NULL,

    293. 

  293.             max: NULL,

    294. 

  294.             value: NULL,

    295. 

  295.             step: 1,

    296. 

  296.             culture: "",

    297. 

  297.             format: "n",

    298. 

  298.             spinners: true,

    299. 

  299.             placeholder: "",

    300. 

  300.             upArrowText: "Increase value",

    301. 

  301.             downArrowText: "Decrease value"

    302. 

  302.         },

    303. 

  303.         events: [

    304. 

  304.              /**

    305. 

  305.              * Fires when the value is changed

    306. 

  306.              * @name kendo.ui.NumericTextBox#change

    307. 

  307.              * @event

    308. 

  308.              * @param {Event} e

    309. 

  309.              * @example

    310. 

  310.              * $("#numeric").kendoNumericTextBox({

    311. 

  311.              *     change: function(e) {

    312. 

  312.              *         // handle event

    313. 

  313.              *     }

    314. 

  314.              * });

    315. 

  315.              * @exampleTitle To set after initialization

    316. 

  316.              * @example

    317. 

  317.              * // get a reference to the numeric textbox widget

    318. 

  318.              * var numeric = $("#numeric").data("kendoNumericTextBox");

    319. 

  319.              * // bind to the change event

    320. 

  320.              * numeric.bind("change", function(e) {

    321. 

  321.              *     // handle event

    322. 

  322.              * });

    323. 

  323.              */

    324. 

  324.             CHANGE,

    325. 

  325.              /**

    326. 

  326.              * Fires when the value is changed from the spin buttons

    327. 

  327.              * @name kendo.ui.NumericTextBox#spin

    328. 

  328.              * @event

    329. 

  329.              * @param {Event} e

    330. 

  330.              * @example

    331. 

  331.              * $("#numeric").kendoNumericTextBox({

    332. 

  332.              *     spin: function(e) {

    333. 

  333.              *         // handle event

    334. 

  334.              *     }

    335. 

  335.              * });

    336. 

  336.              * @exampleTitle To set after initialization

    337. 

  337.              * @example

    338. 

  338.              * // get a reference to the numeric textbox widget

    339. 

  339.              * var numeric = $("#numeric").data("kendoNumericTextBox");

    340. 

  340.              * // bind to the spin event

    341. 

  341.              * numeric.bind("spin", function(e) {

    342. 

  342.              *     // handle event

    343. 

  343.              * });

    344. 

  344.              */

    345. 

  345.             SPIN

    346. 

  346.         ],

    347. 

  347.         /**

    348. 

  348.         * Enable/Disable the numerictextbox widget.

    349. 

  349.         * @param {Boolean} enable The argument, which defines whether to enable/disable tha numerictextbox.

    350. 

  350.         * @example

    351. 

  351.         * // get a reference to the numeric textbox

    352. 

  352.         * var textbox = $("#textbox").data("kendoNumericTextBox");

    353. 

  353.         *

    354. 

  354.         * // disables the numerictextbox

    355. 

  355.         * numerictextbox.enable(false);

    356. 

  356.         *

    357. 

  357.         * // enables the numerictextbox

    358. 

  358.         * numerictextbox.enable(true);

    359. 

  359.         */

    360. 

  360.         enable: function(enable) {

    361. 

  361.             var that = this,

    362. 

  362.                 text = that._text.add(that.element),

    363. 

  363.                 wrapper = that._inputWrapper.unbind(HOVEREVENTS),

    364. 

  364.                 upArrow = that._upArrow.unbind(MOUSEDOWN),

    365. 

  365.                 downArrow = that._downArrow.unbind(MOUSEDOWN);

    366. 

  366. 

    367. 

  367.             that._toggleText(true);

    368. 

  368. 

    369. 

  369.             if (enable === false) {

    370. 

  370.                 wrapper

    371. 

  371.                     .removeClass(DEFAULT)

    372. 

  372.                     .addClass(STATEDISABLED);

    373. 

  373. 

    374. 

  374.                 text.attr(DISABLED, DISABLED);

    375. 

  375.             } else {

    376. 

  376.                 wrapper

    377. 

  377.                     .addClass(DEFAULT)

    378. 

  378.                     .removeClass(STATEDISABLED)

    379. 

  379.                     .bind(HOVEREVENTS, that._toggleHover);

    380. 

  380. 

    381. 

  381.                 text.removeAttr(DISABLED);

    382. 

  382. 

    383. 

  383.                 upArrow.bind(MOUSEDOWN, function(e) {

    384. 

  384.                     e.preventDefault();

    385. 

  385.                     that._spin(1);

    386. 

  386.                     that._upArrow.addClass(SELECTED);

    387. 

  387.                 });

    388. 

  388. 

    389. 

  389.                 downArrow.bind(MOUSEDOWN, function(e) {

    390. 

  390.                     e.preventDefault();

    391. 

  391.                     that._spin(-1);

    392. 

  392.                     that._downArrow.addClass(SELECTED);

    393. 

  393.                 });

    394. 

  394.             }

    395. 

  395.         },

    396. 

  396. 

    397. 

  397.         /**

    398. 

  398.         * Gets/Sets the min value of the NumericTextBox.

    399. 

  399.         * @param {Number | String} value The min value to set.

    400. 

  400.         * @returns {Number} The min value of the NumericTextBox.

    401. 

  401.         * @example

    402. 

  402.         * // get a reference to the NumericTextBox widget

    403. 

  403.         * var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

    404. 

  404.         *

    405. 

  405.         * // get the min value of the numerictextbox.

    406. 

  406.         * var min = numerictextbox.min();

    407. 

  407.         *

    408. 

  408.         * // set the min value of the numerictextbox.

    409. 

  409.         * numerictextbox.min(-10);

    410. 

  410.         */

    411. 

  411.         min: function(value) {

    412. 

  412.             return this._option("min", value);

    413. 

  413.         },

    414. 

  414. 

    415. 

  415.         /**

    416. 

  416.         * Gets/Sets the max value of the NumericTextBox.

    417. 

  417.         * @param {Number | String} value The max value to set.

    418. 

  418.         * @returns {Number} The max value of the NumericTextBox.

    419. 

  419.         * @example

    420. 

  420.         * // get a reference to the NumericTextBox widget

    421. 

  421.         * var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

    422. 

  422.         *

    423. 

  423.         * // get the max value of the numerictextbox.

    424. 

  424.         * var max = numerictextbox.max();

    425. 

  425.         *

    426. 

  426.         * // set the max value of the numerictextbox.

    427. 

  427.         * numerictextbox.max(10);

    428. 

  428.         */

    429. 

  429.         max: function(value) {

    430. 

  430.             return this._option("max", value);

    431. 

  431.         },

    432. 

  432. 

    433. 

  433.         /**

    434. 

  434.         * Gets/Sets the step value of the NumericTextBox.

    435. 

  435.         * @param {Number | String} value The step value to set.

    436. 

  436.         * @returns {Number} The step value of the NumericTextBox.

    437. 

  437.         * @example

    438. 

  438.         * // get a reference to the NumericTextBox widget

    439. 

  439.         * var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");

    440. 

  440.         *

    441. 

  441.         * // get the step value of the numerictextbox.

    442. 

  442.         * var step = numerictextbox.step();

    443. 

  443.         *

    444. 

  444.         * // set the step value of the numerictextbox.

    445. 

  445.         * numerictextbox.step(0.1);

    446. 

  446.         */

    447. 

  447.         step: function(value) {

    448. 

  448.             return this._option("step", value);

    449. 

  449.         },

    450. 

  450. 

    451. 

  451.         /**

    452. 

  452.         * Gets/Sets the value of the numerictextbox.

    453. 

  453.         * @param {Number | String} value The value to set.

    454. 

  454.         * @returns {Number} The value of the numerictextbox.

    455. 

  455.         * @example

    456. 

  456.         * // get a referene to the numeric textbox

    457. 

  457.         * var numerictextbox = $("#textbox").data("kendoNumericTextBox");

    458. 

  458.         *

    459. 

  459.         * // get the value of the numerictextbox.

    460. 

  460.         * var value = numerictextbox.value();

    461. 

  461.         *

    462. 

  462.         * // set the value of the numerictextbox.

    463. 

  463.         * numerictextbox.value("10.20");

    464. 

  464.         */

    465. 

  465.         value: function(value) {

    466. 

  466.             var that = this, adjusted;

    467. 

  467. 

    468. 

  468.             if (value === undefined) {

    469. 

  469.                 return that._value;

    470. 

  470.             }

    471. 

  471. 

    472. 

  472.             value = that._parse(value);

    473. 

  473.             adjusted = that._adjust(value);

    474. 

  474. 

    475. 

  475.             if (value !== adjusted) {

    476. 

  476.                 return;

    477. 

  477.             }

    478. 

  478. 

    479. 

  479.             that._update(value);

    480. 

  480.             that._old = that._value;

    481. 

  481.         },

    482. 

  482. 

    483. 

  483.         _adjust: function(value) {

    484. 

  484.             var that = this,

    485. 

  485.             options = that.options,

    486. 

  486.             min = options.min,

    487. 

  487.             max = options.max;

    488. 

  488. 

    489. 

  489.             if (value === NULL) {

    490. 

  490.                 return value;

    491. 

  491.             }

    492. 

  492. 

    493. 

  493.             if (min !== NULL && value < min) {

    494. 

  494.                 value = min;

    495. 

  495.             } else if (max !== NULL && value > max) {

    496. 

  496.                 value = max;

    497. 

  497.             }

    498. 

  498. 

    499. 

  499.             return value;

    500. 

  500.         },

    501. 

  501. 

    502. 

  502.         _arrows: function() {

    503. 

  503.             var that = this,

    504. 

  504.             arrows,

    505. 

  505.             options = that.options,

    506. 

  506.             spinners = options.spinners,

    507. 

  507.             element = that.element;

    508. 

  508. 

    509. 

  509.             arrows = element.siblings(".k-icon");

    510. 

  510. 

    511. 

  511.             if (!arrows[0]) {

    512. 

  512.                 arrows = $(buttonHtml("n", options.upArrowText) + buttonHtml("s", options.downArrowText))

    513. 

  513.                         .insertAfter(element);

    514. 

  514. 

    515. 

  515.                 arrows.wrapAll('<span class="k-select"/>');

    516. 

  516.             }

    517. 

  517. 

    518. 

  518.             arrows.bind(MOUSEUP, function(e) {

    519. 

  519.                 if (!touch || kendo.eventTarget(e) != e.currentTarget || e.type === TOUCHEND) {

    520. 

  520.                     clearTimeout( that._spinning );

    521. 

  521.                 }

    522. 

  522.                 arrows.removeClass(SELECTED);

    523. 

  523.             });

    524. 

  524. 

    525. 

  525.             if (!spinners) {

    526. 

  526.                 arrows.toggle(spinners);

    527. 

  527.                 that._inputWrapper.addClass("k-expand-padding");

    528. 

  528.             }

    529. 

  529. 

    530. 

  530.             that._upArrow = arrows.eq(0);

    531. 

  531.             that._downArrow = arrows.eq(1);

    532. 

  532.         },

    533. 

  533. 

    534. 

  534.         _blur: function() {

    535. 

  535.             var that = this;

    536. 

  536. 

    537. 

  537.             that._toggleText(true);

    538. 

  538.             that._change(that.element.val());

    539. 

  539.         },

    540. 

  540. 

    541. 

  541.         _click: function(e) {

    542. 

  542.             var that = this;

    543. 

  543. 

    544. 

  544.             clearTimeout(that._focusing);

    545. 

  545.             that._focusing = setTimeout(function() {

    546. 

  546.                 var input = e.target,

    547. 

  547.                     idx = caret(input),

    548. 

  548.                     value = input.value.substring(0, idx),

    549. 

  549.                     format = that._format(that.options.format),

    550. 

  550.                     group = format[","],

    551. 

  551.                     groupRegExp = new RegExp("\\" + group, "g"),

    552. 

  552.                     extractRegExp = new RegExp("([\\d\\" + group + "]+)(\\" + format[POINT] + ")?(\\d+)?"),

    553. 

  553.                     result = extractRegExp.exec(value),

    554. 

  554.                     caretPosition = 0;

    555. 

  555. 

    556. 

  556.                 if (result) {

    557. 

  557.                     caretPosition = result[0].replace(groupRegExp, "").length;

    558. 

  558. 

    559. 

  559.                     if (value.indexOf("(") != -1 && that._value < 0) {

    560. 

  560.                         caretPosition++;

    561. 

  561.                     }

    562. 

  562.                 }

    563. 

  563. 

    564. 

  564.                 that._focusin();

    565. 

  565. 

    566. 

  566.                 caret(that.element[0], caretPosition);

    567. 

  567.             });

    568. 

  568.         },

    569. 

  569. 

    570. 

  570.         _change: function(value) {

    571. 

  571.             var that = this;

    572. 

  572. 

    573. 

  573.             that._update(value);

    574. 

  574.             value = that._value;

    575. 

  575. 

    576. 

  576.             if (that._old != value) {

    577. 

  577.                 that._old = value;

    578. 

  578.                 that.trigger(CHANGE);

    579. 

  579. 

    580. 

  580.                 // trigger the DOM change event so any subscriber gets notified

    581. 

  581.                 that.element.trigger(CHANGE);

    582. 

  582.             }

    583. 

  583.         },

    584. 

  584. 

    585. 

  585.         _culture: function(culture) {

    586. 

  586.             return culture || getCulture(this.options.culture);

    587. 

  587.         },

    588. 

  588. 

    589. 

  589.         _focusin: function() {

    590. 

  590.             var that = this;

    591. 

  591.             that._toggleText(false);

    592. 

  592.             that.element.focus();

    593. 

  593.             that._inputWrapper.addClass(FOCUSED);

    594. 

  594.         },

    595. 

  595. 

    596. 

  596.         _focusout: function() {

    597. 

  597.             var that = this;

    598. 

  598. 

    599. 

  599.             clearTimeout(that._focusing);

    600. 

  600.             that._inputWrapper.removeClass(FOCUSED);

    601. 

  601.             that._blur();

    602. 

  602.         },

    603. 

  603. 

    604. 

  604.         _format: function(format, culture) {

    605. 

  605.             var numberFormat = this._culture(culture).numberFormat;

    606. 

  606. 

    607. 

  607.             format = format.toLowerCase();

    608. 

  608. 

    609. 

  609.             if (format.indexOf("c") > -1) {

    610. 

  610.                 numberFormat = numberFormat.currency;

    611. 

  611.             } else if (format.indexOf("p") > -1) {

    612. 

  612.                 numberFormat = numberFormat.percent;

    613. 

  613.             }

    614. 

  614. 

    615. 

  615.             return numberFormat;

    616. 

  616.         },

    617. 

  617. 

    618. 

  618.         _input: function() {

    619. 

  619.             var that = this,

    620. 

  620.                 CLASSNAME = "k-formatted-value",

    621. 

  621.                 element = that.element.show()[0],

    622. 

  622.                 wrapper = that.wrapper,

    623. 

  623.                 text;

    624. 

  624. 

    625. 

  625. 

    626. 

  626.             text = wrapper.find(POINT + CLASSNAME);

    627. 

  627. 

    628. 

  628.             if (!text[0]) {

    629. 

  629.                 text = $("<input />").insertBefore(element).addClass(CLASSNAME);

    630. 

  630.             }

    631. 

  631. 

    632. 

  632.             element.type = TYPE;

    633. 

  633.             text[0].type = "text";

    634. 

  634.             text[0].style.cssText = element.style.cssText;

    635. 

  635.             text.attr("placeholder", that.options.placeholder);

    636. 

  636. 

    637. 

  637.             that._text = text.attr("readonly", true)

    638. 

  638.                              .addClass(element.className);

    639. 

  639.         },

    640. 

  640. 

    641. 

  641.         _keydown: function(e) {

    642. 

  642.             var that = this,

    643. 

  643.                 key = e.keyCode;

    644. 

  644. 

    645. 

  645.             if (key == keys.DOWN) {

    646. 

  646.                 that._step(-1);

    647. 

  647.             } else if (key == keys.UP) {

    648. 

  648.                 that._step(1);

    649. 

  649.             } else if (key == keys.ENTER) {

    650. 

  650.                 that._change(that.element.val());

    651. 

  651.             }

    652. 

  652. 

    653. 

  653.             if (that._prevent(key) && !e.ctrlKey) {

    654. 

  654.                 e.preventDefault();

    655. 

  655.             }

    656. 

  656.         },

    657. 

  657. 

    658. 

  658.         _paste: function(e) {

    659. 

  659.             var that = this,

    660. 

  660.                 element = e.target,

    661. 

  661.                 value = element.value;

    662. 

  662. 

    663. 

  663.             setTimeout(function() {

    664. 

  664.                 if (that._parse(element.value) === NULL) {

    665. 

  665.                     that._update(value);

    666. 

  666.                 }

    667. 

  667.             });

    668. 

  668.         },

    669. 

  669. 

    670. 

  670.         _prevent: function(key) {

    671. 

  671.             var that = this,

    672. 

  672.                 element = that.element[0],

    673. 

  673.                 value = element.value,

    674. 

  674.                 options = that.options,

    675. 

  675.                 min = options.min,

    676. 

  676.                 numberFormat = that._format(options.format),

    677. 

  677.                 separator = numberFormat[POINT],

    678. 

  678.                 precision = options.decimals,

    679. 

  679.                 idx = caret(element),

    680. 

  680.                 prevent = true,

    681. 

  681.                 end;

    682. 

  682. 

    683. 

  683.             if (precision === NULL) {

    684. 

  684.                 precision = numberFormat.decimals;

    685. 

  685.             }

    686. 

  686. 

    687. 

  687.             if ((key > 16 && key < 21) ||

    688. 

  688.                 (key > 32 && key < 37) ||

    689. 

  689.                 (key > 47 && key < 58) ||

    690. 

  690.                 (key > 95 && key < 106) ||

    691. 

  691.                  key == keys.INSERT ||

    692. 

  692.                  key == keys.DELETE ||

    693. 

  693.                  key == keys.LEFT ||

    694. 

  694.                  key == keys.RIGHT ||

    695. 

  695.                  key == keys.TAB ||

    696. 

  696.                  key == keys.BACKSPACE ||

    697. 

  697.                  key == keys.ENTER) {

    698. 

  698.                 prevent = false;

    699. 

  699.             } else if (decimals[key] === separator && precision > 0 && value.indexOf(separator) == -1) {

    700. 

  700.                 prevent = false;

    701. 

  701.             } else if ((min === NULL || min < 0) && value.indexOf("-") == -1 && (key == 189 || key == 109) && idx === 0) { //sign

    702. 

  702.                 prevent = false;

    703. 

  703.             } else if (key == 110 && precision > 0 && value.indexOf(separator) == -1) {

    704. 

  704.                 end = value.substring(idx);

    705. 

  705. 

    706. 

  706.                 element.value = value.substring(0, idx) + separator + end;

    707. 

  707.             }

    708. 

  708. 

    709. 

  709.             return prevent;

    710. 

  710.         },

    711. 

  711. 

    712. 

  712.         _option: function(option, value) {

    713. 

  713.             var that = this,

    714. 

  714.                 options = that.options;

    715. 

  715. 

    716. 

  716.             if (value === undefined) {

    717. 

  717.                 return options[option];

    718. 

  718.             }

    719. 

  719. 

    720. 

  720.             value = that._parse(value);

    721. 

  721. 

    722. 

  722.             if (!value && option === "step") {

    723. 

  723.                 return;

    724. 

  724.             }

    725. 

  725. 

    726. 

  726.             options[option] = that._parse(value);

    727. 

  727.         },

    728. 

  728. 

    729. 

  729.         _spin: function(step, timeout) {

    730. 

  730.             var that = this;

    731. 

  731. 

    732. 

  732.             timeout = timeout || 500;

    733. 

  733. 

    734. 

  734.             clearTimeout( that._spinning );

    735. 

  735.             that._spinning = setTimeout(function() {

    736. 

  736.                 that._spin(step, 50);

    737. 

  737.             }, timeout );

    738. 

  738. 

    739. 

  739.             that._step(step);

    740. 

  740.         },

    741. 

  741. 

    742. 

  742.         _step: function(step) {

    743. 

  743.             var that = this,

    744. 

  744.                 element = that.element,

    745. 

  745.                 value = that._parse(element.val()) || 0;

    746. 

  746. 

    747. 

  747.             if (document.activeElement != element[0]) {

    748. 

  748.                 that._focusin();

    749. 

  749.             }

    750. 

  750. 

    751. 

  751.             value += that.options.step * step;

    752. 

  752. 

    753. 

  753.             that._update(that._adjust(value));

    754. 

  754. 

    755. 

  755.             that.trigger(SPIN);

    756. 

  756.         },

    757. 

  757. 

    758. 

  758.         _toggleHover: function(e) {

    759. 

  759.             if (!touch) {

    760. 

  760.                 $(e.currentTarget).toggleClass(HOVER, e.type === "mouseenter");

    761. 

  761.             }

    762. 

  762.         },

    763. 

  763. 

    764. 

  764.         _toggleText: function(toggle) {

    765. 

  765.             var that = this;

    766. 

  766. 

    767. 

  767.             toggle = !!toggle;

    768. 

  768.             that._text.toggle(toggle);

    769. 

  769.             that.element.toggle(!toggle);

    770. 

  770.         },

    771. 

  771. 

    772. 

  772.         _parse: function(value, culture) {

    773. 

  773.             return parse(value, this._culture(culture), this.options.format);

    774. 

  774.         },

    775. 

  775. 

    776. 

  776.         _update: function(value) {

    777. 

  777.             var that = this,

    778. 

  778.                 options = that.options,

    779. 

  779.                 format = options.format,

    780. 

  780.                 decimals = options.decimals,

    781. 

  781.                 culture = that._culture(),

    782. 

  782.                 numberFormat = that._format(format, culture),

    783. 

  783.                 isNotNull;

    784. 

  784. 

    785. 

  785.             if (decimals === NULL) {

    786. 

  786.                 decimals = numberFormat.decimals;

    787. 

  787.             }

    788. 

  788. 

    789. 

  789.             value = that._parse(value, culture);

    790. 

  790. 

    791. 

  791.             isNotNull = value !== NULL;

    792. 

  792. 

    793. 

  793.             if (isNotNull) {

    794. 

  794.                 value = parseFloat(value.toFixed(decimals));

    795. 

  795.             }

    796. 

  796. 

    797. 

  797.             that._value = value = that._adjust(value);

    798. 

  798.             that._placeholder(kendo.toString(value, format, culture));

    799. 

  799.             that.element.val(isNotNull ? value.toString().replace(POINT, numberFormat[POINT]) : "");

    800. 

  800.         },

    801. 

  801. 

    802. 

  802.         _placeholder: function(value) {

    803. 

  803.             this._text.val(value);

    804. 

  804.             if (!placeholderSupported && !value) {

    805. 

  805.                 this._text.val(this.options.placeholder);

    806. 

  806.             }

    807. 

  807.         },

    808. 

  808. 

    809. 

  809.         _wrapper: function() {

    810. 

  810.             var that = this,

    811. 

  811.                 element = that.element,

    812. 

  812.                 wrapper;

    813. 

  813. 

    814. 

  814.             wrapper = element.parents(".k-numerictextbox");

    815. 

  815. 

    816. 

  816.             if (!wrapper.is("span.k-numerictextbox")) {

    817. 

  817.                 wrapper = element.hide().wrap('<span class="k-numeric-wrap k-state-default" />').parent();

    818. 

  818.                 wrapper = wrapper.wrap("<span/>").parent();

    819. 

  819.             }

    820. 

  820. 

    821. 

  821.             wrapper[0].style.cssText = element[0].style.cssText;

    822. 

  822.             element[0].style.width = "";

    823. 

  823.             that.wrapper = wrapper.addClass("k-widget k-numerictextbox").show();

    824. 

  824.             that._inputWrapper = $(wrapper[0].firstChild);

    825. 

  825.         }

    826. 

  826.     });

    827. 

  827. 

    828. 

  828.     function buttonHtml(className, text) {

    829. 

  829.         return '<span unselectable="on" class="k-link"><span unselectable="on" class="k-icon k-i-arrow-' + className + '" title="' + text + '">' + text + '</span></span>';

    830. 

  830.     }

    831. 

  831. 

    832. 

  832.     function caret(element, position) {

    833. 

  833.         var range,

    834. 

  834.             isPosition = position !== undefined;

    835. 

  835. 

    836. 

  836.         if (document.selection) {

    837. 

  837.             if ($(element).is(":visible")) {

    838. 

  838.                 element.focus();

    839. 

  839.             }

    840. 

  840.             range = document.selection.createRange();

    841. 

  841.             if (isPosition) {

    842. 

  842.                 range.move("character", position);

    843. 

  843.                 range.select();

    844. 

  844.             } else {

    845. 

  845.                 var rangeElement = element.createTextRange(),

    846. 

  846.                     rangeDuplicated = rangeElement.duplicate();

    847. 

  847.                     rangeElement.moveToBookmark(range.getBookmark());

    848. 

  848.                     rangeDuplicated.setEndPoint('EndToStart', rangeElement);

    849. 

  849. 

    850. 

  850.                 position = rangeDuplicated.text.length;

    851. 

  851. 

    852. 

  852.             }

    853. 

  853.         } else if (element.selectionStart !== undefined) {

    854. 

  854.             if (isPosition) {

    855. 

  855.                 element.focus();

    856. 

  856.                 element.setSelectionRange(position, position);

    857. 

  857.             } else {

    858. 

  858.                 position = element.selectionStart;

    859. 

  859.             }

    860. 

  860.         }

    861. 

  861. 

    862. 

  862.         return position;

    863. 

  863.     }

    864. 

  864. 

    865. 

  865.     ui.plugin(NumericTextBox);

    866. 

  866. })(jQuery);

    867. 

  867. ;
    868.