git.roojs.org Git - xtuple/blob - lib/enyo-x/source/widgets/number_spinner.js

   1 /*jshint node:true, indent:2, curly:true, eqeqeq:true, immed:true, latedef:true, newcap:true, noarg:true,
   2 regexp:true, undef:true, trailing:true, white:true */
   3 /*global XT:true, XV:true, Globalize:true, enyo:true, _:true */
   4
   5 (function () {
   6
   7   /**
   8     @name XV.NumberSpinnerWidget
   9     @extends XV.NumberWidget
  10    */
  11   enyo.kind(
  12     /** @lends XV.Number# */{
  13     name: "XV.NumberSpinnerWidget",
  14     kind: "XV.NumberWidget",
  15     published: {
  16       maxlength: 3,
  17       scale: XT.QTY_SCALE,
  18       formatting: true,
  19       showSlider: false,
  20       maxValue: 100,
  21       label: "",
  22       showLabel: true,
  23       type: "text"
  24     },
  25     classes: "xv-spinnerwidget",
  26     components: [
  27       {controlClasses: 'enyo-inline', components: [
  28         {name: "label", classes: "xv-label"},
  29         {controlClasses: 'enyo-inline', components: [
  30           {kind: "onyx.Slider", name: "slider", onChange: "sliderChanged", classes: "slider"},
  31           {kind: "onyx.InputDecorator", tag: "div", components: [
  32             {name: "input", kind: "onyx.Input",
  33               onchange: "inputChanged", onkeydown: "keyDown"},
  34             {kind: "FittableRows", components: [
  35               {kind: "onyx.Button", classes: "buttons", ontap: "increase",
  36                 attributes: {tabIndex: "-1"}, components: [
  37                 {tag: "i", classes: "icon-angle-up"}
  38               ]},
  39               {kind: "onyx.Button", classes: "buttons", ontap: "decrease",
  40                 attributes: {tabIndex: "-1"}, components: [
  41                 {tag: "i", classes: "icon-angle-down"}
  42               ]}
  43             ]}
  44           ]}
  45         ]}
  46       ]}
  47     ],
  48     create: function () {
  49       this.inherited(arguments);
  50       this.showSliderChanged();
  51     },
  52     /**
  53       Decreases the value of the input field by an increment of
  54       one until the value of 0.
  55     */
  56     decrease: function (inSender, inEvent) {
  57       var value = Math.max(parseInt(this.$.input.getValue() || 0, 10) - 1, 0);
  58       this.setValue(value);
  59       this.setSliderValue();
  60     },
  61     /**
  62       Increases the value of the input field by an increment of
  63       one at at maximum of the published maximum value.
  64     */
  65     increase: function (inSender, inEvent) {
  66       var value = Math.min(parseInt(this.$.input.getValue() || 0, 10) + 1, this.getMaxValue());
  67       this.setValue(value);
  68       this.setSliderValue();
  69     },
  70     /**
  71       Set the slider value equal to the value
  72       of the input field.
  73     */
  74     setSliderValue: function () {
  75       this.$.slider.setValue(this.$.input.getValue());
  76     },
  77     /**
  78       Inherit setValue from NumberWidget and set
  79       slider with value.
  80     */
  81     setValue: function (value, options) {
  82       this.inherited(arguments);
  83       this.setSliderValue();
  84     },
  85     showSliderChanged: function () {
  86       this.$.slider.setShowing(this.showSlider);
  87     },
  88     /**
  89       Set the input value equal to the value
  90       of the slider field.
  91     */
  92     sliderChanged: function (inSender, inEvent) {
  93       this.$.input.setValue(Math.round(this.$.slider.getValue()));
  94     }
  95   });
  96
  97 }());