8
0

linkformview.js 3.4 KB

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