| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module widget/utils
- */
- import VirtualSelectionStack from './virtualselectionstack';
- const widgetSymbol = Symbol( 'isWidget' );
- const labelSymbol = Symbol( 'label' );
- /**
- * CSS class added to each widget element.
- *
- * @const {String}
- */
- export const WIDGET_CLASS_NAME = 'ck-widget';
- /**
- * CSS class added to currently selected widget element.
- *
- * @const {String}
- */
- export const WIDGET_SELECTED_CLASS_NAME = 'ck-widget_selected';
- /**
- * Returns `true` if given {@link module:engine/view/element~Element} is a widget.
- *
- * @param {module:engine/view/element~Element} element
- * @returns {Boolean}
- */
- export function isWidget( element ) {
- return !!element.getCustomProperty( widgetSymbol );
- }
- /**
- * Converts given {@link module:engine/view/element~Element} to widget in following way:
- * * sets `contenteditable` attribute to `true`,
- * * adds custom `getFillerOffset` method returning `null`,
- * * adds `ck-widget` CSS class,
- * * adds custom property allowing to recognize widget elements by using {@link ~isWidget},
- * * implements `setVirtualSelection` and `removeVirtualSelection` custom properties to handle virtual selection
- * on widgets.
- *
- * @param {module:engine/view/element~Element} element
- * @param {Object} [options={}]
- * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
- * a plain string or a function returning a string.
- * @returns {module:engine/view/element~Element} Returns same element.
- */
- export function toWidget( element, options = {} ) {
- element.setAttribute( 'contenteditable', false );
- element.getFillerOffset = getFillerOffset;
- element.addClass( WIDGET_CLASS_NAME );
- element.setCustomProperty( widgetSymbol, true );
- if ( options.label ) {
- setLabel( element, options.label );
- }
- setVirtualSelectionHandling( element, setVirtualSelection, removeVirtualSelection );
- return element;
- }
- /**
- * Sets virtual selection handling methods. Uses {@link module:widget/virtualselectionstack~VirtualSelectionStack} to
- * properly determine which virtual selection should be used at given time.
- *
- * @param {module:engine/view/element~Element} element
- * @param {Function} add
- * @param {Function} remove
- */
- export function setVirtualSelectionHandling( element, add, remove ) {
- const stack = new VirtualSelectionStack();
- stack.on( 'change:top', ( evt, data ) => {
- if ( data.oldDescriptor ) {
- remove( element, data.oldDescriptor );
- }
- if ( data.newDescriptor ) {
- add( element, data.newDescriptor );
- }
- } );
- element.setCustomProperty( 'setVirtualSelection', ( element, descriptor ) => stack.add( descriptor ) );
- element.setCustomProperty( 'removeVirtualSelection', ( element, descriptor ) => stack.remove( descriptor ) );
- }
- /**
- * Sets label for given element.
- * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
- * {@link ~getLabel}.
- *
- * @param {module:engine/view/element~Element} element
- * @param {String|Function} labelOrCreator
- */
- export function setLabel( element, labelOrCreator ) {
- element.setCustomProperty( labelSymbol, labelOrCreator );
- }
- /**
- * Returns label for provided element.
- *
- * @param {module:engine/view/element~Element} element
- * @return {String}
- */
- export function getLabel( element ) {
- const labelCreator = element.getCustomProperty( labelSymbol );
- if ( !labelCreator ) {
- return '';
- }
- return typeof labelCreator == 'function' ? labelCreator() : labelCreator;
- }
- /**
- * Adds functionality to provided {module:engine/view/editableelement~EditableElement} to act as a widget's editable:
- * * adds `ck-editable` CSS class,
- * * sets `contenteditable` as `true` when {module:engine/view/editableelement~EditableElement#isReadOnly} is `false`
- * otherwise set `false`,
- * * adds `ck-editable_focused` CSS class when editable is focused and removes it when it's blurred.
- *
- * @param {module:engine/view/editableelement~EditableElement} editable
- * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
- */
- export function toWidgetEditable( editable ) {
- editable.addClass( 'ck-editable' );
- // Set initial contenteditable value.
- editable.setAttribute( 'contenteditable', !editable.isReadOnly );
- // Bind contenteditable property to element#isReadOnly.
- editable.on( 'change:isReadOnly', ( evt, property, is ) => {
- editable.setAttribute( 'contenteditable', !is );
- } );
- editable.on( 'change:isFocused', ( evt, property, is ) => {
- if ( is ) {
- editable.addClass( 'ck-editable_focused' );
- } else {
- editable.removeClass( 'ck-editable_focused' );
- }
- } );
- return editable;
- }
- // Default filler offset function applied to all widget elements.
- //
- // @returns {null}
- function getFillerOffset() {
- return null;
- }
- // Used as default function for setting virtual selection on widgets.
- //
- // @param {module:engine/view/element~Element} element
- // @param {module:engine/conversion/buildmodelconverter~VirtualSelectionDescriptor} descriptor
- function setVirtualSelection( element, descriptor ) {
- element.addClass( descriptor.class );
- }
- // Used as default function for removing virtual selection from widgets.
- //
- // @param {module:engine/view/element~Element} element
- // @param {module:engine/conversion/buildmodelconverter~VirtualSelectionDescriptor} descriptor
- function removeVirtualSelection( element, descriptor ) {
- element.removeClass( descriptor.class );
- }
|