createdropdown.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/dropdown/createdropdown
  7. */
  8. import ButtonView from '../button/buttonview';
  9. import DropdownView from './dropdownview';
  10. import DropdownPanelView from './dropdownpanelview';
  11. /**
  12. * A helper which creates an instance of {@link module:ui/dropdown/dropdownview~DropdownView} class using
  13. * a provided {@link module:ui/dropdown/dropdownmodel~DropdownModel}.
  14. *
  15. * const model = new Model( {
  16. * label: 'A dropdown',
  17. * isEnabled: true,
  18. * isOn: false,
  19. * withText: true
  20. * } );
  21. *
  22. * const dropdown = createDropdown( model );
  23. *
  24. * dropdown.render();
  25. *
  26. * // Will render a dropdown labeled "A dropdown" with an empty panel.
  27. * document.body.appendChild( dropdown.element );
  28. *
  29. * The model instance remains in control of the dropdown after it has been created. E.g. changes to the
  30. * {@link module:ui/dropdown/dropdownmodel~DropdownModel#label `model.label`} will be reflected in the
  31. * dropdown button's {@link module:ui/button/buttonview~ButtonView#label} attribute and in DOM.
  32. *
  33. * Also see {@link module:ui/dropdown/list/createlistdropdown~createListDropdown}.
  34. *
  35. * @param {module:ui/dropdown/dropdownmodel~DropdownModel} model Model of this dropdown.
  36. * @param {module:utils/locale~Locale} locale The locale instance.
  37. * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  38. */
  39. export default function createDropdown( model, locale ) {
  40. const buttonView = new ButtonView( locale );
  41. const panelView = new DropdownPanelView( locale );
  42. const dropdownView = new DropdownView( locale, buttonView, panelView );
  43. dropdownView.bind( 'isEnabled' ).to( model );
  44. buttonView.bind( 'label', 'isEnabled', 'withText', 'keystroke', 'tooltip', 'icon' ).to( model );
  45. buttonView.bind( 'isOn' ).to( model, 'isOn', dropdownView, 'isOpen', ( isOn, isOpen ) => {
  46. return isOn || isOpen;
  47. } );
  48. return dropdownView;
  49. }