8
0

placeholder.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/placeholder
  7. */
  8. import '../../theme/placeholder.css';
  9. // Each document stores information about its placeholder elements and check functions.
  10. const documentPlaceholders = new WeakMap();
  11. /**
  12. * Attaches placeholder to provided element and updates it's visibility. To change placeholder simply call this method
  13. * once again with new parameters.
  14. *
  15. * @param {module:engine/view/element~Element} element Element to attach placeholder to.
  16. * @param {String} placeholderText Placeholder text to use.
  17. * @param {Function} [checkFunction] If provided it will be called before checking if placeholder should be displayed.
  18. * If function returns `false` placeholder will not be showed.
  19. */
  20. export function attachPlaceholder( view, element, placeholderText, checkFunction ) {
  21. const document = view.document;
  22. // Single listener per document.
  23. if ( !documentPlaceholders.has( document ) ) {
  24. documentPlaceholders.set( document, new Map() );
  25. // Create view post fixer that will add placeholder where needed.
  26. document.registerPostFixer( writer => updateAllPlaceholders( document, writer ) );
  27. }
  28. // Store information about element with placeholder.
  29. documentPlaceholders.get( document ).set( element, { placeholderText, checkFunction } );
  30. // Update view right away.
  31. view.render();
  32. }
  33. /**
  34. * Removes placeholder functionality from given element.
  35. *
  36. * @param {module:engine/view/view~View} view
  37. * @param {module:engine/view/element~Element} element
  38. */
  39. export function detachPlaceholder( view, element ) {
  40. const document = element.document;
  41. if ( documentPlaceholders.has( document ) ) {
  42. documentPlaceholders.get( document ).delete( element );
  43. }
  44. view.change( writer => {
  45. writer.removeClass( 'ck-placeholder', element );
  46. writer.removeAttribute( 'data-placeholder', element );
  47. } );
  48. }
  49. // Updates all placeholders of given document.
  50. //
  51. // @private
  52. // @param {module:engine/view/view~View} view
  53. function updateAllPlaceholders( document, writer ) {
  54. const placeholders = documentPlaceholders.get( document );
  55. let changed = false;
  56. for ( const [ element, info ] of placeholders ) {
  57. if ( updateSinglePlaceholder( writer, element, info ) ) {
  58. changed = true;
  59. }
  60. }
  61. return changed;
  62. }
  63. // Updates placeholder class of given element.
  64. //
  65. // @private
  66. // @param {module:engine/view/view~View} view
  67. // @param {module:engine/view/element~Element} element
  68. // @param {Function} checkFunction
  69. function updateSinglePlaceholder( writer, element, info ) {
  70. const document = element.document;
  71. const text = info.placeholderText;
  72. let changed = false;
  73. // Element was removed from document.
  74. if ( !document ) {
  75. return false;
  76. }
  77. // Update data attribute if needed.
  78. if ( element.getAttribute( 'data-placeholder' ) !== text ) {
  79. writer.setAttribute( 'data-placeholder', text, element );
  80. changed = true;
  81. }
  82. const viewSelection = document.selection;
  83. const anchor = viewSelection.anchor;
  84. const checkFunction = info.checkFunction;
  85. // If checkFunction is provided and returns false - remove placeholder.
  86. if ( checkFunction && !checkFunction() ) {
  87. if ( element.hasClass( 'ck-placeholder' ) ) {
  88. writer.removeClass( 'ck-placeholder', element );
  89. changed = true;
  90. }
  91. return changed;
  92. }
  93. // Element is empty for placeholder purposes when it has no children or only ui elements.
  94. // This check is taken from `view.ContainerElement#getFillerOffset`.
  95. const isEmptyish = !Array.from( element.getChildren() ).some( element => !element.is( 'uiElement' ) );
  96. // If element is empty and editor is blurred.
  97. if ( !document.isFocused && isEmptyish ) {
  98. if ( !element.hasClass( 'ck-placeholder' ) ) {
  99. writer.addClass( 'ck-placeholder', element );
  100. changed = true;
  101. }
  102. return changed;
  103. }
  104. // It there are no child elements and selection is not placed inside element.
  105. if ( isEmptyish && anchor && anchor.parent !== element ) {
  106. if ( !element.hasClass( 'ck-placeholder' ) ) {
  107. writer.addClass( 'ck-placeholder', element );
  108. changed = true;
  109. }
  110. } else {
  111. if ( element.hasClass( 'ck-placeholder' ) ) {
  112. writer.removeClass( 'ck-placeholder', element );
  113. changed = true;
  114. }
  115. }
  116. return changed;
  117. }