utils.js 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module ui/labeledview/utils
  7. */
  8. import InputTextView from '../inputtext/inputtextview';
  9. import { createDropdown } from '../dropdown/utils';
  10. /**
  11. * A helper for creating labeled inputs.
  12. *
  13. * It creates an instance of a {@link module:ui/inputtext/inputtextview~InputTextView input text} that is
  14. * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
  15. *
  16. * The helper does the following:
  17. *
  18. * * It sets input's `id` and `ariaDescribedById` attributes.
  19. * * It binds input's `isReadOnly` to the labeled view.
  20. * * It binds input's `hasError` to the labeled view.
  21. * * It enables a logic that cleans up the error when user starts typing in the input..
  22. *
  23. * Usage:
  24. *
  25. * const labeledInputView = new LabeledView( locale, createLabeledDropdown );
  26. * console.log( labeledInputView.view ); // An input instance.
  27. *
  28. * @param {module:ui/labeledview/labeledview~LabeledView} labeledView The instance of the labeled view.
  29. * @param {String} viewUid An UID string that allows DOM logical connection between the
  30. * {@link module:ui/labeledview/labeledview~LabeledView#labelView labeled view's label} and the input.
  31. * @param {String} statusUid An UID string that allows DOM logical connection between the
  32. * {@link module:ui/labeledview/labeledview~LabeledView#statusView labeled view's status} and the input.
  33. * @returns {module:ui/inputtext/inputtextview~InputTextView} The input text view instance.
  34. */
  35. export function createLabeledInputText( labeledView, viewUid, statusUid ) {
  36. const inputView = new InputTextView( labeledView.locale );
  37. inputView.set( {
  38. id: viewUid,
  39. ariaDescribedById: statusUid
  40. } );
  41. inputView.bind( 'isReadOnly' ).to( labeledView, 'isEnabled', value => !value );
  42. inputView.bind( 'hasError' ).to( labeledView, 'errorText', value => !!value );
  43. inputView.on( 'input', () => {
  44. // UX: Make the error text disappear and disable the error indicator as the user
  45. // starts fixing the errors.
  46. labeledView.errorText = null;
  47. } );
  48. return inputView;
  49. }
  50. /**
  51. * A helper for creating labeled dropdowns.
  52. *
  53. * It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
  54. * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view}.
  55. *
  56. * The helper does the following:
  57. *
  58. * * It sets dropdown's `id` and `ariaDescribedById` attributes.
  59. * * It binds input's `isEnabled` to the labeled view.
  60. *
  61. * Usage:
  62. *
  63. * const labeledInputView = new LabeledView( locale, createLabeledDropdown );
  64. * console.log( labeledInputView.view ); // A dropdown instance.
  65. *
  66. * @param {module:ui/labeledview/labeledview~LabeledView} labeledView The instance of the labeled view.
  67. * @param {String} viewUid An UID string that allows DOM logical connection between the
  68. * {@link module:ui/labeledview/labeledview~LabeledView#labelView labeled view label} and the dropdown.
  69. * @param {String} statusUid An UID string that allows DOM logical connection between the
  70. * {@link module:ui/labeledview/labeledview~LabeledView#statusView labeled view status} and the dropdown.
  71. * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  72. */
  73. export function createLabeledDropdown( labeledView, viewUid, statusUid ) {
  74. const dropdownView = createDropdown( labeledView.locale );
  75. dropdownView.set( {
  76. id: viewUid,
  77. ariaDescribedById: statusUid
  78. } );
  79. dropdownView.bind( 'isEnabled' ).to( labeledView );
  80. return dropdownView;
  81. }