git.roojs.org Git - xtuple/blob - lib/enyo-x/source/widgets/checkbox.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.Checkbox
   9     @class An input control that shows or hides a checkmark when clicked.</br >
  10     To implement a checkbox, see {@link XV.CheckboxWidget}.<br />
  11     Derived from <a href="http://enyojs.com/api/#onyx.Checkbox">onyx.Checkbox</a>.
  12     @extends onyx.Checkbox
  13    */
  14   enyo.kind(
  15     /** @lends XV.Checkbox# */{
  16     name: "XV.Checkbox",
  17     kind: "onyx.Checkbox",
  18     published: {
  19       attr: null
  20     },
  21     events: {
  22       onValueChange: ""
  23     },
  24     handlers: {
  25       onchange: "changed"
  26     },
  27     /**
  28     @todo Document the clear method.
  29     */
  30     clear: function (options) {
  31       this.setValue(false, options);
  32     },
  33     /**
  34     @todo Document the setValue method.
  35     */
  36     setValue: function (value, options) {
  37       options = options || {};
  38       this._silent = options.silent;
  39       this.inherited(arguments);
  40       this._silent = false;
  41     },
  42     /**
  43     @todo Document the changed method.
  44     */
  45     changed: function (inSender, inEvent) {
  46       if (!this._silent) {
  47         inEvent.value = this.getValue();
  48         this.doValueChange(inEvent);
  49       }
  50     }
  51   });
  52
  53   /**
  54     @name XV.CheckboxWidget
  55     @class An input control consisting of fittable columns:
  56       label, decorator, and checkbox.<br />
  57     Use to implement a styled checkbox
  58       which is made up of a checkbox input control and its label.
  59     @extends XV.Input
  60    */
  61   enyo.kind(/** @lends XV.CheckboxWidget# */{
  62     name: "XV.CheckboxWidget",
  63     kind: "XV.InputWidget",
  64     classes: "xv-checkboxwidget",
  65     components: [
  66       {kind: "FittableColumns", components: [
  67         {name: "label", content: "", classes: "xv-label"},
  68         {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
  69           components: [
  70           {name: "input", kind: "onyx.Checkbox", onchange: "inputChanged"}
  71         ]}
  72       ]}
  73     ],
  74     /**
  75     @todo Document the clear method.
  76     */
  77     clear: function (options) {
  78       this.setValue(false, options);
  79     },
  80     /**
  81     @todo Document the create method.
  82     */
  83     create: function () {
  84       this.inherited(arguments);
  85       this.labelChanged();
  86     },
  87     disabledChanged: function () {
  88       this.inherited(arguments);
  89       this.$.label.addRemoveClass("disabled", this.getDisabled());
  90     },
  91     /**
  92     @todo Document the inputChanged method.
  93     */
  94     inputChanged: function (inSender, inEvent) {
  95       var input = this.$.input.getValue();
  96       this.setValue(input);
  97     },
  98     /**
  99     @todo Document the labelChanged method.
 100     */
 101     labelChanged: function () {
 102       var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
 103       this.$.label.setContent(label);
 104     },
 105     /**
 106     @todo Document the valueChanged method.
 107     */
 108     valueChanged: function (value) {
 109       this.$.input.setValue(value);
 110       return value;
 111     }
 112   });
 113
 114   /**
 115     @name XV.StickyCheckboxWidget
 116     @class An input control consisting of fittable columns:
 117       label, decorator, and checkbox.<br />
 118     Use to implement a styled checkbox
 119       which is made up of a checkbox input control and its label.
 120       Remembers last checked setting using cookies. Not to be
 121       used with models.
 122     The object should be given a unique name as the name of the
 123     object will be used for the cookie name.
 124     @extends XV.Input
 125    */
 126   enyo.kind(/** @lends XV.StickyCheckboxWidget# */{
 127     name: "XV.StickyCheckboxWidget",
 128     classes: "xv-input xv-checkboxwidget",
 129     published: {
 130       label: "",
 131       disabled: false,
 132       checked: false
 133     },
 134     events: {
 135       onValueChange: ""
 136     },
 137     components: [
 138       {kind: "FittableColumns", components: [
 139         {name: "label", content: "", classes: "xv-label"},
 140         {kind: "onyx.InputDecorator", classes: "xv-input-decorator",
 141           components: [
 142           {name: "input", kind: "onyx.Checkbox", onchange: "inputChanged"}
 143         ]}
 144       ]}
 145     ],
 146     /**
 147     @todo Document the clear method.
 148     */
 149     clear: function () {
 150       this.$.input.setValue(false);
 151     },
 152     /**
 153     @todo Document the create method.
 154     */
 155     create: function () {
 156       var value,
 157         toBoolean = function (val) {
 158           if (_.isString(val)) {
 159             return val === "true" ? true : false;
 160           }
 161           return val;
 162         };
 163
 164       this.inherited(arguments);
 165       this.labelChanged();
 166       if (this.name === "stickyCheckboxWidget") {
 167         this._err = true;
 168         throw "Sticky Checkbox Widget should have a unique name.";
 169       } else {
 170         value = toBoolean(enyo.getCookie(this.name));
 171         value = _.isBoolean(value) ? value : this.checked;
 172         this.checked = value;
 173         this.$.input.setValue(value);
 174       }
 175     },
 176     disabledChanged: function () {
 177       var disabled = this.getDisabled();
 178       this.$.input.setDisabled(disabled);
 179       this.$.label.addRemoveClass("disabled", disabled);
 180     },
 181     /**
 182     @todo Document the focus method.
 183     */
 184     focus: function () {
 185       this.$.input.focus();
 186     },
 187     inputChanged: function (inSender, inEvent) {
 188       this.setChecked(this.$.input.checked);
 189     },
 190     isChecked: function () {
 191       return this.$.input.checked;
 192     },
 193     /**
 194     @todo Document the labelChanged method.
 195     */
 196     labelChanged: function () {
 197       var label = (this.getLabel() || ("_" + this.attr || "").loc()) + ":";
 198       this.$.label.setContent(label);
 199     },
 200     checkedChanged: function () {
 201       this.$.input.setChecked(this.checked);
 202       if (!this._err) {
 203         enyo.setCookie(this.name, this.checked);
 204       }
 205       this.doValueChange({value: this.checked});
 206     }
 207   });
 208
 209 }());