sources/plugins/stylescombo/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 ( function() {
   7         'use strict';
   8
   9         CKEDITOR.plugins.add( 'stylescombo', {
  10                 requires: 'richcombo',
  11                 // jscs:disable maximumLineLength
  12                 lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  13                 // jscs:enable maximumLineLength
  14
  15                 init: function( editor ) {
  16                         var config = editor.config,
  17                                 lang = editor.lang.stylescombo,
  18                                 styles = {},
  19                                 stylesList = [],
  20                                 combo,
  21                                 allowedContent = [];
  22
  23                         editor.on( 'stylesSet', function( evt ) {
  24                                 var stylesDefinitions = evt.data.styles;
  25
  26                                 if ( !stylesDefinitions )
  27                                         return;
  28
  29                                 var style, styleName, styleType;
  30
  31                                 // Put all styles into an Array.
  32                                 for ( var i = 0, count = stylesDefinitions.length; i < count; i++ ) {
  33                                         var styleDefinition = stylesDefinitions[ i ];
  34
  35                                         if ( editor.blockless && ( styleDefinition.element in CKEDITOR.dtd.$block ) )
  36                                                 continue;
  37
  38                                         styleName = styleDefinition.name;
  39                                         style = new CKEDITOR.style( styleDefinition );
  40
  41                                         if ( !editor.filter.customConfig || editor.filter.check( style ) ) {
  42                                                 style._name = styleName;
  43                                                 style._.enterMode = config.enterMode;
  44                                                 // Get the type (which will be used to assign style to one of 3 groups) from assignedTo if it's defined.
  45                                                 style._.type = styleType = style.assignedTo || style.type;
  46
  47                                                 // Weight is used to sort styles (#9029).
  48                                                 style._.weight = i + ( styleType == CKEDITOR.STYLE_OBJECT ? 1 : styleType == CKEDITOR.STYLE_BLOCK ? 2 : 3 ) * 1000;
  49
  50                                                 styles[ styleName ] = style;
  51                                                 stylesList.push( style );
  52                                                 allowedContent.push( style );
  53                                         }
  54                                 }
  55
  56                                 // Sorts the Array, so the styles get grouped by type in proper order (#9029).
  57                                 stylesList.sort( function( styleA, styleB ) {
  58                                         return styleA._.weight - styleB._.weight;
  59                                 } );
  60                         } );
  61
  62                         editor.ui.addRichCombo( 'Styles', {
  63                                 label: lang.label,
  64                                 title: lang.panelTitle,
  65                                 toolbar: 'styles,10',
  66                                 allowedContent: allowedContent,
  67
  68                                 panel: {
  69                                         css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
  70                                         multiSelect: true,
  71                                         attributes: { 'aria-label': lang.panelTitle }
  72                                 },
  73
  74                                 init: function() {
  75                                         var style, styleName, lastType, type, i, count;
  76
  77                                         // Loop over the Array, adding all items to the
  78                                         // combo.
  79                                         for ( i = 0, count = stylesList.length; i < count; i++ ) {
  80                                                 style = stylesList[ i ];
  81                                                 styleName = style._name;
  82                                                 type = style._.type;
  83
  84                                                 if ( type != lastType ) {
  85                                                         this.startGroup( lang[ 'panelTitle' + String( type ) ] );
  86                                                         lastType = type;
  87                                                 }
  88
  89                                                 this.add( styleName, style.type == CKEDITOR.STYLE_OBJECT ? styleName : style.buildPreview(), styleName );
  90                                         }
  91
  92                                         this.commit();
  93                                 },
  94
  95                                 onClick: function( value ) {
  96                                         editor.focus();
  97                                         editor.fire( 'saveSnapshot' );
  98
  99                                         var style = styles[ value ],
 100                                                 elementPath = editor.elementPath();
 101
 102                                         editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );
 103                                         editor.fire( 'saveSnapshot' );
 104                                 },
 105
 106                                 onRender: function() {
 107                                         editor.on( 'selectionChange', function( ev ) {
 108                                                 var currentValue = this.getValue(),
 109                                                         elementPath = ev.data.path,
 110                                                         elements = elementPath.elements;
 111
 112                                                 // For each element into the elements path.
 113                                                 for ( var i = 0, count = elements.length, element; i < count; i++ ) {
 114                                                         element = elements[ i ];
 115
 116                                                         // Check if the element is removable by any of
 117                                                         // the styles.
 118                                                         for ( var value in styles ) {
 119                                                                 if ( styles[ value ].checkElementRemovable( element, true, editor ) ) {
 120                                                                         if ( value != currentValue )
 121                                                                                 this.setValue( value );
 122                                                                         return;
 123                                                                 }
 124                                                         }
 125                                                 }
 126
 127                                                 // If no styles match, just empty it.
 128                                                 this.setValue( '' );
 129                                         }, this );
 130                                 },
 131
 132                                 onOpen: function() {
 133                                         var selection = editor.getSelection(),
 134                                                 element = selection.getSelectedElement(),
 135                                                 elementPath = editor.elementPath( element ),
 136                                                 counter = [ 0, 0, 0, 0 ];
 137
 138                                         this.showAll();
 139                                         this.unmarkAll();
 140                                         for ( var name in styles ) {
 141                                                 var style = styles[ name ],
 142                                                         type = style._.type;
 143
 144                                                 if ( style.checkApplicable( elementPath, editor, editor.activeFilter ) )
 145                                                         counter[ type ]++;
 146                                                 else
 147                                                         this.hideItem( name );
 148
 149                                                 if ( style.checkActive( elementPath, editor ) )
 150                                                         this.mark( name );
 151                                         }
 152
 153                                         if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
 154                                                 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
 155
 156                                         if ( !counter[ CKEDITOR.STYLE_INLINE ] )
 157                                                 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
 158
 159                                         if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
 160                                                 this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
 161                                 },
 162
 163                                 refresh: function() {
 164                                         var elementPath = editor.elementPath();
 165
 166                                         if ( !elementPath )
 167                                                 return;
 168
 169                                         for ( var name in styles ) {
 170                                                 var style = styles[ name ];
 171
 172                                                 if ( style.checkApplicable( elementPath, editor, editor.activeFilter ) )
 173                                                         return;
 174                                         }
 175                                         this.setState( CKEDITOR.TRISTATE_DISABLED );
 176                                 },
 177
 178                                 // Force a reload of the data
 179                                 reset: function() {
 180                                         if ( combo ) {
 181                                                 delete combo._.panel;
 182                                                 delete combo._.list;
 183                                                 combo._.committed = 0;
 184                                                 combo._.items = {};
 185                                                 combo._.state = CKEDITOR.TRISTATE_OFF;
 186                                         }
 187                                         styles = {};
 188                                         stylesList = [];
 189                                 }
 190                         } );
 191                 }
 192         } );
 193 } )();