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     },
  24     classes: "spinner",
  25     components: [
  26       {kind: "FittableColumns", components: [
  27         {kind: "FittableRows", components: [
  28           {name: "label", classes: "xv-label"}
  29         ]},
  30         {kind: "FittableRows", fit: true, components: [
  31           {kind: "onyx.Slider", name: "slider", onChange: "sliderChanged", classes: "slider"},
  32           {kind: "onyx.InputDecorator", tag: "div", classes: "input-decorator", components: [
  33             {name: "input", kind: "onyx.Input", classes: "xv-subinput",
  34               onchange: "inputChanged", onkeydown: "keyDown"},
  35             {kind: "FittableRows", components: [
  36               {kind: "onyx.Button", classes: "buttons", ontap: "increase",
  37                 attributes: {tabIndex: "-1"}, components: [
  38                 {tag: "i", classes: "icon-angle-up"}
  39               ]},
  40               {kind: "onyx.Button", classes: "buttons", ontap: "decrease",
  41                 attributes: {tabIndex: "-1"}, components: [
  42                 {tag: "i", classes: "icon-angle-down"}
  43               ]}
  44             ]}
  45           ]}
  46         ]}
  47       ]}
  48     ],
  49     create: function () {
  50       this.inherited(arguments);
  51       this.labelChanged();
  52       this.showSliderChanged();
  53       this.showLabelChanged();
  54     },
  55     /**
  56       Decreases the value of the input field by an increment of
  57       one until the value of 0.
  58     */
  59     decrease: function (inSender, inEvent) {
  60       var value = Math.max(parseInt(this.$.input.getValue() || 0, 10) - 1, 0);
  61       this.setValue(value);
  62       this.setSliderValue();
  63     },
  64     /**
  65       Increases the value of the input field by an increment of
  66       one at at maximum of the published maximum value.
  67     */
  68     increase: function (inSender, inEvent) {
  69       var value = Math.min(parseInt(this.$.input.getValue() || 0, 10) + 1, this.getMaxValue());
  70       this.setValue(value);
  71       this.setSliderValue();
  72     },
  73     /**
  74       Set the slider value equal to the value
  75       of the input field.
  76     */
  77     setSliderValue: function () {
  78       this.$.slider.setValue(this.$.input.getValue());
  79     },
  80     /**
  81       Inherit setValue from NumberWidget and set
  82       slider with value.
  83     */
  84     setValue: function (value, options) {
  85       this.inherited(arguments);
  86       this.setSliderValue();
  87     },
  88     showSliderChanged: function () {
  89       this.$.slider.setShowing(this.showSlider);
  90     },
  91     /**
  92       Set the input value equal to the value
  93       of the slider field.
  94     */
  95     sliderChanged: function (inSender, inEvent) {
  96       this.$.input.setValue(Math.round(this.$.slider.getValue()));
  97     }
  98   });
  99
 100 }());