path: root/_source/plugins/stylescombo/plugin.js

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

(function()
{
	var stylesManager;

	CKEDITOR.plugins.add( 'stylescombo',
	{
		requires : [ 'richcombo', 'styles' ],

		init : function( editor )
		{
			var config = editor.config,
				lang = editor.lang.stylesCombo,
				pluginPath = this.path,
				styles;

			if ( !stylesManager )
				stylesManager = CKEDITOR.stylesSet;

			var comboStylesSet = config.stylesCombo_stylesSet.split( ':' ),
				styleSetName = comboStylesSet[ 0 ],
				externalPath = comboStylesSet[ 1 ];

			stylesManager.addExternal( styleSetName,
					externalPath ?
						comboStylesSet.slice( 1 ).join( ':' ) :
						pluginPath + 'styles/' + styleSetName + '.js', '' );

			editor.ui.addRichCombo( 'Styles',
				{
					label : lang.label,
					title : lang.panelTitle,
					className : 'cke_styles',

					panel :
					{
						css : editor.skin.editor.css.concat( config.contentsCss ),
						multiSelect : true,
						attributes : { 'aria-label' : lang.panelTitle }
					},

					init : function()
					{
						var combo = this;

						CKEDITOR.stylesSet.load( styleSetName, function( stylesSet )
							{
								var stylesDefinitions = stylesSet[ styleSetName ],
									style,
									styleName,
									stylesList = [];

								styles = {};

								// Put all styles into an Array.
								for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
								{
									var styleDefinition = stylesDefinitions[ i ];

									styleName = styleDefinition.name;

									style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
									style._name = styleName;

									stylesList.push( style );
								}

								// Sorts the Array, so the styles get grouped
								// by type.
								stylesList.sort( sortStyles );

								// Loop over the Array, adding all items to the
								// combo.
								var lastType;
								for ( i = 0 ; i < stylesList.length ; i++ )
								{
									style = stylesList[ i ];
									styleName = style._name;

									var type = style.type;

									if ( type != lastType )
									{
										combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
										lastType = type;
									}

									combo.add(
										styleName,
										style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),
										styleName );
								}

								combo.commit();

								combo.onOpen();
							});
					},

					onClick : function( value )
					{
						editor.focus();
						editor.fire( 'saveSnapshot' );

						var style = styles[ value ],
							selection = editor.getSelection();

						if ( style.type == CKEDITOR.STYLE_OBJECT )
						{
							var element = selection.getSelectedElement();
							if ( element )
								style.applyToObject( element );

							return;
						}

						var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );

						if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
							style.remove( editor.document );
						else
							style.apply( editor.document );

						editor.fire( 'saveSnapshot' );
					},

					onRender : function()
					{
						editor.on( 'selectionChange', function( ev )
							{
								var currentValue = this.getValue();

								var elementPath = ev.data.path,
									elements = elementPath.elements;

								// For each element into the elements path.
								for ( var i = 0, element ; i < elements.length ; i++ )
								{
									element = elements[i];

									// Check if the element is removable by any of
									// the styles.
									for ( var value in styles )
									{
										if ( styles[ value ].checkElementRemovable( element, true ) )
										{
											if ( value != currentValue )
												this.setValue( value );
											return;
										}
									}
								}

								// If no styles match, just empty it.
								this.setValue( '' );
							},
							this);
					},

					onOpen : function()
					{
						if ( CKEDITOR.env.ie )
							editor.focus();

						var selection = editor.getSelection();

						var element = selection.getSelectedElement(),
							elementName = element && element.getName(),
							elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );

						var counter = [ 0, 0, 0, 0 ];
						this.showAll();
						this.unmarkAll();
						for ( var name in styles )
						{
							var style = styles[ name ],
								type = style.type;

							if ( type == CKEDITOR.STYLE_OBJECT )
							{
								if ( element && style.element == elementName )
								{
									if ( style.checkElementRemovable( element, true ) )
										this.mark( name );

									counter[ type ]++;
								}
								else
									this.hideItem( name );
							}
							else
							{
								if ( style.checkActive( elementPath ) )
									this.mark( name );

								counter[ type ]++;
							}
						}

						if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
							this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );

						if ( !counter[ CKEDITOR.STYLE_INLINE ] )
							this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );

						if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
							this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
					}
				});
		}
	});

	function buildPreview( styleDefinition )
	{
		var html = [];

		var elementName = styleDefinition.element;

		// Avoid <bdo> in the preview.
		if ( elementName == 'bdo' )
			elementName = 'span';

		html = [ '<', elementName ];

		// Assign all defined attributes.
		var attribs	= styleDefinition.attributes;
		if ( attribs )
		{
			for ( var att in attribs )
			{
				html.push( ' ', att, '="', attribs[ att ], '"' );
			}
		}

		// Assign the style attribute.
		var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );
		if ( cssStyle )
			html.push( ' style="', cssStyle, '"' );

		html.push( '>', styleDefinition.name, '</', elementName, '>' );

		return html.join( '' );
	}

	function sortStyles( styleA, styleB )
	{
		var typeA = styleA.type,
			typeB = styleB.type;

		return typeA == typeB ? 0 :
			typeA == CKEDITOR.STYLE_OBJECT ? -1 :
			typeB == CKEDITOR.STYLE_OBJECT ? 1 :
			typeB == CKEDITOR.STYLE_BLOCK ? 1 :
			-1;
	}
})();

/**
 * The "styles definition set" to load into the styles combo. The styles may
 * be defined in the page containing the editor, or can be loaded on demand
 * from an external file when opening the styles combo for the fist time. In
 * the second case, if this setting contains only a name, the styles definition
 * file will be loaded from the "styles" folder inside the stylescombo plugin
 * folder. Otherwise, this setting has the "name:url" syntax, making it
 * possible to set the URL from which loading the styles file.
 * @type string
 * @default 'default'
 * @example
 * // Load from the stylescombo styles folder (mystyles.js file).
 * config.stylesCombo_stylesSet = 'mystyles';
 * @example
 * // Load from a relative URL.
 * config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
 * @example
 * // Load from a full URL.
 * config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
 */
CKEDITOR.config.stylesCombo_stylesSet = 'default';