utils.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/widget/utils
  7. */
  8. import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
  9. const widgetSymbol = Symbol( 'isWidget' );
  10. const labelSymbol = Symbol( 'label' );
  11. /**
  12. * CSS class added to each widget element.
  13. *
  14. * @const {String}
  15. */
  16. export const WIDGET_CLASS_NAME = 'ck-widget';
  17. /**
  18. * CSS class added to currently selected widget element.
  19. *
  20. * @const {String}
  21. */
  22. export const WIDGET_SELECTED_CLASS_NAME = 'ck-widget_selected';
  23. /**
  24. * Returns `true` if given {@link module:engine/view/element~Element} is a widget.
  25. *
  26. * @param {module:engine/view/element~Element} element
  27. * @returns {Boolean}
  28. */
  29. export function isWidget( element ) {
  30. return !!element.getCustomProperty( widgetSymbol );
  31. }
  32. /**
  33. * Converts given {@link module:engine/view/element~Element} to widget in following way:
  34. * * sets `contenteditable` attribute to `true`,
  35. * * adds custom `getFillerOffset` method returning `null`,
  36. * * adds `ck-widget` CSS class,
  37. * * adds custom property allowing to recognize widget elements by using {@link ~isWidget}.
  38. *
  39. * @param {module:engine/view/element~Element} element
  40. * @param {Object} [options]
  41. * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
  42. * a plain string or a function returning a string.
  43. * @returns {module:engine/view/element~Element} Returns same element.
  44. */
  45. export function toWidget( element, options ) {
  46. options = options || {};
  47. element.setAttribute( 'contenteditable', false );
  48. element.getFillerOffset = getFillerOffset;
  49. element.addClass( WIDGET_CLASS_NAME );
  50. element.setCustomProperty( widgetSymbol, true );
  51. if ( options.label ) {
  52. setLabel( element, options.label );
  53. }
  54. return element;
  55. }
  56. /**
  57. * Sets label for given element.
  58. * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
  59. * {@link ~getLabel}.
  60. *
  61. * @param {module:engine/view/element~Element} element
  62. * @param {String|Function} labelOrCreator
  63. */
  64. export function setLabel( element, labelOrCreator ) {
  65. element.setCustomProperty( labelSymbol, labelOrCreator );
  66. }
  67. /**
  68. * Returns label for provided element.
  69. *
  70. * @param {module:engine/view/element~Element} element
  71. * @return {String}
  72. */
  73. export function getLabel( element ) {
  74. const labelCreator = element.getCustomProperty( labelSymbol );
  75. if ( !labelCreator ) {
  76. return '';
  77. }
  78. return typeof labelCreator == 'function' ? labelCreator() : labelCreator;
  79. }
  80. /**
  81. * Creates nested editable element with proper CSS classes.
  82. *
  83. * @param {String} elementName Name of the element to be created.
  84. * @param {module:engine/view/document~Document} viewDocument
  85. * @returns {module:engine/view/editableelement~EditableElement}
  86. */
  87. export function toWidgetEditable( elementName, viewDocument ) {
  88. const editable = new ViewEditableElement( elementName, { contenteditable: true } );
  89. editable.addClass( 'ck-editable' );
  90. editable.document = viewDocument;
  91. editable.on( 'change:isFocused', ( evt, property, is ) => {
  92. if ( is ) {
  93. editable.addClass( 'ck-editable_focused' );
  94. } else {
  95. editable.removeClass( 'ck-editable_focused' );
  96. }
  97. } );
  98. return editable;
  99. }
  100. // Default filler offset function applied to all widget elements.
  101. //
  102. // @returns {null}
  103. function getFillerOffset() {
  104. return null;
  105. }