Browse Source

Array of CSS classes can be passed in HighlightDescriptor.

Szymon Kupś 8 years ago
parent
commit
65d66beff7

+ 12 - 2
packages/ckeditor5-widget/src/highlightstack.js

@@ -125,7 +125,8 @@ mix( HighlightStack, EmitterMixin );
 // @param {module:engine/conversion/buildmodelconverter~HighlightDescriptor} descriptorB
 // @returns {Boolean}
 function compareDescriptors( descriptorA, descriptorB ) {
-	return descriptorA.priority == descriptorB.priority && descriptorA.class == descriptorB.class;
+	return descriptorA.priority == descriptorB.priority &&
+		classesToString( descriptorA.class ) == classesToString( descriptorB.class );
 }
 
 // Checks whenever first descriptor should be placed in the stack before second one.
@@ -141,7 +142,16 @@ function shouldABeBeforeB( a, b ) {
 	}
 
 	// When priorities are equal and names are different - use classes to compare.
-	return a.class > b.class;
+	return classesToString( a.class ) > classesToString( b.class );
+}
+
+// Converts CSS classes passed with {@link module:engine/conversion/buildmodelconverter~HighlightDescriptor} to
+// sorted string.
+//
+// @param {String|Array<String>} descriptor
+// @returns {String}
+function classesToString( classes ) {
+	return Array.isArray( classes ) ? classes.sort().join( ',' ) : classes;
 }
 
 /**

+ 7 - 2
packages/ckeditor5-widget/src/utils.js

@@ -62,11 +62,16 @@ export function toWidget( element, options = {} ) {
 
 	setHighlightHandling(
 		element,
-		( element, descriptor ) => element.addClass( descriptor.class ),
-		( element, descriptor ) => element.removeClass( descriptor.class )
+		( element, descriptor ) => element.addClass( ...normalizeToArray( descriptor.class ) ),
+		( element, descriptor ) => element.removeClass( ...normalizeToArray( descriptor.class ) )
 	);
 
 	return element;
+
+	// Normalizes CSS class in descriptor that can be provided in form of an array or a string.
+	function normalizeToArray( classes ) {
+		return Array.isArray( classes ) ? classes : [ classes ];
+	}
 }
 
 /**

+ 22 - 0
packages/ckeditor5-widget/tests/highlightstack.js

@@ -164,4 +164,26 @@ describe( 'HighlightStack', () => {
 		expect( spy.secondCall.args[ 1 ].newDescriptor ).to.equal( descriptorC );
 		expect( spy.secondCall.args[ 1 ].oldDescriptor ).to.equal( descriptorB );
 	} );
+
+	it( 'should sort by class when priorities are the same - array of CSS classes', () => {
+		const spy = sinon.spy();
+		const descriptorA = { priority: 10, class: [ 'css-a', 'css-z' ] };
+		const descriptorB = { priority: 10, class: [ 'css-a', 'css-y' ] };
+		const descriptorC = { priority: 10, class: 'css-c' };
+
+		stack.on( 'change:top', spy );
+		stack.add( descriptorB );
+		stack.add( descriptorA );
+		stack.add( descriptorC );
+
+		sinon.assert.calledThrice( spy );
+		expect( spy.firstCall.args[ 1 ].newDescriptor ).to.equal( descriptorB );
+		expect( spy.firstCall.args[ 1 ].oldDescriptor ).to.be.undefined;
+
+		expect( spy.secondCall.args[ 1 ].newDescriptor ).to.equal( descriptorA );
+		expect( spy.secondCall.args[ 1 ].oldDescriptor ).to.equal( descriptorB );
+
+		expect( spy.thirdCall.args[ 1 ].newDescriptor ).to.equal( descriptorC );
+		expect( spy.thirdCall.args[ 1 ].oldDescriptor ).to.equal( descriptorA );
+	} );
 } );

+ 30 - 0
packages/ckeditor5-widget/tests/utils.js

@@ -65,6 +65,24 @@ describe( 'widget utils', () => {
 			remove( element, { priority: 1, class: 'highlight' } );
 			expect( element.hasClass( 'highlight' ) ).to.be.false;
 		} );
+
+		it( 'should set default highlight handling methods - CSS classes array', () => {
+			toWidget( element );
+
+			const set = element.getCustomProperty( 'addHighlight' );
+			const remove = element.getCustomProperty( 'removeHighlight' );
+
+			expect( typeof set ).to.equal( 'function' );
+			expect( typeof remove ).to.equal( 'function' );
+
+			set( element, { priority: 1, class: [ 'highlight', 'foo' ] } );
+			expect( element.hasClass( 'highlight' ) ).to.be.true;
+			expect( element.hasClass( 'foo' ) ).to.be.true;
+
+			remove( element, { priority: 1, class: [ 'foo', 'highlight' ] } );
+			expect( element.hasClass( 'highlight' ) ).to.be.false;
+			expect( element.hasClass( 'foo' ) ).to.be.false;
+		} );
 	} );
 
 	describe( 'isWidget()', () => {
@@ -222,5 +240,17 @@ describe( 'widget utils', () => {
 
 			sinon.assert.notCalled( removeSpy );
 		} );
+
+		it( 'should call highlight methods - CSS class array', () => {
+			const descriptor = { priority: 10, class: [ 'highlight', 'a' ] };
+			const secondDescriptor = { priority: 10, class: [ 'highlight', 'b' ] };
+
+			set( element, descriptor );
+			set( element, secondDescriptor );
+
+			sinon.assert.calledTwice( addSpy );
+			expect( addSpy.firstCall.args[ 1 ] ).to.equal( descriptor );
+			expect( addSpy.secondCall.args[ 1 ] ).to.equal( secondDescriptor );
+		} );
 	} );
 } );