Checkbox.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * Checkbox.js
  3. *
  4. * Copyright, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /**
  11. * This control creates a custom checkbox.
  12. *
  13. * @example
  14. * // Create and render a checkbox to the body element
  15. * tinymce.ui.Factory.create({
  16. * type: 'checkbox',
  17. * checked: true,
  18. * text: 'My checkbox'
  19. * }).renderTo(document.body);
  20. *
  21. * @-x-less Checkbox.less
  22. * @class tinymce.ui.Checkbox
  23. * @extends tinymce.ui.Widget
  24. */
  25. define("tinymce/ui/Checkbox", [
  26. "tinymce/ui/Widget"
  27. ], function(Widget) {
  28. "use strict";
  29. return Widget.extend({
  30. Defaults: {
  31. classes: "checkbox",
  32. role: "checkbox",
  33. checked: false
  34. },
  35. /**
  36. * Constructs a new Checkbox instance with the specified settings.
  37. *
  38. * @constructor
  39. * @param {Object} settings Name/value object with settings.
  40. * @setting {Boolean} checked True if the checkbox should be checked by default.
  41. */
  42. init: function(settings) {
  43. var self = this;
  44. self._super(settings);
  45. self.on('click mousedown', function(e) {
  46. e.preventDefault();
  47. });
  48. self.on('click', function(e) {
  49. e.preventDefault();
  50. if (!self.disabled()) {
  51. self.checked(!self.checked());
  52. }
  53. });
  54. self.checked(self.settings.checked);
  55. },
  56. /**
  57. * Getter/setter function for the checked state.
  58. *
  59. * @method checked
  60. * @param {Boolean} [state] State to be set.
  61. * @return {Boolean|tinymce.ui.Checkbox} True/false or checkbox if it's a set operation.
  62. */
  63. checked: function(state) {
  64. var self = this;
  65. if (typeof state != "undefined") {
  66. if (state) {
  67. self.addClass('checked');
  68. } else {
  69. self.removeClass('checked');
  70. }
  71. self._checked = state;
  72. self.aria('checked', state);
  73. return self;
  74. }
  75. return self._checked;
  76. },
  77. /**
  78. * Getter/setter function for the value state.
  79. *
  80. * @method value
  81. * @param {Boolean} [state] State to be set.
  82. * @return {Boolean|tinymce.ui.Checkbox} True/false or checkbox if it's a set operation.
  83. */
  84. value: function(state) {
  85. return this.checked(state);
  86. },
  87. /**
  88. * Renders the control as a HTML string.
  89. *
  90. * @method renderHtml
  91. * @return {String} HTML representing the control.
  92. */
  93. renderHtml: function() {
  94. var self = this, id = self._id, prefix = self.classPrefix;
  95. return (
  96. '<div id="' + id + '" class="' + self.classes() + '" unselectable="on" aria-labelledby="' + id + '-al" tabindex="-1">' +
  97. '<i class="' + prefix + 'ico ' + prefix + 'i-checkbox"></i>' +
  98. '<span id="' + id + '-al" class="' + prefix + 'label">' + self.encode(self._text) + '</span>' +
  99. '</div>'
  100. );
  101. }
  102. });
  103. });