096a5875234bd5312373655307f0ca07bc950219a25139e8ada8ef1ed2c2bf7dbaf007d2b40a2e3a2278c34797a896b6ce89642d3eff9e3da6fadc0b31067b 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import { Widget } from '../widget.js';
  6. import { CSSIcon } from '../../../common/codicons.js';
  7. import { Color } from '../../../common/color.js';
  8. import { Emitter } from '../../../common/event.js';
  9. import './toggle.css';
  10. const defaultOpts = {
  11. inputActiveOptionBorder: Color.fromHex('#007ACC00'),
  12. inputActiveOptionForeground: Color.fromHex('#FFFFFF'),
  13. inputActiveOptionBackground: Color.fromHex('#0E639C50')
  14. };
  15. export class Toggle extends Widget {
  16. constructor(opts) {
  17. super();
  18. this._onChange = this._register(new Emitter());
  19. this.onChange = this._onChange.event;
  20. this._onKeyDown = this._register(new Emitter());
  21. this.onKeyDown = this._onKeyDown.event;
  22. this._opts = Object.assign(Object.assign({}, defaultOpts), opts);
  23. this._checked = this._opts.isChecked;
  24. const classes = ['monaco-custom-toggle'];
  25. if (this._opts.icon) {
  26. this._icon = this._opts.icon;
  27. classes.push(...CSSIcon.asClassNameArray(this._icon));
  28. }
  29. if (this._opts.actionClassName) {
  30. classes.push(...this._opts.actionClassName.split(' '));
  31. }
  32. if (this._checked) {
  33. classes.push('checked');
  34. }
  35. this.domNode = document.createElement('div');
  36. this.domNode.title = this._opts.title;
  37. this.domNode.classList.add(...classes);
  38. if (!this._opts.notFocusable) {
  39. this.domNode.tabIndex = 0;
  40. }
  41. this.domNode.setAttribute('role', 'checkbox');
  42. this.domNode.setAttribute('aria-checked', String(this._checked));
  43. this.domNode.setAttribute('aria-label', this._opts.title);
  44. this.applyStyles();
  45. this.onclick(this.domNode, (ev) => {
  46. if (this.enabled) {
  47. this.checked = !this._checked;
  48. this._onChange.fire(false);
  49. ev.preventDefault();
  50. }
  51. });
  52. this.ignoreGesture(this.domNode);
  53. this.onkeydown(this.domNode, (keyboardEvent) => {
  54. if (keyboardEvent.keyCode === 10 /* KeyCode.Space */ || keyboardEvent.keyCode === 3 /* KeyCode.Enter */) {
  55. this.checked = !this._checked;
  56. this._onChange.fire(true);
  57. keyboardEvent.preventDefault();
  58. keyboardEvent.stopPropagation();
  59. return;
  60. }
  61. this._onKeyDown.fire(keyboardEvent);
  62. });
  63. }
  64. get enabled() {
  65. return this.domNode.getAttribute('aria-disabled') !== 'true';
  66. }
  67. focus() {
  68. this.domNode.focus();
  69. }
  70. get checked() {
  71. return this._checked;
  72. }
  73. set checked(newIsChecked) {
  74. this._checked = newIsChecked;
  75. this.domNode.setAttribute('aria-checked', String(this._checked));
  76. this.domNode.classList.toggle('checked', this._checked);
  77. this.applyStyles();
  78. }
  79. width() {
  80. return 2 /*margin left*/ + 2 /*border*/ + 2 /*padding*/ + 16 /* icon width */;
  81. }
  82. style(styles) {
  83. if (styles.inputActiveOptionBorder) {
  84. this._opts.inputActiveOptionBorder = styles.inputActiveOptionBorder;
  85. }
  86. if (styles.inputActiveOptionForeground) {
  87. this._opts.inputActiveOptionForeground = styles.inputActiveOptionForeground;
  88. }
  89. if (styles.inputActiveOptionBackground) {
  90. this._opts.inputActiveOptionBackground = styles.inputActiveOptionBackground;
  91. }
  92. this.applyStyles();
  93. }
  94. applyStyles() {
  95. if (this.domNode) {
  96. this.domNode.style.borderColor = this._checked && this._opts.inputActiveOptionBorder ? this._opts.inputActiveOptionBorder.toString() : '';
  97. this.domNode.style.color = this._checked && this._opts.inputActiveOptionForeground ? this._opts.inputActiveOptionForeground.toString() : 'inherit';
  98. this.domNode.style.backgroundColor = this._checked && this._opts.inputActiveOptionBackground ? this._opts.inputActiveOptionBackground.toString() : '';
  99. }
  100. }
  101. enable() {
  102. this.domNode.setAttribute('aria-disabled', String(false));
  103. }
  104. disable() {
  105. this.domNode.setAttribute('aria-disabled', String(true));
  106. }
  107. }