--- /dev/null
+/*\r
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+(function()\r
+{\r
+ CKEDITOR.plugins.add( 'stylescombo',\r
+ {\r
+ requires : [ 'richcombo', 'styles' ],\r
+\r
+ init : function( editor )\r
+ {\r
+ var config = editor.config,\r
+ lang = editor.lang.stylesCombo,\r
+ pluginPath = this.path,\r
+ styles;\r
+\r
+ editor.ui.addRichCombo( 'Styles',\r
+ {\r
+ label : lang.label,\r
+ title : lang.panelTitle,\r
+ voiceLabel : lang.voiceLabel,\r
+ className : 'cke_styles',\r
+ multiSelect : true,\r
+\r
+ panel :\r
+ {\r
+ css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],\r
+ voiceLabel : lang.panelVoiceLabel\r
+ },\r
+\r
+ init : function()\r
+ {\r
+ var combo = this,\r
+ stylesSet = config.stylesCombo_stylesSet.split( ':', 2 ),\r
+ stylesSetPath = stylesSet[ 1 ] || CKEDITOR.getUrl( pluginPath + 'styles/' + stylesSet[ 0 ] + '.js' ) ;\r
+\r
+ stylesSet = stylesSet[ 0 ];\r
+\r
+ CKEDITOR.loadStylesSet( stylesSet, stylesSetPath, function( stylesDefinitions )\r
+ {\r
+ var style,\r
+ styleName,\r
+ stylesList = [];\r
+\r
+ styles = {};\r
+\r
+ // Put all styles into an Array.\r
+ for ( var i = 0 ; i < stylesDefinitions.length ; i++ )\r
+ {\r
+ var styleDefinition = stylesDefinitions[ i ];\r
+\r
+ styleName = styleDefinition.name;\r
+\r
+ style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );\r
+ style._name = styleName;\r
+\r
+ stylesList.push( style );\r
+ }\r
+\r
+ // Sorts the Array, so the styles get grouped\r
+ // by type.\r
+ stylesList.sort( sortStyles );\r
+\r
+ // Loop over the Array, adding all items to the\r
+ // combo.\r
+ var lastType;\r
+ for ( i = 0 ; i < stylesList.length ; i++ )\r
+ {\r
+ style = stylesList[ i ];\r
+ styleName = style._name;\r
+\r
+ var type = style.type;\r
+\r
+ if ( type != lastType )\r
+ {\r
+ combo.startGroup( lang[ 'panelTitle' + String( type ) ] );\r
+ lastType = type;\r
+ }\r
+\r
+ combo.add(\r
+ styleName,\r
+ style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),\r
+ styleName );\r
+ }\r
+\r
+ combo.commit();\r
+\r
+ combo.onOpen();\r
+ });\r
+ },\r
+\r
+ onClick : function( value )\r
+ {\r
+ editor.focus();\r
+ editor.fire( 'saveSnapshot' );\r
+\r
+ var style = styles[ value ],\r
+ selection = editor.getSelection();\r
+\r
+ if ( style.type == CKEDITOR.STYLE_OBJECT )\r
+ {\r
+ var element = selection.getSelectedElement();\r
+ if ( element )\r
+ style.applyToObject( element );\r
+\r
+ return;\r
+ }\r
+\r
+ var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );\r
+\r
+ if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )\r
+ style.remove( editor.document );\r
+ else\r
+ style.apply( editor.document );\r
+\r
+ editor.fire( 'saveSnapshot' );\r
+ },\r
+\r
+ onRender : function()\r
+ {\r
+ editor.on( 'selectionChange', function( ev )\r
+ {\r
+ var currentValue = this.getValue();\r
+\r
+ var elementPath = ev.data.path,\r
+ elements = elementPath.elements;\r
+\r
+ // For each element into the elements path.\r
+ for ( var i = 0, element ; i < elements.length ; i++ )\r
+ {\r
+ element = elements[i];\r
+\r
+ // Check if the element is removable by any of\r
+ // the styles.\r
+ for ( var value in styles )\r
+ {\r
+ if ( styles[ value ].checkElementRemovable( element, true ) )\r
+ {\r
+ if ( value != currentValue )\r
+ this.setValue( value );\r
+ return;\r
+ }\r
+ }\r
+ }\r
+\r
+ // If no styles match, just empty it.\r
+ this.setValue( '' );\r
+ },\r
+ this);\r
+ },\r
+\r
+ onOpen : function()\r
+ {\r
+ if ( CKEDITOR.env.ie )\r
+ editor.focus();\r
+\r
+ var selection = editor.getSelection();\r
+\r
+ var element = selection.getSelectedElement(),\r
+ elementName = element && element.getName(),\r
+ elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );\r
+\r
+ var counter = [ 0, 0, 0, 0 ];\r
+ this.showAll();\r
+ this.unmarkAll();\r
+ for ( var name in styles )\r
+ {\r
+ var style = styles[ name ],\r
+ type = style.type;\r
+\r
+ if ( type == CKEDITOR.STYLE_OBJECT )\r
+ {\r
+ if ( element && style.element == elementName )\r
+ {\r
+ if ( style.checkElementRemovable( element, true ) )\r
+ this.mark( name );\r
+\r
+ counter[ type ]++;\r
+ }\r
+ else\r
+ this.hideItem( name );\r
+ }\r
+ else\r
+ {\r
+ if ( style.checkActive( elementPath ) )\r
+ this.mark( name );\r
+\r
+ counter[ type ]++;\r
+ }\r
+ }\r
+\r
+ if ( !counter[ CKEDITOR.STYLE_BLOCK ] )\r
+ this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );\r
+\r
+ if ( !counter[ CKEDITOR.STYLE_INLINE ] )\r
+ this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );\r
+\r
+ if ( !counter[ CKEDITOR.STYLE_OBJECT ] )\r
+ this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );\r
+ }\r
+ });\r
+ }\r
+ });\r
+\r
+ var stylesSets = {};\r
+\r
+ CKEDITOR.addStylesSet = function( name, styles )\r
+ {\r
+ stylesSets[ name ] = styles;\r
+ };\r
+\r
+ CKEDITOR.loadStylesSet = function( name, url, callback )\r
+ {\r
+ var stylesSet = stylesSets[ name ];\r
+\r
+ if ( stylesSet )\r
+ {\r
+ callback( stylesSet );\r
+ return ;\r
+ }\r
+\r
+ CKEDITOR.scriptLoader.load( url, function()\r
+ {\r
+ callback( stylesSets[ name ] );\r
+ });\r
+ };\r
+\r
+ function buildPreview( styleDefinition )\r
+ {\r
+ var html = [];\r
+\r
+ var elementName = styleDefinition.element;\r
+\r
+ // Avoid <bdo> in the preview.\r
+ if ( elementName == 'bdo' )\r
+ elementName = 'span';\r
+\r
+ html = [ '<', elementName ];\r
+\r
+ // Assign all defined attributes.\r
+ var attribs = styleDefinition.attributes;\r
+ if ( attribs )\r
+ {\r
+ for ( var att in attribs )\r
+ {\r
+ html.push( ' ', att, '="', attribs[ att ], '"' );\r
+ }\r
+ }\r
+\r
+ // Assign the style attribute.\r
+ var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );\r
+ if ( cssStyle )\r
+ html.push( ' style="', cssStyle, '"' );\r
+\r
+ html.push( '>', styleDefinition.name, '</', elementName, '>' );\r
+\r
+ return html.join( '' );\r
+ }\r
+\r
+ function sortStyles( styleA, styleB )\r
+ {\r
+ var typeA = styleA.type,\r
+ typeB = styleB.type;\r
+\r
+ return typeA == typeB ? 0 :\r
+ typeA == CKEDITOR.STYLE_OBJECT ? -1 :\r
+ typeB == CKEDITOR.STYLE_OBJECT ? 1 :\r
+ typeB == CKEDITOR.STYLE_BLOCK ? 1 :\r
+ -1;\r
+ }\r
+})();\r
+\r
+/**\r
+ * The "styles definition set" to load into the styles combo. The styles may\r
+ * be defined in the page containing the editor, or can be loaded on demand\r
+ * from an external file when opening the styles combo for the fist time. In\r
+ * the second case, if this setting contains only a name, the styles definition\r
+ * file will be loaded from the "styles" folder inside the stylescombo plugin\r
+ * folder. Otherwise, this setting has the "name:url" syntax, making it\r
+ * possible to set the URL from which loading the styles file.\r
+ * @type string\r
+ * @default 'default'\r
+ * @example\r
+ * // Load from the stylescombo styles folder (mystyles.js file).\r
+ * config.stylesCombo_stylesSet = 'mystyles';\r
+ * @example\r
+ * // Load from a relative URL.\r
+ * config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';\r
+ * @example\r
+ * // Load from a full URL.\r
+ * config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';\r
+ */\r
+CKEDITOR.config.stylesCombo_stylesSet = 'default';\r
Got questions, comments, patches, etc.? Contact Jason Woofenden