linkballoonpanel.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import Model from '../../ui/model.js';
  6. import Button from '../../ui/button/button.js';
  7. import ButtonView from '../../ui/button/buttonview.js';
  8. import BalloonPanel from '../../ui/balloonpanel/balloonpanel.js';
  9. import LabeledInput from '../../ui/labeledinput/labeledinput.js';
  10. import LabeledInputView from '../../ui/labeledinput/labeledinputview.js';
  11. import LinkForm from './linkform.js';
  12. import LinkFormView from './linkformview.js';
  13. import InputText from '../../ui/inputtext/inputtext.js';
  14. import InputTextView from '../../ui/inputtext/inputtextview.js';
  15. /**
  16. * The link balloon panel controller class.
  17. *
  18. * const model = new Model( {
  19. * maxWidth: 300,
  20. * url: 'http://ckeditor.com'
  21. * } );
  22. *
  23. * // An instance of LinkBalloonPanel.
  24. * new LinkBalloonPanel( model, new LinkBalloonPanelView() );
  25. *
  26. * See {@link link.ui.LinkBalloonPanelView}.
  27. *
  28. * @memberOf link.ui
  29. * @extends ui.balloonPanel.BalloonPanel
  30. */
  31. export default class LinkBalloonPanel extends BalloonPanel {
  32. /**
  33. * Creates an instance of {@link link.ui.LinkBalloonPanel} class.
  34. *
  35. * @param {link.ui.LinkBalloonPanelModel} model Model of this link balloon panel.
  36. * @param {ui.View} view View of this link balloon panel.
  37. */
  38. constructor( model, view ) {
  39. super( model, view );
  40. this.add( 'content', this._createForm() );
  41. }
  42. /**
  43. * Initializes {@link link.ui.LinkForm} component with input and buttons.
  44. *
  45. * @private
  46. * @returns {link.ui.LinkForm} Form component.
  47. */
  48. _createForm() {
  49. const formModel = new Model();
  50. formModel.on( 'execute', () => this.model.fire( 'executeLink' ) );
  51. /**
  52. * An instance of {@link link.ui.LinkForm} component.
  53. *
  54. * @member {link.ui.LinkForm} link.ui.LinkBalloonPanel#form
  55. */
  56. this.form = new LinkForm( formModel, new LinkFormView( this.locale ) );
  57. /**
  58. * The button component for submitting form.
  59. *
  60. * @member {ui.button.Button} link.ui.LinkBalloonPanel#saveButton
  61. */
  62. this.saveButton = this._createSaveButton();
  63. /**
  64. * The button component for canceling form.
  65. *
  66. * @member {ui.button.Button} link.ui.LinkBalloonPanel#cancelButton
  67. */
  68. this.cancelButton = this._createCancelButton();
  69. /**
  70. * The button component for unlinking.
  71. *
  72. * @member {ui.button.Button} link.ui.LinkBalloonPanel#unlinkButton
  73. */
  74. this.unlinkButton = this._createUnlinkButton();
  75. // Add Input to the form content.
  76. this.form.add( 'content', this._createLabeledInput() );
  77. // Add `Save` and `Cancel` buttons to the form actions.
  78. this.form.add( 'actions', this.saveButton );
  79. this.form.add( 'actions', this.cancelButton );
  80. this.form.add( 'actions', this.unlinkButton );
  81. return this.form;
  82. }
  83. /**
  84. * Initializes the {@link ui.input.LabeledInput LabeledInput} which displays
  85. * and allows manipulation of the `href` attribute in edited link.
  86. *
  87. * @private
  88. * @returns {ui.input.LabeledInput} Labeled input component.
  89. */
  90. _createLabeledInput() {
  91. const t = this.view.t;
  92. const model = new Model( {
  93. label: t( 'Link URL' )
  94. } );
  95. model.bind( 'value' ).to( this.model, 'url' );
  96. /**
  97. * The input component to display and manipulate the `href` attribute.
  98. *
  99. * @member {ui.input.LabeledInput} link.ui.LinkBalloonPanel#urlInput
  100. */
  101. return ( this.urlInput = new LabeledInput( model, new LabeledInputView( this.locale ),
  102. InputText, InputTextView, new Model() ) );
  103. }
  104. /**
  105. * Initializes the {@link ui.button.Button} for submitting the form.
  106. *
  107. * @private
  108. * @returns {ui.button.Button} Save button component.
  109. */
  110. _createSaveButton() {
  111. const t = this.view.t;
  112. const saveModel = new Model( {
  113. isEnabled: true,
  114. isOn: false,
  115. label: t( 'Save' ),
  116. withText: true,
  117. type: 'submit'
  118. } );
  119. const button = new Button( saveModel, new ButtonView( this.locale ) );
  120. button.view.element.classList.add( 'ck-button-action' );
  121. return button;
  122. }
  123. /**
  124. * Initializes the {@link ui.button.Button Button} for canceling the form.
  125. *
  126. * @private
  127. * @returns {ui.button.Button} Cancel button component.
  128. */
  129. _createCancelButton() {
  130. const t = this.view.t;
  131. const cancelModel = new Model( {
  132. isEnabled: true,
  133. isOn: false,
  134. label: t( 'Cancel' ),
  135. withText: true
  136. } );
  137. cancelModel.on( 'execute', () => this.model.fire( 'executeCancel' ) );
  138. return new Button( cancelModel, new ButtonView( this.locale ) );
  139. }
  140. /**
  141. * Initializes the {@link ui.button.Button Button} for the `unlink` command.
  142. *
  143. * @private
  144. * @returns {ui.button.Button} Unlink button component.
  145. */
  146. _createUnlinkButton() {
  147. const t = this.view.t;
  148. const unlinkModel = new Model( {
  149. isEnabled: true,
  150. isOn: false,
  151. label: t( 'Unlink' ),
  152. icon: 'unlink'
  153. } );
  154. unlinkModel.on( 'execute', () => this.model.fire( 'executeUnlink' ) );
  155. const button = new Button( unlinkModel, new ButtonView( this.locale ) );
  156. return button;
  157. }
  158. }
  159. /**
  160. * The link balloon panel component {@link ui.Model} interface.
  161. *
  162. * @extends ui.balloonPanel.BalloonPanelModel
  163. * @interface link.ui.LinkBalloonPanelModel
  164. */
  165. /**
  166. * URL of the link displayed in the {@link link.ui.LinkBalloonPanel#urlInput}.
  167. *
  168. * @observable
  169. * @member {String} link.ui.LinkBalloonPanelModel#url
  170. */
  171. /**
  172. * Fired when {@link link.ui.LinkBalloonPanel#saveButton} has been executed by the user.
  173. *
  174. * @event link.ui.LinkBalloonPanelModel#execute
  175. */