git.roojs.org Git - xtuple/blob - lib/enyo-x/source/widgets/toggle_button.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, Globalize:true, enyo:true, _:true */
   4
   5 (function () {
   6
   7   /**
   8     @name XV.ToggleButton
   9     @class A control that looks like a switch with labels for two states.<br />
  10     Derived from <a href="http://enyojs.com/api/#onyx.ToggleButton">onyx.ToggleButton</a>.
  11     @extends onyx.ToggleButton
  12    */
  13   enyo.kind(
  14     /** @lends XV.ToggleButton# */{
  15     name: "XV.ToggleButton",
  16     kind: "onyx.ToggleButton",
  17     published: {
  18       attr: null
  19     },
  20     events: {
  21       onValueChange: ""
  22     },
  23     handlers: {
  24       onChange: "changed"
  25     },
  26     /**
  27      @todo Document the clear method.
  28      */
  29     clear: function (options) {
  30       this.setValue(false, options);
  31     },
  32     /**
  33      @todo Document the setValue method.
  34      */
  35     setValue: function (value, options) {
  36       options = options || {};
  37       this._silent = options.silent;
  38       this.inherited(arguments);
  39       this._silent = false;
  40     },
  41     /**
  42      @todo Document the changed method.
  43      */
  44     changed: function (inSender, inEvent) {
  45       if (!this._silent) {
  46         inEvent.value = this.getValue();
  47         this.doValueChange(inEvent);
  48       }
  49     }
  50   });
  51
  52   /**
  53     @name XV.ToggleButtonWidget
  54     @class An input control consisting of fittable columns:
  55      label, decorator, and toggle button.<br />
  56     Use to implement a toggle button, a switch with labels for two states.<br />
  57     Creates an HTML input element.
  58     @extends XV.Input
  59    */
  60   enyo.kind(/** @lends XV.ToggleButtonWidget# */{
  61     name: "XV.ToggleButtonWidget",
  62     kind: "XV.Input",
  63     classes: "xv-inputwidget xv-checkboxwidget",
  64     published: {
  65       label: ""
  66     },
  67     components: [
  68       {kind: "FittableColumns", components: [
  69         {name: "label", content: "", classes: "xv-label"},
  70         {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
  71           components: [
  72           {name: "input", kind: "onyx.ToggleButton", onChange: "inputChanged"}
  73         ]}
  74       ]}
  75     ],
  76     /**
  77      @todo Document the clear method.
  78      */
  79     clear: function (options) {
  80       this.setValue(false, options);
  81     },
  82     /**
  83      @todo Document the create method.
  84      */
  85     create: function () {
  86       this.inherited(arguments);
  87       this.labelChanged();
  88       // this allows for value to be set on construction, silently
  89       var options = {silent: true};
  90       this.valueChanged(this.getValue(), options);
  91     },
  92     disabledChanged: function () {
  93       this.inherited(arguments);
  94       this.$.label.addRemoveClass("disabled", this.getDisabled());
  95     },
  96     /**
  97      @todo Document the inputChanged method.
  98      */
  99     inputChanged: function (inSender, inEvent) {
 100       var input = this.$.input.getValue();
 101       this.setValue(input);
 102     },
 103     /**
 104      @todo Document the labelChanged method.
 105      */
 106     labelChanged: function () {
 107       var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
 108       this.$.label.setContent(label);
 109     },
 110     /**
 111       Not applicable in the context of a toggle button,
 112       even though it is available to input widgets generally.
 113      */
 114     placeholderChanged: function () {
 115       // Not applicable
 116     },
 117     /**
 118      @todo Document the valueChanged method.
 119      */
 120     valueChanged: function (value, options) {
 121       this.$.input.setValue(value, options);
 122       return value;
 123     },
 124     typeChanged: function () {
 125       // Toggle button doesn't have this
 126     }
 127   });
 128
 129 }());