Merge branch 't/10884b'

ckeditor · Jan 10, 2014 · 8c72ce0 · 8c72ce0
2 parents 2e6d50b + dec269f
commit 8c72ce0
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 95 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -24,7 +24,7 @@ CKEditor 4 Changelog
 * [#11140](http://dev.ckeditor.com/ticket/11140): [IE11] Fixed: Anchors are not draggable.
 * [#11379](http://dev.ckeditor.com/ticket/11379): Changed default contents' `line-height` to unitless values to avoid huge text overlapping (like in [#9696](http://dev.ckeditor.com/ticket/9696)).
 * [#10787](http://dev.ckeditor.com/ticket/10787): [Firefox] Fixed: Broken replacement of text while pasting into div-based editor.
-
+* [#10884](http://dev.ckeditor.com/ticket/10884): Widgets integration with [Showblocks](http://ckeditor.com/addon/showblocks) plugin.
 
 ## CKEditor 4.3.1
 

diff --git a/plugins/showblocks/plugin.js b/plugins/showblocks/plugin.js
@@ -10,6 +10,8 @@
  */
 
 ( function() {
+	'use strict';
+
 	var commandDefinition = {
 		readOnly: 1,
 		preserveState: true,
@@ -38,100 +40,67 @@
 		icons: 'showblocks,showblocks-rtl', // %REMOVE_LINE_CORE%
 		hidpi: true, // %REMOVE_LINE_CORE%
 		onLoad: function() {
-			var cssTemplate = '.%2 p,' +
-				'.%2 div,' +
-				'.%2 pre,' +
-				'.%2 address,' +
-				'.%2 blockquote,' +
-				'.%2 h1,' +
-				'.%2 h2,' +
-				'.%2 h3,' +
-				'.%2 h4,' +
-				'.%2 h5,' +
-				'.%2 h6' +
-				'{' +
-					'background-repeat: no-repeat;' +
-					'border: 1px dotted gray;' +
-					'padding-top: 8px;' +
-				'}' +
-
-				'.%2 p' +
-				'{' +
-					'%1p.png);' +
-				'}' +
-
-				'.%2 div' +
-				'{' +
-					'%1div.png);' +
-				'}' +
-
-				'.%2 pre' +
-				'{' +
-					'%1pre.png);' +
-				'}' +
-
-				'.%2 address' +
-				'{' +
-					'%1address.png);' +
-				'}' +
-
-				'.%2 blockquote' +
-				'{' +
-					'%1blockquote.png);' +
-				'}' +
-
-				'.%2 h1' +
-				'{' +
-					'%1h1.png);' +
-				'}' +
-
-				'.%2 h2' +
-				'{' +
-					'%1h2.png);' +
-				'}' +
-
-				'.%2 h3' +
-				'{' +
-					'%1h3.png);' +
-				'}' +
-
-				'.%2 h4' +
-				'{' +
-					'%1h4.png);' +
-				'}' +
-
-				'.%2 h5' +
-				'{' +
-					'%1h5.png);' +
-				'}' +
-
-				'.%2 h6' +
-				'{' +
-					'%1h6.png);' +
+			var tags = [ 'p', 'div', 'pre', 'address', 'blockquote', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+				cssStd, cssImg, cssLtr, cssRtl,
+				path = CKEDITOR.getUrl( this.path ),
+				// #10884 don't apply showblocks styles to non-editable elements and chosen ones.
+				// IE8 does not support :not() pseudoclass, so we need to reset showblocks rather
+				// than 'prevent' its application. We do that by additional rules.
+				supportsNotPseudoclass = !( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ),
+				notDisabled = supportsNotPseudoclass ? ':not([contenteditable=false]):not(.cke_show_blocks_off)' : '',
+				tag, trailing;
+
+			cssStd = cssImg = cssLtr = cssRtl = '';
+
+			while ( ( tag = tags.pop() ) ) {
+				trailing = tags.length ? ',' : '';
+
+				cssStd += '.cke_show_blocks ' + tag + notDisabled + trailing;
+				cssLtr += '.cke_show_blocks.cke_contents_ltr ' + tag + notDisabled + trailing;
+				cssRtl += '.cke_show_blocks.cke_contents_rtl ' + tag + notDisabled + trailing;
+				cssImg += '.cke_show_blocks ' + tag + notDisabled + '{' +
+					'background-image:url(' + path + 'images/block_' + tag + '.png)' +
 				'}';
-
-			// Styles with contents direction awareness.
-			function cssWithDir( dir ) {
-				var template = '.%1.%2 p,' +
-					'.%1.%2 div,' +
-					'.%1.%2 pre,' +
-					'.%1.%2 address,' +
-					'.%1.%2 blockquote,' +
-					'.%1.%2 h1,' +
-					'.%1.%2 h2,' +
-					'.%1.%2 h3,' +
-					'.%1.%2 h4,' +
-					'.%1.%2 h5,' +
-					'.%1.%2 h6' +
-					'{' +
-						'background-position: top %3;' +
-						'padding-%3: 8px;' +
-					'}';
-
-				return template.replace( /%1/g, 'cke_show_blocks' ).replace( /%2/g, 'cke_contents_' + dir ).replace( /%3/g, dir == 'rtl' ? 'right' : 'left' );
 			}
 
-			CKEDITOR.addCss( cssTemplate.replace( /%1/g, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' ).replace( /%2/g, 'cke_show_blocks ' ) + cssWithDir( 'ltr' ) + cssWithDir( 'rtl' ) );
+			// .cke_show_blocks p { ... }
+			cssStd += '{' +
+				'background-repeat:no-repeat;' +
+				'border:1px dotted gray;' +
+				'padding-top:8px' +
+			'}';
+
+			// .cke_show_blocks.cke_contents_ltr p { ... }
+			cssLtr += '{' +
+				'background-position:top left;' +
+				'padding-left:8px' +
+			'}';
+
+			// .cke_show_blocks.cke_contents_rtl p { ... }
+			cssRtl += '{' +
+				'background-position:top right;' +
+				'padding-right:8px' +
+			'}';
+
+			CKEDITOR.addCss( cssStd.concat( cssImg, cssLtr, cssRtl ) );
+
+			// [IE8] Reset showblocks styles for non-editables and chosen elements, because
+			// it could not be done using :not() pseudoclass (#10884).
+			if ( !supportsNotPseudoclass ) {
+				CKEDITOR.addCss(
+					'.cke_show_blocks [contenteditable=false],.cke_show_blocks .cke_show_blocks_off{' +
+						'border:none;' +
+						'padding-top:0;' +
+						'background-image:none' +
+					'}' +
+					'.cke_show_blocks.cke_contents_rtl [contenteditable=false],.cke_show_blocks.cke_contents_rtl .cke_show_blocks_off{' +
+						'padding-right:0' +
+					'}' +
+					'.cke_show_blocks.cke_contents_ltr [contenteditable=false],.cke_show_blocks.cke_contents_ltr .cke_show_blocks_off{' +
+						'padding-left:0' +
+					'}'
+				);
+			}
 		},
 		init: function( editor ) {
 			if ( editor.blockless )
@@ -157,9 +126,6 @@
 
 			// Refresh the command on focus/blur in inline.
 			if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ) {
-				function onFocusBlur() {
-					command.refresh( editor );
-				}
 				editor.on( 'focus', onFocusBlur );
 				editor.on( 'blur', onFocusBlur );
 			}
@@ -169,6 +135,10 @@
 				if ( command.state != CKEDITOR.TRISTATE_DISABLED )
 					command.refresh( editor );
 			} );
+
+			function onFocusBlur() {
+				command.refresh( editor );
+			}
 		}
 	} );
 } )();