Skip to content

Commit 336a28c

Browse files
mlewandmlewand
committed
Merge branch 't/13828' into major
2 parents 1f04c2c + 6bd178b commit 336a28c

File tree

3 files changed

+69
-12
lines changed

3 files changed

+69
-12
lines changed

‎CHANGES.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ New Features:
77

88
* [#12077](https://dev.ckeditor.com/ticket/12077): Add support for HTML5 "download" attribute in link (a) elements. Thanks to [sbusse](https://github.com/sbusse)!
99
* [#13519](http://dev.ckeditor.com/ticket/13519): (http://docs.ckeditor.com/#!/api/CKEDITOR.fileTools) response is now more flexible.
10+
* [#13828](http://dev.ckeditor.com/ticket/13828): Adding a class to widget element will also add a prefixed class to it's wrapper.
1011

1112
## CKEditor 4.5.5
1213

‎plugins/widget/plugin.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -982,6 +982,9 @@
982982
* the {@link #applyStyle} method and should be overriden by widgets
983983
* which should handle classes differently (e.g. add them to other elements).
984984
*
985+
* Since 4.6.0 this method also adds a corresponding class prefixed with {@link #WRAPPER_CLASS_PREFIX}
986+
* to the widget wrapper element.
987+
*
985988
* **Note**: This method should not be used directly. Use the {@link #setData} method to
986989
* set the `classes` property. Read more in the {@link #setData} documentation.
987990
*
@@ -992,6 +995,7 @@
992995
*/
993996
addClass: function( className ) {
994997
this.element.addClass( className );
998+
this.wrapper.addClass( Widget.WRAPPER_CLASS_PREFIX + className );
995999
},
9961000

9971001
/**
@@ -1332,6 +1336,7 @@
13321336
*/
13331337
removeClass: function( className ) {
13341338
this.element.removeClass( className );
1339+
this.wrapper.removeClass( Widget.WRAPPER_CLASS_PREFIX + className );
13351340
},
13361341

13371342
/**
@@ -1590,6 +1595,17 @@
15901595
return node.type == CKEDITOR.NODE_ELEMENT && !!node.attributes[ 'data-cke-widget-wrapper' ];
15911596
};
15921597

1598+
/**
1599+
* Prefix added to wrapper classes. Each class added to the widget element by {@link #addClass}
1600+
* will be also added to the wrapper prefixed with it.
1601+
*
1602+
* @since 4.6.0
1603+
* @static
1604+
* @readonly
1605+
* @property {String} [='cke_widget_wrapper_']
1606+
*/
1607+
Widget.WRAPPER_CLASS_PREFIX = 'cke_widget_wrapper_';
1608+
15931609
/**
15941610
* An event fired when a widget is ready (fully initialized). This event is fired after:
15951611
*

‎tests/plugins/widget/widgetapi.js

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,16 @@
2525
getAttrData = widgetTestsTools.getAttributeData,
2626
getWidgetById = widgetTestsTools.getWidgetById,
2727
obj2Array = widgetTestsTools.obj2Array,
28-
classes2Array = widgetTestsTools.classes2Array;
28+
classes2Array = widgetTestsTools.classes2Array,
29+
prefix;
2930

3031
bender.test( {
32+
33+
setUp: function() {
34+
// Class prefix for widget wrapper classes (#13828).
35+
prefix = CKEDITOR.plugins.widget.WRAPPER_CLASS_PREFIX;
36+
},
37+
3138
'test initialization - init method and data event': function() {
3239
var editor = this.editor,
3340
order = [],
@@ -341,12 +348,15 @@
341348
} );
342349

343350
this.editorBot.setData( '<p data-widget="testclassesloading1" id="w1" class="foo bar">foo</p>', function() {
344-
var widget = getWidgetById( editor, 'w1' );
351+
var widget = getWidgetById( editor, 'w1' ),
352+
wrapper = widget.wrapper;
345353

346354
assert.areSame( 1, onDataFired, 'data event fired once' );
347355
assert.areSame( 'bar,foo', getClasses( widget ).join( ',' ), 'widget.data.classes is loaded' );
348356
assert.isTrue( widget.hasClass( 'foo' ) );
349357
assert.isTrue( widget.hasClass( 'bar' ) );
358+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'Prefixed class should be applied on wrapper.' );
359+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'Prefixed class should be applied on wrapper.' );
350360
} );
351361
},
352362

@@ -367,13 +377,16 @@
367377
} );
368378

369379
this.editorBot.setData( '<p data-widget="testclassesloading2" data-cke-widget-data="' + data2Attr( { classes: { foo: 1, bar: 1 } } ) + '" id="w1">foo</p>', function() {
370-
var widget = getWidgetById( editor, 'w1' );
380+
var widget = getWidgetById( editor, 'w1' ),
381+
wrapper = widget.wrapper;
371382

372383
assert.areSame( 1, onDataFired, 'data event fired once' );
373384
assert.areSame( 2, addClassCalled, 'addClass was used to add classes' );
374385
assert.areSame( 'bar,foo', getClasses( widget ).join( ',' ), 'widget.data.classes is loaded' );
375386
assert.isTrue( widget.hasClass( 'foo' ) );
376387
assert.isTrue( widget.hasClass( 'bar' ) );
388+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'Prefixed class should be applied on wrapper.' );
389+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'Prefixed class should be applied on wrapper.' );
377390
} );
378391
},
379392

@@ -384,18 +397,24 @@
384397

385398
this.editorBot.setData( '<p data-widget="testaddremoveclass1" id="w1">foo</p>', function() {
386399
var widget = getWidgetById( editor, 'w1' ),
387-
element = widget.element;
400+
element = widget.element,
401+
wrapper = widget.wrapper;
388402

389403
widget.addClass( 'foo' );
390404
assert.isTrue( element.hasClass( 'foo' ), 'element has class foo' );
405+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'wrapper has class ' + prefix + 'foo' );
391406

392407
widget.addClass( 'bar' );
393408
assert.isTrue( element.hasClass( 'bar' ), 'element has class bar' );
409+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'wrapper has class ' + prefix + 'bar' );
394410
assert.isTrue( element.hasClass( 'foo' ), 'element still has class foo' );
411+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'wrapper has class ' + prefix + 'foo' );
395412

396413
widget.removeClass( 'foo' );
397414
assert.isFalse( element.hasClass( 'foo' ), 'element does not have class foo' );
415+
assert.isFalse( wrapper.hasClass( prefix + 'foo' ), 'wrapper does not have class ' + prefix + 'foo' );
398416
assert.isTrue( element.hasClass( 'bar' ), 'element still has class bar' );
417+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'wrapper does not have class ' + prefix + 'bar' );
399418
} );
400419
},
401420

@@ -442,24 +461,30 @@
442461
editor.widgets.add( widgetName, {} );
443462

444463
this.editorBot.setData( '<p data-widget="testapplyremovestyle1" id="w1">foo</p>', function() {
445-
var widget = getWidgetById( editor, 'w1' );
446-
447-
var style1 = st( { type: 'widget', widget: widgetName, attributes: { 'class': 'foo' } } ),
464+
var widget = getWidgetById( editor, 'w1' ),
465+
wrapper = widget.wrapper,
466+
style1 = st( { type: 'widget', widget: widgetName, attributes: { 'class': 'foo' } } ),
448467
style2 = st( { type: 'widget', widget: widgetName, attributes: { 'class': 'bar' } } );
449468

450469
widget.applyStyle( style1 );
451470
assert.isTrue( widget.hasClass( 'foo' ), 'style 1 has been applied' );
471+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'style 1 has been applied to the wrapper too' );
452472

453473
widget.applyStyle( style2 );
454474
assert.isTrue( widget.hasClass( 'foo' ), 'style 1 is still applied' );
475+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'style 1 is still applied to the wrapper' );
455476
assert.isTrue( widget.hasClass( 'bar' ), 'style 2 has been applied' );
477+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'style 2 has been applied to the wrapper too' );
456478

457479
widget.removeStyle( style1 );
458480
assert.isFalse( widget.hasClass( 'foo' ), 'style 1 has been removed' );
481+
assert.isFalse( wrapper.hasClass( prefix + 'foo' ), 'style 1 has been removed from the wrapper' );
459482
assert.isTrue( widget.hasClass( 'bar' ), 'style 2 is sitll applied' );
483+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'style 2 is still applied to the wrapper' );
460484

461485
widget.removeStyle( style2 );
462486
assert.isFalse( widget.hasClass( 'bar' ), 'style 2 has been removed' );
487+
assert.isFalse( wrapper.hasClass( prefix + 'bar' ), 'style 2 has been removed from the wrapper' );
463488
} );
464489
},
465490

@@ -470,21 +495,27 @@
470495
editor.widgets.add( widgetName, {} );
471496

472497
this.editorBot.setData( '<p data-widget="testapplyremovestyle2" id="w1">foo</p>', function() {
473-
var widget = getWidgetById( editor, 'w1' );
498+
var widget = getWidgetById( editor, 'w1' ),
499+
wrapper = widget.wrapper;
474500

475501
var style = st( { type: 'widget', widget: widgetName, attributes: { 'class': 'foo bar' } } );
476502

477503
widget.applyStyle( style );
478504
assert.isTrue( widget.hasClass( 'foo' ), '1st class has been applied' );
505+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), '1st class has been applied to the wrapper' );
479506
assert.isTrue( widget.hasClass( 'bar' ), '2nd class has been applied' );
507+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), '2nd class has been applied to the wrapper' );
480508

481509
widget.addClass( 'bom' );
482-
483510
widget.removeStyle( style );
511+
484512
assert.isFalse( widget.hasClass( 'foo' ), '1st class has been removed' );
513+
assert.isFalse( wrapper.hasClass( prefix + 'foo' ), '1st class has been removed from the wrapper' );
485514
assert.isFalse( widget.hasClass( 'bar' ), '2nd class has been removed' );
515+
assert.isFalse( wrapper.hasClass( prefix + 'bar' ), '2nd class has been removed from the wrapper' );
486516

487-
assert.isTrue( widget.hasClass( 'bom' ), 'unrelated class has been left' );
517+
assert.isTrue( widget.hasClass( 'bom' ), 'unrelated class remains untouched' );
518+
assert.isTrue( wrapper.hasClass( prefix + 'bom' ), 'unrelated class remains untouched on the wrapper' );
488519
} );
489520
},
490521

@@ -589,28 +620,37 @@
589620
editor.widgets.add( widgetName, {} );
590621

591622
this.editorBot.setData( '<p data-widget="testsetdataclasses1" id="w1">foo</p>', function() {
592-
var widget = getWidgetById( editor, 'w1' );
623+
var widget = getWidgetById( editor, 'w1' ),
624+
wrapper = widget.wrapper;
593625

594626
widget.setData( 'classes', { foo: 1, bar: 1 } );
595627

596628
assert.isTrue( widget.hasClass( 'foo' ), '1 - foo' );
629+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'wrapper: 1 - ' + prefix + 'foo' );
597630
assert.isTrue( widget.hasClass( 'bar' ), '1 - bar' );
631+
assert.isTrue( wrapper.hasClass( prefix + 'bar' ), 'wrapper: 1 - ' + prefix + 'foo' );
598632

599633
widget.setData( 'classes', { foo: 1, bom: 1 } );
600634

601635
assert.isTrue( widget.hasClass( 'foo' ), '2 - foo' );
636+
assert.isTrue( wrapper.hasClass( prefix + 'foo' ), 'wrapper: 2 - ' + prefix + 'foo' );
602637
assert.isTrue( widget.hasClass( 'bom' ), '2 - bom' );
638+
assert.isTrue( wrapper.hasClass( prefix + 'bom' ), 'wrapper: 2 - ' + prefix + 'bom' );
603639
assert.isFalse( widget.hasClass( 'bar' ), '2 - bar' );
640+
assert.isFalse( wrapper.hasClass( prefix + 'bar' ), 'wrapper: 2 - ' + prefix + 'bar' );
604641

605642
widget.setData( 'classes', {} );
606643

607644
assert.isFalse( widget.hasClass( 'foo' ), '3 - foo' );
645+
assert.isFalse( wrapper.hasClass( prefix + 'foo' ), 'wrapper: 3 - ' + prefix + 'foo' );
608646
assert.isFalse( widget.hasClass( 'bom' ), '3 - bom' );
647+
assert.isFalse( wrapper.hasClass( prefix + 'bom' ), 'wrapper: 3 - ' + prefix + 'bom' );
609648

610649
widget.setData( 'classes', { foo: 1 } );
611650
widget.setData( 'classes', null );
612651

613652
assert.isFalse( widget.hasClass( 'foo' ), '4 - foo' );
653+
assert.isFalse( wrapper.hasClass( prefix + 'foo' ), 'wrapper: 4 - ' + prefix + 'foo' );
614654
} );
615655
},
616656

@@ -757,4 +797,4 @@
757797
} );
758798
}
759799
} );
760-
} )();
800+
} )();

0 commit comments

Comments
 (0)