_source/plugins/stylescombo/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 (function()\r
   7 {\r
   8         CKEDITOR.plugins.add( 'stylescombo',\r
   9         {\r
  10                 requires : [ 'richcombo', 'styles' ],\r
  11 \r
  12                 init : function( editor )\r
  13                 {\r
  14                         var config = editor.config,\r
  15                                 lang = editor.lang.stylesCombo,\r
  16                                 styles = {},\r
  17                                 stylesList = [],\r
  18                                 combo;\r
  19 \r
  20                         function loadStylesSet( callback )\r
  21                         {\r
  22                                 editor.getStylesSet( function( stylesDefinitions )\r
  23                                 {\r
  24                                         if ( !stylesList.length )\r
  25                                         {\r
  26                                                 var style,\r
  27                                                         styleName;\r
  28 \r
  29                                                 // Put all styles into an Array.\r
  30                                                 for ( var i = 0, count = stylesDefinitions.length ; i < count ; i++ )\r
  31                                                 {\r
  32                                                         var styleDefinition = stylesDefinitions[ i ];\r
  33 \r
  34                                                         styleName = styleDefinition.name;\r
  35 \r
  36                                                         style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );\r
  37                                                         style._name = styleName;\r
  38                                                         style._.enterMode = config.enterMode;\r
  39 \r
  40                                                         stylesList.push( style );\r
  41                                                 }\r
  42 \r
  43                                                 // Sorts the Array, so the styles get grouped by type.\r
  44                                                 stylesList.sort( sortStyles );\r
  45                                         }\r
  46 \r
  47                                         callback && callback();\r
  48                                 });\r
  49                         }\r
  50 \r
  51                         editor.ui.addRichCombo( 'Styles',\r
  52                                 {\r
  53                                         label : lang.label,\r
  54                                         title : lang.panelTitle,\r
  55                                         className : 'cke_styles',\r
  56 \r
  57                                         panel :\r
  58                                         {\r
  59                                                 css : editor.skin.editor.css.concat( config.contentsCss ),\r
  60                                                 multiSelect : true,\r
  61                                                 attributes : { 'aria-label' : lang.panelTitle }\r
  62                                         },\r
  63 \r
  64                                         init : function()\r
  65                                         {\r
  66                                                 combo = this;\r
  67 \r
  68                                                 loadStylesSet( function()\r
  69                                                         {\r
  70                                                                 var style,\r
  71                                                                         styleName,\r
  72                                                                         lastType,\r
  73                                                                         type,\r
  74                                                                         i,\r
  75                                                                         count;\r
  76 \r
  77                                                                 // Loop over the Array, adding all items to the\r
  78                                                                 // combo.\r
  79                                                                 for ( i = 0, count = stylesList.length ; i < count ; i++ )\r
  80                                                                 {\r
  81                                                                         style = stylesList[ i ];\r
  82                                                                         styleName = style._name;\r
  83                                                                         type = style.type;\r
  84 \r
  85                                                                         if ( type != lastType )\r
  86                                                                         {\r
  87                                                                                 combo.startGroup( lang[ 'panelTitle' + String( type ) ] );\r
  88                                                                                 lastType = type;\r
  89                                                                         }\r
  90 \r
  91                                                                         combo.add(\r
  92                                                                                 styleName,\r
  93                                                                                 style.type == CKEDITOR.STYLE_OBJECT ? styleName : style.buildPreview(),\r
  94                                                                                 styleName );\r
  95                                                                 }\r
  96 \r
  97                                                                 combo.commit();\r
  98 \r
  99                                                         });\r
 100                                         },\r
 101 \r
 102                                         onClick : function( value )\r
 103                                         {\r
 104                                                 editor.focus();\r
 105                                                 editor.fire( 'saveSnapshot' );\r
 106 \r
 107                                                 var style = styles[ value ],\r
 108                                                         selection = editor.getSelection(),\r
 109                                                         elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );\r
 110 \r
 111                                                 style[ style.checkActive( elementPath ) ? 'remove' : 'apply' ]( editor.document );\r
 112 \r
 113                                                 editor.fire( 'saveSnapshot' );\r
 114                                         },\r
 115 \r
 116                                         onRender : function()\r
 117                                         {\r
 118                                                 editor.on( 'selectionChange', function( ev )\r
 119                                                         {\r
 120                                                                 var currentValue = this.getValue(),\r
 121                                                                         elementPath = ev.data.path,\r
 122                                                                         elements = elementPath.elements;\r
 123 \r
 124                                                                 // For each element into the elements path.\r
 125                                                                 for ( var i = 0, count = elements.length, element ; i < count ; i++ )\r
 126                                                                 {\r
 127                                                                         element = elements[i];\r
 128 \r
 129                                                                         // Check if the element is removable by any of\r
 130                                                                         // the styles.\r
 131                                                                         for ( var value in styles )\r
 132                                                                         {\r
 133                                                                                 if ( styles[ value ].checkElementRemovable( element, true ) )\r
 134                                                                                 {\r
 135                                                                                         if ( value != currentValue )\r
 136                                                                                                 this.setValue( value );\r
 137                                                                                         return;\r
 138                                                                                 }\r
 139                                                                         }\r
 140                                                                 }\r
 141 \r
 142                                                                 // If no styles match, just empty it.\r
 143                                                                 this.setValue( '' );\r
 144                                                         },\r
 145                                                         this);\r
 146                                         },\r
 147 \r
 148                                         onOpen : function()\r
 149                                         {\r
 150                                                 if ( CKEDITOR.env.ie || CKEDITOR.env.webkit )\r
 151                                                         editor.focus();\r
 152 \r
 153                                                 var selection = editor.getSelection(),\r
 154                                                         element = selection.getSelectedElement(),\r
 155                                                         elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() ),\r
 156                                                         counter = [ 0, 0, 0, 0 ];\r
 157 \r
 158                                                 this.showAll();\r
 159                                                 this.unmarkAll();\r
 160                                                 for ( var name in styles )\r
 161                                                 {\r
 162                                                         var style = styles[ name ],\r
 163                                                                 type = style.type;\r
 164 \r
 165                                                         if ( style.checkActive( elementPath ) )\r
 166                                                                 this.mark( name );\r
 167                                                         else if ( type == CKEDITOR.STYLE_OBJECT && !style.checkApplicable( elementPath ) )\r
 168                                                         {\r
 169                                                                 this.hideItem( name );\r
 170                                                                 counter[ type ]--;\r
 171                                                         }\r
 172 \r
 173                                                         counter[ type ]++;\r
 174                                                 }\r
 175 \r
 176                                                 if ( !counter[ CKEDITOR.STYLE_BLOCK ] )\r
 177                                                         this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );\r
 178 \r
 179                                                 if ( !counter[ CKEDITOR.STYLE_INLINE ] )\r
 180                                                         this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );\r
 181 \r
 182                                                 if ( !counter[ CKEDITOR.STYLE_OBJECT ] )\r
 183                                                         this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );\r
 184                                         },\r
 185 \r
 186                                         // Force a reload of the data\r
 187                                         reset: function()\r
 188                                         {\r
 189                                                 if ( combo )\r
 190                                                 {\r
 191                                                         delete combo._.panel;\r
 192                                                         delete combo._.list;\r
 193                                                         combo._.committed = 0;\r
 194                                                         combo._.items = {};\r
 195                                                         combo._.state = CKEDITOR.TRISTATE_OFF;\r
 196                                                 }\r
 197                                                 styles = {};\r
 198                                                 stylesList = [];\r
 199                                                 loadStylesSet();\r
 200                                         }\r
 201                                 });\r
 202 \r
 203                         editor.on( 'instanceReady', function() { loadStylesSet(); } );\r
 204                 }\r
 205         });\r
 206 \r
 207         function sortStyles( styleA, styleB )\r
 208         {\r
 209                 var typeA = styleA.type,\r
 210                         typeB = styleB.type;\r
 211 \r
 212                 return typeA == typeB ? 0 :\r
 213                         typeA == CKEDITOR.STYLE_OBJECT ? -1 :\r
 214                         typeB == CKEDITOR.STYLE_OBJECT ? 1 :\r
 215                         typeB == CKEDITOR.STYLE_BLOCK ? 1 :\r
 216                         -1;\r
 217         }\r
 218 })();\r