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