]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/samples/toolbarconfigurator/js/fulltoolbareditor.js
1 /* exported ToolbarConfigurator */
2 /* global ToolbarConfigurator */
6 window
.ToolbarConfigurator
= {};
10 * @class ToolbarConfigurator.FullToolbarEditor
13 function FullToolbarEditor() {
14 this.instanceid
= 'fte' + CKEDITOR
.tools
.getNextId();
15 this.textarea
= new CKEDITOR
.dom
.element( 'textarea' );
16 this.textarea
.setAttributes( {
18 name: this.instanceid
,
23 this.editorInstance
= null;
27 ToolbarConfigurator
.FullToolbarEditor
= FullToolbarEditor
;
30 * @param {Function} callback
33 FullToolbarEditor
.prototype.init = function( callback
) {
36 document
.body
.appendChild( this.textarea
.$ );
38 CKEDITOR
.replace( this.instanceid
);
40 this.editorInstance
= CKEDITOR
.instances
[ this.instanceid
];
42 this.editorInstance
.once( 'configLoaded', function( e
) {
43 var cfg
= e
.editor
.config
;
45 // We want all the buttons.
46 delete cfg
.removeButtons
;
47 delete cfg
.toolbarGroups
;
49 ToolbarConfigurator
.AbstractToolbarModifier
.extendPluginsConfig( cfg
);
51 e
.editor
.once( 'loaded', function() {
52 that
.buttons
= FullToolbarEditor
.toolbarToButtons( that
.editorInstance
.toolbar
);
54 that
.buttonsByGroup
= FullToolbarEditor
.groupButtons( that
.buttons
);
56 that
.buttonNamesByGroup
= that
.groupButtonNamesByGroup( that
.buttons
);
58 e
.editor
.container
.hide();
60 if ( typeof callback
=== 'function' )
61 callback( that
.buttons
);
67 * Group array of button names by their group parents.
69 * @param {Array} buttons
72 FullToolbarEditor
.prototype.groupButtonNamesByGroup = function( buttons
) {
74 groups
= FullToolbarEditor
.groupButtons( buttons
);
76 for ( var groupName
in groups
) {
77 var currGroup
= groups
[ groupName
];
79 groups
[ groupName
] = FullToolbarEditor
.map( currGroup
, function( button
) {
80 return that
.getCamelCasedButtonName( button
.name
);
88 * Returns group literal.
90 * @param {String} name
93 FullToolbarEditor
.prototype.getGroupByName = function( name
) {
94 var groups
= this.editorInstance
.config
.toolbarGroups
|| this.getFullToolbarGroupsConfig();
96 var max
= groups
.length
;
97 for ( var i
= 0; i
< max
; i
+= 1 ) {
98 if ( groups
[ i
].name
=== name
)
106 * @param {String} name
107 * @returns {String | null}
109 FullToolbarEditor
.prototype.getCamelCasedButtonName = function( name
) {
110 var items
= this.editorInstance
.ui
.items
;
112 for ( var key
in items
) {
113 if ( items
[ key
].name
== name
)
121 * Returns full toolbarGroups config value which is used when
122 * there is no toolbarGroups field in config.
124 * @param {Boolean} [pickSeparators=false]
127 FullToolbarEditor
.prototype.getFullToolbarGroupsConfig = function( pickSeparators
) {
128 pickSeparators
= ( pickSeparators
=== true ? true : false );
131 toolbarGroups
= this.editorInstance
.toolbar
;
133 var max
= toolbarGroups
.length
;
134 for ( var i
= 0; i
< max
; i
+= 1 ) {
135 var currentGroup
= toolbarGroups
[ i
],
138 if ( typeof currentGroup
.name
!= 'string' ) {
139 // this is not a group
140 if ( pickSeparators
) {
146 copiedGroup
.name
= currentGroup
.name
;
147 if ( currentGroup
.groups
)
148 copiedGroup
.groups
= Array
.prototype.slice
.call( currentGroup
.groups
);
150 result
.push( copiedGroup
);
157 * Filters array items based on checker provided in second argument.
161 * @param {Function} checker
164 FullToolbarEditor
.filter = function( arr
, checker
) {
165 var max
= ( arr
&& arr
.length
? arr
.length : 0 ),
168 for ( var i
= 0; i
< max
; i
+= 1 ) {
169 if ( checker( arr
[ i
] ) )
170 result
.push( arr
[ i
] );
177 * Simplified http://underscorejs.org/#map functionality
179 * @param {Array | Object} enumerable
180 * @param {Function} modifier
181 * @returns {Array | Object}
183 FullToolbarEditor
.map = function( enumerable
, modifier
) {
186 if ( CKEDITOR
.tools
.isArray( enumerable
) ) {
189 var max
= enumerable
.length
;
190 for ( var i
= 0; i
< max
; i
+= 1 )
191 result
.push( modifier( enumerable
[ i
] ) );
195 for ( var key
in enumerable
)
196 result
[ key
] = modifier( enumerable
[ key
] );
203 * Group buttons by their parent names.
206 * @param {Array} buttons
207 * @returns {Object} The object (`name => group`) representing CKEDITOR.ui.button or CKEDITOR.ui.richCombo
209 FullToolbarEditor
.groupButtons = function( buttons
) {
212 var max
= buttons
.length
;
213 for ( var i
= 0; i
< max
; i
+= 1 ) {
214 var currBtn
= buttons
[ i
],
215 currBtnGroupName
= currBtn
.toolbar
.split( ',' )[ 0 ];
217 groups
[ currBtnGroupName
] = groups
[ currBtnGroupName
] || [];
219 groups
[ currBtnGroupName
].push( currBtn
);
226 * Pick all buttons from toolbar.
229 * @param {Array} groups
232 FullToolbarEditor
.toolbarToButtons = function( groups
) {
235 var max
= groups
.length
;
236 for ( var i
= 0; i
< max
; i
+= 1 ) {
237 var currentGroup
= groups
[ i
];
239 if ( typeof currentGroup
== 'object' )
240 buttons
= buttons
.concat( FullToolbarEditor
.groupToButtons( groups
[ i
] ) );
247 * Creates HTML button representation for view.
250 * @param {CKEDITOR.ui.button | CKEDITOR.ui.richCombo} button
251 * @returns {CKEDITOR.dom.element}
253 FullToolbarEditor
.createToolbarButton = function( button
) {
254 var $button
= new CKEDITOR
.dom
.element( 'a' ),
255 icon
= FullToolbarEditor
.createIcon( button
.name
, button
.icon
, button
.command
);
257 $button
.setStyle( 'float', 'none' );
259 $button
.addClass( 'cke_' + ( CKEDITOR
.lang
.dir
== 'rtl' ? 'rtl' : 'ltr' ) );
261 if ( button
instanceof CKEDITOR
.ui
.button
) {
262 $button
.addClass( 'cke_button' );
263 $button
.addClass( 'cke_toolgroup' );
265 $button
.append( icon
);
266 } else if ( CKEDITOR
.ui
.richCombo
&& button
instanceof CKEDITOR
.ui
.richCombo
) {
267 var comboLabel
= new CKEDITOR
.dom
.element( 'span' ),
268 comboOpen
= new CKEDITOR
.dom
.element( 'span' ),
269 comboArrow
= new CKEDITOR
.dom
.element( 'span' );
271 $button
.addClass( 'cke_combo_button' );
273 comboLabel
.addClass( 'cke_combo_text' );
274 comboLabel
.addClass( 'cke_combo_inlinelabel' );
275 comboLabel
.setText( button
.label
);
277 comboOpen
.addClass( 'cke_combo_open' );
278 comboArrow
.addClass( 'cke_combo_arrow' );
279 comboOpen
.append( comboArrow
);
281 $button
.append( comboLabel
);
282 $button
.append( comboOpen
);
289 * Create and return icon element.
291 * @param {String} name
292 * @param {String} icon
293 * @param {String} command
295 * @returns {CKEDITOR.dom.element}
297 FullToolbarEditor
.createIcon = function( name
, icon
, command
) {
298 var iconStyle
= CKEDITOR
.skin
.getIconStyle( name
, ( CKEDITOR
.lang
.dir
== 'rtl' ) );
300 // We don't know exactly how to get icon style. Especially for extra plugins,
301 // Which definition may vary.
302 iconStyle
= iconStyle
|| CKEDITOR
.skin
.getIconStyle( icon
, ( CKEDITOR
.lang
.dir
== 'rtl' ) );
303 iconStyle
= iconStyle
|| CKEDITOR
.skin
.getIconStyle( command
, ( CKEDITOR
.lang
.dir
== 'rtl' ) );
305 var iconElement
= new CKEDITOR
.dom
.element( 'span' );
307 iconElement
.addClass( 'cke_button_icon' );
308 iconElement
.addClass( 'cke_button__' + name
+ '_icon' );
309 iconElement
.setAttribute( 'style', iconStyle
);
310 iconElement
.setStyle( 'float', 'none' );
316 * Create and return button element
318 * @param {String} text
319 * @param {String} cssClasses
320 * @returns {CKEDITOR.dom.element}
322 FullToolbarEditor
.createButton = function( text
, cssClasses
) {
323 var $button
= new CKEDITOR
.dom
.element( 'button' );
325 $button
.addClass( 'button-a' );
327 $button
.setAttribute( 'type', 'button' );
329 if ( typeof cssClasses
== 'string' ) {
330 cssClasses
= cssClasses
.split( ' ' );
332 var i
= cssClasses
.length
;
334 $button
.addClass( cssClasses
[ i
] );
338 $button
.setHtml( text
);
345 * @param {Object} group
346 * @returns {Array} representing HTML buttons for view
348 FullToolbarEditor
.groupToButtons = function( group
) {
352 var max
= items
? items
.length : 0;
353 for ( var i
= 0; i
< max
; i
+= 1 ) {
354 var item
= items
[ i
];
356 if ( item
instanceof CKEDITOR
.ui
.button
|| CKEDITOR
.ui
.richCombo
&& item
instanceof CKEDITOR
.ui
.richCombo
) {
357 item
.$ = FullToolbarEditor
.createToolbarButton( item
);
358 buttons
.push( item
);