linkformview.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import View from '../../ui/view.js';
  6. import Template from '../../ui/template.js';
  7. import ButtonView from '../../ui/button/buttonview.js';
  8. import LabeledInputView from '../../ui/labeledinput/labeledinputview.js';
  9. import InputTextView from '../../ui/inputtext/inputtextview.js';
  10. import submitHandler from '../../ui/bindings/submithandler.js';
  11. /**
  12. * The link form view controller class.
  13. *
  14. * See {@link link.ui.LinkForm}.
  15. *
  16. * @memberOf link.ui
  17. * @extends ui.View
  18. */
  19. export default class LinkFormView extends View {
  20. /**
  21. * @inheritDoc
  22. */
  23. constructor( locale ) {
  24. super( locale );
  25. /**
  26. * The url input view.
  27. *
  28. * @member {ui.input.labeled.LabeledInputView} link.ui.LinkFormView#urlInputView
  29. */
  30. this.urlInputView = this._createUrlInput();
  31. /**
  32. * The save button view.
  33. *
  34. * @member {ui.button.ButtonView} link.ui.LinkFormView#saveButtonView
  35. */
  36. this.saveButtonView = this._createButton( 'Save' );
  37. this.saveButtonView.type = 'submit';
  38. /**
  39. * The cancel button view.
  40. *
  41. * @member {ui.button.ButtonView} link.ui.LinkFormView#cancelButtonView
  42. */
  43. this.cancelButtonView = this._createButton( 'Cancel', 'cancel' );
  44. /**
  45. * The unlink button view.
  46. *
  47. * @member {ui.button.ButtonView} link.ui.LinkFormView#unlinkButtonView
  48. */
  49. this.unlinkButtonView = this._createButton( 'Unlink', 'unlink' );
  50. // Register child views.
  51. this.addChildren( [ this.urlInputView, this.saveButtonView, this.cancelButtonView, this.unlinkButtonView ] );
  52. Template.extend( this.saveButtonView.template, {
  53. attributes: {
  54. class: [
  55. 'ck-button-action'
  56. ]
  57. }
  58. } );
  59. this.template = new Template( {
  60. tag: 'form',
  61. attributes: {
  62. class: [
  63. 'ck-link-form',
  64. ]
  65. },
  66. children: [
  67. this.urlInputView,
  68. {
  69. tag: 'div',
  70. attributes: {
  71. class: [
  72. 'ck-link-form__actions'
  73. ]
  74. },
  75. children: [
  76. this.saveButtonView,
  77. this.cancelButtonView,
  78. this.unlinkButtonView
  79. ]
  80. }
  81. ]
  82. } );
  83. submitHandler( {
  84. view: this
  85. } );
  86. }
  87. /**
  88. * Create labeled input view.
  89. *
  90. * @private
  91. * @returns {ui.labeled.LabeledInputView} Labeled input view instance.
  92. */
  93. _createUrlInput() {
  94. const t = this.locale.t;
  95. const labeledInput = new LabeledInputView( this.locale, InputTextView );
  96. labeledInput.label = t( 'Link URL' );
  97. return labeledInput;
  98. }
  99. /**
  100. * Creates button View.
  101. *
  102. * @private
  103. * @param {String} label Button label
  104. * @param {String} [event] Event name which ButtonView#execute event will be delegated to.
  105. * @returns {ui.button.ButtonView} Button view instance.
  106. */
  107. _createButton( label, event ) {
  108. const t = this.locale.t;
  109. const button = new ButtonView( this.locale );
  110. button.label = t( label );
  111. button.withText = true;
  112. if ( event ) {
  113. this.listenTo( button, 'execute', () => this.fire( event ) );
  114. }
  115. return button;
  116. }
  117. }
  118. /**
  119. * Fired when the form view is submitted (when one of the child triggered submit event).
  120. * E.g. click on {@link link.ui.LinkFormView#saveButtonView}.
  121. *
  122. * @event link.ui.LinkFormView#submit
  123. */
  124. /**
  125. * Fired when the form view is canceled, e.g. click on {@link link.ui.LinkFormView#cancelButtonView}.
  126. *
  127. * @event link.ui.LinkFormView#cancel
  128. */
  129. /**
  130. * Fired when the {@link link.ui.LinkFormView#unlinkButtonView} is clicked.
  131. *
  132. * @event link.ui.LinkFormView#unlink
  133. */