Browse Source

Introduced toolbar unlink button.

Oskar Wrobel 9 years ago
parent
commit
c00a6ad584

+ 34 - 4
packages/ckeditor5-link/src/link.js

@@ -44,6 +44,7 @@ export default class Link extends Feature {
 		 */
 		this.balloonPanel = this._createBalloonPanel();
 		this._createToolbarLinkButton();
+		this._createToolbarUnlinkButton();
 
 		// Register document click observer
 		viewDocument.addObserver( ClickObserver );
@@ -63,17 +64,17 @@ export default class Link extends Feature {
 		const t = editor.t;
 
 		// Create button model.
-		const buttonModel = new Model( {
+		const linkButtonModel = new Model( {
 			isEnabled: true,
 			isOn: false,
 			label: t( 'Link' ),
 			icon: 'link'
 		} );
 
-		buttonModel.bind( 'url' ).to( linkCommand, 'value' );
+		linkButtonModel.bind( 'url', 'isEnabled' ).to( linkCommand, 'value', 'isEnabled' );
 
 		// Show Balloon Panel on button click.
-		this.listenTo( buttonModel, 'execute', () => {
+		this.listenTo( linkButtonModel, 'execute', () => {
 			if ( !viewDocument.isFocused ) {
 				return;
 			}
@@ -82,7 +83,36 @@ export default class Link extends Feature {
 		} );
 
 		// Add link button to feature components.
-		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, buttonModel );
+		editor.ui.featureComponents.add( 'link', ButtonController, ButtonView, linkButtonModel );
+	}
+
+	_createToolbarUnlinkButton() {
+		const editor = this.editor;
+		const t = editor.t;
+		const unlinkCommand = editor.commands.get( 'unlink' );
+
+		// Create button model.
+		const unlinkButtonModel = new Model( {
+			isEnabled: true,
+			isOn: false,
+			label: t( 'Unlink' ),
+			icon: 'unlink'
+		} );
+
+		// Bind button model to command.
+		unlinkButtonModel.bind( 'isEnabled' ).to( unlinkCommand, 'hasValue' );
+
+		// Execute command.
+		this.listenTo( unlinkButtonModel, 'execute', () => {
+			editor.execute( 'unlink' );
+
+			if ( this.balloonPanel && this.balloonPanel.view.isVisible ) {
+				this.balloonPanel.view.hide();
+			}
+		} );
+
+		// Add link button to feature components.
+		editor.ui.featureComponents.add( 'unlink', ButtonController, ButtonView, unlinkButtonModel );
 	}
 
 	/**

+ 21 - 0
packages/ckeditor5-link/src/unlinkcommand.js

@@ -14,6 +14,27 @@ import findLinkRange from './findlinkrange.js';
  */
 export default class UnlinkCommand extends Command {
 	/**
+	 * @see core.command.Command
+	 * @param {core.editor.Editor} editor
+	 */
+	constructor( editor ) {
+		super( editor );
+
+		/**
+		 * Flag indicating whether command is active. For collapsed selection it means that typed characters will have
+		 * the command's attribute set. For range selection it means that all nodes inside have the attribute applied.
+		 *
+		 * @observable
+		 * @member {Boolean} core.command.ToggleAttributeCommand#value
+		 */
+		this.set( 'hasValue', undefined );
+
+		this.listenTo( this.editor.document.selection, 'change:attribute', () => {
+			this.hasValue = this.editor.document.selection.hasAttribute( 'linkHref' );
+		} );
+	}
+
+	/**
 	 * Executes the command.
 	 *
 	 * When selection is collapsed then remove `linkHref` attribute from each stick node with the same `linkHref` attribute value.

+ 0 - 11
packages/ckeditor5-link/tests/manual/link.html

@@ -48,14 +48,3 @@
 		<a href="http://se">South East</a>
 	</p>
 </div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Idemne, quod iucunde? Quid igitur, inquit, eos responsuros putas? Nos cum te, M. Duo Reges: constructio interrete. Quod ea non occurrentia fingunt, vincunt Aristonem; Quibusnam praeteritis? Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Quid iudicant sensus? Zenonis est, inquam, hoc Stoici. </p>
-
-<p style="width: 2000px">Invidiosum nomen est, infame, suspectum. Sed ne, dum huic obsequor, vobis molestus sim. Nunc agendum est subtilius. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Quid, si etiam iucunda memoria est praeteritorum malorum? </p>
-
-<p>Si longus, levis; Quia nec honesto quic quam honestius nec turpi turpius. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita relinquet duas, de quibus etiam atque etiam consideret. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Terram, mihi crede, ea lanx et maria deprimet. Ut optime, secundum naturam affectum esse possit. </p>
-
-<p>Duo enim genera quae erant, fecit tria. Nam si amitti vita beata potest, beata esse non potest. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Si autem id non concedatur, non continuo vita beata tollitur. Sed quanta sit alias, nunc tantum possitne esse tanta. Non enim solum Torquatus dixit quid sentiret, sed etiam cur. At modo dixeras nihil in istis rebus esse, quod interesset. Quid autem habent admirationis, cum prope accesseris? </p>
-
-<p>Facile est hoc cernere in primis puerorum aetatulis. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quid de Pythagora? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Ita multo sanguine profuso in laetitia et in victoria est mortuus. Satisne ergo pudori consulat, si quis sine teste libidini pareat? Tum mihi Piso: Quid ergo? </p>
-

+ 2 - 2
packages/ckeditor5-link/tests/manual/link.js

@@ -9,7 +9,7 @@ import ClassicEditor from '/ckeditor5/editor-classic/classic.js';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	features: [ 'link', 'typing', 'paragraph', 'undo' ],
-	toolbar: [ 'link', 'undo', 'redo' ]
+	toolbar: [ 'link', 'unlink', 'undo', 'redo' ]
 } )
 .then( editor => {
 	window.editor = editor;
@@ -20,7 +20,7 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 
 ClassicEditor.create( document.querySelector( '#editor-balloon-demo' ), {
 	features: [ 'link', 'typing', 'paragraph', 'undo' ],
-	toolbar: [ 'link', 'undo', 'redo' ]
+	toolbar: [ 'link', 'unlink', 'undo', 'redo' ]
 } )
 .then( editor => {
 	editor.ui.view.element.classList.add( 'ck-editor_balloon-demo' );