| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- /**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- /**
- * @module link/ui/linkactionsview
- */
- import View from '@ckeditor/ckeditor5-ui/src/view';
- import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
- import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
- import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
- import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
- import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
- import { ensureSafeUrl } from '../utils';
- import unlinkIcon from '../../theme/icons/unlink.svg';
- import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
- import '../../theme/linkactions.css';
- /**
- * The link actions view class. This view displays the link preview, allows
- * unlinking or editing the link.
- *
- * @extends module:ui/view~View
- */
- export default class LinkActionsView extends View {
- /**
- * @inheritDoc
- */
- constructor( locale ) {
- super( locale );
- const t = locale.t;
- /**
- * Tracks information about DOM focus in the actions.
- *
- * @readonly
- * @member {module:utils/focustracker~FocusTracker}
- */
- this.focusTracker = new FocusTracker();
- /**
- * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
- *
- * @readonly
- * @member {module:utils/keystrokehandler~KeystrokeHandler}
- */
- this.keystrokes = new KeystrokeHandler();
- /**
- * The href preview view.
- *
- * @member {module:ui/view~View}
- */
- this.previewButtonView = this._createPreviewButton();
- /**
- * The unlink button view.
- *
- * @member {module:ui/button/buttonview~ButtonView}
- */
- this.unlinkButtonView = this._createButton( t( 'Unlink' ), unlinkIcon, 'unlink' );
- /**
- * The edit link button view.
- *
- * @member {module:ui/button/buttonview~ButtonView}
- */
- this.editButtonView = this._createButton( t( 'Edit link' ), pencilIcon, 'edit' );
- /**
- * The value of the "href" attribute of the link to use in the {@link #previewButtonView}.
- *
- * @observable
- * @member {String}
- */
- this.set( 'href' );
- /**
- * A collection of views that can be focused in the view.
- *
- * @readonly
- * @protected
- * @member {module:ui/viewcollection~ViewCollection}
- */
- this._focusables = new ViewCollection();
- /**
- * Helps cycling over {@link #_focusables} in the view.
- *
- * @readonly
- * @protected
- * @member {module:ui/focuscycler~FocusCycler}
- */
- this._focusCycler = new FocusCycler( {
- focusables: this._focusables,
- focusTracker: this.focusTracker,
- keystrokeHandler: this.keystrokes,
- actions: {
- // Navigate fields backwards using the Shift + Tab keystroke.
- focusPrevious: 'shift + tab',
- // Navigate fields forwards using the Tab key.
- focusNext: 'tab'
- }
- } );
- this.setTemplate( {
- tag: 'div',
- attributes: {
- class: [
- 'ck',
- 'ck-link-actions'
- ],
- // https://github.com/ckeditor/ckeditor5-link/issues/90
- tabindex: '-1'
- },
- children: [
- this.previewButtonView,
- this.editButtonView,
- this.unlinkButtonView
- ]
- } );
- }
- /**
- * @inheritDoc
- */
- render() {
- super.render();
- const childViews = [
- this.previewButtonView,
- this.editButtonView,
- this.unlinkButtonView
- ];
- childViews.forEach( v => {
- // Register the view as focusable.
- this._focusables.add( v );
- // Register the view in the focus tracker.
- this.focusTracker.add( v.element );
- } );
- // Start listening for the keystrokes coming from #element.
- this.keystrokes.listenTo( this.element );
- }
- /**
- * Focuses the fist {@link #_focusables} in the actions.
- */
- focus() {
- this._focusCycler.focusFirst();
- }
- /**
- * Creates a button view.
- *
- * @private
- * @param {String} label The button label.
- * @param {String} icon The button icon.
- * @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
- * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
- */
- _createButton( label, icon, eventName ) {
- const button = new ButtonView( this.locale );
- button.set( {
- label,
- icon,
- tooltip: true
- } );
- button.delegate( 'execute' ).to( this, eventName );
- return button;
- }
- /**
- * Creates a link href preview button.
- *
- * @private
- * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
- */
- _createPreviewButton() {
- const button = new ButtonView( this.locale );
- const bind = this.bindTemplate;
- const t = this.t;
- button.set( {
- withText: true,
- tooltip: t( 'Open link in new tab' )
- } );
- button.extendTemplate( {
- attributes: {
- class: [
- 'ck',
- 'ck-link-actions__preview'
- ],
- href: bind.to( 'href', href => href && ensureSafeUrl( href ) ),
- target: '_blank',
- rel: 'noopener noreferrer'
- }
- } );
- button.bind( 'label' ).to( this, 'href', href => {
- return href || t( 'This link has no URL' );
- } );
- button.bind( 'isEnabled' ).to( this, 'href', href => !!href );
- button.template.tag = 'a';
- button.template.eventListeners = {};
- return button;
- }
- }
- /**
- * Fired when the {@link #editButtonView} is clicked.
- *
- * @event edit
- */
- /**
- * Fired when the {@link #unlinkButtonView} is clicked.
- *
- * @event unlink
- */
|