8
0

placeholder.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import { attachPlaceholder, detachPlaceholder } from '../../src/view/placeholder';
  6. import createViewRoot from './_utils/createroot';
  7. import View from '../../src/view/view';
  8. import ViewRange from '../../src/view/range';
  9. import { setData } from '../../src/dev-utils/view';
  10. describe( 'placeholder', () => {
  11. let view, viewDocument, viewRoot;
  12. beforeEach( () => {
  13. view = new View();
  14. viewDocument = view.document;
  15. viewRoot = createViewRoot( viewDocument );
  16. viewDocument.isFocused = true;
  17. } );
  18. describe( 'createPlaceholder', () => {
  19. it( 'should attach proper CSS class and data attribute', () => {
  20. setData( view, '<div></div><div>{another div}</div>' );
  21. const element = viewRoot.getChild( 0 );
  22. attachPlaceholder( view, element, 'foo bar baz' );
  23. view.render( { force: true } );
  24. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  25. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  26. } );
  27. it( 'if element has children set only data attribute', () => {
  28. setData( view, '<div>first div</div><div>{another div}</div>' );
  29. const element = viewRoot.getChild( 0 );
  30. attachPlaceholder( view, element, 'foo bar baz' );
  31. view.render( { force: true } );
  32. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  33. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  34. } );
  35. it( 'if element has only ui elements, set CSS class and data attribute', () => {
  36. setData( view, '<div><ui:span></ui:span><ui:span></ui:span></div><div>{another div}</div>' );
  37. const element = viewRoot.getChild( 0 );
  38. attachPlaceholder( view, element, 'foo bar baz' );
  39. view.render( { force: true } );
  40. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  41. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  42. } );
  43. it( 'if element has selection inside set only data attribute', () => {
  44. setData( view, '<div>[]</div><div>another div</div>' );
  45. const element = viewRoot.getChild( 0 );
  46. attachPlaceholder( view, element, 'foo bar baz' );
  47. view.render( { force: true } );
  48. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  49. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  50. } );
  51. it( 'if element has selection inside but document is blurred should contain placeholder CSS class', () => {
  52. setData( view, '<div>[]</div><div>another div</div>' );
  53. const element = viewRoot.getChild( 0 );
  54. viewDocument.isFocused = false;
  55. attachPlaceholder( view, element, 'foo bar baz' );
  56. view.render( { force: true } );
  57. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  58. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  59. } );
  60. it( 'use check function if one is provided', () => {
  61. setData( view, '<div></div><div>{another div}</div>' );
  62. const element = viewRoot.getChild( 0 );
  63. let result = true;
  64. const spy = sinon.spy( () => result );
  65. attachPlaceholder( view, element, 'foo bar baz', spy );
  66. view.render( { force: true } );
  67. sinon.assert.called( spy );
  68. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  69. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  70. result = false;
  71. view.render( { force: true } );
  72. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  73. } );
  74. it( 'should remove CSS class if selection is moved inside', () => {
  75. setData( view, '<div></div><div>{another div}</div>' );
  76. const element = viewRoot.getChild( 0 );
  77. attachPlaceholder( view, element, 'foo bar baz' );
  78. view.render( { force: true } );
  79. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  80. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  81. view.change( writer => {
  82. writer.setSelection( ViewRange._createIn( element ) );
  83. } );
  84. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  85. } );
  86. it( 'should change placeholder settings when called twice', () => {
  87. setData( view, '<div></div><div>{another div}</div>' );
  88. const element = viewRoot.getChild( 0 );
  89. attachPlaceholder( view, element, 'foo bar baz' );
  90. attachPlaceholder( view, element, 'new text' );
  91. view.render( { force: true } );
  92. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'new text' );
  93. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  94. } );
  95. it( 'should not throw when element is no longer in document', () => {
  96. setData( view, '<div></div><div>{another div}</div>' );
  97. const element = viewRoot.getChild( 0 );
  98. attachPlaceholder( view, element, 'foo bar baz' );
  99. setData( view, '<p>paragraph</p>' );
  100. view.render();
  101. } );
  102. it( 'should allow to add placeholder to elements from different documents', () => {
  103. setData( view, '<div></div><div>{another div}</div>' );
  104. const element = viewRoot.getChild( 0 );
  105. const secondView = new View();
  106. const secondDocument = secondView.document;
  107. secondDocument.isFocused = true;
  108. const secondRoot = createViewRoot( secondDocument );
  109. setData( secondView, '<div></div><div>{another div}</div>' );
  110. const secondElement = secondRoot.getChild( 0 );
  111. attachPlaceholder( view, element, 'first placeholder' );
  112. attachPlaceholder( secondView, secondElement, 'second placeholder' );
  113. view.render( { force: true } );
  114. secondView.render( { force: true } );
  115. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'first placeholder' );
  116. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  117. expect( secondElement.getAttribute( 'data-placeholder' ) ).to.equal( 'second placeholder' );
  118. expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.true;
  119. // Move selection to the elements with placeholders.
  120. view.change( writer => {
  121. writer.setSelection( ViewRange._createIn( element ) );
  122. } );
  123. secondView.change( writer => {
  124. writer.setSelection( ViewRange._createIn( secondElement ) );
  125. } );
  126. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'first placeholder' );
  127. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  128. expect( secondElement.getAttribute( 'data-placeholder' ) ).to.equal( 'second placeholder' );
  129. expect( secondElement.hasClass( 'ck-placeholder' ) ).to.be.false;
  130. } );
  131. it( 'should update placeholder before rendering', () => {
  132. setData( view, '<div></div><div>{another div}</div>' );
  133. const element = viewRoot.getChild( 0 );
  134. attachPlaceholder( view, element, 'foo bar baz' );
  135. view.render( { force: true } );
  136. view.change( writer => {
  137. writer.setSelection( ViewRange._createIn( element ) );
  138. // Here we are before rendering - placeholder is visible in first element;
  139. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  140. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  141. } );
  142. // After rendering - placeholder should be invisible since selection is moved there.
  143. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  144. } );
  145. } );
  146. describe( 'detachPlaceholder', () => {
  147. it( 'should remove placeholder from element', () => {
  148. setData( view, '<div></div><div>{another div}</div>' );
  149. const element = viewRoot.getChild( 0 );
  150. attachPlaceholder( view, element, 'foo bar baz' );
  151. view.render( { force: true } );
  152. expect( element.getAttribute( 'data-placeholder' ) ).to.equal( 'foo bar baz' );
  153. expect( element.hasClass( 'ck-placeholder' ) ).to.be.true;
  154. detachPlaceholder( view, element );
  155. expect( element.hasAttribute( 'data-placeholder' ) ).to.be.false;
  156. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  157. } );
  158. it( 'should not blow up when called on element without placeholder', () => {
  159. setData( view, '<div></div><div>{another div}</div>' );
  160. const element = viewRoot.getChild( 0 );
  161. detachPlaceholder( view, element );
  162. expect( element.hasAttribute( 'data-placeholder' ) ).to.be.false;
  163. expect( element.hasClass( 'ck-placeholder' ) ).to.be.false;
  164. } );
  165. } );
  166. } );