This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from ckeditor/t/1
Feature: Initial implementation (moved from the `ckeditor5-image` package). Closes #1.
- Loading branch information
Showing
11 changed files
with
1,425 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /** | ||
| * @module widget/utils | ||
| */ | ||
|
|
||
| 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}. | ||
| * | ||
| * @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 ) { | ||
| options = options || {}; | ||
| element.setAttribute( 'contenteditable', false ); | ||
| element.getFillerOffset = getFillerOffset; | ||
| element.addClass( WIDGET_CLASS_NAME ); | ||
| element.setCustomProperty( widgetSymbol, true ); | ||
|
|
||
| if ( options.label ) { | ||
| setLabel( element, options.label ); | ||
| } | ||
|
|
||
| return element; | ||
| } | ||
|
|
||
| /** | ||
| * 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: | ||
| * * sets `contenteditable` attribute to `true`, | ||
| * * adds `ck-editable` CSS class, | ||
| * * 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.setAttribute( 'contenteditable', 'true' ); | ||
| editable.addClass( 'ck-editable' ); | ||
|
|
||
| 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; | ||
| } |
Oops, something went wrong.