utils.js 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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/labeledfield/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/labeledfield/labeledfieldview~LabeledFieldView 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 LabeledFieldView( locale, createLabeledDropdown );
  26. * console.log( labeledInputView.view ); // An input instance.
  27. *
  28. * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  29. * @param {String} viewUid An UID string that allows DOM logical connection between the
  30. * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#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/labeledfield/labeledfieldview~LabeledFieldView#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( labeledFieldView, viewUid, statusUid ) {
  36. const inputView = new InputTextView( labeledFieldView.locale );
  37. inputView.set( {
  38. id: viewUid,
  39. ariaDescribedById: statusUid
  40. } );
  41. inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
  42. inputView.bind( 'hasError' ).to( labeledFieldView, '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. labeledFieldView.errorText = null;
  47. } );
  48. labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( inputView );
  49. return inputView;
  50. }
  51. /**
  52. * A helper for creating labeled dropdowns.
  53. *
  54. * It creates an instance of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} that is
  55. * logically related to a {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView labeled field view}.
  56. *
  57. * The helper does the following:
  58. *
  59. * * It sets dropdown's `id` and `ariaDescribedById` attributes.
  60. * * It binds input's `isEnabled` to the labeled view.
  61. *
  62. * Usage:
  63. *
  64. * const labeledInputView = new LabeledFieldView( locale, createLabeledDropdown );
  65. * console.log( labeledInputView.view ); // A dropdown instance.
  66. *
  67. * @param {module:ui/labeledfield/labeledfieldview~LabeledFieldView} labeledFieldView The instance of the labeled field view.
  68. * @param {String} viewUid An UID string that allows DOM logical connection between the
  69. * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#labelView labeled view label} and the dropdown.
  70. * @param {String} statusUid An UID string that allows DOM logical connection between the
  71. * {@link module:ui/labeledfield/labeledfieldview~LabeledFieldView#statusView labeled view status} and the dropdown.
  72. * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  73. */
  74. export function createLabeledDropdown( labeledFieldView, viewUid, statusUid ) {
  75. const dropdownView = createDropdown( labeledFieldView.locale );
  76. dropdownView.set( {
  77. id: viewUid,
  78. ariaDescribedById: statusUid
  79. } );
  80. dropdownView.bind( 'isEnabled' ).to( labeledFieldView );
  81. return dropdownView;
  82. }