[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.

   3  For licensing, see LICENSE.html or http://ckeditor.com/license

   4  */
   5  
   6  (function()
   7  {
   8      CKEDITOR.plugins.add( 'stylescombo',
   9      {
  10          requires : [ 'richcombo', 'styles' ],
  11  
  12          init : function( editor )
  13          {
  14              var config = editor.config,
  15                  lang = editor.lang.stylesCombo,
  16                  styles = {},
  17                  stylesList = [];
  18  
  19  			function loadStylesSet( callback )
  20              {
  21                  editor.getStylesSet( function( stylesDefinitions )
  22                  {
  23                      if ( !stylesList.length )
  24                      {
  25                          var style,
  26                              styleName;
  27  
  28                          // Put all styles into an Array.

  29                          for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
  30                          {
  31                              var styleDefinition = stylesDefinitions[ i ];
  32  
  33                              styleName = styleDefinition.name;
  34  
  35                              style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
  36                              style._name = styleName;
  37                              style._.enterMode = config.enterMode;
  38  
  39                              stylesList.push( style );
  40                          }
  41  
  42                          // Sorts the Array, so the styles get grouped by type.

  43                          stylesList.sort( sortStyles );
  44                      }
  45  
  46                      callback && callback();
  47                  });
  48              }
  49  
  50              editor.ui.addRichCombo( 'Styles',
  51                  {
  52                      label : lang.label,
  53                      title : lang.panelTitle,
  54                      className : 'cke_styles',
  55  
  56                      panel :
  57                      {
  58                          css : editor.skin.editor.css.concat( config.contentsCss ),
  59                          multiSelect : true,
  60                          attributes : { 'aria-label' : lang.panelTitle }
  61                      },
  62  
  63                      init : function()
  64                      {
  65                          var combo = this;
  66  
  67                          loadStylesSet( function()
  68                              {
  69                                  var style, styleName;
  70  
  71                                  // Loop over the Array, adding all items to the

  72                                  // combo.

  73                                  var lastType;
  74                                  for ( var i = 0 ; i < stylesList.length ; i++ )
  75                                  {
  76                                      style = stylesList[ i ];
  77                                      styleName = style._name;
  78  
  79                                      var type = style.type;
  80  
  81                                      if ( type != lastType )
  82                                      {
  83                                          combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
  84                                          lastType = type;
  85                                      }
  86  
  87                                      combo.add(
  88                                          styleName,
  89                                          style.type == CKEDITOR.STYLE_OBJECT ? styleName : style.buildPreview(),
  90                                          styleName );
  91                                  }
  92  
  93                                  combo.commit();
  94  
  95                                  combo.onOpen();
  96                              });
  97                      },
  98  
  99                      onClick : function( value )
 100                      {
 101                          editor.focus();
 102                          editor.fire( 'saveSnapshot' );
 103  
 104                          var style = styles[ value ],
 105                              selection = editor.getSelection();
 106  
 107                          var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
 108  
 109                          if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
 110                              style.remove( editor.document );
 111                          else
 112                              style.apply( editor.document );
 113  
 114                          editor.fire( 'saveSnapshot' );
 115                      },
 116  
 117                      onRender : function()
 118                      {
 119                          editor.on( 'selectionChange', function( ev )
 120                              {
 121                                  var currentValue = this.getValue();
 122  
 123                                  var elementPath = ev.data.path,
 124                                      elements = elementPath.elements;
 125  
 126                                  // For each element into the elements path.

 127                                  for ( var i = 0, element ; i < elements.length ; i++ )
 128                                  {
 129                                      element = elements[i];
 130  
 131                                      // Check if the element is removable by any of

 132                                      // the styles.

 133                                      for ( var value in styles )
 134                                      {
 135                                          if ( styles[ value ].checkElementRemovable( element, true ) )
 136                                          {
 137                                              if ( value != currentValue )
 138                                                  this.setValue( value );
 139                                              return;
 140                                          }
 141                                      }
 142                                  }
 143  
 144                                  // If no styles match, just empty it.

 145                                  this.setValue( '' );
 146                              },
 147                              this);
 148                      },
 149  
 150                      onOpen : function()
 151                      {
 152                          if ( CKEDITOR.env.ie || CKEDITOR.env.webkit )
 153                              editor.focus();
 154  
 155                          var selection = editor.getSelection();
 156  
 157                          var element = selection.getSelectedElement(),
 158                              elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );
 159  
 160                          var counter = [ 0, 0, 0, 0 ];
 161                          this.showAll();
 162                          this.unmarkAll();
 163                          for ( var name in styles )
 164                          {
 165                              var style = styles[ name ],
 166                                  type = style.type;
 167  
 168                              if ( style.checkActive( elementPath ) )
 169                                  this.mark( name );
 170                              else if ( type == CKEDITOR.STYLE_OBJECT && !style.checkApplicable( elementPath ) )
 171                              {
 172                                  this.hideItem( name );
 173                                  counter[ type ]--;
 174                              }
 175  
 176                              counter[ type ]++;
 177                          }
 178  
 179                          if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
 180                              this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
 181  
 182                          if ( !counter[ CKEDITOR.STYLE_INLINE ] )
 183                              this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
 184  
 185                          if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
 186                              this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
 187                      }
 188                  });
 189  
 190              editor.on( 'instanceReady', function() { loadStylesSet(); } );
 191          }
 192      });
 193  
 194  	function sortStyles( styleA, styleB )
 195      {
 196          var typeA = styleA.type,
 197              typeB = styleB.type;
 198  
 199          return typeA == typeB ? 0 :
 200              typeA == CKEDITOR.STYLE_OBJECT ? -1 :
 201              typeB == CKEDITOR.STYLE_OBJECT ? 1 :
 202              typeB == CKEDITOR.STYLE_BLOCK ? 1 :
 203              -1;
 204      }
 205  })();