button.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _clickableComponent = require('./clickable-component.js');
  4. var _clickableComponent2 = _interopRequireDefault(_clickableComponent);
  5. var _component = require('./component');
  6. var _component2 = _interopRequireDefault(_component);
  7. var _log = require('./utils/log.js');
  8. var _log2 = _interopRequireDefault(_log);
  9. var _obj = require('./utils/obj');
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  11. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  12. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  13. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
  14. * @file button.js
  15. */
  16. /**
  17. * Base class for all buttons.
  18. *
  19. * @extends ClickableComponent
  20. */
  21. var Button = function (_ClickableComponent) {
  22. _inherits(Button, _ClickableComponent);
  23. function Button() {
  24. _classCallCheck(this, Button);
  25. return _possibleConstructorReturn(this, _ClickableComponent.apply(this, arguments));
  26. }
  27. /**
  28. * Create the `Button`s DOM element.
  29. *
  30. * @param {string} [tag=button]
  31. * Element's node type. e.g. 'button'
  32. *
  33. * @param {Object} [props={}]
  34. * An object of properties that should be set on the element.
  35. *
  36. * @param {Object} [attributes={}]
  37. * An object of attributes that should be set on the element.
  38. *
  39. * @return {Element}
  40. * The element that gets created.
  41. */
  42. Button.prototype.createEl = function createEl() {
  43. var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'button';
  44. var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  45. var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  46. props = (0, _obj.assign)({
  47. className: this.buildCSSClass()
  48. }, props);
  49. if (tag !== 'button') {
  50. _log2['default'].warn('Creating a Button with an HTML element of ' + tag + ' is deprecated; use ClickableComponent instead.');
  51. // Add properties for clickable element which is not a native HTML button
  52. props = (0, _obj.assign)({
  53. tabIndex: 0
  54. }, props);
  55. // Add ARIA attributes for clickable element which is not a native HTML button
  56. attributes = (0, _obj.assign)({
  57. role: 'button'
  58. }, attributes);
  59. }
  60. // Add attributes for button element
  61. attributes = (0, _obj.assign)({
  62. // Necessary since the default button type is "submit"
  63. 'type': 'button',
  64. // let the screen reader user know that the text of the button may change
  65. 'aria-live': 'polite'
  66. }, attributes);
  67. var el = _component2['default'].prototype.createEl.call(this, tag, props, attributes);
  68. this.createControlTextEl(el);
  69. return el;
  70. };
  71. /**
  72. * Add a child `Component` inside of this `Button`.
  73. *
  74. * @param {string|Component} child
  75. * The name or instance of a child to add.
  76. *
  77. * @param {Object} [options={}]
  78. * The key/value store of options that will get passed to children of
  79. * the child.
  80. *
  81. * @return {Component}
  82. * The `Component` that gets added as a child. When using a string the
  83. * `Component` will get created by this process.
  84. *
  85. * @deprecated since version 5
  86. */
  87. Button.prototype.addChild = function addChild(child) {
  88. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  89. var className = this.constructor.name;
  90. _log2['default'].warn('Adding an actionable (user controllable) child to a Button (' + className + ') is not supported; use a ClickableComponent instead.');
  91. // Avoid the error message generated by ClickableComponent's addChild method
  92. return _component2['default'].prototype.addChild.call(this, child, options);
  93. };
  94. /**
  95. * Enable the `Button` element so that it can be activated or clicked. Use this with
  96. * {@link Button#disable}.
  97. */
  98. Button.prototype.enable = function enable() {
  99. _ClickableComponent.prototype.enable.call(this);
  100. this.el_.removeAttribute('disabled');
  101. };
  102. /**
  103. * Enable the `Button` element so that it cannot be activated or clicked. Use this with
  104. * {@link Button#enable}.
  105. */
  106. Button.prototype.disable = function disable() {
  107. _ClickableComponent.prototype.disable.call(this);
  108. this.el_.setAttribute('disabled', 'disabled');
  109. };
  110. /**
  111. * This gets called when a `Button` has focus and `keydown` is triggered via a key
  112. * press.
  113. *
  114. * @param {EventTarget~Event} event
  115. * The event that caused this function to get called.
  116. *
  117. * @listens keydown
  118. */
  119. Button.prototype.handleKeyPress = function handleKeyPress(event) {
  120. // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button.
  121. if (event.which === 32 || event.which === 13) {
  122. return;
  123. }
  124. // Pass keypress handling up for unsupported keys
  125. _ClickableComponent.prototype.handleKeyPress.call(this, event);
  126. };
  127. return Button;
  128. }(_clickableComponent2['default']);
  129. _component2['default'].registerComponent('Button', Button);
  130. exports['default'] = Button;