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 |
|
---|
38 | stylesList.push( style );
|
---|
39 | }
|
---|
40 |
|
---|
41 | // Sorts the Array, so the styles get grouped by type.
|
---|
42 | stylesList.sort( sortStyles );
|
---|
43 | }
|
---|
44 |
|
---|
45 | callback && callback();
|
---|
46 | });
|
---|
47 | }
|
---|
48 |
|
---|
49 | editor.ui.addRichCombo( 'Styles',
|
---|
50 | {
|
---|
51 | label : lang.label,
|
---|
52 | title : lang.panelTitle,
|
---|
53 | className : 'cke_styles',
|
---|
54 |
|
---|
55 | panel :
|
---|
56 | {
|
---|
57 | css : editor.skin.editor.css.concat( config.contentsCss ),
|
---|
58 | multiSelect : true,
|
---|
59 | attributes : { 'aria-label' : lang.panelTitle }
|
---|
60 | },
|
---|
61 |
|
---|
62 | init : function()
|
---|
63 | {
|
---|
64 | var combo = this;
|
---|
65 |
|
---|
66 | loadStylesSet( function()
|
---|
67 | {
|
---|
68 | var style, styleName;
|
---|
69 |
|
---|
70 | // Loop over the Array, adding all items to the
|
---|
71 | // combo.
|
---|
72 | var lastType;
|
---|
73 | for ( var i = 0 ; i < stylesList.length ; i++ )
|
---|
74 | {
|
---|
75 | style = stylesList[ i ];
|
---|
76 | styleName = style._name;
|
---|
77 |
|
---|
78 | var type = style.type;
|
---|
79 |
|
---|
80 | if ( type != lastType )
|
---|
81 | {
|
---|
82 | combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
|
---|
83 | lastType = type;
|
---|
84 | }
|
---|
85 |
|
---|
86 | combo.add(
|
---|
87 | styleName,
|
---|
88 | style.type == CKEDITOR.STYLE_OBJECT ? styleName : style.buildPreview(),
|
---|
89 | styleName );
|
---|
90 | }
|
---|
91 |
|
---|
92 | combo.commit();
|
---|
93 |
|
---|
94 | combo.onOpen();
|
---|
95 | });
|
---|
96 | },
|
---|
97 |
|
---|
98 | onClick : function( value )
|
---|
99 | {
|
---|
100 | editor.focus();
|
---|
101 | editor.fire( 'saveSnapshot' );
|
---|
102 |
|
---|
103 | var style = styles[ value ],
|
---|
104 | selection = editor.getSelection();
|
---|
105 |
|
---|
106 | var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
|
---|
107 |
|
---|
108 | if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
|
---|
109 | style.remove( editor.document );
|
---|
110 | else
|
---|
111 | style.apply( editor.document );
|
---|
112 |
|
---|
113 | editor.fire( 'saveSnapshot' );
|
---|
114 | },
|
---|
115 |
|
---|
116 | onRender : function()
|
---|
117 | {
|
---|
118 | editor.on( 'selectionChange', function( ev )
|
---|
119 | {
|
---|
120 | var currentValue = this.getValue();
|
---|
121 |
|
---|
122 | var elementPath = ev.data.path,
|
---|
123 | elements = elementPath.elements;
|
---|
124 |
|
---|
125 | // For each element into the elements path.
|
---|
126 | for ( var i = 0, element ; i < elements.length ; i++ )
|
---|
127 | {
|
---|
128 | element = elements[i];
|
---|
129 |
|
---|
130 | // Check if the element is removable by any of
|
---|
131 | // the styles.
|
---|
132 | for ( var value in styles )
|
---|
133 | if ( ! ( value in Object.prototype ) )
|
---|
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 | if ( ! ( name in Object.prototype ) )
|
---|
165 | {
|
---|
166 | var style = styles[ name ],
|
---|
167 | type = style.type;
|
---|
168 |
|
---|
169 | if ( style.checkActive( elementPath ) )
|
---|
170 | this.mark( name );
|
---|
171 | else if ( type == CKEDITOR.STYLE_OBJECT && !style.checkApplicable( elementPath ) )
|
---|
172 | {
|
---|
173 | this.hideItem( name );
|
---|
174 | counter[ type ]--;
|
---|
175 | }
|
---|
176 |
|
---|
177 | counter[ type ]++;
|
---|
178 | }
|
---|
179 |
|
---|
180 | if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
|
---|
181 | this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
|
---|
182 |
|
---|
183 | if ( !counter[ CKEDITOR.STYLE_INLINE ] )
|
---|
184 | this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
|
---|
185 |
|
---|
186 | if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
|
---|
187 | this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
|
---|
188 | }
|
---|
189 | });
|
---|
190 |
|
---|
191 | editor.on( 'instanceReady', function() { loadStylesSet(); } );
|
---|
192 | }
|
---|
193 | });
|
---|
194 |
|
---|
195 | function sortStyles( styleA, styleB )
|
---|
196 | {
|
---|
197 | var typeA = styleA.type,
|
---|
198 | typeB = styleB.type;
|
---|
199 |
|
---|
200 | return typeA == typeB ? 0 :
|
---|
201 | typeA == CKEDITOR.STYLE_OBJECT ? -1 :
|
---|
202 | typeB == CKEDITOR.STYLE_OBJECT ? 1 :
|
---|
203 | typeB == CKEDITOR.STYLE_BLOCK ? 1 :
|
---|
204 | -1;
|
---|
205 | }
|
---|
206 | })();
|
---|